The Guardian Design System

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.