---
version: alpha
name: "The Guardian"
website: "https://www.theguardian.com"
description: >-
  A UK left-leaning daily newspaper whose front page is a text-density-led editorial grid built on two custom typefaces — GH Guardian Headline (the Egyptian-slab display family) at 17-28px for kickers and headlines, and GuardianTextSans at 12-17px in weights 400 and 700 for metadata, kickers and bylines. The page floor is pure white with hairline-bordered cards and section-coded color rules (yellow #ffe500 callout, blue #052962 masthead and primary button, red #c70000 for live tags and links, brown #866d50 for Culture, magenta #bb3b80 for Lifestyle); circular avatars at 50% radius and small 12px chips for byline pictures and category dots are the only round shapes on an otherwise squared editorial layout that prizes information density over whitespace.

seo:
  title: "The Guardian Design System for React — yellow callout, blue masthead, GH Guardian Headline, 16 components"
  metaDescription: "The Guardian's editorial design system as a DESIGN.md file. Pure-white canvas, navy #052962 masthead, yellow #ffe500 callout, GH Guardian Headline serif at 17-28px, density-led card grid, section-coded color rules."
  highlights:
    - "Density over whitespace — the front page packs three to five card-grid rows per viewport, with 1px hairline dividers and no surface fills, the inverse of a SaaS marketing hero"
    - "Two-family newspaper pairing — GH Guardian Headline (the Egyptian-slab serif) for headlines and standfirsts, GuardianTextSans for metadata, kickers, and bylines"
    - "Section-coded color rules — News uses 1px navy section border, Sport navy blue, Culture warm brown, Lifestyle magenta, Opinion orange-red; the section color paints only the top rule and section title, never a surface"
    - "Yellow callout — a single saturated yellow rule at 38 background occurrences carries the masthead veggie-burger hover, byline backgrounds, callout highlights, and the age-warning badge"
    - "Live red — a saturated #c70000 marks live blogs, breaking links, byline anchors, and pulsing dot indicators; never used decoratively"
  tags:
    - "News & Publishing"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    The Guardian's front page is what a newspaper looks like when it migrates to the browser without giving up the print grid. The page floor is pure white. The masthead is a deep navy band with the lowercase italic Guardian logotype in cream, the Egyptian-slab serif Headline family carries every kicker and standfirst, and the GuardianTextSans family carries every byline, timestamp, comment count, and live-tag chip. There is no hero image, no marketing band, no scrolling parallax — the first viewport is a section-coded card grid that packs three to five rows of story tiles, each tile rendered as a hairline-bordered cell with a category kicker in section color, a serif headline in ink charcoal, and a sans-serif metadata strip beneath. The captured render includes the privacy-consent banner ("It's your choice") that sits above the editorial grid as a navy block with two pill CTAs in saturated yellow.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: sixteen color tokens covering the navy masthead, the yellow callout, the live red, four section-coded accents (Sport blue, Culture brown, Lifestyle magenta, Opinion orange-red), plus the structural ink / muted / hairline / canvas neutrals; twelve typography tokens spanning GH Guardian Headline serif at 17 / 20 / 24 / 28px in weights 500 and 700 plus GuardianTextSans at 12 / 14 / 15 / 17 / 20px in weights 400 and 700; a binary radius scale of 50% circular avatars plus 12 / 36 / 40px button pills; and sixteen component definitions covering the masthead, the section rule, the editorial card, the byline strip, the live-tag chip, the consent-banner pill, the section-tab tier, and the hairline-bordered comment count.

    Feed this file to an AI coding tool and it reproduces The Guardian's specific moves: text-density-led editorial grid instead of a marketing hero, hairline-bordered cards with no surface fills, section-coded 1px top rules that paint only the section color and section title (never the card surface), two-family newspaper pairing with the serif carrying headlines and the sans carrying metadata, circular byline avatars at 50% radius, and the yellow callout reserved for masthead chrome and consent-banner CTAs. The token references resolve cleanly — `{colors.callout-yellow}` for the saturated rule, `{colors.masthead-navy}` for the band, `{typography.headline-lg}` for the standfirst tier. The one move worth borrowing is the section-coded rule pattern: it lets a single card template carry News, Sport, Culture, and Lifestyle without ever changing the card surface itself.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.theguardian.com"
      title: "The Guardian — official site"
      description: "The Guardian's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is The Guardian's primary brand color?"
      answer: "The Guardian's brand voltage is a deep navy #052962 wired as `--masthead-nav-background`, `--button-background-primary`, `--callout-submit-background`, and the page meta theme color. The navy carries the masthead band, the privacy-consent block, every primary submit button, the click-to-view button, and the recommendation-count selected state. The saturated yellow #ffe500 is the secondary voltage — used 38 times as background only, for the masthead veggie-burger hover, byline backgrounds, callout highlights, the age-warning badge, and the consent-banner CTA fills. Live red #c70000 is the third anchor — marking live blogs, breaking links, byline anchors, and the pulsing dot indicator on live tags. Section-coded accents (Sport blue, Culture brown, Lifestyle magenta, Opinion orange-red) carry the section-rule and section-title work."
    - id: "typography"
      title: "What typefaces does The Guardian use, and what should I use as substitutes?"
      answer: "The Guardian runs two licensed families. GH Guardian Headline (the Egyptian-slab serif developed in-house in 2005 with the Berliner format) carries every headline, standfirst, kicker title, and pull-quote at 17 / 20 / 24 / 28px in weights 500 and 700. GuardianTextSans carries every byline, timestamp, comment count, live-tag chip, footer link, and metadata strip at 12 / 14 / 15 / 17 / 20px in weights 400 and 700. There is no third family and no system mono in the captured render. The closest open-source substitutes are PT Serif or Source Serif Pro for the Headline tier (both have similar wedge serifs) and Source Sans Pro or Public Sans for the TextSans tier. The preserved move is the headline-in-serif treatment."
    - id: "card-pattern"
      title: "How does The Guardian's editorial card pattern work?"
      answer: "Every tile in the front-page card grid follows the same template: a 1px section-coded top rule in the section color (navy for Sport, brown for Culture, magenta for Lifestyle, orange-red for Opinion), a section-title chip beneath in GuardianTextSans 12px / 700, a serif headline in GH Guardian Headline (typically 17-24px in weight 500 or 700), an optional standfirst paragraph, a byline strip in GuardianTextSans 14px / 400 with a comment-count chip and a timestamp, and a hairline #dcdcdc 1px border around the entire cell. The card surface itself stays pure white — the section color paints only the top rule and the section-title chip, never the body. This lets a single template carry every section without the page becoming a chromatic patchwork."
    - id: "section-colors"
      title: "Why does The Guardian use different colors for different sections?"
      answer: "The section-coded color system is inherited from the print edition's section flags. News uses ink charcoal (no chromatic accent). Sport uses navy blue #0077b6 wired as `--section-border-sport` and `--article-section-title-sport`. Culture uses warm brown #866d50 wired as `--section-border-culture`. Lifestyle uses magenta #bb3b80 wired as `--section-border-lifestyle`. Opinion uses orange-red #c74600 wired as `--article-section-title-opinion`. Each color paints only the section border, the section title, and the rich-link branding inside articles — never the card surface or the body text. The result is that a reader scanning the grid can register section identity peripherally from the 1px rule alone, without the page needing surface fills."
    - id: "radii-and-shapes"
      title: "What corner-radius scale does The Guardian use?"
      answer: "The radius scale is binary: circular plus a small pill set. 50% radius appears 51 times for circular byline avatars, share-button icons, and pulsing live-dot indicators. 100% radius appears 18 times for fully circular hit-target buttons (the masthead veggie-burger, the share button row). 40px radius appears 10 times for pill CTAs (consent-banner buttons, newsletter signup submit, callout submit). 12px radius appears 5 times for hairline-bordered chips and the comment-count badge. 36px appears twice for medium pill surfaces. There is no 4 / 6 / 8px middle tier — the scale is binary circular versus medium pill, with every editorial card surface squared at 0px to honor the print grid."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own news or editorial site?"
      answer: "Yes — the file feeds cleanly into Claude, Cursor, or any AI tool that consumes structured design tokens. The agent will reproduce The Guardian's specific moves: text-density-led editorial grid instead of a marketing hero, hairline-bordered cards with no surface fills, section-coded 1px top rules that paint only the section color and section title, two-family newspaper pairing with serif headlines and sans metadata, and the binary radius scale of circular avatars plus medium pills. The token references resolve directly — `{colors.callout-yellow}`, `{colors.masthead-navy}`, `{colors.live-red}`, plus the section-coded accents — without needing to invent values. The one move worth borrowing only if you have a long-running editorial product is the section-rule pattern; it requires a fixed taxonomy of sections that maps to a fixed set of colors."

mockups:
  - "marketing-hero"
  - "editorial-article"

colors:
  masthead-navy: "#052962"
  callout-yellow: "#ffe500"
  live-red: "#c70000"
  section-sport: "#0077b6"
  section-culture: "#866d50"
  section-lifestyle: "#bb3b80"
  section-opinion: "#c74600"
  link-blue: "#0000ee"
  ink: "#121212"
  ink-soft: "#333333"
  muted: "#707070"
  muted-soft: "#545454"
  canvas: "#ffffff"
  surface-1: "#ededed"
  surface-cream: "#e7d4b9"
  hairline: "#dcdcdc"

typography:
  headline-xl:
    fontFamily: "\"GH Guardian Headline\", \"Guardian Egyptian Web\", Georgia, serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 32.2px
    letterSpacing: 0
  headline-lg:
    fontFamily: "\"GH Guardian Headline\", \"Guardian Egyptian Web\", Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 32.2px
    letterSpacing: 0
  headline-md:
    fontFamily: "\"GH Guardian Headline\", \"Guardian Egyptian Web\", Georgia, serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 27.6px
    letterSpacing: 0
  standfirst:
    fontFamily: "\"GH Guardian Headline\", \"Guardian Egyptian Web\", Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 27.6px
    letterSpacing: 0
  headline-sm:
    fontFamily: "\"GH Guardian Headline\", \"Guardian Egyptian Web\", Georgia, serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 23px
    letterSpacing: 0
  card-headline:
    fontFamily: "\"GH Guardian Headline\", \"Guardian Egyptian Web\", Georgia, serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 19.55px
    letterSpacing: 0
  section-h2:
    fontFamily: "\"GuardianTextSans\", \"Guardian Text Sans Web\", \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 26px
    letterSpacing: 0
  body-md:
    fontFamily: "\"GuardianTextSans\", \"Guardian Text Sans Web\", \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: 0
  meta-md:
    fontFamily: "\"GuardianTextSans\", \"Guardian Text Sans Web\", \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0
  meta-sm:
    fontFamily: "\"GuardianTextSans\", \"Guardian Text Sans Web\", \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18.2px
    letterSpacing: 0
  timestamp:
    fontFamily: "\"GuardianTextSans\", \"Guardian Text Sans Web\", \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 15.6px
    letterSpacing: 0
  caption:
    fontFamily: "\"GuardianTextSans\", \"Guardian Text Sans Web\", \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15.6px
    letterSpacing: 0

rounded:
  none: "0px"
  md: "12px"
  lg: "36px"
  xl: "40px"
  half: "50%"
  full: "100%"

spacing:
  xs: "4px"
  sm: "8px"
  base: "10px"
  md: "12px"
  lg: "20px"
  xl: "24px"
  2xl: "40px"
  3xl: "98px"

components:
  masthead:
    backgroundColor: "{colors.masthead-navy}"
    textColor: "{colors.canvas}"
    typography: "{typography.meta-md}"
    rounded: "{rounded.none}"
    padding: "0px 10px"
    height: "52px"
  button-primary:
    backgroundColor: "{colors.masthead-navy}"
    textColor: "{colors.canvas}"
    typography: "{typography.meta-md}"
    rounded: "{rounded.xl}"
    padding: "8px 20px"
    height: "44px"
    border: "0"
  button-secondary:
    backgroundColor: "{colors.callout-yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.meta-md}"
    rounded: "{rounded.xl}"
    padding: "8px 20px"
    height: "44px"
    border: "0"
  top-nav:
    backgroundColor: "{colors.masthead-navy}"
    textColor: "{colors.canvas}"
    typography: "{typography.meta-md}"
    rounded: "{rounded.none}"
    padding: "0px 10px"
    height: "52px"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.section-h2}"
    padding: "0px 8px 0px 0px"
  veggie-burger:
    backgroundColor: "{colors.callout-yellow}"
    textColor: "{colors.masthead-navy}"
    rounded: "{rounded.full}"
    padding: "0"
    height: "40px"
  hero-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.headline-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.section-h2}"
    padding: "6px 0px 4px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.card-headline}"
    rounded: "{rounded.none}"
    padding: "0px 0px 12px"
    borderColor: "{colors.hairline}"
  card-section-rule:
    backgroundColor: "{colors.section-sport}"
    textColor: "{colors.canvas}"
    typography: "{typography.timestamp}"
    rounded: "{rounded.none}"
    padding: "0"
    height: "1px"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  byline-strip:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.meta-sm}"
    padding: "4px 0px 0px"
  live-tag:
    backgroundColor: "{colors.live-red}"
    textColor: "{colors.canvas}"
    typography: "{typography.timestamp}"
    rounded: "{rounded.none}"
    padding: "0px 4px"
    height: "20px"
  callout-highlight:
    backgroundColor: "{colors.callout-yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "8px 12px"
  comment-count:
    backgroundColor: transparent
    textColor: "{colors.live-red}"
    typography: "{typography.timestamp}"
    rounded: "{rounded.md}"
    padding: "0px 8px"
    borderColor: "{colors.hairline}"
  avatar:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    rounded: "{rounded.half}"
    padding: "0"
    height: "40px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "10px 12px"
    height: "44px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.masthead-navy}"
    textColor: "{colors.canvas}"
    typography: "{typography.meta-sm}"
    padding: "40px 10px"
---

## Overview

The Guardian's front page is what a newspaper looks like when it migrates to the browser without abandoning the print grid. **Density over whitespace.** The page floor is pure white. The masthead is a deep navy band carrying the lowercase italic Guardian logotype in cream and the saturated-yellow veggie-burger menu icon in the top-right corner. Where Bloomberg paints its homepage in dark chrome and The New York Times leans on a single 64px serif hero, The Guardian fills the first viewport with three to five rows of section-coded editorial cards, each rendered as a hairline-bordered cell with a 1px section-coded top rule, a small-caps section title, a serif headline at 17-28px, and a sans-serif byline / timestamp / comment-count strip beneath. The captured render shows the privacy-consent banner ("It's your choice") rendered as a navy block with two saturated-yellow pill CTAs at the top of the page.

The chromatic system is **section-coded rules**. Each section paints its own color on the 1px top border and the section title chip but never on the card surface itself. News stays ink charcoal (no chromatic accent). Sport uses navy blue `{colors.section-sport}` (#0077b6) wired as `--section-border-sport`. Culture uses warm brown `{colors.section-culture}` (#866d50). Lifestyle uses magenta `{colors.section-lifestyle}` (#bb3b80). Opinion uses orange-red `{colors.section-opinion}` (#c74600). Live blogs, breaking-news links, and the pulsing dot indicator render in saturated `{colors.live-red}` (#c70000) — distinct from the section accents and reserved for time-sensitive content. The yellow `{colors.callout-yellow}` (#ffe500) appears 38 times as background only: the masthead veggie-burger fill, callout highlights, byline backgrounds, the age-warning badge, and the consent-banner CTA pills.

Typography runs two custom families that split labor along print-newspaper lines. **GH Guardian Headline** — the Egyptian-slab serif developed in-house in 2005 with the Berliner format — carries every headline, standfirst, kicker title, and pull-quote. **GuardianTextSans** carries every byline, timestamp, comment count, live-tag chip, footer link, and metadata strip. There is no third family. The serif headlines sit at 17 / 20 / 24 / 28px in weights 500 and 700; the sans metadata sits at 12 / 14 / 15 / 17 / 20px in weights 400 and 700. The heaviest typographic moment on the page is a 28px / 700 standfirst — restrained by editorial-grid standards.

**Key Characteristics:**
- Section-coded rules — Sport navy, Culture brown, Lifestyle magenta, Opinion orange-red, News ink — paint only the 1px top border and section title chip, never the card surface.
- Two-family newspaper pairing — GH Guardian Headline serif for headlines and standfirsts, GuardianTextSans for every byline, timestamp, and chip.
- Density-led editorial grid — three to five card rows per viewport, hairline-bordered cells, no surface fills, no marketing hero.
- Three brand voltages, narrow roles — navy `{colors.masthead-navy}` (#052962) for the masthead and primary buttons, yellow `{colors.callout-yellow}` (#ffe500) for callouts and consent CTAs, live red `{colors.live-red}` (#c70000) for time-sensitive content.
- Binary radius scale — 50% / 100% for circular avatars and hit-target buttons; 12 / 36 / 40px for medium pills; every card surface squared at 0px.
- Live red used semantically — `{colors.live-red}` marks live blogs, breaking links, byline anchors, and the pulsing dot indicator; never decoratively.
- Pure-white canvas — no warm cream, no slightly-blue neutral; the only off-white surface is the surface-cream `{colors.surface-cream}` (#e7d4b9) used inside print-replica chrome.
- Default link tone `{colors.link-blue}` (#0000ee) — the browser default user-agent blue, preserved deliberately on the homepage logo anchor as a typographic honesty signal.

## Colors

### Brand

- **Masthead Navy** (`{colors.masthead-navy}` — #052962): frequency 18 — used as background (15), text (1), border (1), gradient (1). Wired as `--masthead-nav-background`, `--button-background-primary`, `--callout-submit-background`, `--newsletter-signup-submit-background`, `--staff-contributor-badge`. The deep navy that carries the masthead band, the privacy-consent block, every primary submit button, and the page meta theme color. The single load-bearing brand voltage in the system.
- **Callout Yellow** (`{colors.callout-yellow}` — #ffe500): frequency 39 — used as background (38), gradient (1). Wired as `--callout-highlight-background`, `--masthead-veggie-burger-background`, `--byline-background`, `--age-warning-background`, `--apps-epic-border`. Background only — the saturated yellow rule appears 38 times as a surface fill, never as text or border. The secondary voltage, reserved for callouts and the consent-banner CTA pills.
- **Live Red** (`{colors.live-red}` — #c70000): frequency 107 — used as text (52), border (52), background (3). Wired as `--kicker-background-live`, `--article-link-text`, `--byline-anchor`, `--branding-link-text`. The third anchor — marks live blogs, breaking-news links, byline anchors, and the pulsing dot indicator. Distinct from the section-opinion orange-red and used only for time-sensitive editorial content.

### Section Coded

- **Section Sport** (`{colors.section-sport}` — #0077b6): frequency 37 — used as text (18), border (18), background (1). Wired as `--section-border-sport`, `--article-section-title-sport`, `--uk-elections-conservative`. The 1px top rule and section title chip for Sport cards.
- **Section Culture** (`{colors.section-culture}` — #866d50): frequency 56 — used as text (28), border (28). Wired as `--section-border-culture`, `--article-section-title-culture`. The warm-brown rule for Culture cards.
- **Section Lifestyle** (`{colors.section-lifestyle}` — #bb3b80): frequency 44 — used as text (22), border (22). Wired as `--section-border-lifestyle`, `--article-section-title-lifestyle`. The magenta rule for Lifestyle cards.
- **Section Opinion** (`{colors.section-opinion}` — #c74600): frequency 18 — used as text (9), border (9). Wired as `--article-section-title-opinion`. The orange-red rule for Opinion cards. Slightly desaturated and warmer than the saturated `{colors.live-red}` — the two reds are deliberately distinct.

### Text

- **Ink** (`{colors.ink}` — #121212): frequency 5542 — used as text (2808), border (2725), background (9). Wired as `--headline-colour`, `--article-text`, `--card-headline`, `--carousel-text`, plus 60+ other text-role variables. The dominant text and border color across the entire system. Pure ink charcoal — distinct from pure black by seven luminance points.
- **Ink Soft** (`{colors.ink-soft}` — #333333): frequency 54 — used as text (27), border (27). Wired as `--section-border-primary`, `--section-border-news`, `--article-section-secondary-title`, `--branding-label-text`. The secondary running-text and News section-rule tone.
- **Muted** (`{colors.muted}` — #707070): frequency 460 — used as text (230), border (230). Wired as `--bio-text-subdued`, `--card-trail-text`, `--caption-text`, `--card-footer-text`. The dominant secondary tone — byline text, caption rows, comment-count labels, card footers.
- **Muted Soft** (`{colors.muted-soft}` — #545454): frequency 4. Wired as `--dateline`, `--live-block-datetime-text`. Reserved for the dateline and live-block timestamp tone.
- **Link Blue** (`{colors.link-blue}` — #0000ee): frequency 251 — used as text (126), border (125). The browser default user-agent blue — preserved deliberately on the homepage logo anchor and select chrome links as a typographic honesty signal. The Guardian is one of the few major publications that lets the default browser blue survive in production.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 430 — used as background (69), text (180), border (175), gradient (6). The page floor. Pure white — no warm cream, no slightly-blue neutral. The masthead navy and the saturated yellow callouts read maximally against this surface.
- **Surface-1** (`{colors.surface-1}` — #ededed): frequency 14 — used as background (14). Wired as `--code-block-background`, `--feature-card-background`, `--avatar-background`. The single off-white surface tone — used for code blocks, the avatar placeholder fill, and feature-card chrome.
- **Surface Cream** (`{colors.surface-cream}` — #e7d4b9): frequency 8 — used as text (4), border (4). A warm cream tone reserved for print-replica chrome.

### Hairline

- **Hairline** (`{colors.hairline}` — #dcdcdc): frequency 116 — used as border (79), background (13), text (21), gradient (3). Wired as `--standfirst-border`, `--article-border`, `--card-border-supporting`, `--section-border`, `--footer-border`. The dominant border tone — card outlines, section rules outside the section-coded set, footer borders. The system is essentially mono-hairline below the section accents.

## Typography

### Font Families

The system runs two licensed families that split labor along print-newspaper lines. **GH Guardian Headline** — the Egyptian-slab serif developed in-house in 2005 with the Berliner format redesign — carries every headline, standfirst, kicker title, and pull-quote. **GuardianTextSans** carries every byline, timestamp, comment count, live-tag chip, footer link, and metadata strip. Fallbacks walk `"Guardian Egyptian Web", Georgia, serif` for Headline and `"Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif` for TextSans.

The pairing is the typographic signature: a custom Egyptian-slab serif for editorial display, paired with a custom humanist sans for chrome and metadata. The same pattern carries from the print edition to the browser without losing the section-flag hierarchy.

### Hierarchy

| Token | Size | Weight | Line Height | Family | Use |
|---|---|---|---|---|---|
| `{typography.headline-xl}` | 28px | 700 | 32.2px | Headline | Lead-card headline (most prominent) |
| `{typography.headline-lg}` | 28px | 500 | 32.2px | Headline | Lead-card headline (medium emphasis) |
| `{typography.headline-md}` | 24px | 700 | 27.6px | Headline | Secondary card headline |
| `{typography.standfirst}` | 24px | 500 | 27.6px | Headline | Standfirst paragraph beneath headline |
| `{typography.headline-sm}` | 20px | 500 | 23px | Headline | Tertiary card headline |
| `{typography.card-headline}` | 17px | 500 | 19.55px | Headline | Default editorial-card headline |
| `{typography.section-h2}` | 20px | 700 | 26px | TextSans | Section h2 ("News", "Sport", "Culture", "Lifestyle", "Opinion") |
| `{typography.body-md}` | 17px | 400 | 19px | TextSans | Body link text, in-card links |
| `{typography.meta-md}` | 15px | 400 | 15px | TextSans | Card metadata, nav links |
| `{typography.meta-sm}` | 14px | 400 | 18.2px | TextSans | Byline rows, card trail text |
| `{typography.timestamp}` | 12px | 700 | 15.6px | TextSans | Timestamp pills, live-tag chips, kicker labels |
| `{typography.caption}` | 12px | 400 | 15.6px | TextSans | Footnotes, supporting metadata |

### Principles

The system uses **serif for editorial, sans for chrome**. Every story headline, standfirst, and pull-quote renders in the GH Guardian Headline serif at 17-28px in weight 500 or 700; every byline, timestamp, comment count, and section navigation label renders in GuardianTextSans at 12-20px in weights 400 and 700. The section h2 ("News", "Sport") is the one exception that uses TextSans in weight 700 at 20px — chrome rather than editorial.

The weight-500 / weight-700 split inside Headline does the work an italic tier would carry in a typical newspaper system. Weight 500 reads as the medium-emphasis headline; weight 700 as the lead-headline force. There is no Headline-Italic or Headline-Black on the captured surfaces.

### Note on Font Substitutes

GH Guardian Headline and GuardianTextSans are licensed proprietary families. The closest open-source substitutes for Headline are **PT Serif** or **Source Serif Pro** at the same weights — both carry the wedge-slab serif silhouette. For TextSans, **Source Sans Pro** or **Public Sans** transfer cleanly at weights 400 and 700. The preserved move is the serif-headline-on-pure-white treatment — substituting in a sans for the headline tier flattens the system into a generic news-site grid.

## Layout

### Spacing System

- **Base unit:** 4px — the spacing values cluster at 4 / 8 / 10 / 12 / 20 / 24 / 40px, with 10px as the dominant horizontal gutter (76 occurrences).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 12px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 40px · `{spacing.3xl}` 98px.
- **Section padding (vertical):** ~98px between major front-page bands (News / Sport / Culture / Lifestyle).
- **Card internal padding:** 0 horizontal, 0-12px vertical — cards are flush to the grid line, with the section-coded top rule sitting flush at the top edge.
- **Masthead padding:** 0 vertical, 10px horizontal — the masthead is `{spacing.base}` (10px) inside its 52px-tall band.

### Grid & Container

- **Max content width:** ~1280px on the front-page card grid; ~640px on article surfaces.
- **Front-page grid:** five-column at desktop, with lead cards spanning two or three columns and secondary cards spanning one. Section bands stack vertically with a section h2 (`{typography.section-h2}`) and a horizontal rule separating each.
- **Masthead:** 52px-tall navy band with the cream Guardian logotype flush left, primary nav links flush right, veggie-burger yellow circle in the top-right corner.
- **Card cells:** 1px section-coded top rule, section-title chip beneath, headline body, byline strip beneath, hairline `{colors.hairline}` 1px border around the entire cell.

### Rhythm

The page alternates between **dense editorial bands** rather than holding generous whitespace. The first viewport carries three to five card rows. Section bands stack with a consistent 98px vertical gutter; inside each band, cards are flush to the grid line with no margins between siblings. The result is a page that maximizes story count per viewport rather than reading hierarchy through whitespace.

## Elevation

The system has essentially **no shadow tier**. Hairline borders (`{colors.hairline}` — 1486+ occurrences across the captured surfaces) carry the elevation work that shadows would carry on a typical dashboard product. Depth comes from the 1px section-coded top rule plus the 1px hairline cell border — a print-newspaper pattern translated directly to the browser.

- **Flat (no shadow):** every editorial card, every section band, the masthead, the footer — 100% of surfaces.
- **Hairline outlines:** `{colors.hairline}` (#dcdcdc) carries every card border, every section divider, every footer rule.
- **Section-coded top rule:** 1px filled rule in the section color painted at the top of every card. The single element that distinguishes a Sport card from a Culture card visually.
- **No tonal lift:** there is no `{colors.surface-1}` card surface in the editorial grid; every card is pure `{colors.canvas}` (#ffffff) with the hairline border doing the elevation work.

## Shapes

The radius scale is **binary**: circular avatars plus a medium-pill set.

- `{rounded.none}` 0px — every editorial card surface, the masthead band, the footer band, the section-rule top border, the live-tag chip. The print-grid lineage is preserved.
- `{rounded.md}` 12px — frequency 5 — the comment-count chip, the hairline-bordered metadata pill.
- `{rounded.lg}` 36px — frequency 2 — medium pill surfaces (the share-button row).
- `{rounded.xl}` 40px — frequency 10 — the pill CTAs (consent-banner buttons, newsletter signup submit, callout submit).
- `{rounded.half}` 50% — frequency 51 — circular byline avatars, share-button icons, pulsing live-dot indicators.
- `{rounded.full}` 100% — frequency 18 — fully circular hit-target buttons (the masthead veggie-burger, the share-button icons).

There is no 4 / 6 / 8px middle tier and no rounded-but-not-pill option for cards. The scale is binary circular versus medium pill, with every editorial card surface squared at 0px to honor the print grid.

## Components

**`masthead`** — Navy `{colors.masthead-navy}` (#052962) fill, cream `{colors.canvas}` text in the lowercase italic Guardian logotype, 52px height, 10px horizontal padding. Holds the Guardian logotype flush left, the primary nav links flush right, and the saturated-yellow veggie-burger circle in the top-right corner.

**`top-nav`** — Same surface as the masthead but a 1px `{colors.muted-soft}` hairline rule separates it from the editorial grid below. Houses the section navigation (News / Sport / Culture / Lifestyle / Opinion).

**`nav-link`** — Cream text in `{typography.section-h2}` (20px / 700) — the section navigation labels. Capitalized, no underline, hover state flips text to `{colors.callout-yellow}`.

**`veggie-burger`** — Saturated `{colors.callout-yellow}` (#ffe500) fill, navy `{colors.masthead-navy}` icon strokes, `{rounded.full}` 100% radius, 40px diameter. The fully circular hit target in the top-right corner of the masthead. The single warmest element in the entire chrome — a brand affordance that signals the section menu.

**`button-primary`** — Navy `{colors.masthead-navy}` fill, cream `{colors.canvas}` text in `{typography.meta-md}`, `{rounded.xl}` 40px pill radius, 8 / 20px padding, 44px height. The primary submit CTA — used for newsletter signups, callout submits, and consent-banner accept buttons.

**`button-secondary`** — Saturated `{colors.callout-yellow}` (#ffe500) fill, ink `{colors.ink}` text, same pill geometry as primary. The consent-banner "It's your choice" CTAs render here — the yellow pill on navy block.

**`hero-heading`** — Ink `{colors.ink}` text in `{typography.headline-xl}` (28px / 700 / GH Guardian Headline serif). The largest typographic moment on the front page — the lead-card headline.

**`section-heading`** — Ink text in `{typography.section-h2}` (20px / 700 / GuardianTextSans). The "News", "Sport", "Culture", "Lifestyle", "Opinion" section titles that anchor each band. Padding 6 / 0 / 4px.

**`card`** — Pure white `{colors.canvas}` surface, 1px `{colors.hairline}` border, 0 radius, 0-12px padding. The default editorial card — holds a section-coded top rule, a section-title chip, a serif headline, an optional standfirst paragraph, and a byline strip. The card surface itself stays white regardless of section.

**`card-section-rule`** — A 1px filled rule painted in the section color (navy for Sport, brown for Culture, magenta for Lifestyle, orange-red for Opinion) at the top edge of every card. The single visual marker that differentiates section cards on the front page.

**`byline-strip`** — Muted `{colors.muted}` (#707070) text in `{typography.meta-sm}` (14px / 400). 4px top padding. Holds the byline name, the timestamp, and the comment-count chip beneath the card headline.

**`live-tag`** — Saturated `{colors.live-red}` (#c70000) fill, cream text in `{typography.timestamp}` (12px / 700), 0 radius, 0 / 4px padding, 20px height. The "Live" chip that marks live-blog cards — squared at 0px to read as a stamped print tag rather than a SaaS badge.

**`callout-highlight`** — Saturated `{colors.callout-yellow}` (#ffe500) fill, ink text, 0 radius, 8 / 12px padding. The yellow highlight rule used inside callout sections and timeline atoms.

**`comment-count`** — Transparent fill, live-red `{colors.live-red}` text in `{typography.timestamp}`, `{rounded.md}` 12px hairline-bordered chip. The single rounded chip inside the byline strip — sits flush right.

**`avatar`** — Surface-1 `{colors.surface-1}` (#ededed) placeholder fill, `{rounded.half}` 50% radius, 40px diameter. The byline avatar that sits to the left of the contributor name.

**`text-input`** — Pure white surface, ink text in `{typography.body-md}`, 1px hairline border, `{rounded.md}` 12px radius, 10 / 12px padding, 44px height. Used in newsletter signup forms and search chrome.

**`footer`** — Navy `{colors.masthead-navy}` (#052962) fill, cream text in `{typography.meta-sm}`, 40 / 10px padding. The footer band continues the masthead navy and houses the corporate / legal links, the trending topics, and the supporter ask.

## Do's and Don'ts

**Do** paint section color only on the 1px top rule and the section-title chip. The single move that defines this system is the discipline of letting the card surface stay white while the section-coded rule does the categorical work. Painting the section color across the entire card surface destroys the print-grid lineage and turns the page into a SaaS dashboard.

**Do** use `{colors.live-red}` (#c70000) only for time-sensitive content — live blogs, breaking-news links, byline anchors, the pulsing dot indicator. Reusing live red for decorative chrome dilutes its semantic role and weakens reader trust in the badge.

**Do** keep the editorial card surface squared at 0px. The print-newspaper lineage is preserved by the right-angle card geometry; a 4 / 8 / 12px softened corner would turn the editorial grid into a generic content-feed.

**Do** let the serif carry every headline and the sans carry every byline. The two-family split is the typographic signature; reaching for the sans family on a headline (or the serif on a timestamp) breaks the print-versus-chrome discipline.

**Don't** use the saturated `{colors.callout-yellow}` (#ffe500) for text or for body surface fills. The token is a background-only rule (38 of 39 occurrences are background fills) — putting yellow on text or on a content surface destroys the masthead-veggie-burger and consent-banner CTA recognition.

**Don't** mix the `{colors.live-red}` (#c70000) and the `{colors.section-opinion}` (#c74600) in the same composition. The two reds are deliberately distinct — live red is saturated and time-sensitive; opinion orange-red is warmer and editorial — and placing them adjacent reads as a system fault.

**Don't** add drop shadows to the editorial cards. The system carries zero card shadows on the captured surfaces; depth comes from the 1px hairline border plus the section-coded top rule. A rendered shadow on top of the hairline border would read as a SaaS dashboard layer and break the print-grid lineage.

**Don't** introduce a small rounded chip tier (4 / 6 / 8px) for metadata. The system uses 12px and 40px pills only; adding a tight chip tier softens the card geometry and competes with the hairline-bordered comment-count chip that anchors the byline strip.

## Known Gaps

- **Article-page chrome:** the captured surface is the front-page card grid plus the privacy-consent banner. Article pages carry a richer set of tokens — pull-quotes, in-article rich links, embedded interactive atoms, comment trees — that are not represented here.
- **Hover and focus states:** documented for none of the captured components. The full state matrix (focus rings, active press, hover tints) lives in the article and discussion surfaces and is not exposed on the front page.
- **Dark mode:** the captured surfaces are light-only. A dark variant exists in the Guardian mobile app's reader mode and in the website's user-toggled dark setting but is not represented in the captured CSS variables.
- **Motion:** live-blog cards carry a pulsing dot animation on the live-red dot indicator; the spec captures end-state values only. Easing curves and pulse rate live in the live-block runtime.
- **Section-coded accents beyond five:** the CSS exposes additional section colors for World, Business, Tech, and the secondary "more" navigation strip; these were not rendered prominently on the captured front page and are not declared as primary tokens.
- **Football / cricket scoreboard chrome:** the discussion surfaces carry a dedicated set of match-result tokens (`--football-match-header-*`, `--cricket-scorecard-*`) that constitute a sub-system not captured here.
- **Quiz and timeline atoms:** the captured surfaces include the callout highlight tone but do not exercise the full set of quiz / timeline / explainer atoms that carry their own border, fill, and typography tokens.