What is the Financial Times' primary brand color?

FT Claret (#990f3d) is the signature accent, but it doesn't behave like a brand button color. It appears in 50 of 4,000+ color occurrences on the homepage, scoped to section kickers ('TOP STORIES', 'MARKETS REPORT'), the wordmark, and the rare emphasis tag — never as a button fill, card background, or hero wash. The true brand voltage is the page itself: the pink-salmon canvas #fff1e5 that the paper has used since 1893 carries 37 background occurrences and is the load-bearing brand decision. The Subscribe CTA fills with #262a33 near-black, not claret. Teal #0d7680 (282 occurrences) paints link underlines and the Subscribe wordmark — it is the workhorse chromatic accent, while claret is the editorial mark.

What typography does the FT use, and what should I substitute?

Two families do the work. Financier Display VF (a custom variable-axis serif licensed for the FT, fallback serif/Times) handles all display and h1 work at 20–32px across the variable-weight axis (242 / 397 / 400 / 700) — section heads, hero declarations, and editorial pull-quotes. Metric 2 VF (a custom Klim grotesque variable cut, fallback sans-serif) carries every other piece of text on the page at 12–16px across weights 400/600/700 — nav links, story decks, table rows, byline metadata, the Subscribe button. If the FT cuts are unavailable, substitute Tiempos Headline or PT Serif for Financier Display and Inter or Söhne for Metric 2. The 32px h1 sits at lineHeight 32px (a 1:1 ratio) — keep the tight leading in any substitute.

Why is the canvas pink?

The salmon (#fff1e5) is a 1893 inheritance from the paper edition — the FT switched to a pinker paper stock that year to differentiate from rival broadsheets at the newsstand, and the colour has carried through every subsequent redesign. On screen, the salmon serves three purposes: it lowers the contrast ratio between ink and ground from pure black-on-white (21:1) to a softer 12:1 that mimics newsprint reading; it provides instant brand recognition without a logo wash; and it changes the meaning of every other colour in the system. Claret and teal both read warmer against salmon than they would against pure white. Replace the salmon with white and the page stops looking like the FT — it starts looking like every other business publisher in 2026.

Why is the Subscribe pill cornered at 2px?

The Subscribe CTA is a 28px-tall #262a33 near-black rectangle at exactly 2px border-radius — barely a softening at all. The choice is deliberate broadsheet inheritance: print layouts use right-angled column rules and 90-degree caption boxes, and the 2px chamfer is the digital equivalent of a paper edge. Story cards round at 4px, image thumbnails round at 3px, and only avatar dots and the live indicator use 50% for circles. Where most consumer publishers default to 8–12px button radii (read: SaaS-flavour conversion CTAs), the FT refuses to soften past 2–4px. Round the Subscribe pill to 8px and the page stops looking like a newspaper.

Why does the FT have green and red colors if they're scoped so narrowly?

The markets palette is chromatic semantic, not chromatic decoration. Markets-up green (#96cc28) is bound to ticker percentage gains and the rare success-state badge; markets-down red (#cc0000) is bound to ticker percentage losses and form-validation error states — never used as a hero background, CTA fill, or generic 'danger' colour. Both colours appear in fewer than 5 of the page's 4,000 colour occurrences each, which is exactly how the FT wants it: green and red are reserved for numeric chrome in the markets ticker, freeing claret and teal to carry the rest of the page without competing for the eye. The pink-salmon ground intensifies both signal colours — green reads sharper on salmon than on white.

Can I use this DESIGN.md to build a financial-news React app?

Yes. Feed the file to Claude, Cursor, or any agent that reads structured design tokens and it reproduces the FT's voice — pink salmon canvas, near-black ink, Financier Display VF serif display, Metric 2 VF UI workhorse, claret kicker, teal link underline, and the 2px-cornered Subscribe pill. The 17 component entries cover the dark top nav strip, the Subscribe pill, story cards with claret kickers, hero panels with white-on-navy treatments, markets ticker rows, and the standard text input. Article-detail body typography, MyFT personalisation chrome, video player controls, and the FT Weekend supplement layout are out of scope — they live on different surfaces with their own type ladders.

Financial Times Design System

FT.com as a DESIGN.md file.

About Financial Times DESIGN.md

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

News & Publishing

The Financial Times homepage prints itself onto the browser. The canvas is a pink-salmon (`#fff1e5`) that has carried the paper since 1893 — no other major publisher inherits a coloured paper stock — and it shows up as the dominant background in 37 of the page's structural color slots, paired with a near-black ink (`#33302e`) that softens the contrast to roughly that of newsprint rather than a pure white-on-black SaaS chrome. FT Claret (`#990f3d`) appears in 50 occurrences, all scoped to section kickers ("MARKETS REPORT", "TOP STORIES") and the wordmark — never as a button fill or hero wash. The only filled CTA on the page is a 28px-tall `#262a33` near-black "Subscribe" pill at a 2px radius, and the only other chromatic voltage is a teal (`#0d7680`) that paints 282 link underlines and the Subscribe link.

This DESIGN.md packages the homepage into a structured spec under the Google Labs format. Inside: 19 color tokens organised around the salmon-ink-claret-teal axis, a 1893-inherited cream surface tint (`#f2dfce`) for promotional rails, a markets-up green (`#96cc28`) and markets-down red (`#cc0000`) reserved for ticker semantics, and a deep navy header surface (`#262a33`); 13 typography tokens spanning Financier Display VF 20–32px serif display, Metric 2 VF 12–16px sans-serif UI work across weights 400/600/700, and a 16px UPPERCASE 2px-tracked "SUBSCRIBED" badge; a 4-step radius scale (`2px`, `3px`, `4px`, `50%`) where the entire page reads as a print broadsheet because nothing rounds past 4px; an 8-step spacing scale clustered on 8/12/16/24px multiples; and 17 component specifications covering the salmon body, the dark navigation strip, the Subscribe pill, story cards with claret kickers, and the markets ticker row.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces the FT's broadsheet voice — salmon canvas, claret kicker, Financier Display serif headlines, Metric 2 VF UI workhorse, and the 2px-cornered Subscribe pill that refuses the rounded-button convention. Reference the tokens directly to paste hex values into Tailwind config, or use the spec as an audit checklist against any business-news surface that needs to feel like a paper edition rather than a 2010s blog template. Where most consumer publishers default to a white canvas and a 8–12px button radius, the FT holds onto the pink paper and the 2–4px corner — that newsprint inheritance is the design.

What makes it distinct

Newsprint salmon canvas#fff1e5 carries the page in 37 occurrences as the dominant background, mimicking the FT's 138-year-old pink paper stock that no other publisher inherits
FT Claret as kicker-only#990f3d appears in 50 of 4,000+ color slots, scoped to section labels and the wordmark, never as a button fill or hero background
Serif display, sans UIFinancier Display VF runs 20–32px on h1 and section heads at weights 242/397/400 (variable axis), while Metric 2 VF carries every nav link, dek, byline, and button at 12–16px
Single teal accent#0d7680 paints 282 link underlines and the Subscribe wordmark, the only chromatic move beyond the claret kicker and salmon ground
2–4px corner disciplinethe Subscribe pill rounds at exactly 2px, story cards at 4px, where most consumer publishers default to 8–12px softness

Live at ft.com

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

ft.com

Explore Financial Times

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Financial Times design system FAQ

Common questions about Financial Times'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.

Financial Times — official site

The newspaper itself — read the homepage to see the salmon canvas and claret kicker in motion.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Financial Times 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 --:--:--→