BBC Design System

The BBC's homepage does something almost no other news publisher attempts. The marketing-as-newsroom surface is a content-grid of headline cards, video tiles, and editorial 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" two-tile spread mid-page, a five-thumbnail "Most Watched" video row, a feature block, and a "Most Read" article column anchoring the right rail. Where most news brands ship a chrome-heavy hero (Bloomberg's terminal green, the New York Times' masthead with section navigation rail, the Guardian's blue editorial banner), BBC strips the chrome to two voices: Reith Serif for every headline and body paragraph, Reith Sans for every label and chrome surface. The page floor is pure white, the ink is true black, and the structural rhythm reads as a print broadsheet rather than as a SaaS marketing page.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: nine color tokens — true black, three near-black ink tiers, three near-white surface tones, an inherited browser link blue, and a single mid-grey hairline divider tone; fifteen typography tokens spanning Reith Serif at four headline sizes and Reith Sans at five chrome sizes (including the distinctive 15px weight-800 0.75-tracked uppercase section label that runs above every content block); one captured radius value (50% circular) used on avatar and icon-button containers; eight spacing values clustered around 8px (the dominant gap value with 127 occurrences), 12px (65 occurrences), and 16-24px outer card padding; and sixteen component definitions covering the lead-story hero card, the secondary headline card, the video tile, the live-news badge, the uppercase section label, the squared register CTA, and the typography-only article body.

Feed this file to Claude or Cursor and the agent reproduces the BBC's specific moves: content-grid as the structural device rather than a chrome hero, two-family Reith Serif and Sans typographic split with the tight negative-tracking signature on every headline, uppercase Reith Sans at weight 800 with 0.75px tracking for every section header, squared cards bordered by 1px hairline dividers with no shadow, and the inherited browser link blue as the only chromatic accent. The token references resolve cleanly — `{colors.ink}` for any black, `{colors.canvas}` for any white, `{typography.serif-h2}` for the lead-story headline, `{typography.label-caps}` for the section header — so the AI never has to invent a value. The one move worth borrowing only if you have a Reith-equivalent commissioned typeface to back it: the discipline of running serif headlines and sans chrome in unusually tight tracking. Most newsrooms need a third family to bridge between display and label work; BBC does it with two.