Media & Entertainment / iOS / Android / Web

The Guardian

The Guardian dresses news as a newspaper: a bold serif headline, a quiet sans for labels, thin rules between stories, and a different color for each section.

Download
  • #052962
  • #FFE500
  • #121212
  • #C70000
  • #0077B6
  • #F6F6F6

Color

Every color token in the file, grouped by role.

Brand

  • primary#052962
  • on primary#FFFFFF
  • brand yellow#FFE500

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F6F6F6
  • canvas sunken#EDEDED

Text

  • ink#121212
  • ink body#333333
  • ink muted#707070
  • ink soft#545454

Lines

  • divider#DCDCDC

Status

  • success#22874D

More

  • navy deep#041F4A
  • news#C70000
  • news deep#AB0613
  • news wash#FFF4F2
  • sport#0077B6
  • opinion#C74600
  • culture#866D50
  • culture wash#FBF6EF
  • lifestyle#BB3B80
  • lifestyle wash#FEF1F8

Typography

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

  • GH Guardian HeadlineGH Guardian Headline is private and not available in open fonts. Shown in Bitter, the closest open match.
  • GuardianTextSansGuardianTextSans is private and not available in open fonts. Shown in Fira Sans, the closest open match.
  • headline large28px / 700 / 32px

    Pack my box with five dozen liquor jugs

  • headline medium24px / 500 / 28px

    Pack my box with five dozen liquor jugs

  • headline small17px / 500 / 20px

    The quick brown fox jumps over the lazy dog

  • standfirst16px / 500 / 18px

    The quick brown fox jumps over the lazy dog

  • section title20px / 700 / 26px

    Pack my box with five dozen liquor jugs

  • ui17px / 400 / 22px

    The quick brown fox jumps over the lazy dog

  • ui bold17px / 700 / 22px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm12px
  • lg36px
  • pill40px
  • round999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm6px
  • base16px

Components

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

  • button brand
    button-brand
  • header
    header
  • news tag
    news-tag
  • culture tag
    culture-tag
  • lifestyle tag
    lifestyle-tag
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 115 lines
version: alpha
name: The-Guardian-design-analysis
description: "A newspaper on screen: Guardian Headline serif at 700 and 500, a Text Sans for interface and labels, ink #121212 on white and #f6f6f6, a deep navy (#052962) header with brand yellow, and one accent color per section such as news red (#c70000) and sport blue (#0077b6)."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#052962"
  on-primary: "#ffffff"
  brand-yellow: "#ffe500"
  navy-deep: "#041f4a"
  ink: "#121212"
  ink-body: "#333333"
  ink-muted: "#707070"
  ink-soft: "#545454"
  canvas: "#ffffff"
  canvas-subtle: "#f6f6f6"
  canvas-sunken: "#ededed"
  divider: "#dcdcdc"
  news: "#c70000"
  news-deep: "#ab0613"
  news-wash: "#fff4f2"
  sport: "#0077b6"
  opinion: "#c74600"
  culture: "#866d50"
  culture-wash: "#fbf6ef"
  lifestyle: "#bb3b80"
  lifestyle-wash: "#fef1f8"
  success: "#22874d"

typography:
  # Font note: "GH Guardian Headline" is a private font and is not available in open fonts. Closest open alternative: "Bitter".
  # Font note: "Guardian Egyptian Web" is a private font and is not available in open fonts. Closest open alternative: "Bitter".
  # Font note: "GuardianTextSans" is a private font and is not available in open fonts. Closest open alternative: "Fira Sans".
  headline-large:
    fontFamily: "'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 32px
  headline-medium:
    fontFamily: "'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 28px
  headline-small:
    fontFamily: "'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 20px
  standfirst:
    fontFamily: "'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 18px
  section-title:
    fontFamily: "GuardianTextSans, 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 26px
  ui:
    fontFamily: "GuardianTextSans, 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 22px
  ui-bold:
    fontFamily: "GuardianTextSans, 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 700
    lineHeight: 22px

rounded:
  sm: 12px
  lg: 36px
  pill: 40px
  round: 999px

spacing:
  xs: 4px
  sm: 6px
  base: 16px

components:
  button-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.ui-bold}"
    rounded: "{rounded.lg}"
    height: 36px
    padding: 0 16px
  header:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.ui}"
    height: 64px
  news-tag:
    backgroundColor: "{colors.news-wash}"
    textColor: "{colors.news}"
    typography: "{typography.ui-bold}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  culture-tag:
    backgroundColor: "{colors.culture-wash}"
    textColor: "{colors.culture}"
    typography: "{typography.ui-bold}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  lifestyle-tag:
    backgroundColor: "{colors.lifestyle-wash}"
    textColor: "{colors.lifestyle}"
    typography: "{typography.ui-bold}"
    rounded: "{rounded.sm}"
    padding: 4px 8px

Overview

The Guardian is a British newspaper with a worldwide site. It looks like a newspaper: a bold serif for headlines, a plain sans for labels and menus, dense columns of stories separated by thin rules, and a navy header with a yellow brand mark. [Observed]

What defines the look:

  1. A headline serif. Guardian Headline at 700 for section titles and 500 for story headlines, 17 to 28 on a tight line height. [Measured]
  2. A text sans for the interface. Guardian Text Sans at 17 on 22, weight 400 for menus and 700 for labels and buttons. [Measured]
  3. Navy and yellow. The header and brand buttons are #052962, with a deeper #041f4a, and the brand yellow is #ffe500. [Measured]
  4. One color per section. News red #c70000, sport blue #0077b6, opinion orange #c74600, culture brown #866d50 and lifestyle pink #bb3b80, each with a pale wash for backgrounds. [Measured]
  5. Rules and gray panels. Dividers are #dcdcdc, panels #f6f6f6 and #ededed, and ink is #121212. [Measured]
  6. Rounded only on controls. Brand buttons are pills of 36 high and 12px corners appear on small tags. Images and stories stay square. [Measured]

Source for this file: the International front page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The Source design system's documentation was not read. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Brand navy#052962, deep #041f4aHeader, brand buttons
Brand yellow#ffe500Brand mark and highlights
Text#121212, body #333333Headlines, copy
Muted text#707070, #545454Meta and captions
Page, panel, sunken#ffffff, #f6f6f6, #edededSurfaces
Divider#dcdcdcRules
News#c70000, deep #ab0613, wash #fff4f2News section
Sport#0077b6Sport section
Opinion#c74600Opinion section
Culture#866d50, wash #fbf6efCulture section
Lifestyle#bb3b80, wash #fef1f8Lifestyle section
Success#22874dConfirmations

Typography

Guardian Headline carries story headlines and section titles: 28 on 32 at 700 for the main News title, 24 on 28 and 17 on 20 at 500 for cards, 16 on 18 at 500 for short standfirsts. Guardian Text Sans carries the interface: 17 on 22 at 400 and 700, and 20 on 26 at 700 for the secondary section titles such as In focus. Georgia and system sans follow as fallbacks. [Measured]

Shape and spacing

Brand buttons are pills 36 high. Tags and small panels use a 12px corner. Larger rounded shapes of 36 and 40 appear on controls, and avatars and icon buttons are circles. Padding seen on headings is 6 above and 4 below. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light only on the page measured. [Observed]

Platform: iOS

The Guardian apps were 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 apps are expected to share the navy, the section colors and the headline serif. [Inferred]

Platform: Android

The Guardian apps were 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 apps are expected to share the navy, the section colors and the headline serif. [Inferred]

Platform: Web

The Guardian International front page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back and section links in the header. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A navy header with edition and section links and a Print subscriptions link, plus skip links for keyboard users. [Observed]

Main action

Expected on Web: Page-level button.

A navy pill button, 36 high, with white bold text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Pill buttons, circular icon buttons and an expanding panel on #f6f6f6 with a dark border. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that change at breakpoints: the News title is 28 on desktop and 24 on mobile. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Skip links are 40 high and the brand button 36. [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 same fonts and colors scale down on mobile. [Measured]

Cross-platform consistency

Consistent across platforms: the headline serif, navy, section colors and thin rules. [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 and labels in the sans.
  • Give each section its own accent color and a pale wash.
  • Separate stories with thin gray rules.
  • Keep images and story blocks square.

Don't

  • Don't use section colors on the navy header.
  • Don't round story images.
  • Don't use more than one section color in a single card.

Known Gaps

  • Article pages, live blogs, opinion layouts and the dark theme were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred.
  • Icons, motion and exact breakpoints were not measured.
  • The section color hexes are read from the page's own styles, so their pairing with text was not checked.
  • Account deletion and store policy rules were not verified.