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.
Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.
Set up MCPAbout
Curated by Dov Azencot · Updated May 18, 2026 · Source theguardian.com (opens in a new tab)
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.
5
theguardian.com
A snapshot of the brand in production. Scroll the frame to see the whole page.
Colors
The Guardian's system runs on #052962 as its primary voltage, used in 5 of 18 components. Type is set in GH Guardian Headline across 12 tokens from 12px to 28px, weights 400–700. Shape language is mixed across 18 components, blending pills, soft rounds, and squarer corners.
Page and card backgrounds · 3
Headlines, body, captions · 9
Dividers, outlines, rules · 1
Specialty colors · 3
Typography
Set in GH Guardian Headline across 12 tokens, from 12px to 28px, weights 400–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
Layout
6 corner radii and 8 spacing values. Shape language: mixed.
Components
Each rendered from its tokens (color, type, radius, padding) on The Guardian's own canvas.
In use
The Guardian's tokens on the kind of product it builds.
Build something people actually use.
A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.
The quiet collapse of an old idea
For decades the consensus held that the system would correct itself. Then it didn't. This is the inside story of what changed, told by the people who watched it unravel.
"Nobody noticed because the failure was indistinguishable from progress."
By Sam Reporter · Updated 2 hours ago
FAQ
Common questions about The Guardian's tokens, components, and how to use this DESIGN.md in your project.
Read next
Specs, directories, and component libraries that pair with this design system.
Use it
One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of The Guardian.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match The Guardian's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
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:
{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.{colors.live-red} marks live blogs, breaking links, byline anchors, and the pulsing dot indicator; never decoratively.{colors.surface-cream} (#e7d4b9) used inside print-replica chrome.{colors.link-blue} (#0000ee) — the browser default user-agent blue, preserved deliberately on the homepage logo anchor as a typographic honesty signal.{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.{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.{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.{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.{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.{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.{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.{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.{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.{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.{colors.muted-soft} — #545454): frequency 4. Wired as --dateline, --live-block-datetime-text. Reserved for the dateline and live-block timestamp tone.{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.{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.{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.{colors.surface-cream} — #e7d4b9): frequency 8 — used as text (4), border (4). A warm cream tone reserved for print-replica chrome.{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.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.
| 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 |
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.
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.
{spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 10px · {spacing.md} 12px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 40px · {spacing.3xl} 98px.{spacing.base} (10px) inside its 52px-tall band.{typography.section-h2}) and a horizontal rule separating each.{colors.hairline} 1px border around the entire cell.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.
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.
{colors.hairline} (#dcdcdc) carries every card border, every section divider, every footer rule.{colors.surface-1} card surface in the editorial grid; every card is pure {colors.canvas} (#ffffff) with the hairline border doing the elevation work.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.
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 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.
--football-match-header-*, --cricket-scorecard-*) that constitute a sub-system not captured here.News & Publishing
More DESIGN.md files in News & Publishing.
Pricing
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.