---
version: alpha
name: "The Atlantic"
description: "Editorial design system for a 165-year-old American magazine — serif authority, restrained ink palette, and a single flame-red accent that carries the full weight of the brand."

colors:
  # Canvas
  background: "#ffffff"
  surface: "#f5f5f5"        # tinted panel — newsletter blocks, pull-quote rails
  surface-dark: "#000000"   # inverted footer and cinematic hero panels

  # Ink
  ink: "#000000"
  ink-secondary: "#5e6a74"  # bylines, timestamps, kickers — dembrandt palette[1]
  on-background: "#000000"
  on-surface: "#000000"
  on-primary: "#ffffff"

  # Brand accent
  primary: "#e7131a"        # the Atlantic red — dembrandt semantic.primary
  primary-dark: "#b5000a"   # hover darkening; was rgb(181,0,10) estimated

  # Navigation chrome
  nav-border-light: "#c1c1c1"   # --nav-border-color-light CSS variable
  nav-border-dark: "#9b9b9b"    # --nav-border-color-dark CSS variable
  image-placeholder: "#c0ccda"  # --article-image-loading-placeholder-color

  # Semantic
  error: "#e7131a"          # reuses brand red for error states

  # Borders & dividers
  border: "#c1c1c1"
  border-soft: "#e5e5e5"    # hairline between feed items
  input-border: "#c0ccda"   # from dembrandt input component

  # Shadow / depth
  shadow-soft: "#d9d9d9"    # was rgba(0,0,0,0.15) — Google format requires hex /* estimated */

  # Focus
  focus-ring: "#e7131a"     # brand red focus — strong editorial presence

typography:
  display-hero:
    fontFamily: "AGaramondPro, Adobe Garamond Pro, EB Garamond, Garamond, Times New Roman, serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "AGaramondPro, Adobe Garamond Pro, EB Garamond, Garamond, Times New Roman, serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: 0px
  heading-section:
    fontFamily: "Atlantic Serif, Bodoni MT, Didot, Times New Roman, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: 1px
  heading-sub:
    fontFamily: "AGaramondPro, Adobe Garamond Pro, EB Garamond, Garamond, Times New Roman, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  section-kicker:
    fontFamily: "Atlantic Serif, Bodoni MT, Didot, Times New Roman, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 1px
  body-large:
    fontFamily: "AGaramondPro, Adobe Garamond Pro, EB Garamond, Garamond, Times New Roman, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  body:
    fontFamily: "AGaramondPro, Adobe Garamond Pro, EB Garamond, Garamond, Times New Roman, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: 0px
  nav-link:
    fontFamily: "Graphik, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Segoe UI, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.25px
  button-ui:
    fontFamily: "Graphik, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Segoe UI, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.5px
  caption:
    fontFamily: "Graphik, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Segoe UI, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  label-ui:
    fontFamily: "Graphik, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Segoe UI, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-secondary-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px 0px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 48px 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  badge-kicker:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 3px 8px
  badge-category:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 0px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 12px 0px
  nav-link-active:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 12px 0px
---

# The Atlantic Design System

## Overview

The Atlantic's visual identity carries 165 years of print authority into the browser without apology. The page opens on a pure white canvas (`{colors.background}`) held together by two serifs — a sturdy Garamond variant (AGaramondPro) for almost all display and reading type, and a condensed high-contrast Atlantic Serif for section rubrics and uppercase kickers. These are not faces chosen for trendiness; they are the closest digital translation of the magazine's editorial typesetting, and they produce the unmistakable texture of a serious American publication. Every headline has weight even before it is read.

The accent is Atlantic red (`{colors.primary}`) — precise, high-chroma, and deployed with the discipline the color deserves. It appears on the Subscribe button, on breaking-news flags, in hover states, and in the "A" logomark itself. A screen might show it twice. It is never used for body text, never as a surface fill behind a long reading column, and never cheapened by proximity to another saturated color. Red here means what red on a magazine cover means: the story matters, the brand is present, pay attention. The rest of the palette is ink black, off-white panels (`{colors.surface}`), and a blue-gray for secondary metadata (`{colors.ink-secondary}`). There are no gradients, no decorative shadows, and no rounded cards. The design earns its presence through typographic authority, not graphic decoration.

Full-bleed photography is the other structural layer. Feature leads break the column to fill the viewport — the same cinematic treatment that appears on print covers, transposed to a dark `{colors.surface-dark}` panel with a white serif headline reversed out over the image. The black footer and the dark hero are the only inversions the system allows. Between those poles, the site is paper white and ink black, moving between editorial speeds with variations in type size and spacing rather than color changes.

**Key Characteristics:**
- Two-serif editorial stack: AGaramondPro for headlines and body, Atlantic Serif (Bodoni-class) for section rubrics and uppercase kickers
- Atlantic red (`{colors.primary}`) reserved for the Subscribe CTA, focus states, breaking flags, and the branded "A" logomark — used at most twice per screen
- Pure white canvas (`{colors.background}`) — never warm off-white; the print paper analog
- Blue-gray metadata ink (`{colors.ink-secondary}`) for bylines, timestamps, and section labels
- Full-bleed photography heroes with dark inverted panels (`{colors.surface-dark}`) for cinematic features
- Section headings in Atlantic Serif uppercase with 1px letter-spacing — the magazine's department convention
- Minimal border-radius: `{rounded.sm}` (4px) on interactive controls only; all layout containers are square
- Hairline `{colors.border-soft}` rules as the primary feed-separation device — no card shadows
- Graphik sans-serif for UI chrome — navigation, button labels, captions — never for article body
- Radix UI component primitives under the hood, ensuring accessible keyboard and focus behavior

## Colors

### Primary
- **Pure White** (`{colors.background}`): The editorial canvas. Magazine-paper white, not warm or tinted. Every article column runs on this surface.
- **Ink Black** (`{colors.ink}`): Headlines, body text, primary navigation, the wordmark. Full-saturation black — not softened.
- **Dark Panel** (`{colors.surface-dark}`): Cinematic hero backgrounds and the footer. The only inversion the system uses.

### Brand Accent
- **Atlantic Red** (`{colors.primary}`): The single chromatic brand color. Drawn from the magazine's print identity, it appears on the primary Subscribe button, breaking-news badges, hover focus states, and the "A" brandmark. Never used for background fills behind body text and never paired with another saturated color.

### Secondary Text
- **Slate Metadata** (`{colors.ink-secondary}`): A blue-gray used for bylines, section labels, timestamps, and caption text. Sits between ink black and the border gray — tertiary information that recedes without disappearing.

### Borders & Dividers
- **Hairline** (`{colors.border-soft}`): 1px rules between feed items, section dividers, card edges. The structural device.
- **Navigation Border** (`{colors.border}`): The horizontal rule beneath the main nav bar and between nav states.
- **Input Border** (`{colors.input-border}`): Form field chrome — a cooler, slightly blue-gray to suggest interactive affordance.

### Image & UI
- **Image Placeholder** (`{colors.image-placeholder}`): The loading color for article images before they resolve — a cool blue-gray to match the editorial palette.
- **Tinted Surface** (`{colors.surface}`): Newsletter signup blocks, pullquote rails, footer pre-sections. A step off the pure white without becoming card chrome.

## Typography

### Font Family
- **Primary Display & Body**: `AGaramondPro` (proprietary), fallbacks: `Adobe Garamond Pro, EB Garamond, Garamond, Times New Roman, serif` — a digitization of Claude Garamond's 16th-century roman. Used for the hero headline, all article headlines in feed, body text, decks, and pull quotes.
- **Section Display**: `Atlantic Serif` (proprietary, high-contrast Bodoni-class), fallbacks: `Bodoni MT, Didot, Times New Roman, serif` — used for uppercase section rubrics ("POPULAR", "LATEST"), category kickers, and the magazine department labels. Condensed proportions and high stroke contrast give it visual energy at large sizes.
- **UI Chrome**: `Graphik` (Connary Fagen geometric sans), fallbacks: `-apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Segoe UI, Arial, sans-serif` — navigation links, button labels, bylines, captions, and timestamps. Keeps the chrome from competing with the editorial serifs.
- **OpenType Features**: Old-style numerals where supported in AGaramondPro body; standard ligatures throughout. Atlantic Serif uppercase rubrics use `letter-spacing: 1px` to open the condensed caps into legible labels.

*Note: AGaramondPro and Atlantic Serif are proprietary to The Atlantic. For external implementations, EB Garamond or Cormorant Garamond (Google Fonts) approximate the display Garamond; Playfair Display or DM Serif Display substitute for Atlantic Serif's high-contrast role. Graphik substitutes cleanly with Inter or DM Sans.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 60px hero headline over cinematic photography |
| `display` | 38px lead article headline in feed grid |
| `heading-section` | 32px Atlantic Serif uppercase — section rubrics ("POPULAR") |
| `section-kicker` | 32px Atlantic Serif uppercase with 1px tracking — department kickers |
| `heading-sub` | 24px Garamond sub-headlines and article decks |
| `label-ui` | 24px Graphik 700 — navigation section labels in UI layer |
| `body-large` | 20px Garamond lead paragraphs and featured excerpts |
| `body` | 18px Garamond standard reading column |
| `nav-link` | 20px Graphik 500 — main navigation links |
| `button-ui` | 14px Graphik 700 — Subscribe, Sign Up, CTA labels |
| `caption` | 13px Graphik 400 — bylines, photo credits, timestamps |

### Principles
- **Garamond does the reading work.** Every word the reader actually reads — body, headline, dek, pull quote — is set in AGaramondPro at weight 400. The face's open counters and generous x-height make long-form reading comfortable at 18–20px.
- **Atlantic Serif is for labeling, not reading.** Its high contrast and condensed proportions serve it well at 28–32px uppercase but would fatigue at body scale. Uppercase with letter-spacing only.
- **Graphik handles everything interactive.** Buttons, bylines, nav, captions. The distinction is never blurred — editorial type and UI type are separate voices.
- **Weight is restrained.** Display Garamond runs at weight 400 even at 60px. Graphik UI goes to 700 only for button labels and strong UI headings. There is no bold Garamond body.
- **Section rubrics always uppercase.** Atlantic Serif section kickers ("POPULAR", "LATEST", department labels) are always uppercase with 1px tracking — the print magazine's TOC convention on screen.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Vertical rhythm: 24–32px between feed items separated by hairline rules; 48–64px between major editorial sections; 96px for hero-to-grid transitions. The system breathes like a magazine page — generous between articles, tight within an article's typographic stack.

### Grid & Container
- Max content width: ~1200–1280px on desktop
- Article reading column: ~660–720px max — magazine column measure, never stretched
- Homepage: 12-column grid resolving into 3–4 column feed grids with a right rail
- Section fronts: 2–3 column article card grids
- Full-bleed hero: breaks the container to viewport width for cinematic photo features
- Internal grid: articles use 4-column internal layout — body in 3 columns, metadata rail in 1

### Whitespace Philosophy
- **Editorial cadence**: Articles in feeds are separated by hairline `{colors.border-soft}` rules with 24–32px vertical breathing room — the page reads as a curated list, not a social scroll.
- **Reading column restraint**: The 660–720px measure is non-negotiable — long-form reading comfort requires controlled line length.
- **Hero scale**: Hero headlines at 60px get 48–64px above, 24–32px below before the dek. The masthead always occupies its own horizontal band.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Editorial canvas, body text, feed background |
| Hairline (Level 1) | `1px solid {colors.border-soft}` | Dividers between feed items and section breaks |
| Nav Rule (Level 2) | `1px solid {colors.border}` | Beneath the navigation bar, input chrome |
| Dark Panel (Level 3) | `{colors.surface-dark}` background fill | Cinematic feature heroes and inverted footer |
| Focus Ring (Level 4) | `2px solid {colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: The Atlantic uses no drop shadows. Depth is established through tonal contrast — white editorial surface against the dark hero, hairline rules between items, and the red accent as a visual pointer. This is a direct print inheritance: paper has no ambient shadow, and the site honors that. When an element needs distinction, it gets a 1px border or a background tonal shift, not a simulated light source.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All editorial containers — article cards, image wrappers, dark panels, the nav bar |
| `sm` | 4px | Interactive controls only — buttons (primary, secondary, ghost) and form inputs |
| `pill` | 9999px | Avatar crops and any circular icon button (rarely used) |

The radius discipline is minimal but not absolutist: layout containers and images are always square (`{rounded.none}`); interactive affordances (buttons, inputs) get a modest 4px radius to signal clickability without ornament. The distinction reinforces the editorial/interactive voice separation.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Atlantic red background, white Graphik 700 label, 4px radius. The Subscribe CTA. Used once per page section at most — its scarcity is its power.
- **`button-primary-hover`** — Darkened red (`{colors.primary-dark}`) on hover. Color deepens, shape unchanged.
- **`button-secondary`** — Pure black background, white label. "Sign In", secondary conversion CTAs.
- **`button-ghost`** — White background, black text. Lower-hierarchy actions; transitions to tinted surface on hover.

### Cards

- **`card`** — No card chrome. An article "card" is an image, a kicker, a headline, a dek, and a byline stacked vertically with 0 radius and no shadow. Separation is handled by `{colors.border-soft}` hairlines and spacing alone.
- **`card-dark`** — Black background panel for cinematic heroes. White reversed type, Garamond headline at display scale, 48px padding. The only surface that breaks the white page.

### Inputs

- **`input`** — White background, `{colors.input-border}` 1px border, 4px radius, Garamond 18px body type in the field. The email signup input pairs flush with a black submit button.
- **`input-focus`** — Border upgrades to `{colors.ink}` on focus. No glow ring, no color shift — focus is structural, not decorative.

### Badges

- **`badge-kicker`** — Solid red, white Graphik caption, square corners. Breaking news flags and urgent category labels ("BREAKING", "LATEST").
- **`badge-category`** — Invisible background, `{colors.ink-secondary}` Graphik caption text. Section category labels (Politics, Culture, Technology) — typographic, not pill-shaped.

### Navigation

The nav bar sits in its own horizontal band: The Atlantic wordmark left-aligned, main section links centered in Graphik 500, and Subscribe (red) + Sign In (ghost) right-aligned. A 1px `{colors.border}` rule runs beneath. On scroll, the nav sticks and compresses — the wordmark may reduce and the section links may collapse to a hamburger below 768px.

## Do's and Don'ts

### Do
- Use AGaramondPro (or an EB Garamond substitute) for every headline and body paragraph — the editorial voice lives in the face
- Reserve Atlantic red (`{colors.primary}`) for the Subscribe CTA, breaking badges, and focus states — never as a decorative fill
- Set section rubrics (department labels) in Atlantic Serif uppercase with `letter-spacing: 1px` at 28–32px
- Use `{colors.ink-secondary}` for all metadata — bylines, timestamps, section category labels — never pure black for secondary text
- Separate feed items with `1px solid {colors.border-soft}` hairlines and 24–32px vertical spacing — no card shadows
- Cap the reading column at ~660–720px on desktop regardless of viewport width
- Invert to `{colors.surface-dark}` only for full-bleed photo heroes and the footer — nowhere else
- Use Graphik for all UI chrome (buttons, nav, captions) and keep it separate from editorial type
- Let photography carry chromatic richness — the layout palette stays monochrome + red

### Don't
- Don't apply Atlantic red to body text, background fills behind reading columns, or decorative UI patterns
- Don't introduce drop shadows or `box-shadow` on any container or card — depth is tonal, not simulated
- Don't round image containers or editorial card wrappers — `{rounded.none}` is mandatory for layout elements
- Don't use bold Garamond body — emphasis in long-form copy is italic at weight 400, not weight 700
- Don't introduce mid-range radii (8–16px) on cards — only `{rounded.sm}` (4px) on interactive controls
- Don't mix Graphik into editorial headlines or AGaramondPro into navigation links — the voice separation is non-negotiable
- Don't use Atlantic Serif for body text at any size — its high stroke contrast makes it unreadable below 20px
- Don't use Atlantic Serif lowercase — it is always uppercase with tracking
- Don't add gradients or glassmorphism effects anywhere — the system is flat and print-derived
- Don't let a second accent color enter the palette — red plus grayscale is the complete chromatic vocabulary

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, wordmark scales to 120px, body 17px, hero headline 32px |
| Mobile | 375–767px | Single column, hero headline 36px, feed stacks vertically, section nav collapses |
| Tablet | 768–1023px | 2-column feed grid, nav becomes condensed horizontal or hamburger |
| Desktop | 1024–1399px | 3-column grid, full section nav, hero headline 48–60px |
| Large Desktop | ≥1400px | Max container ~1280px, margins expand, hero at full 60px display scale |

### Touch Targets
- Subscribe button: minimum 44px tap height, 16px horizontal padding
- Section nav links: 44px row height minimum in mobile drawer
- Article cards: full row tappable with no nested clickable regions

### Collapsing Strategy
- **Masthead**: Wordmark stays left-aligned at all widths; Subscribe + Sign In collapse to text-only or icon below tablet
- **Section Nav**: Horizontal strip collapses to hamburger drawer below 768px; drawer reveals stacked Graphik section names at 20px
- **Feed Grid**: 3-column → 2-column → single column; hairline rules persist
- **Reading Column**: Maintains 660–720px max on desktop; expands to full width on mobile with 16–24px horizontal padding
- **Hero**: Full-bleed photo hero compresses from 100vh to ~56vw on mobile; headline scales proportionally

### Image Behavior
- Photography full-bleed within the article column; hero images break container to viewport width
- `{colors.image-placeholder}` loading color visible until images resolve (lazy-loaded below fold)
- No art-direction crop swaps between breakpoints — same composition scales
- Aspect ratios: 16:9 for hero features, 4:3 for feed story tiles, 1:1 for thumbnails

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text / metadata: `{colors.ink-secondary}`
- Brand accent (Subscribe, breaking, focus): `{colors.primary}`
- Border / hairline divider: `{colors.border-soft}`
- Dark panel / footer: `{colors.surface-dark}`
- Tinted surface (newsletter blocks): `{colors.surface}`

### Example Component Prompts

- "Create an Atlantic-style article feed card on `{colors.background}`. No shadow, no border-radius on the image wrapper or container (`{rounded.none}`). Stack: full-width 4:3 image (square corners), then a 13px Graphik category label in `{colors.ink-secondary}`, then an AGaramondPro 38px headline at weight 400 in `{colors.ink}`, then a 20px Garamond dek, then a 13px Graphik byline in `{colors.ink-secondary}`. Separate from the next card with `1px solid {colors.border-soft}` below and 24px vertical gap."

- "Build an Atlantic hero section: full-bleed photograph at 100vh, dark overlay using `{colors.surface-dark}`. Centered column (~720px wide) with an AGaramondPro headline at 60px weight 400 color `{colors.on-primary}`, line-height 1.05. Below it a 20px Garamond dek in `rgba(255,255,255,0.85)`. Subscribe button: `{colors.primary}` background, `{colors.on-primary}` text, 14px Graphik 700, `{rounded.sm}` radius, 8px 16px padding."

- "Design a navigation bar for The Atlantic on `{colors.background}`. Wordmark left-aligned. Center-aligned section links in Graphik 500 20px `{colors.ink}` with 0.25px tracking — hover transitions link color to `{colors.primary}`. Right side: Subscribe button (`{colors.primary}`, white Graphik 700) and Sign In ghost button. Bottom: `1px solid {colors.border}` rule."

- "Create a newsletter signup block on `{colors.surface}` with 32px padding and `{rounded.none}` corners. AGaramondPro 32px headline in `{colors.ink}`. Below, a full-width email input: `{colors.background}` fill, `1px solid {colors.input-border}` border, `{rounded.sm}` radius, 10px 16px padding. Flush-adjacent black submit button: `{colors.ink}` fill, white Graphik 700 14px 'Sign Up' label, same height as input."

- "Build a section section header: 'MOST POPULAR' in Atlantic Serif uppercase 32px weight 400 `{colors.ink}`, letter-spacing 1px. Below it: a numbered list of article cards (01–05). Each item: Graphik 13px `{colors.ink-secondary}` number prefix, AGaramondPro 24px headline in `{colors.ink}`, byline in `{colors.ink-secondary}` caption. `1px solid {colors.border-soft}` hairline rule between items."

### Iteration Guide

1. Start with the white canvas (`{colors.background}`) — no tints, no surface colors except for explicit newsletter or tinted rail blocks
2. Set every headline in AGaramondPro weight 400 — not bold, not a sans; the authority is in the face itself
3. Red (`{colors.primary}`) appears once, maybe twice per screen — Subscribe button and one breaking badge is the budget
4. Keep layout containers at `{rounded.none}` — only buttons and inputs earn the `{rounded.sm}` 4px
5. No drop shadows anywhere — use `1px solid {colors.border-soft}` hairlines to separate, `{colors.surface-dark}` panels for depth
6. Section rubrics go in Atlantic Serif uppercase with 1px tracking; never Garamond, never sentence case
7. Graphik for all UI chrome (nav, buttons, captions) — the editorial/interactive voice split is mandatory

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by The Atlantic. Brand names and trademarks belong to their respective owners.