What is the Wall Street Journal's primary brand color?

WSJ Red (#bf242a) is the signature accent, but it does not behave like a brand button color. It appears as the 1px horizontal rule above each story, as the UPPERCASE rubric text marking each section (U.S. ECONOMY, MARKETS, OPINION), and as the Hot/Live indicator dot. It never paints a button fill, a card background, or a hover state. The CTA color is ink black (#1a1a1a) on cream, and the chromatic chrome of the page is carried by markets-down red (#d0021b) for ticker-down arrows, markets-up green (#1c8c40) for ticker-up, and link blue (#005a9c) for hyperlinks and Opinion accents — each color tied to a market or editorial function rather than decoration.

What typography does WSJ use, and what should I substitute?

Two Hoefler & Co. families carry the page. Escrow Condensed (a slab-serif descendant of broadsheet wood-type) runs every story deck at 30–48px weight 700 with tight 1.05 leading. Exchange (a humanist slab-serif optimized for narrow newspaper columns) carries body copy at 16px weight 400 with 1.45 leading. Retina Narrow (a sans-serif workhorse for agate type) handles UPPERCASE rubrics, bylines, and timestamps at 10–12px weight 600 with 0.5–1.2px positive tracking. If the Hoefler set is unavailable, IBM Plex Serif Condensed or Roboto Slab substitute for Escrow at the deck sizes, Source Serif 4 or Charter substitutes for Exchange in the body tier, and Inter or IBM Plex Sans Condensed substitutes for Retina Narrow on the rubrics — keep the UPPERCASE letter-spacing at 0.5–1.2px or the kicker stops reading as print-inherited.

Why is the Subscribe button square-cornered?

The primary Subscribe pill is a 32px-tall black rectangle at 0px border-radius — flat corners on a black fill. This contradicts the rounded-button convention every consumer publisher in 2026 follows, and the choice is deliberate: the square corner reads as broadsheet chrome rather than SaaS chrome. Card containers and tile thumbnails use 0–4px radii, the Hot indicator dot uses 50% for the circle, and the rare promotional tile rounds to 8px. The 0px CTA is the load-bearing shape decision — round it and the page stops looking like a broadsheet.

Why are there green and red colors if WSJ Red is never used as a fill?

The markets palette is chromatic-semantic, not chromatic-decoration. Markets-down red (#d0021b) only paints down-tick arrows and percentage losses in the ticker table; markets-up green (#1c8c40) only paints up-tick arrows and percentage gains; link blue (#005a9c) is reserved for hyperlinks and Opinion-column accents and never appears as a background. WSJ Red (#bf242a) is a print-derived rubric and rule color, distinct from the brighter markets-down red — keeping the two reds separated lets the rule above each story read as editorial chrome while the ticker red reads as a numeric signal. Most design systems let one red drift across editorial and data roles; WSJ keeps them pinned.

Does WSJ have a dark mode for this surface?

The marketing homepage extracted here is light-only. The cream canvas (#fcfbf7) is the product — a paper tint rather than a pure white, intentionally warm. There is no light/dark toggle on the homepage, no dark-canvas inversion, and the registered-subscriber reading surface uses the same cream canvas. If you derive a dark variant from these tokens, invert canvas to #1a1a1a, shift ink to the cream tint (#fcfbf7), and keep WSJ Red (#bf242a) pinned at the same value — the red reads correctly against both cream and near-black without retuning.

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 WSJ's voice — cream canvas, ink near-black, Escrow Condensed decks above Exchange body, Retina Narrow UPPERCASE rubrics, WSJ Red as a 1px rule and label color, chromatic market semantics, and the square-corner Subscribe CTA. The 18 component entries cover the white top nav with center-justified wordmark, story cards with red rule and rubric, markets-table ticker rows, Subscribe pill, Hot/Live indicator, hyperlink color, and the byline timestamp tier. Article-detail reading surfaces, video player chrome, the Magazine long-form layout, and authenticated Markets dashboards are out of scope — they live on different pages with their own type ladders.

The Wall Street Journal Design System

WSJ.com as a DESIGN.md file.

About The Wall Street Journal DESIGN.md

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

News & Publishing

The Wall Street Journal's homepage reads less like a website and more like a broadsheet that learned to scroll. The canvas is a warm cream-paper white ("#fcfbf7") rather than pure browser white, the ink is a near-black ("#1a1a1a") that softens slightly against the cream, and the entire chrome is paced by Hoefler & Co.'s Escrow Condensed for decks and Exchange for body. WSJ Red — "#bf242a" — never paints a button or a fill; it appears only as a 1px rule above each story, as the UPPERCASE rubric color marking "U.S. ECONOMY" or "MARKETS", and as the Hot/Live indicator dot. The primary CTA is a square-cornered black pill labelled "Subscribe" — a refusal of the rounded-button convention every other consumer publisher in 2026 follows.

This DESIGN.md file packages the homepage into a structured spec. Inside: 22 color tokens organised around a cream-and-ink neutral scale (canvas "#fcfbf7", ink "#1a1a1a", three graded grays for byline and timestamp work, hairline "#e2e0d9" for the structural rule), WSJ Red "#bf242a" as a print-derived label and rule color, chromatic market semantics (markets-down "#d0021b", markets-up "#1c8c40", link blue "#005a9c"), and a paper-edge stack of cream tints; 11 typography tokens covering Escrow Condensed 30–48px decks, Exchange 16px body, Retina Narrow 10–12px UPPERCASE rubrics, and a 14px timestamp tier; a 6-step radius scale dominated by "0px" square corners; a 9-step spacing scale built on 4/8/12px units; and 18 component specifications. The format follows the Google Labs DESIGN.md specification.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces WSJ's broadsheet-on-a-screen voice — cream canvas, ink near-black, Escrow Condensed for decks above Exchange body, Retina Narrow UPPERCASE rubrics, WSJ Red as a hairline rule rather than a button fill, square-corner Subscribe CTA, and chromatic market semantics. Reference the tokens directly to paste hex values into Tailwind config, or use the spec as an audit checklist against any financial-news surface that needs to feel like a wire service rather than a SaaS landing. Where most consumer publishers commit the first viewport to a 64–107px display shout, WSJ holds the lead story at "30–48px" Escrow Condensed and lets a single red 1px rule do the work that other publishers ask a colored hero band to do — that restraint is the design.

What makes it distinct

Cream-paper canvas#fcfbf7 instead of pure white, the off-white tint that signals broadsheet rather than browser chrome
WSJ Red as a hairline rule#bf242a paints UPPERCASE section labels and the 1px rule above each story, never a button fill
Escrow Condensed for decks, Exchange for bodytwo Hoefler & Co. families carry the entire editorial hierarchy with no third display face
Square-corner Subscribe pillthe primary CTA sits at 0px radius on a black fill, refusing the rounded-button convention
Retina Narrow UPPERCASE rubrics10–12px weight 600 with 0.5–1.2px positive tracking, the print-inherited kicker that marks every section

Live at wsj.com

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

wsj.com

Explore The Wall Street Journal

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

The Wall Street Journal design system FAQ

Common questions about The Wall Street Journal'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 Wall Street Journal — official site

The newsroom homepage itself — read it to see the Escrow Condensed decks and red hairline rule in their native context.

The DESIGN.md specification

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

Use The Wall Street Journal 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 --:--:--→