What is The Economist's primary brand color?

Economist Red (#e3120b) is the brand voltage, but the system uses it as a rationed rule rather than a fill. The hex appears 78 times across the captured homepage, split evenly between text (39) and 1px border (39), with zero background or shadow usage. Section flags ('Britain', 'United States') and category eyebrows take the red as text or as a 1px top rule above a story group. The Subscribe pill — the only saturated fill above the fold — uses navy Chicago-20 (#1f2e7a), not red. The 60 and 42 red variants (#f6423c and #cc100a) exist as alternate states but rarely appear on the homepage.

What typography does The Economist use, and what should I substitute?

Two proprietary families do the work. EconomistSerif (transitional serif, ui-serif fallback) carries headlines at 17–44px across weights 400/500/700 and ships with separate old-style-figure (EconomistSerifOsF), lining-figure (EconomistSerifLF), and small-caps (EconomistSerifSC) variants. EconomistSans (humanist sans, system-ui fallback) covers body, eyebrows, nav, and buttons at 13–20px across weights 400/500/600/700, with matching old-style and lining figure variants. There is also an EconomistSerifDisplay used at 40px+ for cover heroes. If proprietary fonts are unavailable, substitute Source Serif Pro or Lora for EconomistSerif and Inter or Source Sans 3 for EconomistSans.

Does The Economist have a dark mode?

No public-facing dark mode. The canvas stays at London-100 (#ffffff) with London-5 (#0d0d0d) ink. The only dark surface is the top masthead banner, which renders as a near-black band (London-5) with white text and the navy Subscribe pill — a single inverted strip rather than a full dark theme. The brand reads as a printed weekly newspaper, and print does not toggle.

Why so few radius values?

Four discrete radii — 4px, 20px, 32px, and 50% — keep the geometry close to a printed page while still allowing the one pill that matters. The 4px is used on cards and the text inputs in the newsletter form. The 20px is reserved for the Subscribe pill and matching navigation pills (a deliberate choice — the pill announces 'this is the action'). The 32px applies to tag chips and rounded badges. The 50% covers avatar circles and the play button on video stories. Nothing in between exists in the system — there is no 8px or 12px tier, because the brand wants either editorial-square or fully-pilled, not a softened in-between.

Can I use this DESIGN.md to build an editorial React publication?

Yes. Feed the file to Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces The Economist's weekly-newspaper voice — white canvas, red-as-rule, navy-as-CTA, EconomistSerif headlines above EconomistSans chrome, 1px hairlines instead of shadows. You can also paste the tokens directly into Tailwind config or CSS variables. The spec captures the full token vocabulary, component specifications, and an iteration guide for auditing screens against the editorial voice.

What's missing from this DESIGN.md spec?

A handful of pieces are documented in the Known Gaps section. The full article-detail reading view past the homepage (long-form body type, footnote rules, pull quotes) is not captured. The data-journalism chart palette (Singapore, Hong Kong, Tokyo, Shanghai, New York city-named hues) is documented as tokens but the chart-component specifications are not in scope. The Economist Espresso mobile app, the 1843 Magazine sub-brand palette (1843-brand-zurich #ffbb1a and 1843-brand-red #b30000), Films, and Podcasts surfaces have separate identities and are not included here.

The Economist Design System

The Economist's editorial design system as a DESIGN.md file.

About The Economist DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source economist.com

News & Publishing

The Economist's homepage reads like the print edition shrunken to a 1440px column — a white canvas, a tight serif-and-sans duet, and the single rationed red rule above each city-named section label. Where most news publishers spend their accent budget on hero banners and feature tiles, The Economist treats Economist Red (#e3120b) as ink: 78 occurrences across the page, all of them carrying text or a 1px border, none of them filling a button or a card. The only saturated fill above the fold is the navy `#1f2e7a` Subscribe pill in the masthead — a Chicago-20 voltage borrowed from the brand's broader newspaper palette rather than the red the wordmark uses. The mood is weekly-paper formal, not breaking-news loud.

This DESIGN.md packages the editorial surface into one machine-readable spec built on the Google Labs format. Inside: 20 color tokens covering the London greyscale ladder (London-5 through London-100), the rationed Economist Red plus its 42 and 60 variants, the Chicago navy used for CTAs, and the secondary city-named accents that appear on data graphics; 12 typography tokens laddering EconomistSerif (44px hero through 17px body) and EconomistSans (20px nav through 13px byline); 4 corner-radius values from 4px cards to 20px pills to 50% avatars; a 9-step spacing scale built on a 4px base; and 18 component specifications covering the masthead, hero banner, section flag, Insider row, weekly-edition card, and the Subscribe CTA.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces the weekly-newspaper voice — white canvas, red-as-rule, navy-as-CTA, EconomistSerif headlines above EconomistSans chrome, 1px hairlines instead of drop shadows. Reference the tokens directly to paste hex values into Tailwind config or CSS variables. The system is worth studying because almost no other mainstream news brand commits this hard to a single rationed accent — most publishers spend red on hero callouts and feature backgrounds; The Economist saves it for category flags and inline rules, and the discipline reads as authority.

What makes it distinct

Rationed brand redEconomist Red (#e3120b) appears 78 times, always as text or 1px border, never as background fill or CTA voltage
Navy CTA voltageprimary Subscribe button takes Chicago-20 navy (#1f2e7a) at a 20px pill, the only place a saturated fill exists above the fold
Two-family serif-and-sans duetEconomistSerif for headlines, EconomistSans for chrome, both proprietary, both with old-style and lining figure variants
Four-radius geometry4px on cards and inputs, 20px on the Subscribe pill, 32px on tag chips, 50% on avatar circles; nothing in between
Eight greyscale laddera literal London-named scale runs from London-5 (#0d0d0d) through London-100 (#ffffff), structuring every hairline and surface

Live at economist.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

economist.com

Explore The Economist

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

The Economist design system FAQ

Common questions about The Economist's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

The Economist — official site

The weekly-newspaper editorial brand whose homepage this DESIGN.md spec captures.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use The Economist in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→