# The Wall Street Journal — DESIGN.md

## Overview
The Wall Street Journal is the American financial-newspaper-of-record brand — 135 years old, built on a strict black-on-white broadsheet canvas, the Escrow display family (a Hoefler-designed sibling of the historic Cheltenham face the WSJ used for over a century), hedcut portraits (the dot-stippled portrait illustrations in continuous use since 1979) as the brand's most-recognized graphic signature, and a market-data ticker bar at the masthead. The brand reads as American financial authority.

## Color
- **Primary:** `#000000` — Pure Black (masthead, every headline)
- **Accent (WSJ Red):** `#c4262e` — used very sparingly on brand-mark moments and selected display words
- **Market up:** `#0a8537` — Green for positive ticker movements
- **Market down:** `#c4262e` — Red for negative ticker movements (same as WSJ Red)
- **Canvas:** `#ffffff` — Pure White
- **Surface card:** `#ffffff` — White card with hairline border
- **Surface alt:** `#f7f5f0` — Newsprint cream (subscriber-only sections, sponsored content)
- **Ink:** `#0d0d0d` — Near-pure-black for body text
- **Body:** `#3a3a3a` — Default running text
- **Muted:** `#6b6b6b` — Captions, dates, bylines
- **Hairlines:** `#d2d2d2` — 1px dividers between stories

## Typography
- **Display:** Escrow, weight 800, tracking -0.02em, sizes 32–56px headlines
- **Sub-display:** Escrow weight 700, 22–28px section heads
- **Body:** Exchange (Hoefler sans companion to Escrow), weight 400, 16–17px, 1.55 line-height
- **Caption:** Exchange, weight 500, 13px
- **Byline:** Exchange, weight 500, 13px in italic
- **Section eyebrow:** Exchange, weight 700, 11px, uppercase, +1.5px tracking
- **Ticker:** Exchange Mono, weight 500, 13px tabular figures
- **Mono:** Exchange Mono, 13–14px for any tabular data

## Spacing & rhythm
4-base (4/8/12/16/24/32/48/64). Section padding 48–64px (dense broadsheet rhythm). Article column ~640px. Above-the-fold: 1 lead story + 2–3 secondary headlines stacked, refusing the single-hero pattern. Masthead bar + ticker bar consume top ~80px.

## Motion signature
Almost no motion. 150ms ease-out on link hovers. The masthead ticker bar scrolls at ~30px/s. Market-up / market-down arrows flash color momentarily on price changes (~200ms). No other animation.

## Components observed
- `hedcut-portrait-byline` — dot-stippled black-and-white portrait byline (the brand's most distinctive graphic)
- `masthead-ticker-bar` — scrolling ticker symbols + prices + arrows
- `headline-stack-broadsheet` — 3–5 stacked headlines above the fold
- `article-card-with-hedcut` — story card with hedcut portrait byline
- `market-data-table` — dense tabular-figure table of market data
- `opinion-author-card` — op-ed author card with hedcut + name + role + recent op-ed
- `footer-wsj-dense` — dense multi-column footer with section heads in Escrow

## Trademark signals
- Hedcut dot-stippled portrait illustrations as bylines and author marks
- Escrow display serif at every headline tier
- Strict black-on-white broadsheet canvas
- Market-data ticker bar at masthead
- 3–5 headline stack above the fold — refuses single-hero pattern

## What they DON'T do
- No hedcut substitution (no flat photos for primary bylines)
- No serif substitution — Escrow is mandatory
- No chromatic accents beyond market green, market red, brand red
- No single-hero-story layout above the fold
- No rounded corners
- No animation, no parallax
- No emoji
- No casual microcopy — the voice is formal-American-newspaper

## Exemplar pages
- https://wsj.com/
- https://wsj.com/business
- https://wsj.com/opinion
- https://wsj.com/markets

## When to reference
Reach for The Wall Street Journal when the user wants a heritage-American-newspaper brand — financial authority, broadsheet density, hedcut portrait signature. Especially appropriate for financial-news publications, business publications, opinion sites, and any media brand that wants to feel century-old and American (rather than British like The Economist or modern like Bloomberg). The hedcut portrait style is the brand's single most copyable graphic asset; the 3–5 headline stack above the fold is the most distinctive layout decision.
