BCG

Overview

BCG's site reads like a well-set annual report that learned to breathe. Everything on the page is light: the headlines are a serif at weight 300, the body copy is a sans at weight 300, and both are set with absolutely no letter-spacing. Hierarchy is built from scale and colour alone — headings in {colors.midnight-green}, copy in {colors.ink} — so the page stays calm until a single {colors.signal-lime} pill button appears and tells you where to go.

The chrome is almost absent. The header is not a bar but two floating pills in {colors.canvas-frosted} with the system's one shadow, hovering over whatever content scrolls beneath them. Separation inside the page comes from surface changes, not lines: a {colors.mint-band} band for a product promo, a {colors.parchment} band for related content and the footer, a {colors.midnight-green} tile for the campaign hero. There are no decorative gradients, no card shadows, no borders heavier than the 1px rule under a text link — except on the secondary button, whose 3px ink border is deliberately loud.

Across surfaces the language flexes mostly through radius and density. The homepage is a stack of rounded modules on a 56px rhythm; the article page narrows to a 708px measure with a frosted "Key Takeaways" box and a sticky share rail; capability pages add a mint-chipped sub-navigation inside the header pill, 68px light-weight statistics, and outlined tab cards. The subscription page shows the system's form vocabulary: 24px square-ish checkboxes and outlined topic chips, nothing else.

Key Characteristics:

• Two faces, one weight: serif {typography.display-h1} / {typography.section-h2} and sans {typography.heading-h3} downward — all at weight 300.
• Letter-spacing is 0px at every size; the type never tightens or tracks out.
• One accent: {colors.signal-lime} lives only on primary buttons and the subscribe CTA, never on text or backgrounds.
• Headings are {colors.midnight-green}, never black; body is {colors.ink}, never pure black.
• Radius grammar by role: {rounded.action} 15px for anything you press, {rounded.container} 20px for chrome and boxes, {rounded.tile} 25px for hero tiles, {rounded.media} 30px for images and avatars.
• A single shadow ({component.header-pill}) exists in the whole system, and only on floating chrome.
• Sections alternate surfaces ({colors.canvas} → {colors.mint-band} → {colors.parchment} → {colors.midnight-green}) rather than drawing dividers.
• Every CTA is uppercase bold {typography.button} with an arrow that reveals on interaction; the pressed state inverts to {colors.midnight-green}.
• Motion signature is a springy overshoot bezier cubic-bezier(.64,2,.67,1.53) at 250ms.

Colors

Source pages analyzed: homepage, publication article (Three Dimensions of Leadership for the AI Era), capability page (Artificial Intelligence), subscription/newsletter page, global navigation overlay.

Brand & Accent

• Signal Lime ({colors.signal-lime} — #96F878): The only saturated colour on the page. Primary button background, the subscribe button inside the midnight band, the "Visit Page" CTA in nav promo cards. Never used as text, never as a background band.
• Midnight Green ({colors.midnight-green} — #0C2B15): The brand's dark. Every h1/h2 heading colour, the hero and campaign tile background, the subscription band, and the pressed/focus state of every primary button. Doubles as the focus ring colour.
• Forest Focus ({colors.forest-focus} — #197A56): Declared system focus colour (--focus-color, 1px). Not seen as a surface or text colour on the analyzed pages.
• Mint Band ({colors.mint-band} — #E3FDDB): The light tint of the brand. Full-width promo band on the homepage ("BCG Answer"), the selected chip inside the capability sub-navigation, and a 1px border in a handful of header elements.
• Growth Green ({colors.growth-green} — #21BF61), Mint Mid ({colors.mint-mid} — #A8F0B8), Mint Tint ({colors.mint-tint} — #D8F4EF): Declared in the token set as the green scale and reused as success tokens; not observed as rendered surfaces on the sampled pages.

Surface

• Canvas ({colors.canvas} — #ffffff): The page ground, nav overlay, secondary button and text input background.
• Canvas Frosted ({colors.canvas-frosted} — rgba(255,255,255,0.7)): The signature chrome surface. Header pills, card content overlays, the article's "Key Takeaways" box and checkbox fill. Reads white on white and translucent over photography.
• Parchment ({colors.parchment} — #F1EEEA): Warm off-white for the footer, "Related Content" band, the client-success band, the search dropdown and the 2px border of outlined tab cards.
• Parchment Deep ({colors.parchment-deep} — #DCD5CE): Disabled primary button background. The stone scale ({colors.stone-300} … {colors.stone-700}) is declared alongside it but did not render on the analyzed pages.
• Gray 200 ({colors.gray-200} — #F2F2F2): Cool neutral for carousel controls, the pressed secondary button and the selected item in the global navigation list.
• Gray 300 / 400 ({colors.gray-300} — #D4D4D4, {colors.gray-400} — #B1B1B1): Declared header border colour and mid-gray; neither is prominent on screen.

Text

• Ink ({colors.ink} — #212427): All body copy, card titles, buttons, nav links, footer links. The site's "black" is a blue-tinged charcoal, never #000.
• Ink Charcoal ({colors.ink-charcoal} — #232326): Card dates — one shade off Ink, visually identical.
• Ink Soft ({colors.ink-soft} — #323232): Article bylines, checkbox borders, secondary button focus fill.
• Ink Muted ({colors.ink-muted} — #696969): The header "Log in" label.
• Ink Disabled ({colors.ink-disabled} — #898888): Disabled button text and border.
• On Dark ({colors.on-dark} — #ffffff): Headlines and eyebrows inside midnight tiles and bands.

Hairlines & Borders

• Hairline Rule ({colors.hairline-rule} — #CCCCCC): The 1px <hr> inside article bodies.
• Ink ({colors.ink}): The 3px border of the secondary button and the 1px border of topic chips. Borders are either hairline or deliberately heavy; there is no 2px ink border.
• Parchment ({colors.parchment}): The 2px border of outlined tab cards — a border that is barely darker than the page.

Brand Gradient

No decorative gradients. The only linear-gradient in the system is a 1px hard-stop gradient used as the underline of text links ({component.button-tertiary}), drawn in currentColor with a gap so the rule can slide on interaction. Atmosphere comes from photography and the green sphere motif, not from CSS.

Typography

Font Family

• Display: henderson-bcg-serif — a proprietary transitional serif commissioned by BCG. Used only at h1/h2 ({typography.display-h1}, {typography.section-h2}) and for the uppercase "Key Takeaways" label, always at weight 300 or 700.
• Body & UI: henderson-bcg-sans — the matching proprietary humanist sans, loaded at 200/300/400/700. Used for everything from h3 down, including buttons, labels and the 68px statistics.
• Two further families are declared (henderson-bcg-headline, henderson-bcg-mod with 800/900 weights) but are not loaded on any sampled page. There is no monospace.
• The family switch is by role, not by size: a 40px h3 is sans, a 48px h2 is serif. Serif is reserved for the two top heading levels.

Hierarchy

Values at the 1024px breakpoint (the site re-steps every size at 390 / 768 / 1024 / 1440 / 1920):

Responsive steps measured from the stylesheet (390 / 768 / 1024 / 1440 / 1920): h1 48 / 60 / 68 / 86 / 96 · h2 40 / 44 / 48 / 52 / 60 · h3 32 / 38 / 40 / 44 / 52 · body-lg 16 / 17 / 18 / 20 / 24 · body-md 14 / 15 / 15 / 16 / 18 · body-sm 12 / 13 / 13 / 14 / 16 · label-md 12 / 13 / 13 / 14 / 16 · button 14 / 14 / 16 / 16 / 18.

Principles

• Weight 300 carries everything. Headlines, lead copy and article body are all light. 400 is the "regular" for UI (nav, bylines, descriptions), 700 exists only for uppercase labels and buttons. There is no 500, no 600 and no bold headline.
• Tracking is zero everywhere. No negative tracking on display sizes and no positive tracking on uppercase labels — the uppercase labels get their air from size (11–13px) and 100% line-height instead.
• Line-height collapses as size grows: 1.4 at body-sm, 1.3 at body-lg, 1.2 at lead, 1.0 at every heading. Headings are set solid.
• Serif is a rank, not a style. Only h1 and h2 are serif; the moment a heading drops to h3 it becomes sans. Do not set a card title in serif.
• Uppercase is the eyebrow system. Eyebrow, date, chip, button and tertiary link are all uppercase at 11–16px; nothing above 16px is ever uppercase.
• Six breakpoints, six sizes. Every text role has an explicit px value per breakpoint; nothing uses clamp() or viewport units.

Note on Font Substitutes

Henderson BCG Sans and Serif are proprietary and not licensable. Fallback stacks as declared by BCG: serif → 'Palatino Linotype', Palatino, Garamond, Georgia, serif; sans → 'Helvetica Neue', Helvetica, Arial, sans-serif.

Closest free equivalents:

• Serif → Newsreader (Google Fonts), weight 300. Newsreader's light weight has the same low-contrast transitional feel and a comparable x-height. Set it 2% larger than the token size (68px → 69–70px) and keep tracking at 0; its optical-size axis should be pinned to the display cut (font-variation-settings: "opsz" 72) at 40px and above.
• Sans → Hanken Grotesk (Google Fonts), weights 300/400/700. Hanken's light weight is slightly narrower than Henderson Sans; add letter-spacing: 0.005em at body sizes and leave headings at 0. Line-heights can stay as tokenised.
• If only system fonts are allowed, use Georgia 300-equivalent (Georgia has no light cut — use font-weight: 400 and reduce size by 4%) and Helvetica Neue Light.

Layout

Spacing System

Base unit is 4px, exposed as a lettered scale that re-steps per breakpoint. At 1024px: {spacing.a} 4 · {spacing.b} 8 · {spacing.c} 12 · {spacing.d} 16 · {spacing.e} 20 · {spacing.f} 24 · {spacing.g} 32 · {spacing.h} 40 · {spacing.i} 48 · {spacing.j} 56 · {spacing.k} 64 · {spacing.l} 72. Below 768 the scale compresses (a=2, c=8, g=24, j=32); at 1920 it expands (a=8, g=40, j=72).

• Section padding: {spacing.section} 56px top and bottom on every module, with no margins between modules — adjacent modules touch and surfaces decide where one ends.
• Tile padding: 32px inside dark tiles and frosted boxes; 24px inside outlined tab cards.
• Button padding: 13px × 24px, growing to 55px on the right when the arrow icon is present.
• Heading-to-body gap: 24px below an h2, 32px below an article h2/h3, 13px below the uppercase "Key Takeaways" label.
• Page margin: {spacing.page-margin-sm} 16px → {spacing.page-margin-md} 40px at 768 → {spacing.page-margin-lg} 80px at 1440.

Grid & Container

• Outer container is calc(100% - 40px) at 1024 (the page margin), capped at 1920px.
• A 12-column grid with {spacing.grid-gap} 16px gutters underlies list modules; a 40px gutter variant appears for two-up promos. Column gap token is 8px for tight carousels.
• Article measure: 708px at 1024 with a 192px sticky side rail to the right; article headings and rich text share the same 708px column.
• Lists use 4-up (224 × 298px portrait images), 3-up and 2-up patterns; the nav overlay is a 340px primary column, a 340px secondary column and a 306px promo card.

Whitespace Philosophy

Whitespace is the divider. Modules stack at a flat 56px rhythm with no rules between them, so a change of surface — white to mint to parchment — is what signals a new section. Inside a module the hierarchy is a vertical ladder: uppercase eyebrow, serif headline set solid, a 24px gap, light body, then the lime button sitting alone on its own line. Nothing is crowded, and nothing is centered except the homepage hero.

Elevation & Depth

Shadow philosophy: one shadow, used only on things that float above the scroll. Content never casts a shadow.

Decorative Depth

No backdrop blur is applied despite the translucent chrome — the frosted pills rely on 70% white alone. Depth inside the page comes from full-bleed photography with rounded corners ({rounded.media}) and from the recurring glowing-green sphere artwork; CSS contributes nothing but the surface alternation.

Shapes

Border Radius Scale

The grammar is strictly by role and increases with size: press (15) < contain (20) < feature (25) < media (30). Small square-ish radii (4/5/10) belong to controls and chips only. Note the header search pill uses an asymmetric 20px 0 0 20px to dock against its neighbour.

Photography Geometry

• Article-list imagery is 3:4 portrait (224 × 298 at 1024) with square corners, sitting above eyebrow / title / date.
• Hero and in-article media are landscape, full column width, with {rounded.media} 30px corners.
• Author portraits are 114px squares at {rounded.media}, not circles.
• Photography is corporate-editorial: people in meetings, data walls, and the abstract green glowing sphere that functions as the brand's visual mark for AI content. Images lazy-load via <picture> with responsive sources.

Components

Top Navigation

header-pill — The header is position: fixed, 64px tall, transparent, with two floating pills: left (burger + logo, 143px) and right (search + "Log in", 152px). Each pill is {colors.canvas-frosted} at {rounded.container} with the system shadow. Header height token steps 56 → 64 → 72px at 768 / 1440; horizontal inset steps 16 → 32 → 40 → 80px. On capability pages a third pill carries the section name in {typography.label-md} followed by sub-nav chips; the selected chip is {component.header-subnav-chip-selected} on {colors.mint-band}.

• The burger opens a full-height {colors.canvas} overlay: a 340px primary column of {typography.nav-link} items (56px row height), a 340px secondary column (42px rows) and a 306px promo card with a landscape image, a {typography.heading-h4} title, {typography.body-sm} description and {component.button-primary-with-arrow}.
• Active state: the selected nav item sits on a {colors.gray-200} rounded pill.

Buttons

button-primary — The signature action. Background {colors.signal-lime}, text {colors.ink} in {typography.button}, rounded {rounded.action}, padding 13px × 24px, a 3px transparent border reserved for the focus state, 48px tall. With an arrow icon the right padding grows to 55px ({component.button-primary-with-arrow}) and the padding transitions on interaction.

• Active state: {component.button-primary-active} — background and text invert to {colors.midnight-green} / {colors.on-dark}.
• Focus state: {component.button-primary-focus} — same inversion plus a 2px {colors.midnight-green} ring and a white 3px border inside it.
• Disabled: {component.button-primary-disabled} — {colors.parchment-deep} fill, {colors.ink-disabled} text.

button-secondary — {colors.canvas} fill, 3px solid {colors.ink} border, same type, radius and padding as primary. The heavy border is what makes it read as a button without colour.

• Active state: {component.button-secondary-active} — fill becomes {colors.gray-200}.
• Focus state: {component.button-secondary-focus} — fill {colors.ink-soft}, text white, 2px {colors.ink-soft} ring.

button-tertiary — An uppercase bold text link in {typography.text-link}, colour {colors.ink}, with a 1px rule drawn as a hard-stop gradient in currentColor and 2px bottom padding. Used for "Explore more of our …" links at the top-right of list modules. Article body links use the same gradient underline at {typography.body-lg} and {colors.ink} — links are not coloured, only underlined.

carousel-control — 36px square, {colors.gray-200} fill, {rounded.sm}, ink chevron.

Cards & Containers

card-article — No container at all: a 3:4 image with square corners, then {typography.label-sm} eyebrow ("Article"), {typography.card-title} title in {colors.ink}, and {typography.label-sm-regular} date in {colors.ink-charcoal}, stacked with 16px gaps. Four across at 1024 inside a draggable carousel.

tile-dark — The campaign hero: {colors.midnight-green} at {rounded.tile} with 32px padding, a serif {typography.section-h2} headline in {colors.on-dark} on the left, {typography.body-md} copy on the right and {component.button-primary-with-arrow} bottom-right.

tile-frosted — {colors.canvas-frosted} at {rounded.container} with 32px padding. Carries the "Key Takeaways" box in articles (title in serif {typography.label-md}, bullets in {typography.body-sm} with 13px spacing) and the text overlay on image cards.

tile-outline — {colors.canvas} with a 2px {colors.parchment} border at {rounded.tile} and 24px padding, 225px wide: the icon + {typography.body-md} cards in the "tabs with expandable cards" module.

tag-chip — Transparent, 1px {colors.ink} border, {rounded.chip}, {typography.label-sm-regular}, padding 12px × 24px (topic selectors). The article-header topic tag is the same shape at 14px with 8px × 12px padding.

Accordion — Native <details>; the summary is {typography.body-lg-regular} at 16px with 16px × 30px padding, 108px tall rows, no border.

Statistics — {typography.stat-number} 68px light figure over a {typography.card-title} 22px light description, four across, no container.

Inputs & Forms

input-text — {colors.canvas} fill, no border, {rounded.action}, 10px padding, 48px tall (52px in the article side-rail), placeholder in {typography.body-md}. Always paired with a {component.button-primary} on the right, both inside a {colors.midnight-green} or {colors.parchment} band.

checkbox — 24px, {rounded.xs}, 1px {colors.ink-soft} border, {colors.canvas-frosted} fill; label in {typography.body-md}. Newsletter cards are checkbox + image + {typography.label-sm} frequency eyebrow + {typography.lead} title + {typography.body-sm} description.

Error, validation and checked-state styling were not observable on the analyzed pages (the contact form is a login-gated modal) — see Known Gaps.

Footer

footer — {colors.parchment} band with 56px vertical padding: a serif-less layout of a {typography.heading-h3}-sized tagline column, two columns of {typography.card-title} 22px light links, and a "How can we assist you?" column ending in {component.button-primary-with-arrow}. Below, the logo lockup, social icons at {rounded.full}, legal links in {typography.label-sm} uppercase bold, and {typography.caption} fine print. The "EN | JA" language switch sits right-aligned above the logo row.

Do's and Don'ts

Do

• Set every heading and the article body at weight 300; let scale, not weight, make hierarchy.
• Keep letter-spacing: 0 on every token, including uppercase {typography.label-md} and {typography.button}.
• Reserve {colors.signal-lime} for {component.button-primary} and nothing else on the page.
• Colour headings {colors.midnight-green} and body {colors.ink}; never use #000.
• Choose radius by role: {rounded.action} to press, {rounded.container} to hold, {rounded.tile} to feature, {rounded.media} for images.
• Separate sections by switching surface ({colors.canvas} / {colors.mint-band} / {colors.parchment} / {colors.midnight-green}) on a flat 56px padding rhythm.
• Put the shadow only on floating chrome ({component.header-pill}); keep content flat.
• Make every CTA uppercase bold with a trailing arrow and invert it to {colors.midnight-green} when pressed.

Don't

• Don't set a card title, h3 or anything below h2 in the serif — serif is {typography.display-h1} and {typography.section-h2} only.
• Don't use 500/600 weights or a bold headline; the system has 300, 400 and 700 and 700 is for 11–16px uppercase only.
• Don't tint text green: links stay {colors.ink} with a 1px underline, never {colors.growth-green} or {colors.midnight-green}.
• Don't use {colors.signal-lime} as a band, a chip fill, an icon colour or a highlight — {colors.mint-band} is the tint for surfaces.
• Don't add card shadows, dividers or 1px borders between modules; whitespace and surface changes do that work.
• Don't round article-list images; they are square-cornered 3:4, and only media wrappers and avatars take {rounded.media}.
• Don't add gradients, blur or glow in CSS — atmosphere is photography's job.
• Don't tighten tracking on the 68–96px display sizes; the serif is designed to sit at 0.

Responsive Behavior

Breakpoints

Article hero titles additionally key off viewport height (56px at ≥1024 × ≥750, 76px at ≥1440 × ≥850, 96px at ≥1920 × ≥1000).

Touch Targets

Buttons are 48px tall at every breakpoint; header pills 64px with 40–46px icon buttons inside; checkboxes 24px with a full-width label as the hit area; carousel controls 36px (the one sub-44px target, placed below the carousel where it is not primary).

Collapsing Strategy

• Header: the two pills keep their shape at all widths; the capability sub-nav pill collapses its chips under 1024 and the inset shrinks from 80 → 40 → 32 → 16px.
• Dark tile: two-column (headline left, copy right) collapses to a single stacked column with the button last.
• Article lists: 4-up → carousel with the same cell width, dragging horizontally rather than wrapping.
• Article page: the 192px sticky side rail (save / download / share / subscribe) drops below the title on narrow screens.
• Stats: four across → two across.
• Footer: four columns → stacked, link lists first.

Image Behavior

<picture> with multiple <source> widths; list images stay 3:4 at every width, hero/media wrappers stay landscape and keep {rounded.media}. Images are lazy-loaded and the homepage hero is a three-panel strip (photo / sphere artwork / photo) that becomes a single carousel on small screens.

Iteration Guide

1. Work one component at a time: build {component.button-primary} and {component.header-pill} first, because the lime button and the frosted pill are the two things that make a page read as BCG.
2. Every variant is its own YAML entry (button-primary-active, button-primary-focus, button-secondary-active); never fold states into the base entry.
3. Reference tokens as {colors.x}, {typography.y}, {rounded.z}, {spacing.w} — never inline a hex or px once a token exists.
4. Document default and active/pressed/focus states only; hover is intentionally absent from this file.
5. Weight 300 is not a stylistic option — if a heading or article paragraph is rendered at 400, the result is not this system.
6. Keep the serif / sans boundary at h2: h1 and h2 serif, h3 and below sans, 68px statistics sans.
7. The lime accent gets one job. If a design needs a second accent, use {colors.midnight-green} fills or {colors.mint-band} bands, not a second bright colour.

Known Gaps

• Form validation and error states were not observable: the contact form is a JavaScript modal behind login and the subscription page requires an account to submit. {colors.alert-red} and {colors.warning-yellow} are declared tokens whose rendered use was not seen.
• Checked / selected checkbox styling and radio buttons: only unchecked checkboxes rendered.
• Dark mode: none; the site ships a single light theme and the midnight band is a surface, not a theme.
• Hover states exist in the stylesheet (lime deepens to #71DC68, tertiary underline slides) and are deliberately excluded.
• Authenticated surfaces (saved articles, subscription management, login dropdown contents) were not analyzed.
• The henderson-bcg-headline and henderson-bcg-mod families (800/900 weights) are declared but never loaded on sampled pages; their intended role (likely campaign microsites) is unknown.
• The stone scale ({colors.stone-300} … {colors.stone-700}) and {colors.forest-focus} are tokenised but did not render on any sampled page.
• Charts, tables and exhibit styling inside long reports were not sampled; the article analyzed used only text, images and a key-takeaways box.
• Measured at a 1024px viewport. Wide-screen (1440 / 1920) values are taken from the stylesheet's media queries, not from rendered computed styles.