---
id: bbc
name: BBC
country: UK
category: consumer-tech
homepage: "https://www.bbc.co.uk"
primary_color: "#000000"
logo:
  type: favicon
  slug: "https://www.google.com/s2/favicons?domain=bbc.co.uk&sz=128"
verified: "2026-06-22"
omd: "0.1"
tokens:
  source: live-extract
  extracted: "2026-06-22"
  note: "primary = BBC black (#000000) used for Register CTA, nav block, and all headings; BBC News red (#bb1919) is the signature product accent; BBC Reith custom typeface family."
  colors:
    primary: "#000000"
    brand-red: "#bb1919"
    brand-red-dark: "#b80000"
    brand-red-bright: "#eb0000"
    canvas: "#ffffff"
    surface: "#f6f6f6"
    surface-alt: "#f8f8f8"
    heading: "#202224"
    body: "#3a3c3e"
    muted: "#545658"
    hairline: "#e6e8ea"
    on-primary: "#ffffff"
    gel-heading: "#3a3c3e"
  typography:
    family: { sans: "BBC Reith Sans", serif: "BBC Reith Serif", legacy: "Arial, Helvetica, freesans, sans-serif" }
    display-hero: { size: 28, weight: 700, lineHeight: 1.25, use: "Hero article headline, Reith Sans Bold" }
    heading-md: { size: 20, weight: 700, lineHeight: 1.25, use: "Section heading, GEL H1 at 20px/700" }
    nav-link: { size: 14, weight: 500, lineHeight: 1.50, use: "Global nav primary links, BBC Reith Sans" }
    nav-active: { size: 14, weight: 700, lineHeight: 1.50, use: "Active/selected nav section, bold" }
    body: { size: 16, weight: 400, lineHeight: 1.50, use: "Body copy, minimum 15-18px per GEL spec" }
    button: { size: 16, weight: 500, lineHeight: 1.00, use: "CTA button label, BBC Reith Sans" }
    caption: { size: 13, weight: 400, use: "Captions, metadata, GEL Brevier scale" }
  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
  rounded: { sm: 0, md: 0, lg: 0, full: 0 }
  shadow:
    none: "none"
  components:
    button-register: { type: button, bg: "#000000", fg: "#ffffff", radius: "0px", padding: "6px 12px", border: "2px solid #000000", font: "16px / 500 BBC Reith Sans", use: "Register CTA — primary black block button" }
    button-sign-in: { type: button, bg: "transparent", fg: "#000000", radius: "0px", padding: "6px 12px", border: "2px solid transparent", font: "16px / 500 BBC Reith Sans", use: "Sign In — ghost/outline button variant" }
    input-search: { type: input, bg: "rgba(239,239,239,0.3)", fg: "#202224", radius: "0px", padding: "13px 0px 13px 13px", border: "none", font: "BBC Reith Sans", use: "Global search input — flat frosted background, no border" }
    nav-tab: { type: tab, fg: "#000000", font: "14px / 500 BBC Reith Sans", active: "text #000000 font-weight 700", use: "Global nav item; active section bold 700" }
    card-article: { type: card, bg: "#ffffff", fg: "#202224", radius: "0px", use: "Article teaser card — flat white, no shadow, no radius, relies on spacing + typography" }
    card-surface: { type: card, bg: "#f6f6f6", fg: "#202224", radius: "0px", use: "Grey surface content section — flat #f6f6f6 background panel" }
    badge-live: { type: badge, bg: "#bb1919", fg: "#ffffff", radius: "0px", padding: "2px 6px", font: "12px / 700 BBC Reith Sans", use: "LIVE badge on breaking news / video — red block, no radius" }
    toggle-dark-mode: { type: toggle, fg: "#000000", use: "Account/preference toggle in user settings" }
  components_harvested: true
---

# Design System Inspiration of BBC

## 1. Visual Theme & Atmosphere

BBC's digital presence is the world's most visited public-service broadcaster website — a global newsroom that has built its design language around uncompromising clarity, accessibility-first principles, and the quiet authority of institutional black. The canvas is pure white (`#ffffff`) relieved by a cool grey surface (`#f6f6f6`), with a single unwavering chromatic signal: the BBC block black (`#000000`) that anchors the Register button, the navigation bar, and every primary interactive element. This is not the fashionable monochrome of a luxury brand — it is the editorial black of newspaper tradition, carried into digital with missionary discipline.

The defining typographic achievement is **BBC Reith** — a bespoke typeface commissioned in 2015 from Dalton Maag specifically for the BBC, with the stated mission to *"improve the experience of reading for everyone, regardless of ability, context or canvas."* BBC Reith Sans and BBC Reith Serif are designed together as a matched pair, with optical sizing and open letterforms engineered for legibility across the widest possible range of devices and vision abilities. The font loads from BBC's own static CDN (`static.files.bbci.co.uk`). Where Reith is unavailable, the fallback chain (`Arial, Helvetica, freesans, sans-serif`) preserves accessibility without the brand personality.

The GEL (Global Experience Language) design system governs every BBC digital property — from bbc.co.uk to iPlayer, BBC Sounds, Bitesize, and BBC News. GEL enforces zero border-radius across all interactive elements: buttons, inputs, cards, and badges are all strictly rectangular. This is a philosophically anti-rounded system — the sharp corners signal authority, seriousness, and journalistic precision. You will find no pill buttons or soft cards in canonical BBC design. Elevation is similarly absent: the system relies on flat background tints (`#f6f6f6`) and divider hairlines (`#e6e8ea`) rather than shadows.

**Key Characteristics:**
- BBC Reith Sans and BBC Reith Serif — bespoke public-service typefaces with accessibility as the design brief
- Institutional black (`#000000`) as the single primary interactive colour — no blue, no purple, no brand-saturated hue
- Zero border-radius everywhere — buttons, inputs, cards, badges are all sharp-cornered rectangles
- Flat depth system — no shadows; section separation via grey surface (`#f6f6f6`) and hairlines
- BBC News red (`#bb1919`) as the signature editorial accent — reserved for breaking news, live indicators, section branding
- Conservative typography: 14-16px body, minimum 1.5 line-height, `max-width: 65ch` for reading comfort
- WCAG AAA accessibility target — all colour choices validated against contrast requirements
- Product-specific accent colours: iPlayer pink (`#dc2878`), Sport amber (`#ffd230`), Sounds orange (`#fa6400`)

## 2. Color Palette & Roles

### Primary
- **BBC Black** (`#000000`): Primary interactive colour — Register CTA button background, nav blocks, strong labels. Not "off-black" or dark grey — pure typographic black.
- **Pure White** (`#ffffff`): Page background, card surfaces, button text on black.
- **Heading Dark** (`#202224`): Primary heading and body text colour on all surfaces. A very slightly warm near-black.

### Surface & Structure
- **Surface Grey** (`#f6f6f6`): Content section backgrounds — the primary section-separation device in a shadow-free system.
- **Surface Alt** (`#f8f8f8`): Secondary grey tint for alternating content bands.
- **Hairline** (`#e6e8ea`): Thin dividers, card outlines — the system's subtle boundary signal.
- **GEL Heading** (`#3a3c3e`): GEL.bbc.co.uk heading colour — a warmer mid-dark charcoal for editorial headings.
- **Body Slate** (`#3a3c3e`): Secondary body copy — a softer near-black for sustained reading.
- **Muted** (`#545658`): Tertiary text, captions, metadata.

### Product Accents (BBC Services)
- **News Red** (`#bb1919`): BBC News primary — section heading underline, LIVE badge background, breaking news indicator.
- **News Red Dark** (`#b80000`): Darker News red used in SVG product icon.
- **News Red Bright** (`#eb0000`): Brightest News red in icon — the three-rectangle BBC News logo gradient.
- **iPlayer Pink** (`#dc2878`): BBC iPlayer brand colour.
- **Sport Amber** (`#ffd230`): BBC Sport primary yellow.
- **Sounds Orange** (`#fa6400`): BBC Sounds brand accent.

### Interactive
- **Focus Ring**: `2px solid #000000` — the keyboard focus state on all interactive elements, meeting WCAG 2.1 AA.

## 3. Typography Rules

### Font Family
- **Primary Sans**: `"BBC Reith Sans"`, fallback `BBCReithSans-fallback, sans-serif`
- **Primary Serif**: `"BBC Reith Serif"`, fallback `"Times New Roman", Times, serif`
- **GEL legacy**: `ReithSans, Arial, Helvetica, freesans, sans-serif`

BBC Reith is loaded from BBC's static CDN: `https://static.files.bbci.co.uk/fonts/reith/2.610/BBCReithSans_W_Rg.woff2` and `BBCReithSans_W_Bd.woff2`. The CSS variable `--bbc-font: ReithSans, Arial, Helvetica, freesans, sans-serif` is set on the HTML root element.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Notes |
|------|------|------|--------|-------------|-------|
| GEL H1 | BBC Reith Sans | 20px | 700 | 1.25 | Page-level heading on GEL docs |
| Article Headline | BBC Reith Sans | 28px+ | 700 | 1.25 | Live article page headlines |
| Nav Section (active) | BBC Reith Sans | 14px | 700 | 1.50 | Current/active nav section, bold |
| Nav Link (inactive) | BBC Reith Sans | 14px | 500 | 1.50 | Secondary nav items, medium weight |
| Button | BBC Reith Sans | 16px | 500 | 1.00 | CTA button labels |
| Body | BBC Reith Sans | 16px | 400 | 1.50 | Standard body copy (min 15-18px per GEL) |
| Caption | BBC Reith Sans | 13px | 400 | 1.50 | Captions, timestamps, metadata |

### GEL Typography Principles
- **Font size in relative units**: Body size specified as `rem`/`em`, root set to `100%` to respect user browser settings. Never hard pixel-lock body text.
- **Reading measure**: Optimal line length `60-70ch`, maximum `80ch` per WCAG 2.1 1.4.8. Implementation: `max-width: 65ch` on article containers.
- **Minimum line height**: Body copy 1.5, large headings 1.125, Reith Serif 1.375 recommended.
- **GEL type scale names**: Trafalgar (2rem, large heading), Brevier (0.8125rem, supplementary). Scale is relative, not pixel-absolute.
- **Paragraph rhythm**: 1.375rem between paragraphs, 2.75rem above headings, 1.375rem below headings.
- **Acronym spacing**: Letter-spacing increased ~10% on acronyms for legibility.

## 4. Component Stylings

### Buttons

**Register (Primary Black)**
- Background: `#000000`
- Text: `#ffffff`
- Radius: 0px
- Padding: 6px 12px
- Border: 2px solid `#000000`
- Font: 16px BBC Reith Sans weight 500
- Height: 34px
- Use: Primary account-creation CTA — sharp black rectangle, the system's most prominent interactive element

**Sign In (Ghost)**
- Background: transparent
- Text: `#000000`
- Radius: 0px
- Padding: 6px 12px
- Border: 2px solid transparent
- Font: 16px BBC Reith Sans weight 500
- Height: 34px
- Use: Sign In CTA — invisible border, black text, companion to Register on the same row

**Skip to Content (Accessibility)**
- Text: `#000000`
- Radius: 0px
- Padding: 8px 12px
- Border: 2px solid `#000000`
- Font: 16px BBC Reith Sans weight 500
- Height: 38px
- Use: Keyboard/accessibility skip link — only visible on focus, identical spec to Register

### Inputs

**Search Input**
- Background: `rgba(239, 239, 239, 0.3)`
- Text: `#202224`
- Radius: 0px
- Padding: 13px 0px 13px 13px
- Border: none
- Font: BBC Reith Sans
- Height: 44px
- Use: Global search — frosted grey with no visible border, reinforcing the flat aesthetic

### Cards & Containers

**Article Teaser Card**
- Background: `#ffffff`
- Text: `#202224`
- Radius: 0px
- Use: News article card — flat white, no shadow, no border, spatial separation entirely through typography and image crops

**Surface Content Section**
- Background: `#f6f6f6`
- Text: `#202224`
- Radius: 0px
- Use: Full-width grey content band for secondary content sections, topic groupings

**Dark Nav Block**
- Background: `#3a3c3e`
- Text: `#ffffff`
- Radius: 0px
- Use: Dark sub-navigation bands (section nav on GEL, secondary service navigation)

### Badges

**LIVE / Breaking Badge**
- Background: `#bb1919`
- Text: `#ffffff`
- Radius: 0px
- Padding: 2px 6px
- Font: 12px BBC Reith Sans weight 700
- Use: LIVE badge on breaking news video and live event pages — sharp red rectangle, always uppercase

### Tabs

**Global Navigation Tab**
- Text: `#000000`
- Font: 14px BBC Reith Sans weight 500
- Padding: 12px 8px
- Height: 42px
- Active: weight 700, underline indicator (product-section specific — e.g. BBC News red underline)
- Use: Top navigation links — "Home", "News", "Sport", "Business", "Technology", "Culture"

---

**Verified:** 2026-06-22
**Tier 1 sources:** https://www.bbc.co.uk/ (live DOM inspect — nav, Register/Sign-In buttons, search input, bgFreq/fgFreq scan); https://www.bbc.co.uk/news (BBC News surface — same system); https://www.bbc.co.uk/gel (GEL homepage — typography and font-loading confirmed via curl)
**Tier 2 sources:** getdesign.md/bbc — not found (no BBC entry); styles.refero.design/?q=BBC — no BBC result in search
**Conflicts unresolved:** none

## 5. Layout Principles

### Spacing System
- Base unit: 8px
- Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
- Paragraph rhythm: 1.375rem vertical spacing between paragraphs; 2.75rem above section headings

### Grid & Container
- Max content width for editorial: approximately 1280px container
- Article reading column: `max-width: 65ch` — enforced per WCAG 2.1 1.4.8 line length guideline
- Homepage: multi-column editorial grid — lead story + supporting articles in variable-width columns
- GEL documentation site: centered single-column article with sidebar navigation

### Whitespace Philosophy
- **Editorial breathing room**: BBC balances dense news information with generous white space between articles and sections.
- **No-shadow flat depth**: Section separation comes entirely from the `#f6f6f6` tinted surface and `#e6e8ea` hairlines — no box shadows appear at any elevation level.
- **Image-first layout**: Article images dominate card space; typography uses Image + Title + Timestamp as the minimal card pattern.

### Border Radius Scale
- None: 0px across all interactive and structural elements — this is the system's defining geometric commitment.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | All surfaces — page background, cards, nav, inputs |
| Tint (Level 1) | `#f6f6f6` background | Secondary content sections |
| Dark (Level 2) | `#3a3c3e` background | Sub-nav bands, dark content blocks |
| Hairline | `1px solid #e6e8ea` | Article dividers, subtle list separators |

**Shadow Philosophy**: BBC GEL is a zero-shadow system. Live inspection confirmed `box-shadow: none` across every measured element — nav, buttons, cards, inputs. This matches GEL's documented principle that depth should be communicated through background contrast and typographic hierarchy, not elevation effects. The system trusts the editorial grid and image placement to create visual order rather than relying on soft UI conventions.

## 7. Do's and Don'ts

### Do
- Use BBC Reith Sans for all UI text — the custom typeface defines BBC's digital authority
- Use `#000000` pure black for primary interactive elements — buttons, strong labels, borders
- Keep border-radius at 0px on all interactive elements — sharp corners are canonical GEL
- Separate sections with flat grey (`#f6f6f6`) background bands and `#e6e8ea` hairlines
- Set body font size in relative units (`rem`/`em`) to respect user accessibility settings
- Keep article reading columns at `max-width: 65ch` for WCAG-compliant line length
- Use BBC News red (`#bb1919`) exclusively for News section branding and LIVE/breaking indicators
- Ensure 2px solid `#000000` focus rings on all interactive elements for keyboard accessibility

### Don't
- Add border-radius to buttons, inputs, cards or badges — rounded corners break GEL canonical style
- Use coloured buttons other than black for primary CTAs — the system's interactive palette is black-and-white
- Apply box-shadows for elevation — depth is tint-based, never shadow-based
- Mix product accent colours across services (don't put iPlayer pink on a News surface)
- Use pixel-locked font sizes for body text — BBC GEL requires relative units for accessibility
- Use positive letter-spacing on body text — it reduces readability, particularly in Reith's optimised letterforms
- Set line-height below 1.5 on body copy — GEL minimum is 1.5 per WCAG 2.1 1.4.8
- Use generic system fonts in place of BBC Reith — the editorial authority depends on the custom typeface

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <400px | Single column, nav collapses to hamburger, BBC logo only |
| Tablet | 400-600px | 2-column editorial grid, moderate padding |
| Desktop | 600-1280px | Full layout, 3-column news grid, sticky nav |
| Large Desktop | >1280px | Centered content with max-width container |

### Touch Targets
- Register and Sign In buttons: 34px height with 12px padding — meets minimum touch target
- Navigation links: 42px height with 12px 8px padding — comfortable tap area
- Search button/icon: 40px height — consistent with GEL interactive touch target specification

### Collapsing Strategy
- Navigation: full horizontal links → hamburger "Open menu" at narrow viewports
- BBC logo: always present as SVG block mark left-aligned
- Editorial grid: 3-column → 2-column → single-column news cards
- Search: inline search button collapses to icon-only on mobile
- Typography: headline sizes reduce proportionally; body size maintains 15-18px range

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA: BBC Black (`#000000`)
- Background: Pure White (`#ffffff`)
- Secondary surface: Surface Grey (`#f6f6f6`)
- Heading / body text: Heading Dark (`#202224`)
- Secondary body: Body Slate (`#3a3c3e`)
- Muted text: Muted (`#545658`)
- Dividers: Hairline (`#e6e8ea`)
- News accent: BBC News Red (`#bb1919`)

### Example Component Prompts
- "Create a BBC-style nav bar: white background, BBC Reith Sans 14px. Inactive links: weight 500, black text, 12px 8px padding, 42px height. Active/current section: weight 700. CTA row: 'Register' button — black background, white text, 0px radius, 6px 12px padding, 2px solid black border, 16px Reith Sans 500. 'Sign In' same spec but transparent background."
- "Design a BBC article card: white background, 0px radius, no shadow. Title at 20px BBC Reith Sans weight 700, #202224, line-height 1.25. Metadata/timestamp at 13px weight 400, #545658. Divider: 1px solid #e6e8ea below each card."
- "Build a BBC search input: rgba(239,239,239,0.3) background, no border, 0px radius, 13px 0 13px 13px padding, 44px height. Text: #202224, BBC Reith Sans."
- "Create a LIVE badge: #bb1919 background, white text, 0px radius, 2px 6px padding, 12px Reith Sans weight 700, uppercase."
- "Design a section divider card: #f6f6f6 background, full-width, 0px radius, no shadow. Section heading inside: 20px BBC Reith Sans weight 700, #202224."

### Iteration Guide
1. BBC Reith Sans is the primary voice — every UI element uses it; serif is for long editorial reads
2. Black-and-white interactive palette — only `#000000` and `#ffffff` for primary buttons
3. Zero radius everywhere — 0px is not a default to override; it is the brand statement
4. No shadows — tint with `#f6f6f6` and `#e6e8ea` hairlines instead
5. News red (`#bb1919`) for editorial LIVE/breaking indicators only — not general UI
6. Body font in rem/em — never pixel-lock for accessibility compliance
7. Line-height minimum 1.5 on body, 1.25 on headings — editorial reading comfort
8. `max-width: 65ch` on article containers — GEL-mandated reading measure

---

## 10. Voice & Tone

BBC's voice is the world's most trusted journalistic register — **impartial, clear, authoritative, and human**. It is neither the clinical tone of a government body nor the casual voice of social media; it occupies a carefully maintained middle ground of accessible authority. The BBC's editorial guidelines require impartiality by charter — the system's copy never advocates, rarely persuades, and always informs. Buttons say "Register" and "Sign In", not "Join the family" or "Get access now". Nav items are single nouns: "News", "Sport", "Culture", "Health". The interface trusts the user's intelligence.

| Context | Tone |
|---|---|
| Navigation labels | Single nouns. "News", "Sport", "Culture". Never "Explore Culture" or "Discover". |
| Button CTAs | Imperative, minimal. "Register", "Sign In", "Search BBC". No exclamation. |
| Article headlines | Active voice, declarative. Present tense where possible. No click-bait phrasing. |
| Error messages | Calm, specific, non-alarming. Describes what to try next. |
| Accessibility copy | Direct. "Skip to content", "Open menu", "Search BBC". |
| Breaking/LIVE labels | All-caps block signals. "LIVE", "BREAKING". Font and colour do the urgency work; no exclamation. |
| Account UI | Respectful, non-pushy. "Create your BBC account" not "Join millions of people today". |

**Voice samples (verbatim from live bbc.co.uk, 2026-06-22):**
- "British Broadcasting Corporation" — full wordmark in header link *(verified live 2026-06-22)*
- "Register" — primary CTA button *(verified live 2026-06-22)*
- "Sign In" — secondary CTA button *(verified live 2026-06-22)*
- "Open menu" — mobile nav hamburger label *(verified live 2026-06-22)*
- "Search BBC" — search button and input label *(verified live 2026-06-22)*

**Forbidden register**: Hyperbole, superlatives without evidence, partisan framing, marketing exclamation, urgent-urgency patterns ("Limited time!", "Don't miss!"), casual slang on news and account surfaces.

## 11. Brand Narrative

The **British Broadcasting Corporation** was founded on **1 January 1927** under Royal Charter, succeeding the British Broadcasting Company that had operated since 1922. Its mission — to inform, educate, and entertain — was articulated by founding Director-General **John Reith** (1st Baron Reith), whose insistence on quality, impartiality, and public service defined the BBC's character for a century. The BBC Reith typeface commissioned in 2015 carries his name explicitly as an institutional tribute.

The BBC operates without advertising, funded entirely by the UK television licence fee — a model that makes its independence from commercial pressure both a constitutional fact and a design philosophy. Where commercial media optimises for clicks, the BBC optimises for trust. This fundamental difference is legible in every design decision: the Register button is black, not a dopamine-saturated brand colour engineered to compel taps; article cards don't carry click-bait headlines engineered for algorithmic amplification; the search bar doesn't autocomplete toward sponsored content.

**GEL (Global Experience Language)** launched publicly in 2015 as the BBC's unified design framework — the system that ensures bbc.co.uk, iPlayer, BBC Sounds, Bitesize, BBC News, and all digital properties feel coherently BBC without being visually identical. GEL's core promise is that a user who navigates from BBC News to BBC Sounds to CBBC should recognise the same typographic system, the same grid discipline, the same accessibility commitment, even across vastly different content types and audience demographics. Each service maintains its own product accent colour (red for News, pink for iPlayer, amber for Sport), but the structural vocabulary — Reith typeface, zero radius, flat depth, WCAG-first colours — is shared.

## 12. Principles

1. **Inform, educate, entertain — in that order.** The BBC's founding tripartite mission ranks utility first. *UI implication:* interface chrome should never compete with content; navigation and buttons should be as minimal as usable, so articles, programmes, and audio are the visual anchor.
2. **Impartiality is a design constraint.** BBC editorial guidelines require balance by Royal Charter. *UI implication:* interface copy never implies preference, urgency, or emotional manipulation; CTAs are verbs, not value propositions; interactive colours are black-and-white, not persuasion-optimised hues.
3. **Accessibility is non-negotiable.** GEL targets WCAG AAA as its design ceiling. *UI implication:* zero-radius sharp corners aid distinguishability for low-vision users; 1.5 minimum line-height; 65ch reading measure; font size in relative units; 2px focus rings on all targets.
4. **Trust through restraint.** The BBC is one of the world's most trusted media institutions precisely because it doesn't try too hard. *UI implication:* no gamification, no urgency patterns, no animated persuasion; the typeface does the authority work so colour doesn't have to.
5. **One system, many voices.** GEL unifies all services without homogenising them. *UI implication:* structural vocabulary (Reith, zero radius, flat depth) is constant; product accent colours (red/pink/amber/orange) distinguish services without fragmenting the system.

## 13. Personas

*Personas below are fictional archetypes informed by publicly observable BBC audience segments (UK domestic users, international news audience, education users, streaming audience), not individual people.*

**Margaret Ashworth, 62, Birmingham.** Retired teacher who reads BBC News online daily and listens to BBC Radio 4 via BBC Sounds. Uses a tablet with large browser font settings. Relies on the BBC's impartiality — she notices immediately when a news site has a political lean and loses trust. Trusts the BBC because it looks and sounds the same as it did in 1987 with John Humphrys; the Reith font is a subtle cue of that continuity.

**Yusuf Al-Rashid, 34, London.** Migrant from Iraq who learned English partly through BBC English (now BBC Learning English). Uses BBC News as his primary check on world events, values it precisely because it has no commercial advertiser to please. Accesses bbc.co.uk on a mid-range Android; needs the site to load fast and the text to be clear at 14px on a 360px-wide screen.

**Imogen Price, 17, Edinburgh.** A-level student who uses BBC Bitesize for revision and BBC iPlayer for serialised dramas. Switches fluidly between surfaces without noticing the transition — the shared Reith typeface and structural grammar make it feel like one place. Would notice if iPlayer suddenly used rounded buttons or a different font.

**David Chen, 45, Singapore.** International tech professional who reads BBC World News as a trusted external view on geopolitics. Encounters BBC entirely on bbc.com (the international domain), sometimes paywalled by regional restrictions. Values the BBC's reputation for fact-checking above all commercial news outlets; shares BBC articles precisely because of that institutional trust signal.

## 14. States

| State | Treatment |
|---|---|
| **Empty (search, no results)** | White canvas. "No results found" in body font, `#202224`, with a plain suggestion to broaden terms. No illustration. Journalistic directness. |
| **Empty (My BBC, no saved items)** | `#f6f6f6` tinted surface. Simple line in `#545658`: explain what can be saved and how to start. CTA links to relevant section. |
| **Loading (article page)** | Grey skeleton blocks at headline dimensions on `#f6f6f6`. No shimmer animation on default — static skeleton, progressively replaced. Motion only if animation allowed. |
| **Loading (live video/audio)** | Spinner on `#000000` circular background on the video tile. Text: "Loading…" in Reith Sans 13px `#ffffff`. |
| **Error (404 page)** | Clean white with "Sorry, that page can't be found." in article headline font. One link back to bbc.co.uk. No branded illustration — honest, minimal. |
| **Error (form validation)** | Field-level: red text below input in `#bb1919`, 13px Reith Sans, describes what's wrong and how to fix it. No icons. |
| **Error (network)** | "Something went wrong. Please try refreshing the page." in body font on white. |
| **Success (registration)** | Calm confirmation: "You're registered" in heading font. Next steps listed as numbered plain text. No confetti animation. |
| **Skeleton** | `#e6e8ea` placeholder blocks at final content dimensions. Static (respects reduced-motion preference). |
| **Disabled** | Reduced opacity on the element; `#545658` text on white. Interactive elements remain recognisably shaped (0px radius preserved). |
| **Live/Breaking indicator** | `#bb1919` red block badge with uppercase "LIVE" or "BREAKING" — 12px Reith Sans bold on the article card. Pulses only if animation is permitted. |

## 15. Motion & Easing

**Durations**:

| Token | Value | Use |
|---|---|---|
| `motion-instant` | 0ms | State commits, badge reveals, focus rings |
| `motion-fast` | 100ms | Hover, button press, link underline |
| `motion-standard` | 200ms | Menu open/close, panel transitions |
| `motion-slow` | 300ms | Page-level content reveal, image load-in |

**Easings**:

| Token | Curve | Use |
|---|---|---|
| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Standard two-way transitions |
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Menus, drawers arriving |
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, departures |

**Motion rules**: The BBC serves a global audience that includes users with vestibular conditions, photosensitive epilepsy, and cognitive differences. GEL's motion philosophy is conservative by institutional necessity: motion reinforces state change, never decorates. The LIVE badge pulsing red is the most prominent motion in the system — and even that is suppressed under `prefers-reduced-motion: reduce`. No parallax, no entrance choreography, no content fade-in sequences. Under `prefers-reduced-motion: reduce`, all transitions collapse to `motion-instant`; the product remains fully functional and editorially identical.

**Signature motion**: The hamburger-to-close animation on the mobile nav toggle is the system's most visible motion — a 200ms `ease-standard` rotation. Everything else is fade or translate at `motion-standard` or faster. This restraint is the motion equivalent of the zero-radius policy: institutional trust does not need animation to assert itself.

<!--
OmD v0.1 Sources — Philosophy Layer (sections 10–15)

Tier 1 live inspect (2026-06-22) via playwright getComputedStyle:
- https://www.bbc.co.uk/ — nav links (BBC Reith Sans 14px/500), Register button (black bg/white fg/0px radius/6px 12px/500), Sign In (transparent/black/same spec), search input (rgba(239,239,239,0.3) bg/none border/0px radius/13px padding/44px height)
- https://www.bbc.co.uk/news — same nav system confirmed; BBC Reith Sans font confirmed
- https://www.bbc.co.uk/gel (via curl) — CSS vars: --bbc-font: ReithSans,Arial,Helvetica,freesans,sans-serif; font CDN: static.files.bbci.co.uk/fonts/reith/2.610/BBCReithSans_W_Rg.woff2; product icon SVGs confirming #B80000/#EB0000/#D30000 News red, #FFD230 Sport amber, #DC2878 iPlayer pink, #FA6400 Sounds orange
- bgFreq: rgb(255,255,255) ×70, rgb(58,60,62) ×22, rgb(20,22,24) ×18, rgb(0,0,0) ×12, rgb(84,86,88) ×12, rgb(246,246,246) ×8
- fgFreq: rgb(0,0,0) ×2018, rgb(32,34,36) ×399, rgb(255,255,255) ×63, rgb(84,86,88) ×60, rgb(235,0,0) ×15

BBC history and founding: John Reith / Royal Charter 1927 — public record, Wikipedia/BBC About pages.
BBC Reith typeface commission: Dalton Maag, 2015 — publicly documented.
GEL (Global Experience Language): publicly documented BBC design framework.

Voice samples (§10): verbatim from live bbc.co.uk DOM (2026-06-22) — "Register", "Sign In", "Open menu", "Search BBC", "British Broadcasting Corporation".

Personas (§13): fictional archetypes based on publicly observable BBC audience segments. Names are illustrative; they do not refer to real people.

Interpretive claims (e.g., "black-and-white interactive palette as a deliberate rejection of persuasion-optimised colour") are editorial readings connecting BBC's observed design choices to its public-service charter mandate, not directly quoted BBC statements.
-->


---
Source: https://oh-my-design.kr/design-systems/bbc · Raw twin of references/bbc/DESIGN.md
Install 326 verified references for your AI coding agent: npx oh-my-design-cli install-skills