--- version: alpha name: "The Guardian" description: "The Guardian runs the most distinctive editorial system in British news: a paper canvas anchored on Guardian navy `#052962` for the masthead, brand bands, and section identity, paired with Guardian Egyptian — the in-house slab serif designed by Commercial Type — for headlines and body. The signature breaking-news red `#c70000` and a sun-yellow `#ffe500` carry section identity (Opinion uses a buff cream `#f6f6f6`, the Long Read carries cream `#fff4e2`, Sport runs blue, Culture runs pink). Section colors are a load-bearing brand signal — every article carries its section's color band as the kicker rule. Headlines run in tracked Guardian Egyptian Headline at modest weights; body in Guardian Text Egyptian. The result is the canonical British broadsheet rendered for the screen — sober, ruled, color-coded by section, navy-and-red." colors: bg: "#ffffff" bg-section-news: "#ffffff" bg-section-opinion: "#f6f6f6" bg-section-longread: "#fff4e2" bg-section-sport: "#fff4f2" bg-section-culture: "#fdf0e9" bg-section-lifestyle: "#fbeee7" bg-dark: "#1a1a1a" surface: "#ffffff" surface-soft: "#f6f6f6" surface-strong: "#dcdcdc" surface-quote: "#fff4e2" text: "#121212" text-strong: "#000000" text-muted: "#707070" text-soft: "#999999" text-faint: "#bbbbbb" brand: "#052962" brand-light: "#0c4ea0" brand-dark: "#041c46" brand-red: "#c70000" brand-red-hover: "#a30000" brand-yellow: "#ffe500" brand-orange: "#ff7f0f" brand-pink: "#ed145b" brand-blue-sport: "#0084c6" brand-green-environment: "#509e2f" brand-purple-lifestyle: "#7d0068" link: "#052962" link-hover: "#0c4ea0" link-visited: "#5a5a5a" on-brand: "#ffffff" on-brand-yellow: "#121212" on-brand-red: "#ffffff" border: "#dcdcdc" border-soft: "#ebebeb" border-strong: "#999999" border-rule: "#052962" shadow-card: "rgba(0,0,0,0.04)" shadow-elev: "rgba(0,0,0,0.08)" shadow-modal: "rgba(0,0,0,0.18)" scrim: "rgba(0,0,0,0.5)" success: "#1a7f37" success-soft: "#e3f2e7" warning: "#ff7f0f" warning-soft: "#fff0db" danger: "#c70000" danger-soft: "#fde2e2" info: "#052962" info-soft: "#e3eaf2" live-red: "#c70000" live-pulse: "#ff3333" pillar-news: "#bb3a3c" pillar-opinion: "#e05e00" pillar-sport: "#0084c6" pillar-culture: "#ab0613" pillar-lifestyle: "#bb3b80" typography: display: fontFamily: "GuardianEgyp" fontSize: "72px" lineHeight: 1.5 letterSpacing: "-0.025em" body: fontFamily: "GuardianTextEgyptian" fontSize: "17px" lineHeight: 1.5 mono: fontFamily: "Courier New" rounded: button: "9999px" card: "14px" pill: "9999px" spacing: xs: "2px" sm: "4px" md: "12px" lg: "24px" xl: "40px" --- ## Overview ## Overview The Guardian's web canvas is the most **structurally explicit** editorial system in major news design. Where the New York Times and Washington Post hide their grid behind ink and hairlines, the Guardian *shows* its grid: the navy `#052962` masthead band sits over a `#ffffff` body, pillar tabs (News / Opinion / Sport / Culture / Lifestyle) carry color-coded underlines (each pillar has its own 4px accent stripe), and section cards are bound by section-pillar-colored top rules that telegraph "you are reading Sport" or "you are reading Opinion" at first glance. The signature display face is **Guardian Egyptian Headline** — a slab serif designed by Christian Schwartz and Paul Barnes at Commercial Type for the Guardian's 2005 redesign. The slab serif is the brand's most distinctive typographic signal — it gives headlines a printed-broadsheet weight while reading distinctly different from Bodoni, Cheltenham, or Imperial. Body uses **Guardian Text Egyptian** (a slightly-warmer body cut), and meta uses **Guardian Text Sans** for bylines, captions, and section labels. The color logic is a **pillar system**: News carries red `#bb3a3c`, Opinion carries orange `#e05e00`, Sport runs blue `#0084c6`, Culture goes pink `#ed145b`, Lifestyle hits magenta `#bb3b80`. Each pillar is a load-bearing brand signal — the section nav underline switches color, the section card top rule switches color, the kicker label color-codes the section. The Guardian is the only major news brand that lets section identity drive multiple chromatic accents. Two voltage moments anchor the brand: the **navy** (`#052962`) carries the masthead, the support-us band, the navy CTA pills; the **breaking-news red** (`#c70000`) carries LIVE chips, alert banners, and election-night urgency. The **sun-yellow** `#ffe500` is the most distinctive of all — it carries the "Support the Guardian" CTA pill, the most successful donation-driven CTA in news media, and pairs ink-on-yellow at near-AAA contrast. **Key Characteristics:** - Paper-white canvas (`#ffffff`) with Guardian navy (`#052962`) masthead band and section nav - Custom Guardian Egyptian slab serif for headlines + Guardian Text Sans for meta — slab is the brand - Pillar color-coding system: News red / Opinion orange / Sport blue / Culture pink / Lifestyle magenta - 4px section-pillar top rule on cards — load-bearing color signal - Signature sun-yellow (`#ffe500`) "Support the Guardian" pill — the canonical donation CTA - Pill-shaped primary CTAs (9999px radius) — distinct from NYT/WaPo's square corners - Single signal red (`#c70000`) for LIVE chips and alerts - 1px `#dcdcdc` hairlines between river stories - Italic Guardian Egyptian 28px pull-quote between two navy rules - 1300px maximum content width — wider than NYT/WaPo's 1200px (Guardian runs more horizontal) - Open-source body fallback: Source Serif Pro at 400 + Inter at 700 for sans ## Colors ### Primary - **Canvas** (`#ffffff`): paper field across most pages. Section sub-bands (Opinion buff, Long Read cream, Culture tint) introduce warmth. - **Ink** (`#121212`): dominant text. Slightly softened from absolute black — matches NYT discipline. - **Guardian Navy** (`#052962`): brand color #1. The masthead band, the support-us band, the navy CTA pills, inline links. Not a generic navy — it's the Guardian's specific deep blue, calibrated since 2005. ### Brand & Pillar Colors - **Brand Navy** (`#052962`) — masthead, primary CTA pills, link color - **Brand Light** (`#0c4ea0`) — interactive hover state - **Brand Dark** (`#041c46`) — pressed state - **News Pillar** (`#bb3a3c`) — News section accent (top rule, kicker) - **Opinion Pillar** (`#e05e00`) — Opinion section accent - **Sport Pillar** (`#0084c6`) — Sport section accent - **Culture Pillar** (`#ab0613`) — Culture section accent (deeper red than the news red) - **Lifestyle Pillar** (`#bb3b80`) — Lifestyle section accent - **Environment Pillar** (`#509e2f`) — Environment section accent (sometimes used) ### Accent - **Breaking-News Red** (`#c70000`) — LIVE chips, alert bars, election overlay. Distinct from News-pillar red (`#bb3a3c`); breaking red is brighter, more arterial. - **Sun Yellow** (`#ffe500`) — the "Support the Guardian" pill, the donation banner, Opinion section ground. The most chromatically loud element on the brand. - **Long Read Orange** (`#ff7f0f`) — Long Read section badge. - **Long Read Cream** (`#fff4e2`) — Long Read body ground. ### Interactive - **Default Link** (`#052962` text + underline-on-hover) — the navy itself is the link color - **Active CTA** (`#052962` pill / `#ffe500` support-us pill) - **Disabled** (`#bbbbbb` text on `#dcdcdc` surface) - **Selected** (saved-article chip with navy fill + white text) ### Neutral Scale - **Ink** (`#121212`) — headlines, body - **Muted** (`#707070`) — bylines, datelines - **Soft** (`#999999`) — captions, secondary meta - **Faint** (`#bbbbbb`) — disabled - **Hairline** (`#dcdcdc`) — universal rule color ### Surface & Borders - **Canvas** (`#ffffff`) - **Surface Soft** (`#f6f6f6`) — Opinion buff ground, sidebar, disabled fill - **Surface Strong** (`#dcdcdc`) — heavy disabled fill - **Surface Quote** (`#fff4e2`) — Long Read ground, paper-cream pull-quote backdrop - **Section Tints** — Opinion `#f6f6f6`, Long Read `#fff4e2`, Sport `#fff4f2`, Culture `#fdf0e9`, Lifestyle `#fbeee7` - **Hairline** (`#dcdcdc`) — default 1px rule - **Border Strong** (`#999999`) — form input border - **Border Rule** (`#052962`) — navy section rule (1.5px) ### Shadow Colors The Guardian uses neutral-gray shadows on chrome, never on editorial cards. - `rgba(0,0,0,0.04) 0 2px 4px` — dropdown - `rgba(0,0,0,0.08) 0 6px 16px` — overlay - `rgba(0,0,0,0.18) 0 12px 32px` — modal lift ### Semantic - **Success** (`#1a7f37` on `#e3f2e7`) — subscription confirmed - **Warning** (`#ff7f0f` on `#fff0db`) — paywall warning, advisory banner (Long Read orange does double duty) - **Danger** (`#c70000` on `#fde2e2`) — form errors share breaking-news red - **Info** (`#052962` on `#e3eaf2`) — informational shares the navy ## Typography ### Font Family **Display**: `Guardian Egyptian Headline` — Christian Schwartz & Paul Barnes, Commercial Type, commissioned for the Guardian's 2005 redesign. A slab serif with stronger contrast than Cheltenham or Imperial; available in 400, 500, 600, 700, 800, 900. Fallback: `Georgia, "Times New Roman", serif`. **Body Serif**: `Guardian Text Egyptian` — the body cut of the same family, slightly-warmer x-height, available in 400, 500, 700. **Sans / Meta**: `Guardian Text Sans` — paired sans for bylines, captions, section labels, button labels, navigation. Available in 400, 500, 700. Fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`. **Mono**: System mono for code-adjacent moments (rare). Fallback: `Menlo, Consolas, "Courier New", monospace`. **OpenType features**: Guardian Egyptian uses standard ligatures and tightly-tuned kerning at display sizes. Body uses default lining figures (the Guardian breaks NYT discipline here — body uses lining, not old-style). ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | masthead-wordmark | Guardian Egyp | 60 | 900 | 1.0 | -0.01em | liga, kern | "The Guardian" wordmark | | headline-mega | Guardian Egyp | 50 | 700 | 1.05 | -0.01em | — | Election night, breaking-mega | | headline-jumbo | Guardian Egyp | 40 | 700 | 1.07 | -0.005em | — | Top-of-fold lead | | headline-xl | Guardian Egyp | 32 | 700 | 1.1 | 0 | — | Above-fold secondary | | headline-lg | Guardian Egyp | 26 | 700 | 1.13 | 0 | — | River lead | | headline-md | Guardian Egyp | 22 | 700 | 1.18 | 0 | — | River sub | | headline-sm | Guardian Egyp | 18 | 700 | 1.22 | 0 | — | Compact module | | deck | Guardian Egyp | 17 | 400 | 1.4 | 0 | — | Sub-headline / standfirst (not italicized — distinct from NYT/WaPo) | | body-md | Guardian Text Egyp | 17 | 400 | 1.5 | 0 | — | Default running text — slab serif | | body-sm | Guardian Text Egyp | 15 | 400 | 1.5 | 0 | — | Compact card body | | pull-quote | Guardian Egyp (italic) | 28 | 400 | 1.3 | 0 | — | Italic slab between two navy rules | | byline | Guardian Sans | 14 | 700 | 1.3 | 0 | — | "Maggie Haberman in Washington" — sans, weight 700 | | dateline | Guardian Sans | 13 | 400 | 1.3 | 0 | — | "Tue 5 Nov 2024 11.42 GMT" | | section-label | Guardian Sans | 13 | 700 | 1.0 | 0 | — | "Politics" / "World" / "Opinion" — title case (lowercase tradition) | | caption | Guardian Sans | 13 | 400 | 1.4 | 0 | — | Photo / video caption | | photo-credit | Guardian Sans | 11 | 400 | 1.3 | 0 | — | "Photograph: Carl Court/Getty Images" | | micro-meta | Guardian Sans | 12 | 500 | 1.2 | 0 | — | "5 min read" / "Live" | | button-label | Guardian Sans | 16 | 700 | 1.0 | 0 | — | "Sign in" / "Support us" | | nav-link | Guardian Sans | 16 | 700 | 1.0 | 0 | — | Top utility nav | | pillar-tab | Guardian Sans | 17 | 700 | 1.0 | 0 | — | Pillar tabs (News, Opinion, Sport, Culture, Lifestyle) | | live-badge | Guardian Sans | 11 | 700 | 1.0 | 0.06em | uppercase | "LIVE" red chip | ### Principles - **Slab serif is the headline voice.** Guardian Egyptian's slab terminals give headlines more visual weight than Cheltenham or Bodoni — the brand's signature typographic move. - **Sentence case (not uppercase) on pillar tabs.** "Opinion" / "Sport" / "Culture" — title case, never uppercase. The Guardian rejects all-caps section labels (NYT and WaPo use uppercase tracked); the Guardian uses sentence case at sans-serif weight 700 for visual quietness. - **Sans for meta, slab for body.** The pairing of slab body with sans meta is the Guardian's distinctive duet — neither all-serif (NYT) nor sans-body (WaPo). - **Lining figures in body** — the Guardian breaks the NYT old-style figures convention. Numbers ($1,247) sit on the baseline at consistent height. This matches Sport's data tables (match scores, lap times) without OpenType-feature switching. - **Negative tracking only on display 32px+** — body sits at 0; meta sits at 0. - **Italic slab pull-quote** — the 28px italic Guardian Egyptian between two navy rules has a slabbed flavor distinct from NYT's Cheltenham (more humanist) and WaPo's Postoni (more contrasted Bodoni). - **620px reading column** — same as the Washington Post; slightly wider than the NYT. - **Source Serif Pro is the closest open-source slab fallback** — adjusted for slightly less slab than Guardian Egyptian. Inter / Helvetica for sans. ## Layout ### Spacing System - Base unit: **4px** - Scale: `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 120` - Section padding: 64px between major bands - Card internal: 16px between image and headline; 8px between headline and deck ### Grid & Container - Max content width: **1300px** centered (wider than NYT/WaPo's 1200) on a 12-column grid - Reading column: **620px** - Feature container: **1024px** for above-fold image+headline - Footer: 5-column link list at desktop ### Whitespace Philosophy The Guardian runs **structurally explicit** rather than dense — the pillar bands and 4px section rules visually segment the page into chapters. River cards stack with 16px gutters and 1px hairlines, but the eye is drawn first to the pillar color stripes that group cards by section. The reading column at 620px gives generous body whitespace. ### Section Cadence - News pillar: white ground, news-red kicker rules - Opinion: yellow ground (`#ffe500`) on featured columns; otherwise white with orange kicker - Sport: white ground, sport-blue kicker rule - Culture: cream tint (`#fdf0e9`) sub-band - Lifestyle: cream tint (`#fbeee7`) sub-band - Long Read: paper-cream ground (`#fff4e2`) - Election / breaking: full-bleed red alert above the masthead ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <660px | Top masthead collapses to logo + hamburger + Support; pillar tabs hide behind hamburger; river cards 1-up | | Tablet | 660–980px | Pillar tabs as horizontal scroller; river cards 2-up | | Desktop | 980–1300px | Full pillar nav; river cards 3-up; sidebar appears on article pages | | Wide | >1300px | Content caps at 1300px; gutters absorb the rest | ### Touch Targets - Primary CTAs (pill): 44×44px - Pillar tabs: 56px tall touch area (taller than NYT/WaPo nav targets) - Save-article chip: 36×36px - Live-update entries: 48px tap area ### Collapsing Strategy - Pillar tabs collapse to scroller, then hamburger - Support-us pill stays visible at all breakpoints — the brand's monetization CTA - River cards drop column count: 4 → 3 → 2 → 1 - Sidebar collapses below article body on tablet ### Image Behavior - River images: `aspect-ratio: 5/3` desktop, `4/3` mobile (the Guardian's slightly more landscape ratio) - Hero images: full-bleed up to 1024px - Photo essays: scroll-snap on touch ### Container Queries The right-rail "Most viewed" list compresses headlines to single-line truncate when narrow. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow | Article body, hero, section bands | | 1 — Hairline | 1px `#dcdcdc` rule | River cards, table rows | | 2 — Pillar Stripe | 4px pillar-color rule | Section card top, active pillar tab underline | | 3 — Section Rule | 1.5px navy rule | Section break | | 4 — Dropdown | `rgba(0,0,0,0.04) 0 2px 4px` | Account menu | | 5 — Overlay | `rgba(0,0,0,0.08) 0 6px 16px` | Search overlay | | 6 — Modal | `rgba(0,0,0,0.18) 0 12px 32px` | Support-us modal | ### Shadow Philosophy The Guardian carries the most diverse rule-tier system of the major news brands: 1px hairline + 1.5px navy section rule + **4px pillar stripe**. The pillar stripe is unique — it's color-coded depth, telegraphing section identity through hue rather than weight. Shadows are reserved for chrome (dropdowns, modals); editorial surfaces stay flat-with-rules. ## Shapes | Tier | Value | Use | |------|-------|-----| | None | 0px | Cards, photos, alerts, sections — the editorial body | | Small | 4px | Live badge, micro-tags, text input | | Pill | 9999px | All primary CTAs (navy pill, yellow Support pill, secondary outline) — the Guardian's signature | **The Guardian's distinctive shape choice**: primary CTAs are *pills*, not squares like NYT/WaPo. The 9999px-radius button is part of the brand. This is one of the strongest divergences between the Guardian and its American broadsheet peers — the Guardian shipped pill-shaped CTAs in its 2018 redesign and they have only intensified since. ## Components ### Buttons **`button-primary`** — Guardian navy fill (`#052962`), white text, **9999px radius (pill)**, 12×22px padding, 44px height, 16px / 700 sans label. The pill is the Guardian's canonical CTA shape. "Sign in", "Continue", "Save". **`button-support`** — Sun-yellow fill (`#ffe500`), ink text (`#121212`), 9999px pill. The "Support the Guardian" donation CTA — the brand's most-clicked monetization element. **`button-secondary`** — White fill, navy text, 1px navy border, 9999px pill. "Already a subscriber". **`button-text-link`** — Plain navy text (`#052962`), no surface, no border. Underlined. ### Live & Alert **`live-badge`** — Breaking-news red fill (`#c70000`), white text, 4px radius (small but not pill), 2×6px padding, 11px / 700 sans uppercase tracked 0.06em. White pulsing dot to its left. **`alert-banner`** — Full-bleed red bar (`#c70000`) at top of page, 10px vertical padding, white sans 14/700 text + a "Live updates →" link. ### Cards **`card-headline`** — White surface, 0px radius, top 1px hairline (`#dcdcdc`), no shadow. Image above (16:9), Guardian Egyptian 22/700 headline, 17/400 deck (not italic — Guardian breaks this convention), Guardian Sans 14/700 byline. **`card-section-kicker`** — Same structure but with a **4px top rule in the section's pillar color**. The pillar color carries the section identity — a Sport card has a 4px `#0084c6` blue top rule, an Opinion card has a 4px `#e05e00` orange rule. This is the most identifying card pattern on the Guardian. **`card-opinion`** — Sun-yellow ground (`#ffe500`) with ink text. Italic deck under the columnist photo. The yellow Opinion card is the brand's most chromatically loud editorial card — used to telegraph "this is opinion, not reporting". **`card-longread`** — Paper-cream ground (`#fff4e2`) with serif body. Long Read identifier in 11/400 orange. **`card-newsletter-promo`** — Navy ground (`#052962`), white headline, sun-yellow Subscribe pill. ### Pull-Quote **`pull-quote`** — Italic Guardian Egyptian 28px / 1.3, between two 1px navy (`#052962`) rules at 24px vertical padding. The slab italic gives the pull-quote a different visual flavor than NYT's Cheltenham or WaPo's Postoni. ### Inputs / Forms **`text-input`** — White fill, 1px `#999999` border, 4px radius, 44px height, 12×14px padding. On focus, border thickens to 2px navy. **`paywall-cta`** / **support-us-card** — Navy ground (`#052962`), white headline, white sub-copy, sun-yellow pill CTA. The Guardian's paywall is unusual: it's not a hard paywall but a "support us" pitch that asks rather than blocks. ### Navigation **`top-masthead`** — Navy band (`#052962`) full-width, ~56px height. White Guardian wordmark left, navy support-us yellow pill right. Below: a row of pillar tabs. **`nav-pillar-tab`** — Sits on the navy band. White text, sentence case ("Opinion" / "Sport"). Each tab carries a 4px bottom border in the pillar's color. Active tab: bottom border thickens to 6px. **`section-subnav`** — White surface, 1px bottom hairline. Section-specific sub-links (e.g., under News: UK / World / Climate / Politics / Business) in navy text. ### Decorative **`section-rule`** — 1.5px navy rule. **`pillar-stripe`** — 4px pillar-color stripe — appears at the top of every section card and beneath the active pillar tab. **`hairline-rule`** — 1px `#dcdcdc` between river stories. ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry - **Out-soft**: `cubic-bezier(0.0, 0, 0.2, 1)` — image carousel ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 100ms | Color swaps, hairline thickening | | Standard | 200ms | Card hover, pillar-tab underline thickening | | Slow | 320ms | Modal enter, alert-banner slide | | Pulse | 1.6s | Live-dot continuous pulse | ### Per-Component Recipes - **Card hover**: image scales 1.0 → 1.02; headline gains underline; 200ms standard. - **Pillar-tab hover**: bottom-border thickens 4px → 6px over 200ms standard. - **Live-dot pulse**: opacity 1 → 0.4 → 1, scale 1 → 1.15 → 1, 1.6s ease-in-out infinite. - **Support-us pill hover**: yellow brightens slightly, scale 1.0 → 1.02 over 200ms (the only CTA with a scale hover — the support pill is the brand's most-tested CTA). - **Alert-banner enter**: translateY(-8px → 0) + opacity(0 → 1) over 240ms emphasized. ### Page Transitions 200ms cross-fade between pages. ### Reduced Motion Live-dot becomes static; pillar-tab underline-thickening becomes instant; support-pill hover scale suppressed. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #121212 ink on #ffffff canvas | 17.4 | AAA | | #ffffff on #052962 navy | 14.0 | AAA | | #ffffff on #c70000 breaking-red | 5.9 | AA / AAA large | | #121212 on #ffe500 sun-yellow | 17.0 | AAA | | #707070 muted on #ffffff | 4.9 | AA | | #052962 link on #ffffff | 14.0 | AAA | | #121212 on #fff4e2 long-read-cream | 16.5 | AAA | | #121212 on #f6f6f6 opinion-buff | 16.6 | AAA | ### Focus Indicators Focus ring: `2px solid #052962` (navy) with 2px outline-offset. Brand navy doubles as link color, so focus ring matches the editorial link discipline. Red is reserved for live content. ### ARIA Patterns - **Live blogs**: `role="region"` with `aria-live="polite"` on the live-update body. LIVE chip carries `aria-label="Live coverage in progress"`. - **Pillar nav**: `