Impartial news
Accurate, impartial news and information that helps people understand the world Published
The system
Fixed, everywhere
- BBC blocks centred in the masthead
- BBC Reith (serif headlines, sans furniture)
- white ground and near-black ink
- square corners
- 2px rule + uppercase label section heads
- the 1248 grid with 16px gutters
The one thing that varies
The content: photos, headlines and which promo shapes a section uses. Colour enters only through photography, LIVE red and the Subscribe blue.
Source: bbc.com/%20(2026-10-31)
How loud each format gets
Silent
QuietLanding pageArticle page
Calm
WarmImmersive story
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes 4 checks
Contrast
Every text pair meets WCAG 2.0 AA (4.5:1 normal, 3:1 large).
Grid
Content column 1248 max, 16px gutters, spacing from the unit scale.
Type
Headline sizes from the named scale; no tracking changes on Reith.
Quotes
Single quotes in headlines.
Strategy
The UK's public service broadcaster: impartial, publicly funded, serving everyone at home and around the world. Published
Learning for all ages
Support learning for people of all ages Published
Distinctive output
The most creative, highest quality and distinctive output and services Published
Every nation and region
Reflect, represent and serve the diverse communities of all of the UK Published
The UK to the world
Reflect the United Kingdom, its culture and values to the world Published
Full spec
- For Published
- All audiences: every UK household that pays the licence fee, and international audiences of BBC.com and World Service
- Problem Published
- People need news and information they can trust to understand and engage with the world
- Promise Published
- Inform, educate and entertain
- Mission (Royal Charter) Published
- Serve all audiences in the public interest with impartial, distinctive, high-quality services that inform, educate and entertain (paraphrase of the Royal Charter mission).
Proof behind each pillar
- Impartial news. Public purpose 1 in the Royal Charter; the front page leads with news promos on every visit
- Learning for all ages. Public purpose 2; Bitesize and CBeebies sit in the global navigation
- Distinctive output. Public purpose 3; Documentaries and Editor's Picks bands on the front page
- Every nation and region. Public purpose 4; national and local services across England, Scotland, Wales and Northern Ireland
- The UK to the world. BBC World Service in more than 40 languages; the footer lists the BBC News language services
Story Published
Established by Royal Charter and funded by the licence fee, the BBC introduced GEL in 2010 to make its many online services feel like one, and commissioned its own typeface, BBC Reith, named after founder John Reith, in 2017-18.
Values
Audiences
are at the heart of everything we do
PublishedCreativity
is the lifeblood of our organisation
PublishedTrust
is the foundation of the BBC: independent, impartial and truthful
PublishedRespect
kind to each other and championing inclusivity
PublishedAccountable
delivering work of the highest quality
PublishedOne BBC
collaborate, learn and grow together
PublishedCategory. Public service broadcaster and global news publisher Published
Why them
- Impartiality is a Charter obligation Published
- Funded by the licence fee, free from commercial and political interests (in the UK) Published
- World Service in more than 40 languages Published
- Its own typeface and a shared design language (GEL) across every service Published
Instead of
Commercial broadcasters and news publishers (not named by the BBC)
Boilerplate Published
The BBC is the UK's public service broadcaster, established by Royal Charter and funded principally by the licence fee paid by UK households. It makes television, radio and digital services, including BBC News, Sport, iPlayer and Sounds, and BBC World Service in more than 40 languages.
Taglines
Inform, educate and entertain Published
They never claim
- Never takes a side: impartiality is a Charter duty (Mission and public purposes) Published
- Never implies BBC endorsement of a third party or uses the BBC brand without written consent Published
The BBC states its purpose through the Royal Charter: one mission and five public purposes, which work as its message pillars. The front page never states them; it proves them with the mix of news, learning, culture, sport and World Service in the promos.
Source: bbc.co.uk/aboutthebbc/governance/missionbbc.co.uk/aboutthebbc
Personality and voice
impartialbut not opinionatedPublished
clearbut not cleverOur reading
consistentbut not uniform for its own sakeOur reading
for everyonebut not nichePublished
Consistent house style is part of trust: audiences expect the highest standards of English (News style guide).
Full spec
- British spelling
- Say “recognise”, not “recognize”
- Sentence case headlines
- No exclamation marks
- Write in the third person
- Single quotation marks in headlines, promo text and quotes within quotes
- Words for one to nine, digits from 10, except in headlines, with units (3kg) and percentages (4%)
- Never start a sentence or headline with digits
- Spell out million and billion except with currencies or in headlines (£5m)
- Minimise capital letters; only a few titles are always capped
- Body copy no more than 60 characters per line
impartialclearprecisecuriousplain
BBC News writes to its News style guide: British spelling with -ise, single quotes in headlines and promos, words for one to nine and digits from 10, minimal capitals. On bbc.com every headline is sentence case, factual, and has no exclamation mark (observed 2026-10-31).
- British spelling; choose -ise, never -ize
- Single quotes in headlines and promo text: 'elite' hackers
- Never start a headline with a digit
- Sentence case headlines; no exclamation marks
- Attribute claims; let quoted words carry opinion
- Headlines are statements of what happened, in sentence case, usually 8 to 14 words; summaries add one or two sentences of context (observed on bbc.com, 2026-10-31).
- Quotes in headlines use single quotation marks (BBC News style guide).
- The front page carries two registers: hard news (plain, attributive, no adjectives of praise) and features (a question or a surprising fact as the hook). Both stay factual; neither sells.
- A landing page in this system follows the front-page news voice: every block is a promo whose headline is the link.
Their words
informeducateentertainimpartialaudiences
Never
meet withfocussedprotestor
Source: bbc.co.uk/aboutthebbc/governance/missionbbc.co.uk/gel/features/what-is-gel
- Don’t use Americanisms such as "meet with"
- Don’t use double quotes in a headline
Source: bbc.co.uk/newsstyleguide/grammar-spelling-punctuationbbc.co.uk/newsstyleguide/numbersbbc.com/%20(2026-10-31)
Logo
The BBC blocks are a registered trade mark; the BBC publishes no public logo specification (clear space, sizes) and requires written consent for any use (branding/logo-use).
The blocks are recognisable at any size and in one colour; square letterforms in square boxes echo the square-cornered grid of the whole site.
Full spec
- Every use of a BBC logo needs the BBC's prior written consent and usually a trade mark licence
- Masthead sits at the top of every page; local branding lines up with the BBC blocks
- Local masthead type: BBC Reith Regular at 48px
The BBC blocks: three equal black squares, each with a white capital letter, B B C. On bbc.com the blocks are centred in the masthead (140x40) and sit top-left in the footer (105x30). GEL's masthead pattern says product branding in the local masthead must line up with the BBC blocks.
Not published: clear space; minimum size; colour variants; misuse examples (none on the public branding pages).
Source: bbc.co.uk/branding/logo-usebbc.co.uk/gel/features/mastheadbbc.com/%20(2026-10-31)
Color
Near-monochrome furniture lets the photography carry the colour and keeps news and advertising clearly apart.
Full spec
- All text and background pairs must meet WCAG 2.0 AA: 4.5:1 for normal text, 3:1 for large text (GEL typography)
- Red means live, nowhere else
- One filled colour button per page (Subscribe)
No palette is published on the public GEL foundations pages. bbc.com observed: white ground, #202224 ink, #000000 interface black, #545658 meta grey, #E6E8EA hairlines, #3A3C3E section rules, #141618 for two full-bleed dark bands, one blue (#0071F1) for Subscribe and red (#EB0000) only for LIVE. Ad slots are #F6F6F6.
Not published: colour palette; colour names; proportions.
Source: bbc.co.uk/gel/features/typographybbc.com/%20(2026-10-31)
Typography
Inform, educate and entertain
A face owned by the BBC is distinctive, built for screens, and saves third-party licence costs (Introducing Reith).
Full spec
A face owned by the BBC is distinctive, built for screens, and saves third-party licence costs (Introducing Reith). Fixed named sizes keep hundreds of products consistent.
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| BBC Reith Serif (Medium on headlines) | Every promo headline in Medium (28/32 lead and features, 18/22 promos, 14/18 audio titles); GEL names the sizes Canon to Minion | Bespoke BBC face by Dalton Maag; usable only with a BBC agreement or authorisation (bbc.co.uk/branding/reith-font) | Literata Reith is licence-restricted. Literata 550 matched Reith Serif Medium within 0.3% line width and 4% ink across all 84 captured 18px headlines (rendered 2026-10-31); both are contemporary humanist text serifs. |
| BBC Reith Serif (Regular on summaries) | Promo summaries 14/18 Regular | Bespoke BBC face; usable only with a BBC agreement | Literata Literata 400 with +0.01em tracking sets within 0.3% of Reith Serif Regular line width on the 52 captured summaries. |
| BBC Reith Sans (UI sans: nav, labels, meta, buttons) | Navigation 14 Medium, section labels 15 ExtraBold uppercase, meta 12 Regular, buttons 16 Medium, footer | Bespoke BBC face; usable only with a BBC agreement | Public Sans Public Sans 400 matches Reith Sans Regular within 0.2% width and 0.3% ink; 600 stands in for Reith Medium, 800 for ExtraBold. |
- Use BBC Reith everywhere (BBC staff); outside the BBC it needs an agreement, so the kit uses open stand-ins Literata and Public Sans
- Do not adjust Reith's tracking
- Heavier weights for headlines, titles and links: anything interactive or that needs to shout
- Body copy no more than 60 characters per line
- Font stacks: BBC-Reith-sans or BBC-Reith-serif, then Helvetica, Arial, sans-serif
| Canon (hero title) | 28/32 A, 32/36 B, 52/56 C, 44/48 D |
|---|---|
| Trafalgar (section header) | 20/24, 24/28, 36/40, 32/36 |
| Paragon (index headline) | 20/24, 22/26, 28/32, 28/32 |
| Double Pica (sub header) | 20/24, 20/24, 26/30, 24/28 |
| Great Primer (headline) | 18/22, 18/22, 21/24, 20/24 |
| Body Copy | 15/20, 16/22, 18/24, 16/22 |
| Pica (index links) | 15/20, 16/20, 18/22, 16/20 |
| Long Primer (index body, captions) | 15/18, 15/18, 15/20, 14/18 |
| Brevier (timestamps, bylines) | 14/16, 14/18, 14/18, 13/16 |
| Minion (small capitals) | 12/16, 12/16, 13/16, 12/16 |
| Breakpoint groups | A 0-319, B 320-599, C 600+ touch, D 600+ no touch |
BBC Reith is the BBC's own family (Serif, Sans and Condensed Sans; Light, Regular, Medium, Bold, Extra Bold; Condensed in Regular and Bold only), a humanist face designed with Dalton Maag and named after founder John Reith. GEL names its sizes after old type sizes: Canon, Trafalgar, Paragon, Double Pica, Great Primer, Body Copy, Pica, Long Primer, Brevier, Minion, plus display sizes Atlas to Foolscap. bbc.com sets headlines in Reith Serif Medium and furniture in Reith Sans.
Source: bbc.co.uk/gel/features/typographybbc.co.uk/gel/features/introducing-bbc-reithbbc.co.uk/branding/reith-fontbbc.com/%20(2026-10-31)
Graphic elements
Do three black squares, each holding one white letter (B, B, C), equal size and spacing; 140x40 desktop masthead, 105x30 phone and footer.
The BBC blocks · centred in the masthead on every page; footer top-left
Do 2px dark rule across the column, then a 15px ExtraBold uppercase label 10px below it, chevron when it links; content 24px under.
Rule-and-label section heads · every section on the front page
Do Reith Serif Medium headlines and Regular summaries; Reith Sans for nav, labels, meta and buttons. Linked headlines are the heavier weight (GEL promos).
Serif headlines over sans furniture · every promo
Do radius 0 on every image, button and badge; the only round shapes are the Save ring and the live dot.
Square corners everywhere · images, buttons, badges, panels
Do white ground, near-black ink, one blue button, red only for LIVE; two full-bleed #141618 bands for video and documentaries; photos carry all the colour.
Plain white news grid · whole front page
Specimens use sample copy, not BBC’s.
Repeated, quiet furniture lets a page hold 100+ stories without visual noise.
Full spec
- Promos order elements as lead, supporting, then credit and context (GEL promos)
- Media icons sit bottom-left of the image they describe
- A person contributor image is a circle; a brand or organisation is a square
- Labels are temporary: state (live, in progress) or editorial (new, exclusive)
The recognisable parts without the logo: the 2px rule with a small ExtraBold uppercase label over every section; square-cornered 16:9 photos; the white play badge clipped to an image corner; thin #E6E8EA rules between stacked promos; the meta row with its 1px separator bar.
Source: bbc.co.uk/gel/features/promosbbc.com/%20(2026-10-31)
Iconography
Icons that share the typeface's shapes read as part of the same voice.
Full spec
- Use icons for action, status and identity
- External links carry the GEL external-link icon: right of inline text, left in lists; never widowed
- For AirPlay and Chromecast use Apple's and Google's own assets
- Don’t alter, rename or resell the GEL icons (licence)
GEL Icons: the Reith suite, 20 sets and over 400 icons (actions, devices, playback, sport, weather and more), drawn with Dalton Maag to echo BBC Reith. On bbc.com icons are solid, black, small (14-20px) and functional: menu, search, play, audio, bookmark, chevrons, social glyphs.
Not published: icon grid and stroke (staff-only specification).
Source: bbc.co.uk/gel/features/iconographybbc.co.uk/gel/features/external-linkingbbc.com/%20(2026-10-31)
Illustration
Illustration is content, not interface, so it follows the story.
Full spec
- Treat illustration as a photo slot: 16:9, square corners, no frame
No public illustration guideline. On bbc.com illustration appears only as editorial art inside feature images (for example the giant-eagle illustration, the newsletter collage).
Not published: illustration style guide.
Source: bbc.com/%20(2026-10-31)
Photography
Real reportage photos signal news, not marketing.
Full spec
- 16:9 for promos, 1:1 for audio, 2:3 for posters
- Images bleed to the screen edge for the phone lead story
- Every image has descriptive alt text, with credit in the alt where the source requires it (observed)
Photography carries all the colour on the front page: news photos, programme art and posters at 16:9 (promos), 1:1 (audio art) and 2:3 (documentary posters), always square-cornered, full colour and uncropped by shapes.
Not published: photography guideline (light, subject, crop) on public GEL pages.
Source: bbc.com/%20(2026-10-31)
Motion
Motion is functional first, delight last, on a news page.
Full spec
- Use motion to connect, guide and delight, in that order of priority on utility pages
GEL's Motion Design Principles (2021) have three principles: Connect (an immediate, constant connection with the product), Guide (reveal how the product can be used) and Delight (create emotional responses). On the bbc.com front page motion is minimal: the masthead and nav slide on scroll (0.5s transitions); nothing animates at rest.
Not published: durations; easing curves.
Source: bbc.co.uk/gel/features/motion-design-principles-introductionbbc.co.uk/gel/motion-design-principlesbbc.com/%20(2026-10-31)
Interface & layout
The page, band by band
Ad slot (top)
Weekend Reads
Premier League (live feature)
Best Audio of the Week (audio carousel)
Documentaries (dark poster carousel)
Halloween thrills
Editor's Picks (dark video carousel)
Watch list
Earth (feature split)
Culture (feature split)
Four-column news: US & Canada News, More World News, Business, Technology
Latest Sport Audio (audio carousel)
Four-column: Sport, Health, Culture, Travel
Watch (black-panel video feature)
Four-column: Arts, Earth, Video, World's Table
Discover more from the BBC (newsletter feature)
Discover more grid (8 promos)
Buttons
Full spec
GEL grid: a flexible percentage grid with fixed margins and gutters (8px under 400px, 16px above), a 1280px maximum width giving a 1248px content area, and an 8px baseline. Breakpoint groups: 0-399, 400-599, 600-899, 900-1007, 1008+ (fixed 1008 until 1279) and 1280+. Spacing units: 15 steps from 4px to 160px, mostly multiples of 8 (4, 12 and 20 for components only). bbc.com at 1440: the 1248 column at x96, 16px gutters, columns in halves, thirds, quarters and 1:2:1.
Measured from bbc.com/%20(2026-10-31)'s headless Chromium at 1440x900 and 390x844, computed styles, bounding boxes and pixel samples, 2026-10-31.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 96px | 16px |
| Section padding | 48px | 32px |
| Card gap | 16px | 16px |
| Navigation | 123 desktop (81 masthead + 42 section nav) / 49 phone (masthead only)px | 123 desktop (81 masthead + 42 section nav) / 49 phone (masthead only)px |
Type, at size
Lead / feature / live headline
BBC Reith Serif (Medium on headlines) · 28px (phone 24) · line 1.143 · weight 550
Promo headline
BBC Reith Serif (Medium on headlines) · 18px · line 1.222 · weight 550
Summary
BBC Reith Serif (Regular on summaries) · 14px · line 1.286 · tracking 0.14px · weight 400
Audio tile title
BBC Reith Serif (Medium on headlines) · 14px · line 1.286 · tracking -0.28px · weight 550
Section label
BBC Reith Sans (UI sans: nav, labels, meta, buttons) · 15px (phone 14) · line 1.333 · tracking 0.75px · weight 800
Nav item
BBC Reith Sans (UI sans: nav, labels, meta, buttons) · 14px · line 1.286 · weight 600
Button
BBC Reith Sans (UI sans: nav, labels, meta, buttons) · 16px · line 1.125 · weight 600
Meta (time, tag, duration, show)
BBC Reith Sans (UI sans: nav, labels, meta, buttons) · 12px · line 1.167 · weight 400
LIVE label
BBC Reith Sans (UI sans: nav, labels, meta, buttons) · 28px (phone 24) · line 1.143 · weight 700
- Motion
- minimal on the front page; GEL motion principles Connect, Guide, Delight (published)
- Buttons
- square
Page anatomy
How BBC’s own landing pages are built, observed on bbc.com/%20(international%20edition;%20bbc.co.uk%20redirects%20there%20outside%20the%20UK), 2026-10-31. The full measurements are in spec.md.
- Navigation
- Two stacked white strips, both sticky. Masthead strip 80px + 1px #E6E8EA bottom border (desktop y 278-359): left a 50x30 menu-and-search icon button at x16 then "Watch Live" (16x16 live-dot icon + 14px/18px Public Sans 600 black, x86); centre the BBC blocks logo 140x40 (x650 y298); right Subscribe (blue filled) at x1224 and Sign In (text button) at x1345. Section nav strip 42px (y 359-401) with 1px #E6E8EA bottom border: 14 centred links.
- Hero
- No marketing hero. The page opens on a three-column top-stories grid 40px under the nav: two image promos stacked on the left (300 wide), the lead story centre (616 wide, 16:9 image over a 28px headline), four text-only promos stacked on the right (300 wide). Columns at x96, x412, x1044 with 16px gutters.
- Top stories (lead grid)
- 7 cards: 2 image promo (image over 18px headline), 4 text promo (18px headline, summary, meta; no image), 1 lead story (image over 28px headline)
- Ad slot 1
- Empty advertising slot, painted as a flat light-grey band with nothing in it (no label, no border). Reproduce it exactly as an empty band.
- Weekend Reads
- 2 cards: 2 wide image promo
- Premier League (live feature)
- 1 cards: 1 feature split (big image + text panel)
- Best Audio of the Week (audio carousel)
- 12 cards: 12 audio tile (square art, show name, title, Save + duration)
- Documentaries (dark poster carousel)
- 8 cards: 8 documentary poster (2:3 poster, title below)
- Ad slot 2
- Empty advertising slot, painted as a flat light-grey band with nothing in it (no label, no border). Reproduce it exactly as an empty band.
- More news
- 8 cards: 5 image promo (image over 18px headline), 1 feature split (headline + image side by side), 2 text promo (18px headline, summary, meta; no image)
- Halloween thrills
- 3 cards: 3 image promo (image over 18px headline)
- Editor's Picks (dark video carousel)
- 8 cards: 8 wide image promo
- Ad slot 3
- Empty advertising slot, painted as a flat light-grey band with nothing in it (no label, no border). Reproduce it exactly as an empty band.
- Watch list
- 2 cards: 2 wide image promo
- Earth (feature split)
- 1 cards: 1 feature split (headline + image side by side)
- Culture (feature split)
- 1 cards: 1 feature split (headline + image side by side)
- Ad slot 4
- Empty advertising slot, painted as a flat light-grey band with nothing in it (no label, no border). Reproduce it exactly as an empty band.
- Four-column news: US & Canada News, More World News, Business, Technology
- 16 cards: 12 headline-only link row, 4 image promo (image over 18px headline)
- Ad slot 5
- Empty advertising slot, painted as a flat light-grey band with nothing in it (no label, no border). Reproduce it exactly as an empty band.
- Latest Sport Audio (audio carousel)
- 12 cards: 12 audio tile (square art, show name, title, Save + duration)
- Four-column: Sport, Health, Culture, Travel
- 16 cards: 12 headline-only link row, 4 image promo (image over 18px headline)
- Ad slot 6
- Empty advertising slot, painted as a flat light-grey band with nothing in it (no label, no border). Reproduce it exactly as an empty band.
- Watch (black-panel video feature)
- 1 cards: 1 feature split (big image + text panel) The text panel right of the image is #000000.
- Four-column: Arts, Earth, Video, World's Table
- 16 cards: 12 headline-only link row, 4 image promo (image over 18px headline)
- Discover more from the BBC (newsletter feature)
- 1 cards: 1 feature split (big image + text panel)
- Discover more grid (8 promos)
- 8 cards: 8 image promo (image over 18px headline)
- Ad slot 7
- Empty advertising slot, painted as a flat light-grey band with nothing in it (no label, no border). Reproduce it exactly as an empty band.
- Footer
- White footer after 120px of white space below the last ad slot: a full-width 1px #3A3C3E divider, then inside the 1248 column: BBC blocks logo, one row of 17 links, the BBC in other languages button, a Follow BBC on: row with six social glyphs, two rows of legal links, the copyright line.
Source: bbc.co.uk/gel/features/gridbbc.co.uk/gel/features/spacing-unitsbbc.com/%20(2026-10-31)
In use
Full spec
How loud the system gets by format (our reading of GEL plus the front page).
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | masthead with centred blocks and section nav; sections as rule + uppercase label; promos with serif headlines, summaries and meta; square photos; one blue Subscribe button; footer with links and legal | section order and promo shapes (lead grid, halves, thirds, quarters, carousels, feature splits, dark bands) | |
| Article page | 60/20/20 three-column reading layout on large screens; body copy 60 characters a line max | supporting content in the outer columns | |
| Immersive story | display sizes Atlas to Foolscap only here | imagery and motion |
Ads
Rules
Do
- Respect everyone: personalise for every individual's needs
- Love needs: every innovation must benefit or delight the audience
- Everywhere, always: design for every device and context
- Drive discovery: the journey matters as much as the destination
- Further together: reuse existing designs
- Meet WCAG 2.0 AA contrast
- Keep the masthead at the top of every page
Don’t
Source: bbc.co.uk/gel/features/what-is-gelbbc.co.uk/gel/features/typographybbc.co.uk/gel/features/masthead
Steal this kit
Your name and logo, BBC’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What BBC doesn’t publish
- Colour palette: not published on public GEL pages; all hex values are observed on bbc.com (2026-10-31).
- Logo clear space, minimum size and misuse: not published publicly.
- Icon grid and stroke: published only to BBC staff.
- Motion durations and easing: not published.
- Photography and illustration guidelines: not published publicly.
- BBC Reith is licence-restricted; the kit uses calibrated open stand-ins (Literata, Public Sans).
- The bbc.co.uk homepage redirects to bbc.com outside the UK; the measured page is the international edition, which carries ad slots.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with BBC.