BBC Design System

Overview

The BBC's homepage inverts the news-marketing convention of chrome-heavy hero treatment. Newsroom as system. The above-fold surface on bbc.com is a content-grid of headline cards, video tiles, and editorial feature blocks — a 28px Reith Serif h1 anchoring the lead story at the top-left, a 4-column grid of secondary headline cards beneath, a "Wars in Pictures" 2-tile spread mid-page, a 5-thumbnail "Most Watched" video row, and a "Most Read" article column anchoring the right rail. Where Bloomberg leads with a terminal-green hero, the New York Times anchors a masthead with section-navigation rail, and the Guardian opens with a blue editorial banner, BBC strips the chrome to two typographic voices — Reith Serif for every headline and body, Reith Sans for every label and chrome — and lets the grid carry the structural work.

The chromatic discipline reinforces the move. The captured page renders true black {colors.ink} 2709 times — 1351 as text, 1347 as border, 11 as background — and a near-black graphite {colors.ink-soft} 482 times as the secondary text and divider tone. The page floor is pure white {colors.canvas} (and two near-white tones for card-secondary surfaces). The BBC's brand-signature pink that runs across programming-promotional surfaces (iPlayer, Sounds, Sport) does not render on the news homepage chrome. The only chromatic accent on the captured page is the inherited browser link blue {colors.link} (#0000ee) — 42 captured occurrences, all as anchor text or 1px underline borders — retained from default unvisited-link styling rather than treated as a designed brand accent.

Typography splits across two licensed Reith families with tight specifications. BBC Reith Serif handles every headline and body paragraph with deliberate negative tracking — the lead-story h1 at 28px / 500 has -0.56px, the secondary h2 at 18px / 500 has -0.36px, the h3 at 14px / 500 has -0.28px, even the body paragraphs at 14px / 400 sit at -0.04px. BBC Reith Sans handles every chrome surface with the opposite tracking discipline — the section-label tier sits at 15px / 800 with positive 0.75px tracking and uppercase transform, the wide-tracked tier that brands each content cluster as a programming category. The two opposing tracking moves are the signature typographic split.

Key Characteristics:

• Pure white canvas ({colors.canvas} — #ffffff), pure black ink ({colors.ink} — #000000), with {colors.ink-soft} (#202224) as the secondary text and divider tone — functionally monochrome chrome with one inherited link blue.
• Two-family Reith Serif and Sans typographic split — serif carries every headline and body, sans carries every label and chrome surface.
• Negative-tracked serif headlines (-0.56 / -0.36 / -0.28px) paired with positive-tracked sans labels (0.75px) — the print-broadsheet typographic signature.
• Content-grid as structural device — every above-fold component is a card on the same grid, with squared corners and 1px hairline dividers.
• Squared everywhere except 50% circles — the only radius captured on the page is the 50% treatment used on author avatars and small icon-button containers; cards, buttons, and inputs all sit at zero corner radius.
• Section-label tier at 15px Reith Sans weight 800 uppercase 0.75-tracked — the brand-coded chrome tier that runs above every editorial content cluster.
• 8px base spacing unit — the dominant gap value with 127 captured occurrences, with 12px (65 occurrences) and 16-24px outer card padding.
• Squared register and primary-action buttons in ink-black with white text — the BBC's CTA discipline runs the opposite of the rounded-pill convention.

Colors

Structural

• Ink ({colors.ink} — #000000): frequency 2709. Used as text (1351), border (1347), background (11). The dominant chrome color across the page — anchors every secondary nav link, the squared register button, every section header, and every 1px card-divider hairline. True black, not a near-black graphite.
• Ink Soft ({colors.ink-soft} — #202224): frequency 482. Used as text (250), border (232). The secondary headline-and-body text tone — every Reith Serif headline renders in ink-soft rather than pure black, and the long-form body paragraphs follow. A 25% lightness step warmer than pure ink, sufficient to soften long-form reading without losing editorial weight.
• Ink Muted ({colors.ink-muted} — #545658): frequency 136. Used as text (68), border (68). The metadata text tone — captions beneath video thumbnails, byline labels, timestamp strips. Wired across two merged near-graphite values.
• Ink Faint ({colors.ink-faint} — #afb1b4): frequency 16. Used as text (8), border (8). The least-emphasis tone — used for tertiary metadata and "view all" affordances.
• Canvas ({colors.canvas} — #ffffff): frequency 107 — used as background (42), text (33), border (32). The page floor and the card-fill default. Merged across three values (#ffffff, #f8f8f8, #f6f6f6) for slight surface variation.
• Surface-1 ({colors.surface-1} — #141618): frequency 17, all as background. The dark surface used inside live-news badges and breaking-news strip backgrounds.
• Surface-2 ({colors.surface-2} — #e6e8ea): frequency 61. Used as text (30), border (30), background (1). The light-grey surface tone used inside avatar backgrounds and secondary chrome tiles.
• Hairline ({colors.hairline} — #d2d4d6): frequency 18, all as border. The dedicated card-divider hairline tone — softer than the full-ink border used on more prominent dividers.

Accent (inherited)

• Link ({colors.link} — #0000ee): frequency 42 — 21 as text, 21 as border. The only chromatic accent on the page, retained from the default browser unvisited-link blue rather than re-specified as a brand color. The discipline reads as restraint — BBC does not override the default link styling, treating browser-default link semantics as a feature.

Typography

Font Families

The system runs two licensed Reith families designed by Dalton Maag specifically for the BBC in 2017. BBC Reith Serif handles every headline and body paragraph — a contemporary serif with low-contrast strokes, modest x-height, and slightly geometric serifs designed to read at small sizes. Fallback stack walks BBCReithSerif-fallback, serif. BBC Reith Sans handles every chrome surface — labels, buttons, navigation, captions. Fallback stack walks BBCReithSans-fallback, sans-serif (with a secondary fallback through helvetica, arial on the tiny-caps tier).

The pairing is the distinguishing move. A purpose-designed serif plus a paired sans of the same family origin is unusual for newsroom systems — most news brands run an off-the-shelf serif (Cheltenham at the NYT, Garamond at the Times of London) paired with a generic sans. Reith Serif and Reith Sans were designed together specifically to coexist at the small sizes the BBC's content-grid uses, which is why the negative-tracking signature on headlines and the positive-tracking signature on chrome labels both read as coherent rather than as mismatched.

Hierarchy

Principles

Every Reith Serif headline carries deliberate negative tracking — the discipline tightens the editorial register and pulls the typography closer to print-broadsheet specifications. The corollary discipline runs the other direction on chrome labels — Reith Sans at the section-header tier sits at positive 0.75px tracking to open the letterforms for legibility at small sizes. The two opposing tracking moves are the signature typographic split: tight serif headlines plus open sans chrome.

Display weight tops out at 500 on the serif tier and at 800 on the sans label tier. The 28px serif h1 at weight 500 is the loudest typographic moment in the system — bumping to 700 would tip the editorial dek into newspaper-shout register and lose the contemporary-broadsheet treatment.

Note on Font Substitutes

BBC Reith Serif and BBC Reith Sans are licensed proprietary families. The closest open-source substitute for Reith Serif is Source Serif Pro or Spectral at the same weights — both carry the low-contrast contemporary-serif geometry the BBC's tight tracking depends on. For Reith Sans use Source Sans Pro or Inter at weight 400/500/700/800. The preserved move across substitutions is the tight negative-tracking on headlines (-0.56px on h1, -0.36px on h2, -0.28px on h3) and the wide-tracked uppercase 0.75px on the section-label tier.

Layout

Spacing System

• Base unit: 8px — the dominant gap value with 127 captured occurrences. The 12px (65 occurrences) and 6px (36 occurrences) tokens carry the secondary card-internal gap work.
• Tokens: {spacing.xs} 2px · {spacing.sm} 4px · {spacing.base} 6px · {spacing.md} 8px · {spacing.lg} 12px · {spacing.xl} 16px · {spacing.2xl} 24px · {spacing.3xl} 48px.
• Card internal padding: {spacing.xl} (16px) on the standard headline card, {spacing.md} (8px) on the video tile, with a 12px x 8px (or normal 16px) pattern on the lead-story hero card.
• Section padding (vertical): 48px between major content clusters, dropping to 24px between cards within a cluster.
• Card bottom-padding: 16px on most headline cards via the 0px 0px 16px 53-occurrence pattern — a single-direction padding signature that drives the card-stacking rhythm.

Grid & Container

• Max content width: the captured page renders at ~1280px maximum body width, with the content grid splitting into a 12-column lattice.
• Hero stack: lead-story hero card spans ~50% width on the left, with a 4-cell secondary headline column running the right rail.
• Mid-page: 2-tile feature spread ("War in Pictures" and "Most Watched"), each spanning ~50% width, with the video row breaking into a 5-thumbnail strip beneath.
• Most Read column: a vertical numbered list of 10 headlines anchored to the right rail of the lower mid-page.
• No max-width containers around individual cards — every card sits flush against its column edge with 1px hairline divider as the boundary.

Rhythm

The page rhythm is uniform-density rather than alternating between bands. Every content cluster — the lead-story stack, the secondary headline grid, the video tile row, the Most Read column — sits at roughly the same internal density, with the uppercase section-label tier ({typography.sans-label-caps}) marking each cluster's start. There is no breathing-room band, no full-bleed photograph, no editorial pull-quote moment — the page reads as a packed front page rather than as a scrolling marketing surface.

Elevation

The system has essentially no shadow tier. The captured page renders zero shadow occurrences in the structural CSS — depth comes entirely from 1px hairline borders ({colors.hairline} and {colors.ink} at 1px) doing the elevation work that shadows would carry in a typical product UI.

• Flat (no shadow): every card, every tile, every nav band, every footer — 100% of structural surfaces.
• Hairline dividers: {colors.hairline} (#d2d4d6) at 18 captured occurrences for the soft dividers; {colors.ink} (#000000) at 1347 border occurrences for the more prominent card boundaries. The two border tones split labor — the soft hairline marks intra-cluster divisions, the ink-black border marks inter-cluster boundaries.
• Photographic depth: the lead-story thumbnail and the video-tile thumbnails carry their own photographic lighting; the chrome around them has no drawn shadow.

Shapes

The radius scale is binary: every surface squared at zero, except 50% circles.

• {rounded.none} 0px — the structural default. Every card, every button (including the primary register CTA), every input, every nav band sits at zero. This is the move — most current news systems have moved to 4 or 8 pixel card rounding, and the BBC's persistent squared discipline reads as print-broadsheet rather than as web-product chrome.
• {rounded.full} 9999px (rendered as 50%) — the single captured radius on the page, used on author avatars (18 occurrences) and small icon-button containers. The 50% treatment renders as a full circle on square elements.

There is no rounded-but-not-circular tier. No 4px corner, no 8px card radius, no 12px button rounding. The squared-everywhere discipline is the system's structural signature.

Components

hero-card — The lead-story hero. White {colors.canvas} surface, ink-soft text, no border-radius, hairline-bottom border, 0x0x16 padding. The lead headline at 28px / 500 / -0.56px sits inside a 4-column grid cell, with a photographic thumbnail flush above and a metadata caption beneath.

hero-heading — Ink-soft text on white, Reith Serif 28px / 500 / -0.56px tracking. The loudest typographic moment on the page.

headline-card — The secondary headline tier. White surface, ink-soft text, no border-radius, hairline-bottom border, 12x0x0 padding. The dominant card type on the page — the 4-column secondary grid uses this tier exclusively.

headline-h2 — Ink-soft text, Reith Serif 18px / 500 / -0.36px tracking. The single most-used typographic token in the system (78 captured occurrences).

headline-h3 — Ink-soft text, Reith Serif 14px / 500 / -0.28px tracking. Used inside video tiles and Most Read column headlines.

body-paragraph — Ink-soft text at 14px / 400. The workhorse paragraph style used inside article-detail flows and the lead-story dek.

body-paragraph-muted — Ink-muted text at 12px / 400 / -0.12px. The default metadata caption used beneath headlines and video thumbnails.

section-label — Ink text, Reith Sans 15px / 800 / 0.75px / uppercase. The brand-coded chrome tier that marks every section header on the page ("LATEST NEWS", "MUST WATCH", "FEATURES & ANALYSIS", "MOST WATCHED", "MOST READ"). The single typographic move that does the work of brand-color marketing chrome.

button-primary — Squared ink-black {colors.ink} fill, white text, Reith Sans 16px / 500, 6x12 padding, 34px height. The "Register" CTA in the top-right is the canonical instance. No border-radius — the BBC's primary-action discipline runs the opposite of the rounded-pill convention.

button-secondary — White surface, ink text, 1px ink border, same dimensions as primary. Used for "Sign in" and other secondary nav actions.

top-nav — White surface, 42px height, 1px ink bottom border. The BBC logo cell sits flush left, primary nav links (Home, News, Sport, Business, Innovation, Culture) center, with the register and sign-in CTAs flush right.

nav-link — Ink text, Reith Sans 14px / 700, 12x8 padding. Bold weight (not 500) for the navigation tier — the discipline reads as broadsheet-masthead rather than as web-nav register.

video-tile — White surface, ink-soft headline text in {typography.serif-h3}, no border-radius, 8x0x0 padding, hairline-bottom border. The 5-tile "Most Watched" row uses this component exclusively, with a 16:9 photographic thumbnail flush above the headline cell.

live-badge — Dark {colors.surface-1} fill, white text, Reith Sans 10px / 400 / uppercase, 2x4 padding, 16px height. The breaking-news strip and the live-now indicator on video tiles use this component. The single dark-surface chrome moment on the page.

avatar — Surface-2 grey fill, 50% circular container at 48px square. Used for author bylines and contributor portraits inside article-detail flows.

text-input — White surface, ink-soft text, 1px ink border, no border-radius, 8x12 padding, 40px height. Used inside the search bar and the registration form.

Do's and Don'ts

Do keep every Reith Serif headline at the specified negative tracking (-0.56 on h1, -0.36 on h2, -0.28 on h3). The discipline is what pulls the typography toward print-broadsheet specification; running the headlines at neutral 0 tracking reads as off-the-shelf web type rather than as commissioned editorial chrome.

Do reserve the section-label tier ({typography.sans-label-caps} — 15px Reith Sans / 800 / 0.75px / uppercase) for content-cluster headers. Multiplying the tracked-uppercase treatment across additional chrome elements weakens its role as the only brand-coded chrome moment on the page.

Do keep cards squared. The 0px radius discipline is what makes the page read as a print front page rather than as a SaaS marketing surface. Rounding cards even to 4px softens the print-broadsheet register.

Do use the inherited browser link blue ({colors.link} — #0000ee) as the only chromatic accent. Replacing it with a designed brand blue or with a pink retained from BBC's programming-promotional surfaces would override the default-link-semantics restraint that defines the news chrome.

Don't introduce the BBC programming pink as a chrome accent. The pink lives on iPlayer, Sounds, Sport, and other programming-promotional surfaces — not on the news homepage. Importing it here creates a chromatic register that the squared content-grid is not designed to carry.

Don't round buttons or inputs to 4-8 pixels. The squared register CTA at zero radius is the system's primary-action signature — adding rounding tips it into generic web-product chrome and loses the print-broadsheet voice.

Don't use Reith Sans for headlines or Reith Serif for chrome labels. The two-family split is the entire typographic system — swapping the labor across families dissolves the negative-vs-positive tracking signature that ties the families together.

Don't add a shadow tier to elevate cards. The page uses 1px hairline borders ({colors.hairline} for soft and {colors.ink} for prominent) to mark every card edge; introducing a drop shadow would create depth where the discipline explicitly avoids it and tip the page into SaaS card-product register.

Known Gaps

• Hover and focus states: the captured marketing page exposes the resting state of nav links, register CTAs, and content cards; the full state matrix (focus rings, active press, disabled tints) for video tiles and Most Read entries is not represented here.
• Form input error states: {component.text-input} carries the resting state; error styling for the search bar and registration form is not exposed on the captured surface.
• Dark mode: the captured marketing surface is light-only. iPlayer and BBC Sounds carry dark-mode chrome but those product surfaces are not represented in this file.
• BBC programming surfaces: this DESIGN.md captures the news homepage only. iPlayer (bbc.co.uk/iplayer), Sounds (bbc.co.uk/sounds), Sport (bbc.co.uk/sport), and Bitesize (bbc.co.uk/bitesize) each carry richer programming-promotional chrome — including the BBC brand pink — that is not represented here.
• Article-detail chrome: the spec captures the homepage card-grid; the article-reading view (with pull-quotes, embedded video players, related-story rails, and contributor bylines) carries additional typography and component tokens not exposed on the homepage.
• Live news strip: the breaking-news banner and live-event tickers carry their own dark-surface chrome (the {colors.surface-1} near-black) but the live-strip components are not captured in this file beyond the {component.live-badge}.
• Motion: the page renders without motion on first load; the auto-rotating "Most Watched" carousel and the lazy-loaded image fade-ins are not exposed in the static spec.
• Brand-color tokens beyond inherited link blue: the BBC's broader brand palette (Reith pink, news red, sport green, weather blue) is not declared on the captured homepage chrome and would need to be added as separate tokens if used in extension.