# BBC

> `bbc@1.0.0`

The BBC is the world's largest public-service broadcaster — a global, multi-service identity governed by GEL (Global Experience Language), the BBC's design system across web, broadcast, and app surfaces. The visual identity is built on the BBC blocks logo, the "Postbox" signature red, near-black ink on bright white, and the proprietary Reith Sans / Reith Serif typefaces that carry the editorial voice. Accessibility is a stated first-class requirement of GEL.


**Tags:** `bbc`, `news`, `broadcasting`, `brand`, `red`, `gel`, `sans`, `public-service`, `light-first`

## Atoms

### Palette

**BBC** · `bbc@1.0.0` · Apache-2.0 (simorgh source); brand identity remains property of the BBC

> The BBC palette, captured from the open-source Simorgh design system that powers BBC News across services. Anchored by "Postbox" (#B80000) — the signature BBC red — the system pairs near-black on white for body content with a published gray scale, a service-neutral blue, news/sport accent colors, and the LIVE teal used for live-coverage states. Globally accessible, service-driven, with the BBC GEL (Global Experience Language) governing layout, type, and accessibility floor. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `postbox` | Postbox | `#B80000` |
| `postbox-30` | Postbox 30 | `#EAB3B3` |
| `black` | Black | `#000000` |
| `ebon` | Ebon | `#222222` |
| `midnight-black` | Midnight Black | `#121212` |
| `white` | White | `#FFFFFF` |
| `ghost` | Ghost | `#FDFDFD` |
| `chalk` | Chalk | `#ECEAE7` |
| `oat-light` | Oat Light | `#F5F3F1` |
| `lunar` | Lunar | `#F2F2F2` |
| `lunar-light` | Lunar Light | `#F8F8F8` |
| `grey-3` | Grey 3 | `#E6E8EA` |
| `grey-4` | Grey 4 | `#B0B2B4` |
| `grey-5` | Grey 5 | `#8A8C8E` |
| `grey-6` | Grey 6 | `#545658` |
| `grey-7` | Grey 7 | `#3A3C3E` |
| `service-neutral` | Service Neutral | `#0071F1` |
| `service-neutral-dark` | Service Neutral Dark | `#0051AD` |
| `live-core` | Live Core | `#009E9E` |
| `live-light` | Live Light | `#00CCC7` |
| `sport-yellow` | Sport Yellow | `#FFD230` |
| `error-core` | Error Core | `#E51854` |
| `success-core` | Success Core | `#148A00` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `white` | `#FFFFFF` |
| `surface` | `chalk` | `#ECEAE7` |
| `surface-elevated` | `white` | `#FFFFFF` |
| `text-primary` | `ebon` | `#222222` |
| `text-secondary` | `grey-6` | `#545658` |
| `text-tertiary` | `grey-5` | `#8A8C8E` |
| `primary` | `postbox` | `#B80000` |
| `primary-hover` | `service-neutral-dark` | `#0051AD` |
| `accent` | `postbox` | `#B80000` |
| `accent-hover` | `service-neutral` | `#0071F1` |
| `warning` | `sport-yellow` | `#FFD230` |
| `error` | `error-core` | `#E51854` |
| `success` | `success-core` | `#148A00` |
| `border` | `grey-3` | `#E6E8EA` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `midnight-black` | `#121212` |
| `surface` | `grey-7` | `#3A3C3E` |
| `surface-elevated` | `grey-6` | `#545658` |
| `text-primary` | `white` | `#FFFFFF` |
| `text-secondary` | `grey-3` | `#E6E8EA` |
| `text-tertiary` | `grey-4` | `#B0B2B4` |
| `primary` | `postbox` | `#B80000` |
| `primary-hover` | `postbox-30` | `#EAB3B3` |
| `accent` | `postbox` | `#B80000` |
| `accent-hover` | `live-light` | `#00CCC7` |
| `warning` | `sport-yellow` | `#FFD230` |
| `error` | `error-core` | `#E51854` |
| `success` | `success-core` | `#148A00` |
| `border` | `grey-6` | `#545658` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `postbox` | `#B80000` |
| `on-identity` | `white` | `#FFFFFF` |
| `primary` | `postbox` | `#B80000` |
| `primary-hover` | `service-neutral-dark` | `#0051AD` |
| `accent` | `postbox` | `#B80000` |
| `accent-hover` | `live-core` | `#009E9E` |
| `mark` | `postbox` | `#B80000` |
| `success` | `success-core` | `#148A00` |
| `warning` | `sport-yellow` | `#FFD230` |
| `error` | `error-core` | `#E51854` |
| `text-primary-light` | `ebon` | `#222222` |
| `text-primary-dark` | `white` | `#FFFFFF` |
| `background-light` | `white` | `#FFFFFF` |
| `background-dark` | `midnight-black` | `#121212` |
| `surface-light` | `chalk` | `#ECEAE7` |
| `surface-dark` | `grey-7` | `#3A3C3E` |
| `text-secondary-light` | `grey-6` | `#545658` |
| `text-tertiary-light` | `grey-5` | `#8A8C8E` |
| `border-light` | `grey-3` | `#E6E8EA` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `7`
- **standard:** `WCAG-AAA`

> Ebon (#222222) on white gives ~16:1, well past AAA. BBC GEL treats accessibility as a first-class design constraint; the BBC's public-service charter and global, multi-device reach justify the enhanced 7:1 contrast target. 

#### `colorChoice` → `roles.colors.mark`

- **allowed:** postbox, black, white
- **forbidden:** service-neutral, sport-yellow, live-core, error-core

> The BBC blocks mark is rendered in postbox red on white, white on postbox red, or as black-on-white in mono contexts only. Recoloring the blocks in service-neutral blue or LIVE teal would violate the BBC's brand standards around the blocks identity. 

#### `contextRestriction` → `roles.colors.accent`

- **forbiddenContexts:** default-link, body-emphasis, error-state
- **allowedContexts:** bbc-blocks, editorial-emphasis, breaking-news, masthead

> Postbox red is the BBC blocks identity. It is reserved for the blocks, the masthead, and editorial emphasis. Using it as the default link color would conflict with service-neutral blue (the in-copy link color in BBC online surfaces). 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, skewed

> The BBC blocks logo is one of the most heavily standardized marks in global media. The BBC's brand guidelines forbid recoloring, rotation, gradients, shadows, or skewing of the blocks under any circumstance. 

#### `contextRestriction` → `roles.colors.live-core`

- **forbiddenContexts:** default-link, cta, editorial-emphasis
- **allowedContexts:** live-coverage, status-indicator, now-on-air

> The LIVE teal (#009E9E) is reserved in BBC services for live-coverage status — the "LIVE" tag on broadcast and streaming. It must not be used as a general link or CTA color; doing so would conflate live-status semantics with navigation affordances. 

### ⚠️ warning (2)

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AAA`
- **criterion:** `1.4.6`

> BBC GEL formally requires WCAG 2.1 AA across products, with AAA targeted where reasonably achievable for body text. The BBC's public-service obligation to universal access makes the AAA enhanced contrast target the right default for this brand atom. 

#### `enumMembership` → `typography.body.fontWeight`

- **allowed:** 400, 500, 700

> Reith Sans is published in Regular (400), Medium (500), and Bold (700) on BBC surfaces. Heavier display weights are not in the licensed cut; the Inter substitute should mirror the same weight discipline to preserve the typographic voice. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** white, black, chalk, midnight-black
- **doesNotPairWith:** service-neutral, sport-yellow, error-core

> Postbox red reads cleanest on white, black, or the warm chalk neutral. Placing it adjacent to service-neutral blue or error-core pink introduces a chromatic conflict between identity-red and semantic-state colors that BBC GEL treats as a hierarchy violation. 

## Provenance

- **Source:** <https://www.bbc.co.uk/gel>
- **License:** `Proprietary — BBC brand and Reith type are property of the BBC`
- **Attribution:** The British Broadcasting Corporation (BBC) — visual identity informed by BBC GEL (Global Experience Language) at bbc.co.uk/gel and palette values captured from the published Simorgh open-source source code at github.com/bbc/simorgh. The BBC, BBC blocks logo, Reith Sans, and Reith Serif are property of the BBC. 
- **Imported:** `2026-05-19`
- **Notes:** The BBC GEL site at bbc.co.uk/gel documents the design system publicly but the page was not reachable from this fetch context. Palette values were captured from the BBC's own open-source Simorgh implementation. The proprietary Reith type family (Reith Sans, Reith Serif) is not publicly distributed — open-source substitute (Inter@1) is referenced here. BBC GEL is well-documented in public design literature. 

---

*Generated by the brand-atoms converter. Source: `bbc@1.0.0` from the encyclopedia.*