BBC GEL

# BBC GEL — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by BBC. "BBC GEL" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** BBC GEL
**Owner:** BBC
**Official documentation:** https://bbc.github.io/gel/
**Visual character:** Public-broadcast neutrality: Reith type named after print sizes, monochrome discipline, and per-service accent colors that never bleed.

---

## Summary

Global Experience Language — the BBC's cross-platform brand and UI system.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| BBC Black | `#000000` | `--gel-black` | Brand, masthead, and primary text |
| White | `#ffffff` | `--gel-white` | Page background |
| Grey Text | `#404040` | `--gel-grey-8` | Body text |
| Light Grey | `#f2f2f2` | `--gel-grey-2` | Subtle background |
| Border Grey | `#e6e6e6` | `--gel-grey-3` | Borders |
| Link Blue | `#0068ff` | `--gel-link` | Links (product contexts) |
| News Red | `#eb0000` | `--gel-news-red` | News brand accent |
| Sport Yellow | `#ffd230` | `--gel-sport-yellow` | Sport brand accent |

## Typography

- **Body:** BBC Reith Sans — weights 400, 500, 700 — `'BBC Reith Sans', Helvetica, Arial, sans-serif`
- **Display:** BBC Reith Serif — weights 500, 700 — `'BBC Reith Serif', Georgia, serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| canon (largest) | `44px` | `48px` |
| trafalgar | `32px` | `36px` |
| double-pica | `24px` | `28px` |
| pica (body) | `16px` | `20px` |
| brevier | `14px` | `18px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Quick start (CSS)

```css
/* BBC GEL — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://bbc.github.io/gel/ */

:root {
  /* Color */
  --gel-black: #000000; /* Brand, masthead, and primary text */
  --gel-white: #ffffff; /* Page background */
  --gel-grey-8: #404040; /* Body text */
  --gel-grey-2: #f2f2f2; /* Subtle background */
  --gel-grey-3: #e6e6e6; /* Borders */
  --gel-link: #0068ff; /* Links (product contexts) */
  --gel-news-red: #eb0000; /* News brand accent */
  --gel-sport-yellow: #ffd230; /* Sport brand accent */

  /* Typography */
  --font-body: 'BBC Reith Sans', Helvetica, Arial, sans-serif;
  --font-display: 'BBC Reith Serif', Georgia, serif;

  /* Type scale */
  --text-canon-largest-: 44px /* line-height 48px */;
  --text-trafalgar: 32px /* line-height 36px */;
  --text-double-pica: 24px /* line-height 28px */;
  --text-pica-body-: 16px /* line-height 20px */;
  --text-brevier: 14px /* line-height 18px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;

  /* Radius */
  --radius-default: 0;
}
```

## Origin

The BBC introduced GEL (Global Experience Language) in 2010 to unify BBC web, mobile, and TV product surfaces. It has evolved through multiple iterations and remains the canonical reference for the BBC's audience-facing products: News, Sport, iPlayer, Sounds, and more.

## Governance

BBC Design System team maintains GEL as part of the BBC's broader design org. Public guidance documents are published; the production component implementations are largely internal but inform open releases like the BBC's content guidelines and accessibility standards.

## Known for

- Cross-platform consistency at unusual scale — the BBC ships across web, native apps (iOS / Android), TV, and broadcast UIs that all adhere to GEL.
- Public accessibility commitment — BBC accessibility standards exceed WCAG AA in several areas and are publicly documented.
- Editorial design — type, layout, and content patterns built for a news organization, not a SaaS.

## Underrated

- GEL's typography system uses BBC Reith — a custom, license-clean typeface — and the documented font-pairing rules apply beyond the BBC.
- Audio and video player patterns (BBC Sounds, iPlayer) are publicly documented in detail and have informed broader media design system practice.

## Watch out for

- Most production GEL components are not open source — adopting GEL means following the public guidance and recreating components in-house.
- The visual identity is BBC-flavored. As with any broadcaster's design system, lifting it whole is not the goal — studying the patterns is.

## Components worth studying

- **Promo (content cards)** — The reference content-card pattern for editorial sites — title, image, kicker, summary.
- **Navigation (Orbit)** — BBC's global header/navigation component with branded affordances.
- **Media Player** — Audio and video player UI shared across iPlayer and Sounds.

## When to choose BBC GEL

Study GEL if you're building media, news, or editorial products at scale across web, mobile, and TV. The publicly documented patterns for navigation, content lists, and player UIs are useful far beyond the BBC.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of BBC GEL by BBC — Global Experience Language — the BBC's cross-platform brand and UI system. Character: Public-broadcast neutrality: Reith type named after print sizes, monochrome discipline, and per-service accent colors that never bleed. Use a primary colour near #000000, the typeface "BBC Reith Sans" (or a close equivalent), corner radius around 0, a spacing rhythm on a 8px base. Lean into what it's known for: Cross-platform consistency at unusual scale — the BBC ships across web, native apps (iOS / Android), TV, and broadcast UIs that all adhere to GEL. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [BBC GEL](https://bbc.github.io/gel/)
- [BBC accessibility standards](https://www.bbc.co.uk/accessibility/forproducts/guides/)
- [BBC Reith typeface](https://bbc.github.io/gel/foundations/typography/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/bbc-gel) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._