W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
BBC
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/bbc/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/bbc/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
BBC
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by BBC
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
BBC
A clear hierarchy in BBC's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ postbox #B80000 accent-hover
→ live-core #009E9E background-dark
→ midnight-black #121212 background-light
→ white #FFFFFF border-light
→ grey-3 #E6E8EA error
→ error-core #E51854 identity
→ postbox #B80000 mark
→ postbox #B80000 on-identity
→ white #FFFFFF primary
→ postbox #B80000 primary-hover
→ service-neutral-dark #0051AD success
→ success-core #148A00 surface-dark
→ grey-7 #3A3C3E surface-light
→ chalk #ECEAE7 text-primary-dark
→ white #FFFFFF text-primary-light
→ ebon #222222 text-secondary-light
→ grey-6 #545658 text-tertiary-light
→ grey-5 #8A8C8E warning
→ sport-yellow #FFD230 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from bbc)
Light mode (14 roles)
accent
→ postbox accent-hover
→ service-neutral background
→ white border
→ grey-3 error
→ error-core primary
→ postbox primary-hover
→ service-neutral-dark success
→ success-core surface
→ chalk surface-elevated
→ white text-primary
→ ebon text-secondary
→ grey-6 text-tertiary
→ grey-5 warning
→ sport-yellow Dark mode (14 roles)
accent
→ postbox accent-hover
→ live-light background
→ midnight-black border
→ grey-6 error
→ error-core primary
→ postbox primary-hover
→ postbox-30 success
→ success-core surface
→ grey-7 surface-elevated
→ grey-6 text-primary
→ white text-secondary
→ grey-3 text-tertiary
→ grey-4 warning
→ sport-yellow Rules (8 typed constraints)
error · 5 rules
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 rules
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 rule
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.