--- version: alpha name: "The New Yorker" description: "The New Yorker is the most aesthetically conservative — and therefore most aesthetically distinctive — magazine UI on the open web. The canvas is bone white `#ffffff` with ink-black `#000000` body text set in TNY Adobe Caslon Pro at 21px (an unusually large body size that reads as 19th-century broadsheet rather than 21st-century web). Headlines run in **Irvin Heading Pro** — Rea Irvin's 1925 hand-drawn alphabet originally cut for the masthead and the \"Goings On About Town\" department, now a full digital cut with its narrow geometric caps that immediately read as New Yorker even before the eye registers a word. The brand's only chromatic voltage is link-blue `#0879bf` (a near-Pantone 285 cyan) used for hyperlink underlines and the subscribe button; everything else is monochrome. Departments are labelled in IrvinText 12px upper-and-lower with a hairline rule, content lives on a 12-column grid that defaults to 8.5/12 prose with serif drop-caps and Charles Addams cartoons inset, and the page rhythm is broadsheet-spacious with `21px / 1.4` line height for readers who arrive expecting a 9,000-word New Yorker piece. There are no rounded corners except the 9999px-pill subscribe pill, no shadows on body content, and no decoration that wasn't in print since Harold Ross. This is luxury-by-restraint, the closest the web has to a printed magazine that opens slowly." colors: bg: "#ffffff" bg-cream: "#fdfaf2" surface: "#ffffff" surface-soft: "#f7f7f7" surface-strong: "#ebebeb" surface-bone: "#fafafa" surface-overlay: "rgba(255,255,255,0.97)" text: "#000000" text-strong: "#000000" text-body: "#000000" text-muted: "#5d5d5d" text-soft: "#797979" text-inverse: "#ffffff" text-faint: "#a8a8a8" brand: "#0879bf" brand-hover: "#065d92" brand-active: "#04476f" brand-deep: "#013254" brand-cyan: "#0879bf" on-brand: "#ffffff" accent-red: "#cc0000" accent-cream: "#fdfaf2" accent-cartoon-line: "#000000" border: "#e5e5e5" border-strong: "#000000" border-subtle: "#f1f1f1" border-rule: "#000000" shadow-card: "rgba(0,0,0,0.08)" scrim-modal: "rgba(0,0,0,0.7)" success: "#1a7f3c" warning: "#a8650b" danger: "#cc0000" info: "#0879bf" paywall-band: "#000000" caricature-ink: "#000000" pull-quote-rule: "#000000" bullet-square: "#000000" typography: display: fontFamily: "IrvinHeadingPro" fontSize: "72px" lineHeight: 1.6 letterSpacing: "-0.025em" body: fontFamily: "TNYAdobeCaslonPro" fontSize: "16px" lineHeight: 1.6 mono: fontFamily: "Courier New" rounded: button: "0px" card: "0px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "48px" --- ## Overview ## Overview The New Yorker is the most aesthetically conservative — and therefore most aesthetically distinctive — magazine UI on the open web. The canvas is bone-white `#ffffff` with ink-black `#000000` body text. There is no near-black `#222`, no warm-grey `#333`, no off-white `#fafafa` paper-tint anywhere body content lives. The page is *paper*, the type is *ink*, and the discipline is to defend that contrast against every web convention that would soften it. Body text runs at **21px** — an unusually large reading size that signals 19th-century broadsheet rather than 21st-century web. Set in TNYAdobeCaslonPro, a custom Adobe Caslon cut commissioned by Condé Nast specifically for The New Yorker, with old-style figures (`onum`) on by default. Line-height is `1.4`, measure is `~33em` (720px), and the column reads slowly — which is exactly what an editor of a 9,000-word piece wants. Headlines run in **IrvinHeadingPro** — Rea Irvin's 1925 hand-drawn alphabet originally cut for the masthead and the "Goings On About Town" department, now a full digital cut of narrow geometric caps that immediately read as New Yorker even before the eye registers a word. There is no second display weight; Irvin ships in a single hand-cut weight, and the entire identity is built on the assumption that one weight is sufficient when the letterform is right. The brand's only chromatic voltage is link-blue `#0879bf` — a near-Pantone 285 cyan used for hyperlink underlines and the subscribe pill. Everything else is monochrome. There are no rounded corners except the 9999px-pill subscribe pill (the brand's only concession to web aesthetics), no shadows on body content, and no decoration that wasn't in print since Harold Ross's 1925 prospectus. Departments are labelled `department-eyebrow` style: IrvinText 12px upper-and-uppercase with `0.06em` letter-spacing and a 2px black rule beneath. "GOINGS ON ABOUT TOWN", "TALK OF THE TOWN", "FICTION", "POEMS", "ANNALS OF MEDICINE" — these are fixed editorial slots with century-old typographic conventions, ported faithfully to the screen. The department label *is* the brand, even more than the masthead. Cartoons are inset right at 320px with a 24px gutter. They render as black-line ink art — single-colour, no shading except cross-hatching, with italic Caslon captions below. The Charles Addams / Roz Chast / Bruce Eric Kaplan tradition is rendered as inline `figure` elements with `figcaption` set in 17px Caslon italic. Cartoons are not decorative — they are the editorial voice extended into image, and they receive the same typographic dignity as a paragraph. The page rhythm is broadsheet-spacious. Section gaps run 64–96px. Pull quotes are anchored between two 2px black rules (a TNY signature) at 32px Caslon italic. Drop-caps are 4-line, monochrome, no flourish. The ad slots are demarcated with grey 1px borders and `ADVERTISEMENT` 11px Graphik caps — never integrated, always set apart, the way a serious magazine treats a paid placement. Motion is editorial — gentle 200ms transitions, no parallax, no spring. Hover on a feature card just brightens the link colour; there is no scale, no shadow, no ornament. The page does not perform. It reads. **Key Characteristics:** - Bone-white `#ffffff` canvas, ink-black `#000000` body (no off-grey concessions). - Body 21px Caslon — an editorial reading size, not a web body size. - IrvinHeadingPro single-weight hand-drawn caps for all display. - IrvinText department-eyebrow caps with 2px black underrule. - Link/subscribe blue `#0879bf` — the only chromatic voltage. - Zero radius except 9999px pill on subscribe button. - Pull-quotes between two 2px black rules in 32px Caslon italic. - 4-line monochrome drop-cap on feature openers. - Cartoon inset right at 320px with italic Caslon caption. - Old-style figures (`onum`) on for body and metadata. - 1px black hairlines as default divider — never grey. - No dark mode — the brand is paper. ## Colors ### Primary - **Page White** (`#ffffff`): The canvas — the literal printed page. - **Ink Black** (`#000000`): Body, headline, rule, badge — the canonical TNY black. - **Link Blue** (`#0879bf`): Subscribe pill, hyperlink, focus ring — the only brand colour. ### Brand & Dark - **Brand Hover** (`#065d92`): Darkened blue on link / pill hover. - **Brand Active** (`#04476f`): Press state. - **Brand Deep** (`#013254`): Rare gradient terminus. - **Paywall Black** (`#000000`): "Get Access" pill on paywall band — inverts the canvas. ### Accent - **Cream** (`#fdfaf2`): Newsletter signup block, archive longform sub-pages — the only non-white body background. - **Alert Red** (`#cc0000`): "EXCLUSIVE" or paywall-warning ribbon — used sparingly, almost never in editorial body. ### Interactive - **Default Link** (`#0879bf`): Hyperlinks throughout body and nav. - **Visited Link** (`#5d2a8e`): Browser-native purple tint preserved for editorial transparency. - **Hover Link** (`#065d92`): Darken-on-hover, also adds underline if not already underlined. - **Outline Button** (`1px solid #000` on transparent): Save, Share, Sign In. ### Neutral Scale - **Body Black** (`#000000`): The principal ink. - **Caption Grey** (`#5d5d5d`): Caption supplement, secondary metadata. - **Soft Grey** (`#797979`): Timestamp, source line, "read more". - **Faint Grey** (`#a8a8a8`): Fold-mark, copyright, very-tertiary metadata. The brand specifically **rejects** the web convention of `#333` body text. Body is *true black* on the assumption that the screen is a page. ### Surface & Borders - **Surface Soft** (`#f7f7f7`): Alt-row tint, ad slot edge. - **Surface Strong** (`#ebebeb`): Input fill at rest. - **Surface Bone** (`#fafafa`): Near-white separator band. - **Border Default** (`#e5e5e5`): Hairline 1px. - **Border Strong** (`#000000` 2px): Pull quote and section divider. - **Border Subtle** (`#f1f1f1`): Alt-band divider. ### Shadow Colors - **None** is the default. The New Yorker uses *rules* (1px and 2px black lines), not shadows. - **Modal Shadow** (`rgba(0,0,0,0.08)`): Used only on the paywall modal — the subtlest possible. - **Cartoon Shadow** (none): Cartoons sit flush; no paper-edge shadow under figures. ### Semantic - **Success** (`#1a7f3c`): Saved-to-list toast. - **Warning** (`#a8650b`): Subscription-expiring banner. - **Danger** (`#cc0000`): Paywall lockout, error state. - **Info** (`#0879bf`): Matches brand. ## Typography ### Font Family - **Display**: `IrvinHeadingPro` — Rea Irvin's 1925 hand-cut letterform, single weight (400), the brand's primary headline face. There is no other display. - **Display Secondary**: `IrvinText` — text-grade companion to Irvin display, used at 12–14px for department eyebrows and bylines. - **Body**: `TNYAdobeCaslonPro` — custom Adobe Caslon Pro cut, weights 400 / 700, with `onum` (oldstyle figures) on by default and `liga` ligatures live. - **Sans**: `Graphik` (Commercial Type) — used only for navigation, button labels, legal — never body, never headline. - **Mono**: `Courier New` — used in code blocks within technology coverage; rare. - **Fallback chain**: Helvetica Neue → Helvetica → Arial → sans-serif for sans; Times New Roman → Times → serif for body. - **OpenType Features**: `liga` and `kern` always on; `onum` (oldstyle figures) on for body and metadata; standard ligatures only — no stylistic alternates because Irvin and Caslon ship in single canonical cuts. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | Masthead Cover | IrvinHeadingPro | 96px | 400 | 1.0 | 0.01em | liga, kern | "The New Yorker" — Rea Irvin caps | | Cover Headline | IrvinHeadingPro | 64px | 400 | 1.05 | 0 | liga | Issue cover-feature lockup | | Feature Hed | IrvinHeadingPro | 48px | 400 | 1.1 | 0 | liga | Section feature | | Spotlight Hed | IrvinHeadingPro | 36px | 400 | 1.15 | 0 | liga | Homepage feature | | Article Hed | TNYAdobeCaslonPro | 32px | 700 | 1.2 | 0 | liga, onum | Article page — Caslon Bold (rare bold use) | | Section Title | IrvinHeadingPro | 28px | 400 | 1.2 | 0 | liga | Smart-container hed | | Department Eyebrow | IrvinText | 12px | 400 | 1.0 | 0.06em | -- | Uppercase: GOINGS ON, TALK OF THE TOWN | | Deck (Standfirst) | TNYAdobeCaslonPro | 21px | 400 | 1.3 | 0 | liga, onum | Caslon italic permitted | | Body Prose | TNYAdobeCaslonPro | 21px | 400 | 1.4 | 0 | liga, onum | The signature 21px reading size | | Body List | TNYAdobeCaslonPro | 19px | 400 | 1.45 | 0 | liga | Homepage card body | | Body SM | TNYAdobeCaslonPro | 17px | 400 | 1.4 | 0 | liga | Footer, archive | | Pull Quote | TNYAdobeCaslonPro | 32px | 400 italic | 1.25 | 0 | liga | Between two 2px black rules | | Drop Cap | TNYAdobeCaslonPro | 84px | 400 | 1.0 | 0 | liga | 4-line drop on feature opener | | Byline | IrvinText italic | 14px | 400 | 1.3 | 0 | -- | "By Rachel Aviv" | | Timestamp | IrvinText | 13px | 400 | 1.3 | 0 | onum | Oldstyle figures | | Nav Link | Graphik | 12px | 500 | 1.0 | 0.04em | -- | Uppercase Graphik | | CTA Button | Graphik | 13px | 500 | 1.0 | 0.04em | -- | Uppercase, "SUBSCRIBE NOW" | | Caption | TNYAdobeCaslonPro italic | 13px | 400 | 1.4 | 0 | liga | Italic Caslon | | Cartoon Caption | TNYAdobeCaslonPro italic | 17px | 400 | 1.35 | 0 | liga | Below-cartoon italic | | Legal | Graphik | 11px | 400 | 1.4 | 0 | -- | Footer copyright | ### Principles - **Body is 21px, not 16.** The New Yorker rejects the web body default. 21px Caslon at 1.4 line-height is the brand's reading commitment — readers arrive expecting a 9,000-word piece, and the type cooperates. - **Single Irvin weight.** IrvinHeadingPro ships in one hand-drawn weight; the brand resists multi-weight display systems. The letterform itself carries the entire identity. - **Caslon Bold only for article hed.** The article-page H1 is one of the few bold-Caslon uses; otherwise body Caslon is regular weight, with bolding via `` only inside list items. - **Italic is editorial.** Italic Caslon appears in deck, caption, cartoon caption, byline, pull quote — italics carry voice in TNY in a way that bold cannot. - **Old-style figures everywhere.** `onum` is on for body, metadata, timestamps — the proper text-grade figures, never lining caps. - **Sans only for chrome.** Graphik handles nav, button, legal — never body, never headline. Sans is the wrapper, serif is the content. - **Department-eyebrow caps in IrvinText.** IrvinText 12 / 0.06em / uppercase with 2px black underrule is the canonical "department" treatment — the most distinctive editorial label on the open web. - **No stylistic alternates.** The brand resists `ss01`/`ss02` typographic gymnastics — the cuts ship correct. ## Layout ### Spacing System - Base: 4px. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 120 / 160. - Section gap: 64–96px between major modules. - Article paragraph margin-bottom: 24px (1.14em at 21px body). ### Grid & Container - Page width: 1440px. Content max: 1200px. - Article prose-width: **720px** (the editorial measure). This is non-negotiable — wider lines break Caslon's reading comfort. - Homepage: 12-column grid, feature spans 8/12 with 4/12 cartoon/photo inset right. - Issue archive: 3 covers per row at desktop, 2 at tablet, 1 at mobile. ### Whitespace Philosophy The page rhythm is broadsheet-spacious. Section gaps are larger than the web norm (64–96px). The article prose column is 720px and *anchored* — never full-bleed. The brand's whitespace philosophy is "give the reader room to read" — line-length is bounded, paragraph-spacing is generous, and chrome is suppressed. ### Section Cadence - Cover strip (black band) - Issue feature (image + Irvin hed + Caslon dek) - Departments (Talk of the Town → Goings On → Fiction → Poems → Annals…) - Issue cover archive (4-up grid) - Newsletter cream block - Footer (Graphik caps + legal) The brand resists the bottomless infinite-feed pattern — pages have ends. ### Breakpoints | Token | Min | Use | |-------|-----|-----| | mobile | 0px | Single-column, prose 100% with 16px gutter, subscribe pill in nav | | tablet | 600px | Article prose 600px, 2-up cover archive | | desktop | 1024px | 720px prose with cartoon inset right | | wide | 1280px | Full 12-col grid, 720 prose + 320 cartoon | ### Touch Targets - 44×44 minimum (iOS HIG standard) on all interactive controls. - Subscribe pill 36px tall but 44px hit-target via padding. ### Collapsing Strategy - Top nav → hamburger at < 1024px. - Cartoon inset → drops below paragraph at < 1024px (becomes inline block). - 12-col grid → 8-col → 4-col. - Department-eyebrow rule width matches column at all sizes. ### Image Behavior - Articles use `srcset` with 1x / 2x / 3x density. - Cartoons render at 2x by default (line art demands sharp). - Issue covers use `loading="lazy"` for archive grid. ### Container Queries - Newsletter cream block uses CQ to switch from horizontal-row layout (>720) to vertical stack (<720). ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat | Default — body, card, list item | | 1 | 1px `#e5e5e5` border or hairline | List dividers, ad slot perimeters | | 2 | 2px `#000000` rule | Pull-quote frame, section divider | | 3 | `0 12px 32px rgba(0,0,0,0.08)` shadow | Paywall modal (subtlest possible) | | 4 | `rgba(0,0,0,0.7)` backdrop scrim | Modal overlay | | 5 | -- | TNY does not use higher elevation | ### Shadow Philosophy The New Yorker rejects the web's drop-shadow convention. *Rules* — 1px and 2px black lines — replace shadows entirely. The pull-quote rule is the brand's signature "elevation": two 2px black lines bounding a 32px Caslon italic block. This is print thinking applied to web — divisions are typographic, not lighting-based. The single shadow that does appear (paywall modal) is the subtlest possible at `rgba(0,0,0,0.08)`. ## Shapes - **Hard Rectangle** (`0px`): Default for buttons, cards, badges, inputs, modals — every element except the subscribe pill. - **Pill** (`9999px`): Subscribe button + audio player only. This is the sharpest brand on the open web. The radius scale is *binary* — 0 or pill. There is no `4px button` middle ground because the visual identity demands the hard rectangle. ## Components ### Buttons **Subscribe Pill (Primary)** - Background: `#0879bf`. Color: `#ffffff`. Radius: `9999px`. Padding: `10px 20px`. Font: Graphik 13 / 500 uppercase / 0.04em. - Hover: `#065d92`, 200ms ease-editorial. No transform. - Active: `#04476f`. - Use: "SUBSCRIBE NOW", "GET 12 WEEKS" — the brand's only rounded element. Anchored top-right of nav and inline within paywall. **Outline Secondary** - Background: `transparent`. Color: `#000000`. Border: `1px solid #000000`. Radius: `0`. Padding: `10px 20px`. - Hover: `bg: #f7f7f7`, no transform. - Use: "Sign In", "Save", "Share" — black-on-white outline, hard rectangle. **Ghost / Text** - Background: `transparent`. Color: `#000000`. No border. - Hover: Adds 1px underline. - Use: "Bookmark", "Dismiss", inline list actions. **Paywall Black Pill** - Background: `#000000`. Color: `#ffffff`. Radius: `0`. Padding: `12px 24px`. - Use: "GET ACCESS" inside paywall band — inverts the canvas. ### Cards **Feature Card (Homepage)** - Background: `#ffffff`. Color: `#000000`. Radius: `0`. Border: none. Padding: 0. - Image (16:9 or 4:5) → IrvinHeadingPro 36 / 400 hed → TNYAdobeCaslon 21 / 400 dek → italic IrvinText byline. - Hover: Hed underlines in `#0879bf`. No scale, no shadow. **List Item Card (Goings-On)** - Background: `#ffffff`. Border-bottom: `1px solid #e5e5e5`. Padding: `24px 0`. - IrvinText eyebrow (department) + 24px Caslon hed + 19px Caslon dek. **Issue Cover Card** - Background: `#ffffff`. Border: `1px solid #e5e5e5`. Radius: 0. - Magazine cover thumb (cropped to 4:5) + IrvinText 13 caps date below. **Cartoon Card** - Background: `#ffffff`. Radius: 0. No border. - Single-panel ink cartoon + 17px Caslon italic caption. ### Pull Quote (Signature Ornament) ``` ───────────────────────────────────────── (2px black rule) "Most lives are not the lives of dramatic accomplishment; they are the lives most thoroughly studied by their owners." ───────────────────────────────────────── (2px black rule) ``` - Background: `transparent`. Color: `#000000`. Border-top + border-bottom: `2px solid #000000`. Padding: `24px 0`. Font: 32px Caslon italic / 1.25 / 400. - Use: Anchored mid-article between two black rules — the most recognizable typographic ornament in the brand. ### Drop Cap - 4-line drop-cap on feature article first paragraph. 84px Caslon Regular, no colour, no italic, no flourish. The simplest possible drop-cap, made distinctive by the surrounding 21px Caslon column it caps. ### Badges, Tags **Department Eyebrow** - Background: `transparent`. Color: `#000000`. Border-bottom: `2px solid #000000`. Radius: 0. Padding: `4px 0`. Font: IrvinText 12 / 400 uppercase / 0.06em. - Use: "GOINGS ON ABOUT TOWN", "TALK OF THE TOWN", "FICTION", "POEMS", "ANNALS OF MEDICINE", "PROFILES", "OUR LOCAL CORRESPONDENTS", "PERSONAL HISTORY". **For Subscribers** - Background: `#000000`. Color: `#ffffff`. Radius: 0. Padding: `2px 6px`. Font: 11px Graphik 500 uppercase. **Fiction Outline** - Background: `transparent`. Color: `#000000`. Border: `1px solid #000000`. Radius: 0. - Use: "FICTION" outlined eyebrow on story features. ### Inputs **Text Input** - Background: `#ffffff`. Color: `#000000`. Border: `1px solid #000000` (entire perimeter, hard-rect). Radius: 0. Padding: `12px 16px`. Height: 44px. - Focus: Border thickens to `2px solid #0879bf`. - Error: Border `2px solid #cc0000` + 13px Caslon italic error text. - Use: Newsletter signup, sign-in fields. Distinctively rectangular vs the web's universal rounded input. ### Navigation **Top Nav** - Background: `#ffffff`. Border-bottom: `1px solid #000000`. Height: 64px. - Logo: IrvinHeadingPro "The New Yorker" wordmark left, 24px height, black. - Links: Graphik 12 / 500 uppercase / 0.04em — News, Culture, Books, Business, Humor, Magazine, Crossword, Video, Podcasts. - Subscribe pill anchored right. **Stuck Nav (post-scroll)** - Background: `rgba(255,255,255,0.97)`. Backdrop-filter: `blur(6px)`. Border-bottom: `1px solid #000000`. Height: compresses to 52px. ### Newsletter Signup (Cream Block) - Background: `#fdfaf2` (the only non-white body bg). Border: `1px solid #000000`. Radius: 0. Padding: 32px. - IrvinHeadingPro hed + 21px Caslon dek + black-bordered input + black-pill submit. - Use: Mid-article and footer placement — the cream is the brand's rare warm-tint signal that "this is something to opt into". ### Cover Strip (Issue Header) - Background: `#000000`. Color: `#ffffff`. Radius: 0. Height: 48px. - IrvinHeadingPro 24 / 400 caps "THE NEW YORKER · JULY 22, 2024" with `tnum`-aligned dates. ### Paywall Modal - Background: `#ffffff`. Color: `#000000`. Radius: 0. Border: `1px solid #000000`. Padding: 48px. - Headline: 32 Irvin caps + 21px Caslon dek + black pill subscribe + outline secondary "Sign In". ### Audio Player ("Listen to article") - Background: `#ffffff`. Border: `1px solid #e5e5e5`. Radius: `9999px`. Padding: `8px 16px`. - The only other rounded element in the system besides the subscribe pill. ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — link colour, button hover. - **Out**: `cubic-bezier(0, 0, 0.2, 1)` — modal entry. - **Editorial**: `cubic-bezier(0.25, 0.1, 0.25, 1)` — gentle, print-feeling — the TNY default for everything. ### Duration Buckets - **Fast**: 120ms — hairline underline grow. - **Standard**: 200ms — link colour shift, button hover, pill darken. - **Slow**: 320ms — modal entry, scroll-stuck nav blur. ### Per-Component Recipes - **Subscribe pill hover**: bg `#0879bf → #065d92`, 200ms ease-editorial. No transform, no shadow. - **Link hover**: colour `#0879bf → #065d92`; underline thickness 1px → 2px over 120ms. - **Feature card hover**: hed text colour `#000 → #0879bf`. No scale, no shadow. - **Nav stuck**: 320ms transition into translucent + blur(6px) at scrollY > 80px. - **Paywall modal in**: 320ms ease-out, opacity 0 → 1 + scale 0.99 → 1.0. - **Drop-cap initial**: no animation — it's print, it doesn't perform. ### Page Transitions The New Yorker uses native page navigation — no SPA cross-fade, no transition library. Articles open as full document loads, with a brief 120ms opacity-in once interactive. This is intentional: the brand resists app-like motion in favour of document-like delivery. ### Reduced Motion - Link colour shift → instant. - Nav stuck blur → instant solid. - Paywall modal scale → instant opacity-only. - All other transitions → instant. The brand's motion footprint is so light that reduced-motion mode is barely distinguishable from default. ### Contrast Pairs - Black `#000` on white `#fff`: **21.0:1** — perfect AAA, the maximum possible contrast. - Caption grey `#5d5d5d` on white: **7.7:1** — AAA at body size, AA at small. - Soft `#797979` on white: **5.0:1** — AA at body. - White on link blue `#0879bf`: **4.7:1** — AA at body. - Link blue `#0879bf` on white: **4.7:1** — AA at body, AA at large. - Black on cream `#fdfaf2`: **20.0:1** — AAA. ### Focus Indicators - 2px solid `#0879bf` ring with 2px offset on all interactive elements. Brand-blue against bone-white reads cleanly without competing with the editorial ink. ### ARIA Patterns - `
` for every story; `