Media & Entertainment / iOS / Android / Web

BBC News

BBC News behaves like a printed front page: serif headlines, square corners and gray rules, with black buttons and almost no color.

Download
  • #B80000
  • #202224
  • #545658
  • #F6F6F6
  • #E6E8EA
  • #000000

Color

Every color token in the file, grouped by role.

Brand

  • primary#B80000
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F6F6F6

Text

  • ink#202224
  • ink muted#545658
  • ink faint#8A8C8E

Lines

  • divider#E6E8EA

More

  • black#000000
  • field#EFEFEF

Typography

Each style is set with the file's own family, size, weight and spacing.

  • BBC Reith SerifBBC Reith Serif is private and not available in open fonts. Shown in Noto Serif, the closest open match.
  • BBC Reith SansBBC Reith Sans is private and not available in open fonts. Shown in Public Sans, the closest open match.
  • headline large28px / 500 / 32px

    Pack my box with five dozen liquor jugs

  • headline medium24px / 500 / 28px

    Pack my box with five dozen liquor jugs

  • headline small18px / 500 / 22px

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 18px

    The quick brown fox jumps over the lazy dog

  • ui16px / 500 / 18px

    The quick brown fox jumps over the lazy dog

  • ui bold16px / 700 / 18px

    The quick brown fox jumps over the lazy dog

  • input16px / 400 / 18px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • none0px

Spacing

The spacing scale, drawn to size.

  • xs6px
  • sm8px
  • md12px
  • base14px

Components

Component tokens drawn with the colors, type and corners they name.

  • button solid
    button-solid
  • button outline
    button-outline
  • search field
    search-field
  • section band
    section-band
  • red mark
    red-mark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 104 lines
version: alpha
name: BBC-News-design-analysis
description: "A news site set almost entirely in a serif: Reith Serif headlines at medium weight with tight negative tracking, Reith Sans for interface text, ink #202224 on white and #f6f6f6, square-cornered black buttons with a 2px edge and almost no color."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#b80000"
  on-primary: "#ffffff"
  black: "#000000"
  ink: "#202224"
  ink-muted: "#545658"
  ink-faint: "#8a8c8e"
  canvas: "#ffffff"
  canvas-subtle: "#f6f6f6"
  divider: "#e6e8ea"
  field: "#efefef"

typography:
  # Font note: "BBC Reith Serif" is a private font and is not available in open fonts. Closest open alternative: "Noto Serif".
  # Font note: "BBC Reith Sans" is a private font and is not available in open fonts. Closest open alternative: "Public Sans".
  headline-large:
    fontFamily: "'BBC Reith Serif', BBCReithSerif-fallback, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 32px
    letterSpacing: -0.56px
  headline-medium:
    fontFamily: "'BBC Reith Serif', BBCReithSerif-fallback, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: -0.24px
  headline-small:
    fontFamily: "'BBC Reith Serif', BBCReithSerif-fallback, serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: -0.36px
  body:
    fontFamily: "'BBC Reith Serif', BBCReithSerif-fallback, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
  ui:
    fontFamily: "'BBC Reith Sans', BBCReithSans-fallback, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 18px
  ui-bold:
    fontFamily: "'BBC Reith Sans', BBCReithSans-fallback, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 18px
  input:
    fontFamily: "'BBC Reith Sans', BBCReithSans-fallback, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18px

rounded:
  none: 0px

spacing:
  xs: 6px
  sm: 8px
  md: 12px
  base: 14px

components:
  button-solid:
    backgroundColor: "{colors.black}"
    textColor: "{colors.on-primary}"
    typography: "{typography.ui}"
    rounded: "{rounded.none}"
    height: 44px
    padding: 6px 12px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.black}"
    typography: "{typography.ui}"
    rounded: "{rounded.none}"
    height: 44px
    padding: 13px 14px
  search-field:
    backgroundColor: "{colors.field}"
    textColor: "{colors.ink}"
    typography: "{typography.input}"
    rounded: "{rounded.none}"
    height: 44px
    padding: 13px 13px
  section-band:
    backgroundColor: "{colors.canvas-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px
  red-mark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.ui-bold}"
    padding: 4px 8px

Overview

BBC News is a public-service news site. The page reads like a printed front page: serif headlines at medium weight, short serif standfirsts, sharp rectangles, thin gray rules and almost no color. [Observed]

What defines the look:

  1. A serif front page. Headlines and summaries are set in Reith Serif, with sans only for interface text such as buttons, menus and fields. [Measured]
  2. Tight, medium headlines. Headlines are weight 500 with negative tracking (about -2 percent), 28 on 32 for the lead and 18 on 22 for ordinary stories. [Measured]
  3. Sharp corners. No measured element has a rounded corner. Buttons, fields and bands are rectangles. [Measured]
  4. Black buttons. Solid buttons are black with white text and a 2px black edge, 44 high. Outline buttons are white with black text. [Measured]
  5. Neutral grays. Ink #202224, secondary #545658, faint #8a8c8e, on white and #f6f6f6. [Measured]
  6. Almost no color. BBC red #b80000 is set only as the color of one heading element and is not used on buttons, links or bars on the pages measured. [Measured]

Source for this file: the BBC News home page and the world section measured in a browser at 1440 and 390 wide, read on 2026-10-06. BBC's own design framework (GEL) was not read. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Text#202224Headlines and body
Secondary text#545658Meta lines
Faint text#8a8c8eTimestamps and captions
Page#ffffffMain surface
Subtle band#f6f6f6Section backgrounds
Divider#e6e8eaRules between stories
Search field#efefef at 30 percentField fill
Solid button#000000 with white textRegister and similar
Red#b80000One heading element, not chrome

Typography

Headlines use Reith Serif at 500 with negative tracking: 28 on 32 (-0.56px) for the lead on desktop, 24 on 28 for large cards, 18 on 22 (-0.36px) for ordinary stories. Body and summaries are Reith Serif at 14 on 18, weight 400. Interface text uses Reith Sans at 16 on 18, weight 500, with 700 for emphasis. Weights 400, 500, 700 and 900 are loaded for the sans. [Measured]

Shape and spacing

All measured elements are square. Buttons are 44 high with 6 by 12 or 13 by 14 padding, and a 2px edge. Fields are 44 high. [Measured] Padding seen in the interface is 6, 8, 12 and 14. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light only on the pages measured. [Observed]

Platform: iOS

The BBC News app was not captured. The notes below follow from the web design.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of the news app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

No floating action is expected in a news app. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to keep the serif headlines and square corners but use native navigation. [Inferred]

Platform: Android

The BBC News app was not captured. The notes below follow from the web design.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of the news app. [Inferred]

Main action

Expected on Android: Floating action button.

No floating action is expected in a news app. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to keep the serif headlines and square corners but use native navigation. [Inferred]

Platform: Web

The BBC News home page and the world section, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back and section links in the top navigation. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top navigation bar with section links, Register and Sign In buttons and a search control. [Observed]

Main action

Expected on Web: Page-level button.

A solid black button for registering. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Square black and white buttons, 44 high, and a 44 high search field. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint: the lead headline drops from 28 to 24 on mobile. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons and fields measure 44 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page changes headline size, not style. [Measured]

Cross-platform consistency

Consistent across platforms: serif headlines, square corners and the neutral grays. [Measured for web, Inferred for the apps]

Intentionally different: headline sizes step down on narrow screens. [Measured]

Do's and Don'ts

Do

  • Set headlines in the serif at medium weight with tight tracking.
  • Keep every corner square.
  • Keep color rare and reserve it for signals.
  • Use black solid buttons and white outline buttons.

Don't

  • Don't round buttons or cards.
  • Don't use bold serif headlines. The weight is medium.
  • Don't use red for links or chrome.

Known Gaps

  • Article pages, video, live pages and the audio products were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred.
  • Icons, motion and the exact breakpoints were not measured.
  • The red is read from a single heading color, so its use for live and alert marks was not confirmed.
  • Account deletion and store policy rules were not verified.