Design System Inspiration of The Guardian

1. Visual Theme & Atmosphere

The Guardian is a British news organisation. Its current look dates from January 2018, when the paper left the Berliner format it had used since 2005 for a tabloid, and redesigned print and digital together. As its executive creative director Alex Breuer told Creative Review, the in-house team replaced the old masthead with a new one set in black Guardian Headline; It's Nice That reported the redesign under the headline "The Guardian unveils redesign across print and online".

The type is its own. Source, the Guardian's design system, says plainly that "The Guardian has four bespoke typefaces" — Guardian Headline, Guardian Text Egyptian, Guardian Text Sans and Guardian Titlepiece — and the Guardian's font repository states they are owned by Commercial Type and licensed only for Guardian websites and apps.

On the page: a deep navy #052962 masthead over a lighter white page, black-ish ink #121212, links and branding in a strong red #c70000, and a yellow #ffe500 used for highlights — star ratings, the menu's close button, bylines. Each news pillar carries its own colour: news in greys, opinion orange #c74600, sport blue #0077b6, culture brown #866d50, lifestyle pink #bb3b80.

What makes it worth reading:

• Tokens per component, not per palette. About 560 custom properties, each a component and a colour role: --masthead-nav-background, --article-link-text, --football-match-*.
• Pillars are colour. A reader knows the section before reading its name.
• One focus ring everywhere — 3px of brand blue, drawn as a box-shadow.

Primary tasks

• Read the day's stories; move between pillars and sections.
• Sign in; subscribe or support; search.

2. Color Palette & Roles

Measured with getComputedStyle on theguardian.com/uk: 557 custom properties on the root, about 560 across all stylesheets, in 238 prefixes. Every one is the Guardian's own — a check against framework, consent-manager and analytics signatures found none. The frontend declares every component's palette on every page, so --football-match-* and --cricket-scorecard-* are present even where nothing football or cricket renders; the count belongs to the frontend, not to this page.

Brand — navy to pale blue

Source's core palette, matched on the live page:

• Primary (#052962) — brand.400, --masthead-nav-background. The masthead.
• Brand Dark (#041f4a) — brand.300, --masthead-top-bar-background.
• Brand Deepest (#001536) — brand.100.
• Brand Bright (#0077b6) — brand.500. The focus ring on every measured control, and also the sport pillar colour.
• Brand Muted (#506991) — brand.600 · Brand Pale (#c1d8fc) — brand.800.

Red and yellow

• Link (#c70000) — --article-link-text and --branding-link-text (53 text elements). The article-link hover token is the same red — links do not change colour on hover.
• Highlight (#ffe500) — the most-painted non-neutral background (54): star ratings, the menu's close button, bylines, live football headers, age warnings, carousel arrows on hover. One colour, twelve tokens. --masthead-nav-link-text-hover also names it, but hovering a masthead link changed nothing on the measured page.

Ink and neutrals

• Foreground (#121212) — --article-text and --headline-colour. 4,554 text elements; one ink for headline and body.
• Text Secondary (#707070) — 416 elements.
• News Border (#333333) — the news pillar's rule colour.
• Canvas (#ffffff) · Surface (#f6f6f6, 35) · Surface Muted (#ededed, 20) · Line (#dcdcdc) · Line Strong (#bababa, the most common border).

Pillars

From --article-section-title-* and --section-border-*. Sport also has a darker competition tone, Sport Deep #005689 (--sport-competition-text).

3. Typography Rules

Font family

Loaded on the page (document.fonts): GH Guardian Headline 500 and 700 and GuardianTextSans 400 and 700, self-hosted on assets.guim.co.uk. Headlines compute "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif; text, links and buttons compute GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, ….

• Guardian Text Egyptian is preloaded (<link rel="preload" as="font">) but not used on the front, which has no article body — it is the article-body face, with no live specimen here.
• Guardian Titlepiece was fetched from interactive.guim.co.uk, the interactive-graphics domain, for an embedded module; Source notes it is not available on theguardian.com itself.

All four are recorded in the narrative; the two that render on the front are the tokens.

Scale

Masthead links set 17px at 700. Source publishes typography presets for web and apps; the front's full size census was not taken.

4. Component Stylings

Two components, every state on its own page load, focus read before the mouse moved. The delegated probe rejected the consent banner ("No, thank you") before measuring; the independent re-measure ran with it in place and read the same focus ring.

• Pillar and utility links — white 17px/700 on the navy masthead, 64px tall. Hover changes nothing.
• Masthead buttons — Show more, the Edition switcher. Hover changes nothing. The search field inside the expanded navigation — rgba(255,255,255,0.1), white text, a 1000px pill — is a Google Custom Search box ("Search with Google"). The probe found its background, text, border, outline and shadow unchanged on focus, but did not read transform or opacity, so it is not declared as a component and its focus is not recorded as absent.

Focus

The ring is not a custom property — no --focus* token exists among the 560 — so it is written in component styles, reusing brand.500. It is never the browser's auto ring.

Radius

Mostly circles and pills: 50% ×70, 100% ×15, 40px ×14, 12px ×5, 1000px (the search pill), 3px. Every pixel value is a multiple of 4.

5. Layout Principles

Source's spacing system uses a 4px increment — because common screen sizes are divisible by four — with 40px between containers and 24px (default) or 16px (compact) within one.

6. Depth & Elevation

Flat. The rendered page has one box-shadow at rest, a hairline rgba(0,0,0,0.1) 0 0 0 1px. The only other shadow is the focus ring.

7. Do's and Don'ts

Do

• Put navigation on navy #052962 and text on white in #121212.
• Colour a story by its pillar — opinion #c74600, sport #0077b6, culture #866d50, lifestyle #bb3b80.
• Use red #c70000 for links and yellow #ffe500 only as a highlight.
• Draw focus as a 3px #0077b6 ring.

Don't

• Don't substitute another serif for Guardian Headline under its name; the faces are licensed to the Guardian.
• Don't add hover colour to masthead links — they have none.
• Don't count the per-component token list as "used on this page"; it is emitted everywhere.

8. Responsive Behavior

Not measured. Desktop 1440×1000 only.

9. Agent Prompt Guide

Quick Color Reference

#052962 masthead navy · #041f4a top bar · #0077b6 focus / sport · #121212 ink · #707070 secondary · #c70000 links · #ffe500 highlight · #f6f6f6 / #ededed surfaces · #dcdcdc / #bababa rules · opinion #c74600 · culture #866d50 · lifestyle #bb3b80

Example Component Prompts

• "A navy masthead #052962 with white 17px/700 Guardian Headline pillar links; focus 0 0 0 3px #0077b6; no hover change."
• "An opinion story card: title in #c74600, a #e05e00 rule above, body #121212 in Guardian Text Sans."

10. Voice & Tone

Not assessed as authored voice. 21,210 characters on the measured front.

11. Brand Narrative

The Guardian redesigned itself around a format change and kept its identity in type rather than in colour: four typefaces drawn for it and licensed to no one else, a black headline masthead, and a navy digital masthead from its Source palette. Colour does the navigation — each pillar has its own, so a reader knows opinion from sport at a glance — while red marks links and a single yellow highlights whatever deserves a second look.

Underneath, the site is generated from one palette declaration per component, hundreds of them, all drawn from Source. It is a system built for a newsroom that ships a new kind of module most weeks.

12. Principles

• Type is the brand. Four bespoke faces carry the identity.
• Colour is wayfinding. Pillars, not decoration.
• One ring for focus. 3px of brand blue on every control.

13. Personas

Not researched. No persona claim is made from a UI capture.

14. States

Two components. Hover: no change on masthead links or buttons. Focus: a 3px #0077b6 box-shadow ring on both. No disabled state was observed.

15. Motion & Easing

Not measured. No motion token is published among the custom properties.

Tier 1 sources: https://www.theguardian.com/uk (live UK front — 557 root custom properties read via getComputedStyle, all Guardian-authored; controls measured at rest, hover, pressed and focus after rejecting consent; GH Guardian Headline and GuardianTextSans confirmed loaded, captured 2026-09-23); https://theguardian.design/ (Source, the Guardian's design system — core palette brand.100–800 matched to the live tokens, "four bespoke typefaces", 4px spacing; its nonsense-path control /zz-this-does-not-exist returns a real 404, read 2026-09-23); https://raw.githubusercontent.com/guardian/fonts/main/README.md (the Guardian's font repository — the faces are owned by Commercial Type and licensed only for Guardian websites and apps, read 2026-09-23)

Regional sources: https://www.creativereview.co.uk/guardian-tabloid-redesign/ (Creative Review — "Goodbye Berliner, hello tabloid: Alex Breuer on the Guardian's redesign"); https://www.itsnicethat.com/news/theguardian-graphicdesign-150118 (It's Nice That — "The Guardian unveils redesign across print and online")