# BBC Global Experience Language (BBC GEL)

> BBC's global experience language unifies news, video, audio and children's products through readable hierarchy, accessible media controls and reusable editorial components.

- IndexStyle No.559 — https://indexstyle.org/styles/bbc-gel
- Kind: Style · Family: Platform Screen Languages · Era: 2010–
- Mood: Trust, Technique, Exhilaration
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- Black header over white content
- Short bold headlines
- News cards with consistent image ratios
- Highly visible focus, captions and playback controls

## Best used for

- Media sites mixing articles, audio and video
- Delivering the same content across devices and assistive technology

## Composition recipe

- Typography & lettering: Write short bold headlines and label content so it works without an image.
- Layout & structure: Keep card ratios consistent but let editorial importance change their size and order.
- Material & texture: Use black and white as the base, with one section or programme color.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FFFFFF
- The colour it is remembered by: #B80000
- Text and outlines: #121212

## What to avoid

An even card grid erases editorial judgment. Express importance through area and sequence.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Black header over white content
- [ ] Visible in the piece: Short bold headlines
- [ ] Visible in the piece: News cards with consistent image ratios
- [ ] Visible in the piece: Highly visible focus, captions and playback controls
- [ ] The layout follows: Keep card ratios consistent but let editorial importance change their size and order.
- [ ] The lettering follows: Write short bold headlines and label content so it works without an image.
- [ ] The material and surface follow: Use black and white as the base, with one section or programme color.
- [ ] The colour relation holds: #FFFFFF as ground, #B80000 carrying the style, #121212 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **GOV.UK Design System (GOV.UK デザインシステム)** — The design language the UK government's Government Digital Service publishes and maintains for public services. Everything runs in one undecorated left aligned column set in GDS Transport, and the green button keeps square corners while carrying a darker green band along its bottom edge, dropping by exactly that depth when pressed. Whatever holds keyboard focus turns yellow with a black rule under it. → https://indexstyle.org/styles/govuk-design-system
- **GitHub Primer (GitHub Primer)** — GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior. → https://indexstyle.org/styles/github-primer

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=bbc-gel+govuk-design-system

## Further study

- GEL foundations
- Progressive enhancement
- Media accessibility

## Reference works

- BBC GEL Technical Documentation — https://bbc.github.io/gel/

## Source of record

- BBC GEL Technical Documentation — https://bbc.github.io/gel/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/bbc-gel
- Image-generation prompt (legally clean): https://indexstyle.org/styles/bbc-gel/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)