Logo System Tokens
CSS tokens for the logo system. On the web, logos must always be <img> tags referencing the generated SVG files in dist/logos/ (never inline SVG, PNG, or CSS-rendered text). These tokens define the reference values used in the SVG logo specifications.
Logo CSS Tokens
| Token | Value | Purpose |
|---|---|---|
| --logo-breen-tracking | -0.01em | Letter-spacing on 'Breen' wordmark |
| --logo-subtitle-tracking | 0.08em | Letter-spacing on sub-brand name |
| --logo-stacked-gap | -0.05rem | Gap between wordmark and subtitle (stacked) |
| --logo-horiz-gap | 0.6rem | Gap between wordmark and subtitle (horizontal) |
Stacked Lockup
The primary mark used in hero sections and large displays. The "Breen" wordmark sits above the "/ SERVICE" subtitle, with a vertical rule (VR) accent line on the left in #60A5FA.
| Property | Value | Notes |
|---|---|---|
| SVG viewBox | 0 0 295 82 | Fixed canvas for all variants |
| VR line | x="1.25" y="4"–"74" stroke-width="3" | Signature element in #60A5FA |
| "Breen" wordmark | Mercury Display Bold, x="13" y="52" font-size="60" | Letter-spacing: -0.6 |
| "/SERVICE" subtitle | Gotham HTF XLight, x="13" y="74" font-size="13" | textLength="153.9" lengthAdjust="spacing" |
Stacked — Parent Brand Colourways
Stacked — Sub-Brand Architecture
Each sub-brand uses the same lockup structure with its own accent colour for the subtitle. The "Breen" wordmark is always white on navy backgrounds.
The /Slash Command System: The forward slash is the brand's signature element — it connects "Breen" to each service line like a command prompt. The slash belongs to the service name as one unit ("/Consulting"), not as a separator. In SVG, the VR line (vertical rule) on the left uses stroke="#60A5FA" with stroke-width="3" for the primary mark.
Horizontal Lockup
The secondary mark for inline contexts where vertical space is constrained. "Breen" and "/ SERVICE" sit side-by-side with the VR line on the left.
| Property | Value | Notes |
|---|---|---|
| SVG viewBox | 0 0 305 80 | Wider aspect ratio for inline use |
| "Breen" wordmark | Mercury Display Bold, larger font-size | Dominates the horizontal axis |
| Gap: VR → Breen | Proportional spacing | Maintains visual rhythm |
Horizontal — Parent Brand Colourways
Horizontal — Sub-Brand Variants
Each sub-brand also has a horizontal lockup for inline contexts where vertical space is constrained.
Icon & Favicon System
The /B monogram icon uses a two-grade optical size system — a standard grade for display sizes (≥ 48px) and a heavier favicon grade for small sizes (≤ 32px). Both grades feature a VR accent, forward slash, and Mercury Display Bold "B" glyph inside a rounded navy container.
Two-Grade Specification
| Property | Standard Grade (≥ 48px) | Favicon Grade (≤ 32px) |
|---|---|---|
| VR multiplier | 6× | 12× |
| VR stroke (viewbox units) | 77.3 | 154.7 |
| Background | #0B1D32 (--bc-navy) | #0B1D32 (--bc-navy) |
| VR + slash accent | #60A5FA (--bc-blue-light) | #60A5FA (--bc-blue-light) |
| "B" glyph | #FFFFFF (--bc-white) | #FFFFFF (--bc-white) |
Border Radius by Size
| Rendered Size | rx (viewbox) | Grade |
|---|---|---|
| 180px | 101.38 | Standard |
| 120px | 101.38 | Standard |
| 80px | 63 | Standard |
| 48px | 50 | Standard |
| 32px | 38 | Favicon |
| 24px | 30 | Favicon |
| 16px | 25 | Favicon |
Icon Sizes — Visual Reference
180pxStandard
120pxStandard
80pxStandard
48pxStandard
32pxFavicon
24pxFavicon
16pxFavicon
Sub-Brand Icon Variants (80px)
Consulting
Digital
AI
Strategy
Marketing
Creative
Engineering
File naming: Icon SVGs follow the pattern icon-{size}.svg for the parent brand and icon-{size}-{subbrand}.svg for sub-brands. PNGs are rasterised at 4× target size (e.g. icon-80px.png = 320×320 pixels). Sub-brand icons replace the default #60A5FA accent with the sub-brand colour on both the VR line and the forward slash.
Compact Wordmark
The compact wordmark is a horizontal inline lockup: VR bar + "Breen" + optional "/ Service". Used in contexts where the full stacked or horizontal lockup is too large — document headers, email signatures, watermarks.
| Element | Value | Notes |
|---|---|---|
| VR bar | 3px wide, 0.88em tall | translateY(0.14em) extends below baseline |
| "Breen" typeface | Mercury Display Bold | letter-spacing: -0.02em |
| "/ Service" typeface | Gotham HTF XLight | 0.65em of wordmark size |
| Gap: VR → Breen | 0.3em | |
| Gap: Breen → slash | 0.15em | |
| Reference font-size | 42px | Scales proportionally |
Compact — Parent Brand Colourways
Compact — Sub-Brand Variants
Collapsed Form
Ultra-compact variant: VR bar + single "B" glyph + "/ SERVICE" (uppercase). Used in very tight spaces — tab bars, avatar badges, mobile headers, and anywhere the compact wordmark is still too wide.
| Element | Value | Notes |
|---|---|---|
| VR bar | 3px wide, 0.88em tall | Same proportion as compact |
| "B" typeface | Mercury Display Bold | Single glyph |
| "/ SERVICE" typeface | Gotham HTF XLight | 0.5em, letter-spacing: 0.08em, uppercase |
| Gap: VR → B | 0.3em | |
| Gap: B → slash | 0.12em | |
| Reference font-size | 26px | Proportionally smaller than compact |
Collapsed — Sub-Brand Variants
Logo Processing Standard
All logo assets are generated from a single source of truth: generate_svg_logos.py. This script produces all SVG files, and PNGs are derived from those SVGs at 4× resolution via cairosvg. This guarantees pixel-perfect SVG/PNG parity across all families and colourways.
| Context | Format | Source |
|---|---|---|
| Web (HTML/CSS) | <img> referencing .svg | dist/logos/*.svg |
| Print (Word/PPTX/XLSX/PDF) | Embedded PNG at 4× | dist/logos/*.png |
| Source of truth | generate_svg_logos.py | All specs, all families |
File naming convention: SVGs follow the pattern {family}-{variant}.svg (e.g. stacked-white.svg, compact-digital.svg). PNGs use the same name with .png extension. Icon PNGs use icon-{size}px.png (e.g. icon-80px.png = 320×320 pixels at 4× rasterisation).