--- version: alpha name: "BBC" website: "https://www.bbc.com" description: >- The UK public broadcaster whose marketing-as-newsroom homepage is a content-grid of headlines, video tiles, and editorial cards on a pure white floor with true-black ink chrome. The system runs two licensed Reith families — Reith Serif for headlines and Reith Sans for chrome — and pairs them in unusually tight specifications: a 28px serif h1 at weight 500 with -0.56px tracking, an 18px serif h2 at weight 500 with -0.36px tracking, and a 12px uppercase Reith Sans label at weight 800 with 0.75px tracking marking every section header. The card grid is uniformly squared (only the 50% circular avatar/icon treatments break the corner discipline), every card border is a 1px hairline divider in pale grey, and the only chromatic accent on the page is the inherited browser link blue retained from the default unvisited-link style. The discipline is closer to a print broadsheet than to a typical SaaS marketing page. seo: title: "BBC Design System for React — ink-on-white, Reith Serif and Sans, 16 components" metaDescription: "The BBC's newsroom-as-homepage captured as a DESIGN.md file. Pure white canvas, true-black ink, Reith Serif headlines, Reith Sans chrome, squared content-grid, and uppercase 0.75-tracked section labels. Tokens for React, Next.js, and AI coding tools." highlights: - "Two-family typographic split — Reith Serif carries every headline and body paragraph, Reith Sans carries every label, button, and uppercase section header at tracked 0.75px" - "Content-grid as system — the marketing surface is a card grid of news, video, and feature blocks, each squared with a 1px hairline border and no shadow" - "Display weight 500 — the 28px serif h1 and 18px serif h2 both sit at medium with negative letter-spacing, not bold; the editorial print-broadsheet treatment" - "Pink-and-black brand chrome below the visible fold — the BBC color signature lives in section-header labels and live-news badges that the broadsheet content-grid quietly carries" - "Inherited browser link blue — the only chromatic accent on the captured chrome is #0000ee, retained from default unvisited-link styling rather than a designed brand color" tags: - "News & Publishing" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.bbc.com" title: "BBC — official site" description: "The BBC's public news homepage — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is the BBC's primary brand color?" answer: "The BBC's homepage chrome is functionally monochrome ink-on-white. True black renders 2709 times on the captured page — 1351 as text, 1347 as border, 11 as background — and a near-black graphite #202224 renders 482 times as the secondary text and divider tone. The page floor is pure white #ffffff with two near-white surface variants (#f8f8f8 and #f6f6f6) for card-secondary backgrounds. The brand-signature BBC pink that appears on programming-promotional surfaces (iPlayer, BBC Sounds, Sport) does not render on the news homepage. The only chromatic accent on the captured chrome is the inherited browser link blue #0000ee retained from default unvisited-link styling — 42 captured occurrences, all as anchor text or 1px underline borders." - id: "typography" title: "What typefaces does the BBC use, and what should I use as substitutes?" answer: "The BBC runs two licensed Reith families. BBC Reith Serif handles every headline and every body paragraph — a contemporary serif designed by Dalton Maag specifically for the BBC in 2017, rendered at 28px / 500 / -0.56px tracking for the lead-story h1, 18px / 500 / -0.36px for secondary headline cards, and 14px / 400 / normal tracking for body running text. BBC Reith Sans handles every chrome surface — uppercase section labels at 15px / 800 / 0.75px tracking and uppercase transform, navigation links at 14px / 700, button labels at 14-16px / 500, and metadata captions at 12px / 400. The closest open-source substitute for Reith Serif is Source Serif Pro or Spectral at the same weights; for Reith Sans use Source Sans Pro or Inter at weight 400/500/700/800. The preserved move is the tight negative-tracking on headlines and the wide-tracked uppercase on chrome labels." - id: "tracking-philosophy" title: "Why does every BBC headline have negative letter-spacing?" answer: "Every BBC headline in Reith Serif carries 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, and even the small body paragraphs at 14px / 400 sit at -0.04px. The discipline tightens the editorial register and pulls the typography closer to print-broadsheet specifications (most newspapers lock display headlines at -2 to -5% tracking). The corollary discipline runs the other direction on chrome labels — Reith Sans at the uppercase 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." - id: "card-grid-philosophy" title: "Why is the BBC homepage structured as a card grid instead of a chrome hero?" answer: "The BBC's marketing-as-newsroom homepage is structurally a content-grid rather than a marketing chrome surface. The lead story occupies a single hero card with a photographic thumbnail and a 28px serif headline; a 4-column row of secondary headline cards sits beneath; mid-page renders a 2-tile feature spread; a 5-thumbnail video row anchors the lower mid-page; and a 'Most Read' article column anchors the right rail. The decision reads as editorial discipline — the homepage is treated as today's front page rather than as a conversion surface. The only marketing-style components are the section-header labels (uppercase Reith Sans at 0.75px tracking) that brand each content cluster as a programming category. Treating the page as a newsroom rather than as a hero stack is the BBC's structural signature." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own news or magazine site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce 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 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. You can reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the two-family typographic split only works if you have a commissioned serif paired with a chrome sans designed to coexist. Off-the-shelf Google Fonts pairings tend to read as mismatched at the tight tracking specifications BBC uses." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#000000" ink-soft: "#202224" ink-muted: "#545658" ink-faint: "#afb1b4" canvas: "#ffffff" surface-1: "#141618" surface-2: "#e6e8ea" hairline: "#d2d4d6" link: "#0000ee" typography: serif-h1: fontFamily: "\"BBC Reith Serif\", BBCReithSerif-fallback, serif" fontSize: 28px fontWeight: 500 lineHeight: 32px letterSpacing: "-0.56px" serif-h2: fontFamily: "\"BBC Reith Serif\", BBCReithSerif-fallback, serif" fontSize: 18px fontWeight: 500 lineHeight: 22px letterSpacing: "-0.36px" serif-h3: fontFamily: "\"BBC Reith Serif\", BBCReithSerif-fallback, serif" fontSize: 14px fontWeight: 500 lineHeight: 18px letterSpacing: "-0.28px" serif-body: fontFamily: "\"BBC Reith Serif\", BBCReithSerif-fallback, serif" fontSize: 14px fontWeight: 400 lineHeight: 18px letterSpacing: 0 sans-label-caps: fontFamily: "\"BBC Reith Sans\", BBCReithSans-fallback, sans-serif" fontSize: 15px fontWeight: 800 lineHeight: 20px letterSpacing: "0.75px" sans-nav-link: fontFamily: "\"BBC Reith Sans\", BBCReithSans-fallback, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 18px letterSpacing: 0 sans-button: fontFamily: "\"BBC Reith Sans\", BBCReithSans-fallback, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 18px letterSpacing: 0 sans-tab: fontFamily: "\"BBC Reith Sans\", BBCReithSans-fallback, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px letterSpacing: 0 sans-meta: fontFamily: "\"BBC Reith Sans\", BBCReithSans-fallback, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 sans-meta-tight: fontFamily: "\"BBC Reith Sans\", BBCReithSans-fallback, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 14px letterSpacing: "-0.12px" sans-meta-bold: fontFamily: "\"BBC Reith Sans\", BBCReithSans-fallback, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 14px letterSpacing: 0 sans-caps-tiny: fontFamily: "\"BBC Reith Sans\", helvetica, arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 12px letterSpacing: 0 rounded: none: "0px" full: "9999px" spacing: xs: "2px" sm: "4px" base: "6px" md: "8px" lg: "12px" xl: "16px" 2xl: "24px" 3xl: "48px" components: hero-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.serif-h1}" rounded: "{rounded.none}" padding: "0px 0px 16px" borderColor: "{colors.hairline}" hero-heading: backgroundColor: transparent textColor: "{colors.ink-soft}" typography: "{typography.serif-h1}" padding: "0px" headline-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.serif-h2}" rounded: "{rounded.none}" padding: "12px 0px 0px" borderColor: "{colors.hairline}" headline-h2: backgroundColor: transparent textColor: "{colors.ink-soft}" typography: "{typography.serif-h2}" padding: "0px" headline-h3: backgroundColor: transparent textColor: "{colors.ink-soft}" typography: "{typography.serif-h3}" padding: "0px" body-paragraph: backgroundColor: transparent textColor: "{colors.ink-soft}" typography: "{typography.serif-body}" body-paragraph-muted: backgroundColor: transparent textColor: "{colors.ink-muted}" typography: "{typography.sans-meta-tight}" section-label: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.sans-label-caps}" padding: "0px" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.sans-button}" rounded: "{rounded.none}" padding: "6px 12px" height: "34px" borderColor: "{colors.ink}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.sans-button}" rounded: "{rounded.none}" padding: "6px 12px" height: "34px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.sans-nav-link}" rounded: "{rounded.none}" padding: "12px 8px" height: "42px" borderColor: "{colors.ink}" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.sans-nav-link}" padding: "12px 8px" video-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.serif-h3}" rounded: "{rounded.none}" padding: "8px 0px 0px" borderColor: "{colors.hairline}" live-badge: backgroundColor: "{colors.surface-1}" textColor: "{colors.canvas}" typography: "{typography.sans-caps-tiny}" rounded: "{rounded.none}" padding: "2px 4px" height: "16px" avatar: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "0" height: "48px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.sans-button}" rounded: "{rounded.none}" padding: "8px 12px" height: "40px" borderColor: "{colors.ink}" --- ## 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 | Token | Size | Weight | Line Height | Tracking | Use | |---|---|---|---|---|---| | `{typography.serif-h1}` | 28px | 500 | 32px | -0.56px | Lead-story headline | | `{typography.serif-h2}` | 18px | 500 | 22px | -0.36px | Secondary headline card (78 occurrences — the dominant headline tier) | | `{typography.serif-h3}` | 14px | 500 | 18px | -0.28px | Video-tile and Most Read headline tier | | `{typography.serif-body}` | 14px | 400 | 18px | 0 | Body running text (47 occurrences) | | `{typography.sans-label-caps}` | 15px | 800 | 20px | 0.75px | Uppercase section-header label (22 occurrences) | | `{typography.sans-nav-link}` | 14px | 700 | 18px | 0 | Top-nav primary links | | `{typography.sans-button}` | 16px | 500 | 18px | 0 | Register CTA and primary buttons | | `{typography.sans-tab}` | 14px | 500 | 18px | 0 | Tab strip and breadcrumb | | `{typography.sans-meta}` | 12px | 400 | 16px | 0 | Default metadata caption (31 occurrences) | | `{typography.sans-meta-tight}` | 12px | 400 | 14px | -0.12px | Tight metadata caption (54 occurrences) | | `{typography.sans-meta-bold}` | 12px | 500 | 14px | 0 | Bolded metadata caption | | `{typography.sans-caps-tiny}` | 10px | 400 | 12px | 0 | Tiny uppercase label inside live-news badge | ### 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.