How the Breen Consulting brand system adapts across web, print, and responsive contexts — ensuring consistency while respecting each medium's strengths.
Key differences between the print (Word/PPTX) and web (HTML/CSS) implementations of the Breen Consulting brand system. Both media share the same core palette and font families but differ in weight usage, scale, and technical implementation.
| Element | Web | |
|---|---|---|
| Hero / Display H1 | Mercury Display Bold, 4rem, weight 700, -webkit-text-stroke 0.4px | Mercury Display Roman, heading style, weight 400 |
| General Headings | Mercury Display Roman, weight 400, rem units | Mercury Display Roman, weight 400, pt units |
| Body Text | Gotham HTF Book, 1rem (16px), line-height 1.7 | Gotham HTF Book, 10.5pt, single/1.15 line spacing |
| Weight Range | XLight 200 through Bold 700 (6 weights) | Roman 400 + Book 400 (2 weights primary) |
| Letter-spacing | Explicit tracking per element (-0.02em to 0.15em) | Application defaults (Word/PowerPoint) |
The colour palette is shared identically across media, with web extending the core colours into a more granular system for digital contexts.
| Element | Web | |
|---|---|---|
| Core Colours | 5 core (same as print) | 5 core: Navy, White, Blue Light, Blue, Gray |
| Extended Palette | 3 navy tiers, blue-pale, 8 greys, 3 semantic | Not extended — uses core palette only |
| Sub-Brand Accents | 7 colours (identical) | 7 colours (identical) |
| Token System | CSS custom properties (--bc-*, --sb-*) | Named constants in Python generators |
Web uses proportional units and responsive breakpoints; print uses fixed page margins and static layouts.
| Element | Web | |
|---|---|---|
| Units | rem, px, vh, vw | EMU, pt, inches |
| Spacing System | 8-step rem scale (--space-xs to --space-4xl) | Fixed margins per document type |
| Grid | CSS Grid with responsive breakpoint at 768px | Fixed column widths per template |
| Max Width | 1200px container | A4 / Letter page margins |
Web uses @font-face with local() PostScript name references; print relies on installed system fonts.
| Element | Web | |
|---|---|---|
| Method | @font-face with local() PostScript names | Font name strings in python-docx / python-pptx |
| Fallbacks | Georgia (serif), Helvetica Neue (sans) | None — fonts must be installed |
| CDN / External | None — all fonts installed locally | N/A |
| macOS Workaround | Named family 'Mercury Display Bold' for Hero H1 | Not needed — Word resolves by font name |
The brand system uses two logo formats depending on the output medium. SVGs are the source of truth; PNGs are derived from them at 4× scale.
| Context | Format | Reason |
|---|---|---|
| Web (HTML/CSS) | SVG via <img> tag | Infinite scale, smallest file size |
| Word (.docx) | PNG at 4× | python-docx doesn't support SVG |
| PowerPoint (.pptx) | PNG at 4× | python-pptx doesn't support SVG |
| Excel (.xlsx) | PNG at 4× | openpyxl doesn't support SVG |
| PNG at 4× | Rasterised for compatibility | |
| Favicon | SVG + PNG fallback | SVG for modern browsers, PNG for legacy |
generate_svg_logos.py (single source of truth). PNGs are always derived from SVGs via cairosvg at 4× target size — never rendered independently. This guarantees pixel-perfect parity between formats.
A single breakpoint at 768px handles the mobile layout. The design system targets desktop-first with a clean mobile fallback.
| Element | Desktop | Mobile (≤768px) |
|---|---|---|
| Hero H1 | 4rem (64px) | 2.5rem (40px) |
| H2 | 2.5rem (40px) | 2rem (32px) |
| Grid layouts | Multi-column | Single column (1fr) |
| Colour swatches | 5 columns | 3 columns |
These palettes are shared identically across web and print contexts — ensuring charts and status indicators look the same in HTML dashboards, PPTX decks, and XLSX reports.
| Token | Hex | Role |
|---|---|---|
| --bc-rag-green | #22C55E | On Track |
| --bc-rag-amber | #F59E0B | At Risk |
| --bc-rag-red | #EF4444 | Off Track |
A six-colour palette optimized for multi-series data visualization. Use in order for consistent chart rendering across all media.
| Token | Hex | Series |
|---|---|---|
| --bc-chart-1 | #2563EB | Blue |
| --bc-chart-2 | #60A5FA | Blue Light |
| --bc-chart-3 | #0B1D32 | Navy |
| --bc-chart-4 | #94A3B8 | Gray Mid |
| --bc-chart-5 | #64748B | Gray |
| --bc-chart-6 | #152A45 | Navy Mid |
The brand system generates templates for Word, PowerPoint, and Excel via Python scripts. All templates are output to brand-kit/dist/.
| Template | Generator | Key Specs |
|---|---|---|
| Word (.docx) | generate_word_template.js | Mercury Display Roman headings (H1–H4), Gotham HTF Book body 10.5pt, A4 margins, overline + subtitle styles |
| PowerPoint (.pptx) | generate_pptx_template.js | 16:9 widescreen, navy/white slide masters, PNG logos |
| Excel (.xlsx) | generate_excel_template.py | Gotham HTF headers, brand colour fills, RAG conditional formatting |
| Brand Guide (HTML) | Hand-authored | Full design system, lives in brand-kit/reference/ |