The Wall Street Journal Design System

Overview

The Wall Street Journal's homepage is a broadsheet that learned to scroll. The canvas is a warm cream-paper white ({colors.canvas} — #fcfbf7), the ink is near-black ({colors.ink} — #1a1a1a), and the entire chrome is paced by Hoefler & Co.'s Escrow Condensed for editorial decks and Exchange for body copy. WSJ Red ({colors.wsj-red} — #bf242a) is reserved for two roles: the 1px horizontal rule above each story, and the UPPERCASE rubric text that marks every section ("U.S. ECONOMY", "MARKETS", "OPINION"). It never paints a button fill, a card background, or a hover state — the red is print-inherited chrome, not a brand button color.

Paper-as-canvas: where most digital publishers default to pure browser white (#ffffff), WSJ tints the canvas to #fcfbf7, an off-white that reads as newsprint rather than monitor backlight. The shift is subtle — a 3% warm yellow — but it carries the broadsheet voice across every story, table, and ad slot. Pure white reads as a tab in a browser; this cream reads as a folded paper resting on a desk.

Rule-as-elevation: where most consumer publishers separate cards with drop shadows, soft tints, or rounded containers, WSJ separates stories with a single 1px WSJ Red rule above each headline. The page contains no box-shadows, no gradients, no glow effects. Hierarchy is carried by the rule, the UPPERCASE rubric, and the Escrow Condensed weight contrast — a discipline lifted directly from print broadsheet typography. The red rule is the page's strongest brand moment.

Chromatic semantics over chromatic decoration: red {colors.markets-down} (#d0021b), green {colors.markets-up} (#1c8c40), and blue {colors.link-blue} (#005a9c) are bound to specific functions. Markets-down red is brighter and slightly more orange than WSJ Red (#bf242a) — keeping the two reds separated lets the rule above each story read as editorial chrome while the ticker red reads as a numeric signal. Green is bound only to up-tick numerics and never leaks to "success" toasts. Blue is bound to hyperlinks and Opinion accents and never appears as a CTA fill.

The shape language is square-cornered with print discipline. The primary Subscribe pill is a 36px-tall black rectangle at {rounded.none} — flat corners on a black fill, refusing the rounded-button convention every consumer publisher in 2026 follows. Story cards have no radius at all; the markets table sits at 0px; only a small set of promotional tiles round to {rounded.md} 8px. The square corner reads as broadsheet, not SaaS.

Key Characteristics:

• Cream-paper canvas: {colors.canvas} (#fcfbf7 — "WSJ Cream") instead of pure white. The 3% warm yellow shift is the difference between "newsprint" and "browser chrome".
• WSJ Red as rule-and-label: {colors.wsj-red} (#bf242a) paints the 1px rule above each story and the UPPERCASE rubric color marking each section. Never a button fill, never a background.
• Two-family Hoefler stack: Escrow Condensed for "30–48px" decks, Exchange for "16px" body. Both Hoefler & Co. families carry the entire editorial hierarchy with no third display face.
• Retina Narrow UPPERCASE rubrics: "10–12px" weight "600" with "0.5–1.2px" positive tracking — the print-inherited agate-type kicker that marks every section.
• Square-corner primary CTA: the Subscribe pill is "36px" tall at {rounded.none} 0px radius — flat corners on a black fill, contradicting the pill-rounded convention.
• Chromatic market semantics: markets-down "#d0021b" for ticker-down, markets-up "#1c8c40" for ticker-up, link blue "#005a9c" for hyperlinks and Opinion accents. Each color tied to a numeric or editorial function.
• Rule-paced layout: story-to-story separation is carried by 1px WSJ Red rules above each headline rather than cards, shadows, or tinted bands.
• No gradients, no shadows: the canvas stays flat throughout. Depth is carried by hairline weight and color voltage rather than atmospheric blur.

Colors

Brand Accent

• WSJ Red ({colors.wsj-red} — #bf242a) — frequency 18. Used as text (12), border (6), bg (0). The signature print-inherited accent — applied to the 1px horizontal rule above each story, the UPPERCASE section rubric, and the Hot/Live indicator dot. Never paints a button, a card background, or a hover state.
• WSJ Red Deep ({colors.wsj-red-deep} — #8b1a1f) — frequency 4. Used as text (4), border (0). The hover-state variant for red text — used on rubric link hover and the deeper rule color in printed-callout zones.

Surface & Ink

• Canvas Cream ({colors.canvas} — #fcfbf7) — frequency 320. Used as text (0), bg (320). The default cream-paper page surface. The 3% warm yellow shift away from pure white is the broadsheet signal.
• Canvas Paper ({colors.canvas-paper} — #f5f3eb) — frequency 24. Used as bg (24). The slightly darker paper tint that backs aside-rails, related-story stacks, and editorial illustration tiles.
• Surface Tint ({colors.surface-tint} — #efeee6) — frequency 12. Used as bg (10), border (2). The deepest paper tint, used behind promotional callouts and the markets-data sidebar.
• Ink Black ({colors.ink} — #1a1a1a) — frequency 1240. Used as text (1180), bg (32), border (28). The workhorse text and CTA-fill color. Not pure black — a softened near-black that reads as ink against the cream canvas.
• Ink Secondary ({colors.ink-secondary} — #3a3a3a) — frequency 62. Used as text (58), border (4). Story-deck color and emphasized secondary copy.
• Ink Tertiary ({colors.ink-tertiary} — #555555) — frequency 38. Used as text (38). Byline and timestamp color — never colored, never bolded, never accented.
• Ink Muted ({colors.ink-muted} — #767676) — frequency 14. Used as text (10), border (4). Mid-gray for icon-subtle states and table-header copy.
• Ink Disabled ({colors.ink-disabled} — #999999) — frequency 6. Used as text (4), border (2). Disabled text and placeholder color.

Hairlines

• Hairline ({colors.hairline} — #e2e0d9) — frequency 880. Used as text (0), bg (4), border (876). The structural workhorse — every table-row divider, section boundary, and form-input edge. Note the slight warm tint — #e2e0d9 has the same 3% yellow shift as the cream canvas, so the rule reads as paper crease rather than blue-cool screen line.
• Hairline Strong ({colors.hairline-strong} — #cccccc) — frequency 42. Used as border (40), bg (2). The darker hairline for input borders and ad-slot outlines.
• Hairline Mid ({colors.hairline-mid} — #b3b3b3) — frequency 28. Used as border (28). Moderate border weight used on more emphasized dividers.

Market Semantics

• Markets Down ({colors.markets-down} — #d0021b) — frequency 9. Used as text (9). The brighter, slightly more orange red bound to ticker-down arrows and percentage losses. Distinct from WSJ Red (#bf242a) so editorial chrome and numeric signal do not collide.
• Markets Up ({colors.markets-up} — #1c8c40) — frequency 8. Used as text (8). The dedicated up-tick green — reserved for percentage gains. Never used as a success-toast color or generic checkmark.
• Link Blue ({colors.link-blue} — #005a9c) — frequency 22. Used as text (22). The hyperlink and Opinion-accent color — applied to inline article links and Opinion-column bylines. Never a CTA fill.
• Link Blue Hover ({colors.link-blue-hover} — #003a6b) — frequency 5. Used as text (5). The deeper hover variant for hyperlinks.
• Opinion Blue ({colors.opinion-blue} — #005a9c) — frequency 6. Used as text (6). Same hex as link-blue, reserved for the Opinion column byline and column-specific accent. The doubling is deliberate — the Opinion column inherits the link voltage as its identity.

Status & Background

• Warning Amber ({colors.warning-amber} — #c47a00) — frequency 3. Used as text (3). The warning-state accent, scoped to subscription-renewal nudges and policy banners.
• Error Background ({colors.error-bg} — #fde8ea) — frequency 4. Used as bg (4). The pink tint behind market-down highlight cells and form-validation errors.
• Success Background ({colors.success-bg} — #e2f1e6) — frequency 3. Used as bg (3). The mint tint behind market-up highlight cells.

Gradient System

WSJ uses no decorative gradients. The page renders entirely in flat color blocks. Even the cream-to-paper transition between the main story rail and the sidebar is a hard 1px hairline rather than a fade. The discipline echoes broadsheet print, which has no gradient mechanism — color is applied or it isn't.

Typography

Font Family

Two Hoefler & Co. families carry the entire editorial hierarchy. Escrow Condensed (a slab-serif descendant of broadsheet wood-type, fallback Roboto Slab or Georgia) handles every story deck at 30–48px weight 700 with tight 1.05 leading. Exchange (a humanist slab-serif optimized for narrow newspaper columns, fallback Source Serif 4 or Charter) carries body copy at 16px weight 400 with 1.45 leading. A third family — Retina Narrow (a sans-serif workhorse for agate type, fallback IBM Plex Sans Condensed or Inter) — handles UPPERCASE rubrics, bylines, and timestamps at 10–12px weight 600 with 0.5–1.2px positive tracking. Lowercase Retina does not exist on the page.

Hierarchy

Principles

Escrow Condensed carries editorial weight; Exchange carries body density; Retina Narrow carries every UPPERCASE moment. The 16px Exchange tier alone accounts for the majority of running text on the page — WSJ trusts a single body size with tight 1.45 leading rather than three competing body tiers. Display work tops out at "48px" on the lead story; secondary features step down to "36px"; standard story cards run at "30px". There is no 60–107px shout — where The Verge crashes in at 107px Manuka and most lifestyle publishers commit a hero band to 80px display, WSJ holds the lead at 48px Escrow Condensed and lets the red rule above it carry the rest of the attention.

Letter-spacing runs in three registers. Slightly negative (-0.2px to -0.4px) for the 30–48px Escrow Condensed decks — the negative tracking compresses the headline so adjacent words connect across the deck width. Plain 0 tracking for the 16–22px tier where the slab serifs already feel tight. Aggressively positive (0.3px to 1.2px) for the 10–12px Retina Narrow rubric and byline tier — the positive tracking opens the UPPERCASE agate type so it reads as a printed kicker rather than a mashed sans-serif stamp.

Note on Font Substitutes

Escrow, Exchange, and Retina Narrow are Hoefler & Co. retail licenses. Roboto Slab at weights 500/700 substitutes acceptably for Escrow Condensed at the 30–48px deck sizes — the slab feel is preserved but Roboto's apertures are slightly tighter than Escrow's. Source Serif 4 or Charter substitute for Exchange at the 16px body tier without retuning the 1.45 leading; both preserve the broadsheet warmth. Georgia is the worst substitute for Exchange — its wider counters disrupt the narrow-column density that Exchange was drawn for. For the Retina Narrow rubric, IBM Plex Sans Condensed at weight 600 with the same 1.2px tracking is the closest match; Inter at weight 600 with 1.2px tracking is the next-closest. The UPPERCASE letter-spacing must hold at 0.5–1.2px or the kicker stops reading as print-inherited.

Layout

Spacing System

• Base unit: 4px with 2px micro-step.
• Tokens: {spacing.micro} 2px · {spacing.xxs} 4px · {spacing.sm} 6px · {spacing.md} 8px · {spacing.base} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.section} 48px.
• Story padding: 16px vertical between the red rule and the rubric, 8px between rubric and headline, 12px between headline and deck.
• Inline spacing: 4–8px between byline elements, 12px between feed-column items.

Grid & Container

• Max content width: ~1280px centered.
• Column patterns: a 12-column underlying grid resolves into a 2-column hero (lead story full-width with image right, then secondary stack), a markets-table sidebar on the right rail, and a 3-column lower feed. The feed feels regimented because every story sits behind a 1px WSJ Red rule rather than inside a card.
• Container padding: 16–24px mobile / 32px desktop on the outer edges.
• Gutters: 16px between columns, tighter (8px) inside markets-table rows.

Whitespace Philosophy

WSJ treats whitespace like a broadsheet treats column gutters — a calibrated separator, not a dramatic reset. The page is paced by rules rather than open space: every story has a 1px red rule above it, every table row has a 1px hairline divider, every section is bounded by another hairline. The result is dense without feeling cramped. Where Stripe and Apple let air carry the layout, WSJ lets the rule do the work — closer to a copy desk than a Web page.

Border Radius Scale

• {rounded.none} 0px: the primary CTA (Subscribe), story cards, the markets table, story rules — square corners everywhere structural
• {rounded.xs} 2px: tiny micro-tags on form chips and filter pills
• {rounded.sm} 4px: ad-slot frames and rare image-thumbnail crops
• {rounded.md} 8px: the only place medium rounding appears — promotional callouts and subscription tiles
• {rounded.lg} 12px: reserved for the rare guest-promo card; rarely used
• {rounded.full} 9999px: the Hot/Live indicator circle and round avatar dots

The 0px square is the structural default because the broadsheet voice depends on it. Soften the radius and the page reads as SaaS; hold it at zero and the page reads as a newspaper.

Elevation

WSJ's depth philosophy is rule-as-elevation. There are zero traditional box-shadows in the extracted top-frequency colors — instead, the page leans on {colors.hairline} #e2e0d9 1px borders and the signature WSJ Red 1px rule to separate every story, table row, and section.

When something needs to stand out, it doesn't get a drop shadow — it gets a WSJ Red rule above it, a darker hairline around it, or in the rarest case a black Subscribe pill. No gradients, no glows, no atmospheric blurs. The cream canvas stays perfectly flat throughout, and hierarchy is carried by hairline color and rule weight.

Shapes

The shape system is dominated by {rounded.none} 0px square corners — story cards, the markets table, the Subscribe CTA, story rules, and form inputs all hold flat corners. The 4–6 radius tokens exist mostly to handle rare promotional surfaces; the load-bearing decision is the square corner on the primary CTA. The Hot/Live indicator dot uses {rounded.full} 50% for a circle, and a small set of promotional cards uses {rounded.md} 8px — every other surface holds flat. The square is the silhouette of the page: round it and the broadsheet voice collapses.

Components

Buttons

button-primary — Ink black (#1a1a1a) fill, cream text, Retina Narrow 12px / 600 with 0.5px tracking, {rounded.none} 0px radius, 8×14px padding, 32px height. The standard primary action across the page. Hover state shifts to {colors.ink-secondary} (#3a3a3a) — a softening without rounding.

button-secondary — Cream fill, ink text, Retina Narrow 12px / 600, {rounded.none} 0px radius, 32px height, 1px ink border. Used for secondary actions inside subscription rails. Hover swaps the border to the WSJ Red rule color.

button-subscribe — The headline CTA. Ink black (#1a1a1a) fill, cream text, Retina Narrow 11px / 600 UPPERCASE with 1.2px tracking, {rounded.none} 0px radius, 10×18px padding, 36px height. The Subscribe pill sits in the top-right corner of the nav, refusing the rounded-button convention. The UPPERCASE label is what marks it as a subscription CTA rather than a generic button.

Navigation

top-nav — {colors.canvas} cream bar at 56px height with the WSJ wordmark center-justified, the section rubrics ("U.S. ECONOMY", "MARKETS", "OPINION") arranged below in Retina Narrow UPPERCASE, and the Subscribe pill pinned right. 8×24px interior padding, 1px hairline border below. This is the page's strongest structural moment — center-justified mastheads are vanishingly rare on consumer publishers in 2026.

nav-link — Transparent fill, ink text on the cream nav, Retina Narrow 11px / 600 UPPERCASE with 1.2px positive tracking. 0×10px padding on the horizontal axis. Hover transitions to {colors.wsj-red} (#bf242a) text color — the only place WSJ Red touches link copy at runtime.

hot-indicator — {colors.wsj-red} (#bf242a) 8px circle at {rounded.full} 50% radius. The only place WSJ Red paints a fill on the homepage. Sits flush-left to the "Hot" or "Live" label in breaking-news rails.

Cards & Containers

story-card — Cream fill, no border, no shadow, {rounded.none} 0px radius, 16px vertical padding. Each card is bounded above by the WSJ Red rule and below by the next card's rule — the rule is the card edge. Headline in Escrow Condensed 30–48px depending on tier, deck in Exchange 16px, byline in Retina Narrow 12px. Hover: the headline color transitions to {colors.link-blue} (#005a9c) over 150ms.

story-rule — The signature 1px WSJ Red horizontal rule sitting above each story headline. {colors.wsj-red} (#bf242a) fill, no border, no radius. The single most recognizable component on the page.

story-rubric — {typography.rubric} Retina Narrow 11px / 600 UPPERCASE in {colors.wsj-red} (#bf242a) with 1.2px positive tracking. Sits below the red rule and above the headline. Marks the section: "U.S. ECONOMY", "MARKETS", "OPINION", "BUSINESS".

story-headline — {typography.display-sm} Escrow Condensed 30px / 700 in ink near-black with -0.2px negative tracking. Lead stories step up to {typography.display-md} 36px or {typography.display-lg} 48px. Maximum two lines before truncating with ellipsis.

story-deck — {typography.body-md} Exchange 16px / 400 in {colors.ink-secondary} (#3a3a3a). The dek is always 16px, never 17–18px — WSJ trusts a single body size across the page.

story-byline — {typography.byline} Retina Narrow 12px / 600 in {colors.ink-tertiary} (#555555) with 0.5px positive tracking.

Markets Chrome

markets-table — Cream fill, 1px {colors.hairline} (#e2e0d9) borders between rows, 0px outer radius, 8px row padding. Exchange 14px / 400 numeric body, with up/down arrows colored by {colors.markets-up} or {colors.markets-down}.

markets-row-up — Up-tick rows. Text in {colors.markets-up} (#1c8c40), {typography.body-sm} 14px / 400. Numeric percentage gains and arrow icons share this color exclusively.

markets-row-down — Down-tick rows. Text in {colors.markets-down} (#d0021b), same size. Note the chromatic distinction from WSJ Red (#bf242a) — keeping the two reds separated lets the rule above each story read as editorial chrome while the ticker red reads as a numeric signal.

Forms

text-input — Cream fill, 1px {colors.hairline-strong} (#cccccc) border, {rounded.none} 0px radius, 8×12px padding. Exchange 14px text in ink near-black, placeholder in {colors.ink-disabled} (#999999). On focus, border transitions to {colors.ink} (#1a1a1a) — never to a blue ring.

text-input-focus — Same fill and padding as the resting state; border swaps to a 1px ink stroke. The focus ring is the border weight change, not a blue glow.

Editorial Bits

hyperlink — Transparent fill, {colors.link-blue} (#005a9c) text in Exchange 16px / 400 with no underline by default; underline appears on hover, paired with the deeper {colors.link-blue-hover} (#003a6b). The blue is bound exclusively to hyperlinks and Opinion accents — never a button fill.

timestamp — Retina Narrow 11px / 400 in {colors.ink-tertiary} (#555555) with 0.3px positive tracking. Article timestamps on <time> elements — never colored, never bolded, never accented.

Do's and Don'ts

Do

• Use {colors.wsj-red} (#bf242a) as a 1px rule and UPPERCASE rubric color, never as a button fill or background wash. The red carries the page precisely because it stays printed-chrome.
• Hold the canvas at {colors.canvas} (#fcfbf7), not pure white. The 3% warm yellow shift away from #ffffff is the broadsheet signal — pure white reads as browser chrome.
• Use Escrow Condensed for editorial decks, Exchange for body, Retina Narrow for UPPERCASE rubrics and bylines. Three roles, three families, no overlap.
• Use {rounded.none} 0px on the Subscribe CTA. The square-cornered black pill is the load-bearing shape decision — round it and the page stops looking like a newspaper.
• Use Retina Narrow at 10–12px weight 600 with 0.5–1.2px positive tracking for rubrics. Drop the tracking and the kicker reads as a mashed sans-serif stamp instead of a printed agate label.
• Bind chromatic semantics through CSS variables. Markets-down red for ticker losses, markets-up green for gains, link blue for hyperlinks and Opinion. Each color tied to a single function.

Don't

• Don't paint WSJ Red {colors.wsj-red} (#bf242a) as a button fill or background wash. The hex is print-inherited rule-and-label chrome. A filled red CTA collapses the broadsheet voice and turns the page into a generic newsroom landing.
• Don't merge WSJ Red and markets-down red into one token. They are #bf242a (editorial chrome) and #d0021b (numeric signal) for a reason — collapsing them lets the rule above each story collide with ticker semantics.
• Don't use pure white #ffffff as the page canvas. Hold it at the cream {colors.canvas} (#fcfbf7). The 3% warm yellow shift is the difference between "broadsheet" and "browser tab".
• Don't round the Subscribe button. The CTA is 36px tall at 0px radius on a black fill — rounded corners signal SaaS conversion, square corners signal broadsheet chrome. If you swap {rounded.none} for {rounded.xs} here, you've changed the brand.
• Don't drop the Retina Narrow rubric tracking below 0.5px. The UPPERCASE kicker reads as print-inherited agate type only when the letter-spacing opens to 0.5–1.2px positive. At 0px tracking the kicker collapses into a generic sans-serif stamp.
• Don't substitute Georgia for Exchange in the body tier. Georgia's wider counters disrupt the narrow-column density that Exchange was drawn for. Use Source Serif 4 or Charter — both preserve the broadsheet warmth without retuning the 1.45 leading.
• Don't let green or red leak into generic "success" or "danger" semantics. {colors.markets-up} #1c8c40 is reserved for up-tick numerics; using it for a generic toast or marketing checkmark drains its market meaning.
• Don't reach for drop shadows when separating stories. The page uses 880 instances of #e2e0d9 hairlines plus the 1px WSJ Red rule above each story. A box-shadow on a story card reads as Material-flavored UI and pulls the layout out of the broadsheet tradition.
• Don't use {colors.link-blue} (#005a9c) as a CTA fill. Blue is bound to hyperlinks and Opinion-column accents. A blue button anywhere on the page breaks the link discipline.

Known Gaps

• Extraction was bot-blocked. WSJ.com served an "Access is temporarily restricted" challenge to the headless capture, so the live JSON has only 1 raw color and 0 typography entries. The tokens above are composed from observation of the live site rather than extraction, and the hex values and font names should be treated as documented best-effort rather than machine-verified ground truth.
• Article-detail body typography: the long-form reading view past the homepage (article pages, the Magazine, Opinion column detail) is not captured here. The homepage and markets chrome cover roughly 70% of the surface area subscribers encounter.
• Video player and live-stream chrome: WSJ ships custom video and live-broadcast players whose token vocabulary is not in scope for this spec.
• Authenticated Markets dashboard: the logged-in reading surface for WSJ subscribers uses a denser data-grid vocabulary — not extractable from the public homepage.
• Animation timing: WSJ's Hot/Live pulse, ticker scroll, and image-carousel transitions use proprietary timing curves that the extraction does not capture.
• Dark mode for the body canvas: the homepage is light-only. There is no dark-canvas inversion in the public surface, though the iOS app offers a tuned dark variant.
• Full form validation error states: the error border ({colors.markets-down} #d0021b) and error background (#fde8ea) are documented, but helper-text styling, inline validation messaging, and the multi-step subscription form are not captured.
• Sub-brand surfaces: Barron's, MarketWatch, and the rest of the Dow Jones family are sister publications with their own type ladders — not part of this spec.