--- version: alpha name: "The Atlantic" description: "The Atlantic runs the most literary-magazine system of any major US web publication. The canvas is paper-cream (`#fbf8f1`) — a warm, slightly-yellowed off-white that distinguishes it from clinical white news sites and ports the printed magazine's newsprint warmth to the screen. Headlines set in a custom modern serif (Atlantic Serif, a Didone-flavored display face), body in a humanist serif body cut, and labels in a tracked uppercase sans. The signature accent — the Atlantic A monogram orange (`#fbb33b`) — appears in section accents, the masthead A, the story-of-the-day chip, and the rare brand moment. Long-form features (the cover-class essays the magazine is famous for) get full-bleed art treatment with drop-caps, italic pull-quotes, and generous 720px reading columns. The result is the canonical literary magazine on the web: warm, considered, photo-rich, and unmistakably a magazine rather than a newspaper." colors: bg: "#fbf8f1" bg-section: "#f5f1e6" bg-feature: "#ffffff" bg-dark: "#1a1a1a" surface: "#fbf8f1" surface-paper: "#ffffff" surface-soft: "#f5f1e6" surface-strong: "#e8e3d5" surface-quote: "#f5f1e6" text: "#1a1a1a" text-strong: "#000000" text-muted: "#5a5a5a" text-soft: "#7a7a7a" text-faint: "#a0a0a0" brand: "#fbb33b" brand-hover: "#e89e1c" brand-deep: "#c97e07" brand-soft: "#fef0d4" brand-A-red: "#c41e3a" link: "#1a1a1a" link-hover: "#000000" link-visited: "#5a5a5a" on-brand: "#1a1a1a" border: "#d8d3c5" border-soft: "#e0dccf" border-strong: "#7a7a7a" border-rule: "#1a1a1a" shadow-card: "rgba(26,26,26,0.06)" shadow-elev: "rgba(26,26,26,0.1)" shadow-modal: "rgba(26,26,26,0.2)" scrim: "rgba(26,26,26,0.5)" success: "#1a7f37" success-soft: "#e3f2e7" warning: "#cc7a00" warning-soft: "#fde9cc" danger: "#c41e3a" danger-soft: "#f5d4d8" info: "#1a4972" info-soft: "#dde6ef" politics-accent: "#c41e3a" ideas-accent: "#fbb33b" culture-accent: "#7a3de8" technology-accent: "#1a4972" family-accent: "#0d7060" health-accent: "#127f4e" cover-tag: "#fbb33b" typography: display: fontFamily: "AtlanticSerif" fontSize: "72px" lineHeight: 1.6 letterSpacing: "-0.025em" body: fontFamily: "AtlanticSerifBody" fontSize: "20px" lineHeight: 1.6 mono: fontFamily: "Courier New" rounded: button: "4px" card: "14px" pill: "9999px" spacing: xs: "2px" sm: "4px" md: "12px" lg: "24px" xl: "40px" --- ## Overview ## Overview The Atlantic is **the literary magazine rendered for the web**. The canvas is paper-cream (`#fbf8f1`) — a warm, slightly-yellowed off-white that distinguishes it from the clinical paper-white of NYT/WaPo and ports the printed magazine's newsprint warmth to the screen. The cream gives the page an immediate "you are reading a magazine, not a newspaper" signal: it's softer, more considered, more book-like. The Atlantic has used variations of this cream since the 1857 founding — the digital site preserves the print warmth almost exactly. Headlines run in **Atlantic Serif** — a custom modern Didone-derived display face commissioned by the magazine in the 2017 redesign, sitting between Bodoni's contrast and Caslon's humanist warmth. Body uses a humanist serif body cut optimized for long reading, and labels run a tracked uppercase sans. The trio gives the page a magazine feel rather than a newspaper feel — heavier display contrast on headlines, more generous body line-heights, larger pull-quotes (32px italic — the biggest pull-quote of any major news brand). The signature accent is the **Atlantic A monogram orange** (`#fbb33b`) — the color of the famous A logotype that has anchored the magazine's brand for decades. Used sparingly: on the cover-class tag chip, on the Ideas section accent, on the newsletter promo card, on the focus ring, on the long-form scroll-progress bar. Outside these moments the page is ink-on-cream — the orange functions as a single chromatic punctuation, the way a magazine's foil-stamped logo punctuates a printed cover. The Atlantic's most distinctive design choice is its **cover-class feature treatment**. The magazine's flagship long-form essays — "America's New Working Class", "How America Lost Its Mind" — get full-bleed art treatment with custom illustration or photography hero, drop-caps on the lead paragraph, generous italic pull-quotes, and a 720px reading column (wider than NYT's 600 or WaPo's 620 — the magazine's reading width). The dark cover-class card variant inverts to ink ground with cream text — a reverse pairing similar to the FT's salmon-on-navy. **Key Characteristics:** - **Paper-cream canvas** (`#fbf8f1`) — warm off-white that signals "magazine" not "newspaper" - Custom modern serif (Atlantic Serif) for display — Didone-flavored with humanist warmth - Atlantic A-monogram orange (`#fbb33b`) — single brand voltage, used sparingly - 720px reading column — widest of major US news brands; magazine breathing room - 32px italic pull-quotes — the largest in news design - Drop-caps on long-form features (80px Atlantic Serif) - Section color-coding: Politics red, Ideas orange, Culture purple, Tech navy, Family teal, Health green - Ink underlined links (no link blue) — Atlantic uses ink + underline, distinct from typical web convention - Cover-class dark card treatment with ink ground + cream text — magazine cover ported to web - 0px radius on cards, alerts, sections — broadsheet-magazine aesthetic - Tracked uppercase Atlantic Sans (12–14px, 0.06–0.12em) for meta labels - Italic Atlantic Serif deck — magazine-flavored editorial decoration - 48px primary CTA height (taller than NYT/WaPo's 44px) — magazine touch ergonomics ## Colors ### Primary - **Cream Canvas** (`#fbf8f1`): the warm-paper page color, the brand's most identifying decision. Magazine warmth. - **Ink** (`#1a1a1a`): primary text color. Slightly warmer than absolute black — calibrated to harmonize with cream. - **Atlantic Orange** (`#fbb33b`): the singular brand voltage — A-monogram color, cover-class tag, focus ring, newsletter card. ### Brand & Sub-Brand - **Brand Orange** (`#fbb33b`) - **Orange Hover** (`#e89e1c`) - **Orange Deep** (`#c97e07`) — heavy accent on Op-Doc / Politics tag chips - **Orange Soft** (`#fef0d4`) — tint surface - **A-Monogram Red** (`#c41e3a`) — sometimes the masthead A renders in red on print covers ### Section Accents (Color-Coded Pillar System) - **Politics** (`#c41e3a`) — red - **Ideas** (`#fbb33b`) — Atlantic orange (the magazine's flagship section uses the brand color) - **Culture** (`#7a3de8`) — purple - **Technology** (`#1a4972`) — navy - **Family** (`#0d7060`) — teal - **Health** (`#127f4e`) — green - **Books** — uses ink (no accent — book reviews are voiceless) ### Accent - **Editorial Link Ink** (`#1a1a1a`) — Atlantic uses ink + underline as the link state, no link blue - **Link Hover** (`#000000`) — ink darkens, underline thickens - **Link Visited** (`#5a5a5a`) — visited dims to muted ### Interactive - **Default Link** (`#1a1a1a` text + underline always visible) — Atlantic always shows the underline (not on-hover) - **Active CTA** (`#1a1a1a` ink fill on Subscribe) - **Disabled** (`#a0a0a0` text) - **Selected** (saved-article chip with orange fill) ### Neutral Scale (Calibrated for Cream) - **Ink** (`#1a1a1a`) — body, headlines (warmer than absolute black, calibrated for cream) - **Muted** (`#5a5a5a`) — bylines, captions - **Soft** (`#7a7a7a`) — photo credits, secondary meta - **Faint** (`#a0a0a0`) — disabled - **Hairline** (`#d8d3c5`) — universal rule color (warm-gray, calibrated for cream) ### Surface & Borders - **Cream** (`#fbf8f1`) — canvas - **Paper** (`#ffffff`) — pure-white photo and chart inserts inside the cream page - **Section Sub-Band** (`#f5f1e6`) — slightly darker cream for Opinion / Ideas / pull-quote backdrop - **Surface Strong** (`#e8e3d5`) — disabled fill - **Hairline** (`#d8d3c5`) — default 1px rule - **Border Strong** (`#7a7a7a`) — form input border - **Border Rule** (`#1a1a1a`) — section rule (1px ink) and pull-quote rules ### Shadow Colors **Ink-tinted** (warmer than neutral-gray, calibrated for cream harmony): - `rgba(26,26,26,0.06) 0 2px 4px` — dropdown - `rgba(26,26,26,0.1) 0 6px 16px` — overlay - `rgba(26,26,26,0.2) 0 12px 32px` — modal lift ### Semantic - **Success** (`#1a7f37` on `#e3f2e7`) - **Warning** (`#cc7a00` on `#fde9cc`) - **Danger** (`#c41e3a` on `#f5d4d8`) — form errors share Politics red - **Info** (`#1a4972` on `#dde6ef`) — info shares Tech navy ## Typography ### Font Family **Display**: `Atlantic Serif` — the custom modern Didone-derived display face commissioned for the 2017 redesign. Sits between Bodoni contrast and Caslon humanist warmth. Available in 300, 400, 500, 600, 700, 900. Fallback: `Georgia, "Times New Roman", serif`. **Body**: `Atlantic Serif Body` — the body cut, optimized for long reading at 20px / 1.6 line-height. Available in 400, 500, 700. **Sans**: `Atlantic Sans` — paired sans for bylines, captions, section labels, button labels, navigation. Available in 400, 500, 700. Fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`. **Mono**: System mono `Menlo, Consolas, "Courier New", monospace`. Used only on rare data displays. **OpenType features**: Atlantic Serif uses standard ligatures (`liga`), discretionary ligatures (`dlig`) on the masthead and cover-headlines, and tightly-tuned kerning (`kern`) at display sizes. The dlig moments are part of the magazine flavor — "ct" and "st" ligatures appear in cover-class headlines. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | masthead-wordmark | Atlantic Serif | 64 | 700 | 1.0 | -0.005em | liga, dlig, kern | "The Atlantic" | | cover-headline | Atlantic Serif | 60 | 700 | 1.05 | -0.02em | liga, dlig | Cover-class long-form essay headline | | headline-mega | Atlantic Serif | 52 | 700 | 1.07 | -0.015em | — | Large feature | | headline-jumbo | Atlantic Serif | 42 | 700 | 1.1 | -0.01em | — | Top-of-fold lead | | headline-xl | Atlantic Serif | 32 | 700 | 1.13 | -0.005em | — | Above-fold secondary | | headline-lg | Atlantic Serif | 26 | 700 | 1.18 | 0 | — | River lead | | headline-md | Atlantic Serif | 22 | 700 | 1.2 | 0 | — | River sub | | headline-sm | Atlantic Serif | 18 | 700 | 1.25 | 0 | — | Compact module | | deck-italic | Atlantic Serif (italic) | 20 | 400 | 1.4 | 0 | — | Standfirst — italic, weight 400 | | body-md | Atlantic Body | 20 | 400 | 1.6 | 0 | — | Default running text — larger (20px) and looser (1.6) than peers | | body-sm | Atlantic Body | 17 | 400 | 1.55 | 0 | — | Compact card body | | pull-quote | Atlantic Serif (italic) | 32 | 400 | 1.3 | 0 | — | The largest pull-quote in news (32px italic) | | drop-cap | Atlantic Serif | 80 | 700 | 1.0 | 0 | — | First letter of long-form lead paragraph, 3-line drop | | byline | Atlantic Sans | 13 | 700 | 1.3 | 0.06em | uppercase | "BY ED YONG" | | dateline | Atlantic Sans | 13 | 400 | 1.3 | 0 | — | "November 5, 2024" | | section-label | Atlantic Sans | 12 | 700 | 1.0 | 0.12em | uppercase | "POLITICS" / "IDEAS" | | caption | Atlantic Sans | 14 | 400 | 1.4 | 0 | — | Photo / illustration caption | | photo-credit | Atlantic Sans | 11 | 400 | 1.3 | 0.06em | uppercase | "JESSE LENZ FOR THE ATLANTIC" | | micro-meta | Atlantic Sans | 12 | 500 | 1.2 | 0.06em | uppercase | "5 min read" / "Listen" | | button-label | Atlantic Sans | 14 | 700 | 1.0 | 0.08em | uppercase | "SUBSCRIBE" / "SIGN IN" | | nav-link | Atlantic Sans | 13 | 700 | 1.0 | 0.1em | uppercase | "Politics" / "Ideas" — heavy tracking | | cover-tag | Atlantic Sans | 11 | 700 | 1.0 | 0.12em | uppercase | "THE COVER STORY" — orange chip | ### Principles - **Body at 20px / 1.6 line-height.** The Atlantic runs the largest, loosest body type of any major news brand — magazine reading ergonomics. NYT runs 18/1.55, FT runs 18/1.55; Atlantic runs 20/1.6 because long-form essays are the brand's flagship product. - **720px reading column** — widest in major US news. The magazine's reading width. - **32px italic pull-quote** — the largest in major news design. NYT/WaPo/Guardian run 26–28px; Atlantic stretches to 32. Magazine flavor. - **Drop-caps on long-form.** First letter of the lead paragraph in 80px Atlantic Serif 700 with a 3-line drop. Inherits the print magazine convention. - **Ink underlined links.** Distinctive: Atlantic does not use blue link color. Inline links are ink + underline; hover thickens the underline. The lack of color gives the page a more book-like feel. - **Heavy nav-link tracking (0.1em).** Section nav uppercase labels track wider than peers — magazine masthead convention. - **Section accent colors are pillar-coded.** Politics red, Ideas orange, Culture purple, Tech navy, Family teal, Health green. The accent appears on the 4px section-card top stripe and the kicker label. - **Crimson Pro / Source Serif Pro are the closest open-source serif fallbacks** — adjusted for slightly less Didone contrast than Atlantic Serif. Inter for sans. ## Layout ### Spacing System - Base unit: **4px** - Scale: `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 120 · 160` - Section padding: 80px between page bands (more generous than NYT/WaPo's 64px — magazine breathing) - Card internal: 16px between image and headline; 12px between headline and deck ### Grid & Container - Max content width: **1200px** centered on 12-column grid - Reading column: **720px** — widest in major US news; magazine reading width - Feature container: **1024px** for cover-class hero - Footer: 4-column link list with newsletter promo ### Whitespace Philosophy The Atlantic runs **generous** — 80px section padding, 720px reading column, 20px / 1.6 body, 32px pull-quotes. The cream canvas does the brand work; the layout breathes. Photographs and illustrations are given full-bleed treatment on cover-class features. The contrast: the river density on the homepage stays moderate (cards at 24px gutters), but inside an article the reading experience is the brand's flagship — uncrowded, unhurried. ### Section Cadence - Politics / World / Business / Climate: cream ground with section-color kicker - Ideas: orange-accented cream (the magazine's flagship section uses brand orange) - Culture / Books: cream with purple kicker; Books uses ink-only - Technology: cream with navy kicker - Family / Health: cream with teal/green kicker - Cover-class long-form: ink ground with cream text (inverted) ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Top nav collapses to hamburger + wordmark + Subscribe; section nav into hamburger; river cards 1-up; reading column at viewport with 16px gutters; pull-quote drops to 24px italic; drop-cap drops to 56px | | Tablet | 600–1024px | Section nav as horizontal scroller; river cards 2-up at 768+ | | Desktop | 1024–1440px | Full section nav; river cards 3-up; sidebar appears on article pages | | Wide | >1440px | Content caps at 1200px | ### Touch Targets - Primary CTAs: 48×48px (taller than NYT/WaPo's 44 — magazine touch ergonomics) - Section nav: 48px tap area - Save-article chip: 36×36px - Cover-class card tap area: 60+px ### Collapsing Strategy - Section nav collapses to scroller, then hamburger - Subscribe stays visible at all breakpoints - River cards drop column count: 4 → 3 → 2 → 1 - Sidebar collapses below article body on tablet - Cover-class hero stays full-bleed at all breakpoints ### Image Behavior - River-card images: `aspect-ratio: 16/9` desktop, `4/3` mobile - Cover-class hero: full-bleed up to 1200px, often custom commissioned illustration - Photo essays: scroll-snap on touch, arrow buttons on mouse - Lazy-load below the fold; high-priority above-fold image gets `fetchpriority="high"` ### Container Queries Right-rail "Most popular" compresses to single-line truncate when narrow. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow | Article body, hero, section bands | | 1 — Hairline | 1px `#d8d3c5` rule | River cards, table rows | | 2 — Section Rule | 1px `#1a1a1a` rule | Section break | | 3 — Pillar Stripe | 4px section-color rule | Section card top | | 4 — White Insert | pure white into cream | Photo, illustration, chart panels | | 5 — Dark Card | ink ground over cream | Cover-class feature card | | 6 — Dropdown | `rgba(26,26,26,0.06) 0 2px 4px` | Account menu | | 7 — Modal | `rgba(26,26,26,0.2) 0 12px 32px` | Paywall modal | ### Shadow Philosophy The Atlantic combines five non-shadow depth signals: hairline + section rule + pillar stripe + white insert + dark card. The result: depth comes from **palette inversion** (cream → white, cream → ink) and **rule weight**, not from cast shadows. Shadows appear only on chrome. ## Shapes | Tier | Value | Use | |------|-------|-----| | None | 0px | Cards, photos, sections, alerts, paywall, cover tags — broadsheet-magazine aesthetic | | Micro | 2px | Photo-credit chip | | Standard | 4px | Text input only | | Pill | 9999px | Save-article chip, audio play button — only when icon is round | The Atlantic commits to **square corners** on every editorial surface — buttons, cards, alerts, paywall, cover tags, section cards all sit at 0px radius. Only text inputs round (4px) for ergonomics. This is in line with the WaPo's discipline and stricter than the FT or Guardian. ## Components ### Buttons **`button-primary`** — Ink fill (`#1a1a1a`), cream text (`#fbf8f1`), 0px radius, 14×24px padding, 48px height, 14px / 700 Atlantic Sans uppercase tracked 0.08em. Press: darkens to `#000000`. The 48px height (vs 44px on most news sites) gives a magazine-touch feel. **`button-secondary`** — Transparent fill, ink text, 1px ink border, 0px radius, same dimensions. **`button-text-link`** — Plain ink text (`#1a1a1a`), no surface, no border. Always underlined. ### Cover-Class Treatment **`cover-tag`** — Orange chip (`#fbb33b`) with ink text in 11/700 uppercase tracked 0.12em ("THE COVER STORY"). 0px radius, 4×8px padding. Sits above cover-class feature headlines. **`card-feature-cover`** — Cover-class long-form card with **ink ground** (`#1a1a1a`), **cream text** (`#fbf8f1`), and full-bleed art above. Inverts the page palette — magazine cover ported to web. ### Cards **`card-headline`** — Cream surface (inherits canvas), 0px radius, top 1px hairline (`#d8d3c5`), no shadow. Photo above (often lifted onto pure white inside cream), Atlantic Serif 22/700 headline, italic Atlantic Serif 20/400 deck, Atlantic Sans 13/700 uppercase byline. **`card-photo`** — Pure white surface inserted into the cream page — for photographs and illustrations. **`card-section-kicker`** — Same structure with a **4px section-color top stripe** (Politics red, Ideas orange, Culture purple, etc.). The pillar accent identifies the section. **`card-opinion`** / **`card-ideas`** — Slightly darker cream sub-band (`#f5f1e6`) ground. ### Pull-Quote **`pull-quote`** — Italic Atlantic Serif 32px / 1.3 — the **largest pull-quote in major news design**. Between two 1px ink rules at 32px vertical padding. The 32px italic gives the magazine reading its most distinctive moment. ### Drop-Cap **`drop-cap`** — On long-form features: first letter of the lead paragraph rendered in Atlantic Serif 80px / 700 with a 3-line drop-cap. Inherits the print magazine convention. ### Inputs / Forms **`text-input`** — White surface (lifts off cream), 1px `#7a7a7a` border, 4px radius, 48px height, 14×16px padding. Focus: border thickens to 2px ink. **`paywall-cta`** — **Ink ground** (`#1a1a1a`) with **cream text** (`#fbf8f1`) — Atlantic's reverse pairing. Headline in cream Atlantic Serif 26/700. Cream-outline "Subscribe" CTA. The dark ground signals magazine-cover-class moment. ### Navigation **`top-nav`** — Cream surface, 64px height (taller than NYT/WaPo's 56px — magazine breathing room), 1.5px bottom ink rule. "The Atlantic" wordmark center-aligned in Atlantic Serif 64/700, Subscribe + Sign In + Search top-right. **`section-nav`** — Horizontal Atlantic Sans 13/700 uppercase tracked 0.1em links. Hover: ink underline grows from below over 220ms (slightly slower than peers — magazine pacing). **`newsletter-card`** — Brand orange ground (`#fbb33b`) with ink text ("Subscribe to The Atlantic Daily"). ### Decorative **`section-rule`** — 1px ink rule. **`pillar-stripe`** — 4px section-color stripe at the top of section cards. **`hairline-rule`** — 1px `#d8d3c5` warm-gray rule between river stories. **`scroll-progress`** — On long-form features: a thin bar at the top of the viewport tracks scroll position through the article, filled in Atlantic orange (`#fbb33b`) on a cream rail. Magazine reading affordance. ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` - **Out-soft**: `cubic-bezier(0.0, 0, 0.2, 1)` ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 100ms | Color swaps | | Standard | 220ms | Card hover, link underline grow (slightly slower than peers — magazine pacing) | | Slow | 360ms | Modal enter, cover-class transitions | ### Per-Component Recipes - **Card hover**: image scales 1.0 → 1.03 (slightly more than the 1.02 norm — Atlantic likes a slightly more pronounced lift); headline gains 1px ink underline (grows from 0 to full width over 220ms). - **Long-form scroll progress**: orange (`#fbb33b`) bar fills smoothly across the top of the viewport as the user scrolls through an article — proportional to scroll position. - **Section-nav link hover**: underline grows from below over 220ms standard. - **Cover-class card hover**: image scale + slight darken on the cream-text overlay. - **Paywall modal enter**: scrim fades 0 → 0.5 alpha over 220ms; modal translates 16px to 0 + opacity 0 → 1 over 360ms emphasized. ### Page Transitions 220ms cross-fade. Cover-class to article transitions use a slightly slower 360ms emphasized for magazine-cover-arrival feel. ### Reduced Motion Card hovers degrade to underline-only; scroll-progress bar stays static (only updates on scroll, not animated); transforms suppressed. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #1a1a1a ink on #fbf8f1 cream | 16.4 | AAA | | #1a1a1a on #fbb33b orange | 11.6 | AAA | | #fbf8f1 cream on #1a1a1a (reverse) | 16.4 | AAA | | #5a5a5a muted on #fbf8f1 | 7.0 | AAA | | #7a7a7a soft on #fbf8f1 | 4.7 | AA | | #1a1a1a on #f5f1e6 sub-band | 15.8 | AAA | | #c41e3a politics on #fbf8f1 | 5.5 | AA | ### Focus Indicators Focus ring: `2px solid #fbb33b` (Atlantic orange) with 2px outline-offset. The orange is the brand's only chromatic moment, and the focus ring uses it deliberately — keyboard users see the brand color on every Tab. ### ARIA Patterns - **Long-form articles**: `role="article"` with structured `
` for chapter breaks. Drop-cap is `aria-hidden="true"` (decorative). - **Cover-class feature card**: `aria-label` includes "Cover story: [title]" so screen readers announce the editorial weight - **Section nav**: `