---
version: alpha
name: The Wall Street Journal
website: "https://www.wsj.com"
description: >-
  A broadsheet-derived financial-newsroom system anchored on a cream-white canvas ("#fcfbf7") and ink black ("#1a1a1a"), with WSJ Red ("#bf242a") used as a hairline rule and editorial label color rather than a button fill. Display work runs Escrow Condensed at "30–48px" weight "700" for story decks, while body copy uses Exchange at "16px" with a tight "1.45" leading; UPPERCASE rubrics and bylines run Retina Narrow at "10–12px" weight "600" with positive "0.5–1.2px" tracking. The primary CTA is a square-cornered black pill ("Subscribe") at "0px" radius — the page refuses rounded corners on every load-bearing control. Markets chrome carries chromatic semantics: red ("#d0021b") for ticker-down, green ("#1c8c40") for ticker-up, blue ("#005a9c") for hyperlinks and Opinion-column accents.

seo:
  title: "Wall Street Journal Design System for React — Escrow + WSJ Red #bf242a"
  metaDescription: "WSJ.com as a DESIGN.md file. Cream canvas #fcfbf7, WSJ Red #bf242a rule, Escrow Condensed + Retina Narrow, square-corner Subscribe CTA. For React + AI tools."
  highlights:
    - "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 body — two Hoefler & Co. families carry the entire editorial hierarchy with no third display face"
    - "Square-corner Subscribe pill — the primary CTA sits at 0px radius on a black fill, refusing the rounded-button convention"
    - "Retina Narrow UPPERCASE rubrics — 10–12px weight 600 with 0.5–1.2px positive tracking, the print-inherited kicker that marks every section"
  tags:
    - "News & Publishing"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.wsj.com"
      title: "The Wall Street Journal — official site"
      description: "The newsroom homepage itself — read it to see the Escrow Condensed decks and red hairline rule in their native context."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is the Wall Street Journal's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typography does WSJ use, and what should I substitute?"
      answer: "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."
    - id: "shape-language"
      title: "Why is the Subscribe button square-cornered?"
      answer: "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."
    - id: "markets-colors"
      title: "Why are there green and red colors if WSJ Red is never used as a fill?"
      answer: "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."
    - id: "dark-mode"
      title: "Does WSJ have a dark mode for this surface?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a financial-news React app?"
      answer: "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."

colors:
  canvas: "#fcfbf7"
  canvas-paper: "#f5f3eb"
  surface-tint: "#efeee6"
  ink: "#1a1a1a"
  ink-secondary: "#3a3a3a"
  ink-tertiary: "#555555"
  ink-muted: "#767676"
  ink-disabled: "#999999"
  hairline: "#e2e0d9"
  hairline-strong: "#cccccc"
  hairline-mid: "#b3b3b3"
  wsj-red: "#bf242a"
  wsj-red-deep: "#8b1a1f"
  markets-down: "#d0021b"
  markets-up: "#1c8c40"
  link-blue: "#005a9c"
  link-blue-hover: "#003a6b"
  opinion-blue: "#005a9c"
  warning-amber: "#c47a00"
  error-bg: "#fde8ea"
  success-bg: "#e2f1e6"
  on-primary: "#ffffff"
  on-dark: "#fcfbf7"

typography:
  display-lg:
    fontFamily: "Escrow Condensed, Roboto Slab, Georgia, serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.05"
    letterSpacing: "-0.4px"
  display-md:
    fontFamily: "Escrow Condensed, Roboto Slab, Georgia, serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.08"
    letterSpacing: "-0.3px"
  display-sm:
    fontFamily: "Escrow Condensed, Roboto Slab, Georgia, serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.2px"
  heading-md:
    fontFamily: "Escrow Condensed, Roboto Slab, Georgia, serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: "1.15"
    letterSpacing: "0"
  heading-sm:
    fontFamily: "Escrow Condensed, Roboto Slab, Georgia, serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "0"
  body-lg:
    fontFamily: "Exchange, Source Serif 4, Charter, Georgia, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: "1.45"
    letterSpacing: "0"
  body-md:
    fontFamily: "Exchange, Source Serif 4, Charter, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.45"
    letterSpacing: "0"
  body-sm:
    fontFamily: "Exchange, Source Serif 4, Charter, Georgia, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: "0"
  rubric:
    fontFamily: "Retina Narrow, IBM Plex Sans Condensed, Inter, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "1.2px"
  byline:
    fontFamily: "Retina Narrow, IBM Plex Sans Condensed, Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "0.5px"
  timestamp:
    fontFamily: "Retina Narrow, IBM Plex Sans Condensed, Inter, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: "1.2"
    letterSpacing: "0.3px"

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"

spacing:
  micro: "2px"
  xxs: "4px"
  sm: "6px"
  md: "8px"
  base: "12px"
  lg: "16px"
  xl: "24px"
  xxl: "32px"
  section: "48px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.byline}"
    rounded: "{rounded.none}"
    padding: "8px 14px"
    height: 32px
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.byline}"
    rounded: "{rounded.none}"
    padding: "8px 14px"
    height: 32px
    border: "1px solid {colors.ink}"
  button-subscribe:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.rubric}"
    rounded: "{rounded.none}"
    padding: "10px 18px"
    height: 36px
    border: "0"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.rubric}"
    height: 56px
    padding: "8px 24px"
    border: "1px solid {colors.hairline}"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.rubric}"
    padding: "0px 10px"
  hot-indicator:
    backgroundColor: "{colors.wsj-red}"
    textColor: "{colors.on-primary}"
    typography: "{typography.rubric}"
    rounded: "{rounded.full}"
    height: 8px
  story-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "16px 0"
    border: "0"
  story-rule:
    backgroundColor: "{colors.wsj-red}"
    textColor: "{colors.wsj-red}"
    rounded: "{rounded.none}"
    height: 1px
    border: "0"
  story-rubric:
    backgroundColor: transparent
    textColor: "{colors.wsj-red}"
    typography: "{typography.rubric}"
  story-headline:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.display-sm}"
  story-deck:
    backgroundColor: transparent
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-md}"
  story-byline:
    backgroundColor: transparent
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.byline}"
  markets-table:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "8px"
    border: "1px solid {colors.hairline}"
  markets-row-up:
    backgroundColor: transparent
    textColor: "{colors.markets-up}"
    typography: "{typography.body-sm}"
  markets-row-down:
    backgroundColor: transparent
    textColor: "{colors.markets-down}"
    typography: "{typography.body-sm}"
  hyperlink:
    backgroundColor: transparent
    textColor: "{colors.link-blue}"
    typography: "{typography.body-md}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "8px 12px"
    border: "1px solid {colors.hairline-strong}"
  text-input-focus:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    border: "1px solid {colors.ink}"
  timestamp:
    backgroundColor: transparent
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.timestamp}"
---

## 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

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-lg}` | 48px | 700 | 1.05 | -0.4px | Lead-story Escrow Condensed deck — the loudest type on the page |
| `{typography.display-md}` | 36px | 700 | 1.08 | -0.3px | Secondary-feature Escrow Condensed decks |
| `{typography.display-sm}` | 30px | 700 | 1.1 | -0.2px | Standard story-card Escrow Condensed decks |
| `{typography.heading-md}` | 22px | 700 | 1.15 | 0 | Section section-titles and feed-list headlines |
| `{typography.heading-sm}` | 18px | 700 | 1.2 | 0 | Dense list titles and ticker section headers |
| `{typography.body-lg}` | 17px | 400 | 1.45 | 0 | Lead-story Exchange dek copy |
| `{typography.body-md}` | 16px | 400 | 1.45 | 0 | The workhorse Exchange body — story decks, article previews, inline copy |
| `{typography.body-sm}` | 14px | 400 | 1.4 | 0 | Captions, photo credits, table-cell text |
| `{typography.rubric}` | 11px | 600 | 1.2 | 1.2px | The UPPERCASE Retina Narrow section rubric ("U.S. ECONOMY") |
| `{typography.byline}` | 12px | 600 | 1.2 | 0.5px | Retina Narrow byline labels and button text |
| `{typography.timestamp}` | 11px | 400 | 1.2 | 0.3px | Retina Narrow article timestamp on the `<time>` element |

### 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.

| Level | Treatment | Use |
|---|---|---|
| 0 | No border, no shadow | Default cream text and inline copy |
| 1 | `1px solid #e2e0d9` warm hairline | Story-to-story dividers, markets-table rows, section boundaries |
| 2 | `1px solid #bf242a` WSJ Red rule | The signature 1px rule above each story headline — the strongest brand moment |
| 3 | `1px solid #cccccc` hairline | Form-input borders and ad-slot outlines |
| 4 | `1px solid #1a1a1a` hairline | Focused input borders and active-state outlines |
| 5 | Subscribe pill (`#1a1a1a` fill) | Black-on-cream contrast as elevation through chromatic weight |

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.