What is The Atlantic's primary brand color?

The Atlantic anchors on a black-on-white monochrome and reserves a single hazard red, #e7131a, for the Subscribe CTA. The red appears five times in the extracted token sweep — all five as either button fill, button border, or kicker text — and never as a background wash. A darker variant, #d0021b, shows up exactly once on a button border to add weight against the brighter fill. Everything else on the page is #000000 ink against a #ffffff canvas; the chromatic illustration accents (#ffc200, #ff5e19, #4d76ff, #e65ca1, #0076bf, #0066be) appear inside editorial photography, not as chrome. The brand voltage is the cream of the print spine ported as a single red pill.

What typography does The Atlantic use, and what should I substitute?

Four families do the work. AGaramondPro (Adobe Garamond Pro) carries article bodies and hero headlines at 16–38px in weight 400, with a single 600 variant for emphasis links. Atlantic Serif (the proprietary in-house face) owns UPPERCASE section titles at 28–32px with 1px tracking — it is treated as a folio rule, not a body face. Logic Monospace handles every UPPERCASE kicker, timestamp, byline, and category tag at 10–14px in weights 300/400/500. Graphik appears only inside the Subscribe CTA and a single text input at 14px / 400. If AGaramondPro is unavailable, EB Garamond, Cormorant Garamond, or Adobe Caslon Pro substitute at the same metrics. For Atlantic Serif, GT Sectra or Tiempos Headline UPPERCASE work. JetBrains Mono or IBM Plex Mono replace Logic Monospace without adjustment.

Why is everything at 4px radius?

The Atlantic uses three radius values — 2px, 4px, and 12px — across the entire homepage, with 4px doing 80% of the work (eight occurrences vs four for 12px and one for 2px). 4px is the radius on the Subscribe CTA, the text input, every photo thumbnail, and every nested image. 12px is reserved for the magazine cover card lockup, where the larger curve quietly signals editorial-feature elevation. 2px appears once on a metadata badge. Sharp rectangles do not exist in the system — even the tightest editorial tag rounds to 2px — and the absence of pill geometry is deliberate: the print magazine has square folio rules, and the website honors that print rule rather than importing the SaaS pill habit.

What is Logic Monospace doing on a magazine?

Logic Monospace is the typographic fingerprint of an Atlantic page. The monospace shows up seventy-eight times across the homepage at 13px / 500 UPPERCASE with 0.5px tracking — it is the most-occurring single typographic signature in the extraction. It carries every kicker (Politics, Culture, Technology), every timestamp, every byline credit, and every UPPERCASE category tag below a photograph. The choice quotes mid-century newsroom teletype rather than digital code — a deliberate inversion of the convention where monospace signals technical content. On The Atlantic, monospace signals editorial metadata, and the contrast against the AGaramondPro serif body is the page's quiet structural rhythm.

Can I use this DESIGN.md to build a long-form React publication?

Yes. Feed the file to Claude, Cursor, or any agent that reads structured design tokens and it reproduces The Atlantic's voice — white canvas, two-serif discipline, hazard-red CTA scarcity, monospace metadata layer, photo-driven grid. The spec captures the full token vocabulary, component definitions, and the print-fidelity color rules. Animation, the article-detail long-form reading view (which uses a different drop-cap and pull-quote system), the audio player chrome, and the paywall modal are out of scope — they live on different surfaces with their own type ladders and tighter spacing tokens.

Does The Atlantic have a dark mode?

The marketing homepage extracted here is light-only — #ffffff canvas with #000000 ink. The print-fidelity logic that drives the rest of the system would resist a one-step inversion: a literal black canvas with white serifs reads as a luxury fashion brand, not as The Atlantic. If you derive a dark variant from these tokens, invert canvas to a warm #14110d (matching the warmth of the magazine paper rather than a cool slate) and shift ink to #f5f1e8 — pure black on pure white is the daytime voice, and a pure inversion would lose the printed-paper continuity that defines the light surface.

The Atlantic Design System

The Atlantic homepage as a DESIGN.md file.

About The Atlantic DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source theatlantic.com

News & Publishing

The Atlantic's homepage is a print magazine cover translated literally to the browser. The canvas is pure white, the headline serif is AGaramondPro at 38px in weight 400, and the section labels above the photography grid are set in a separate face called Atlantic Serif at 32px UPPERCASE with 1px tracking. Two serifs is the move — most publishing platforms compromise to one, but The Atlantic treats the section title (Atlantic Serif, UPPERCASE) and the article headline (AGaramondPro, sentence case) as different typographic registers, the way a print issue separates a folio rule from a feature dek. The only chromatic CTA on the page is a Subscribe button in hazard red #e7131a; everything else is black ink on white, with a Logic Monospace metadata layer carrying timestamps, bylines, kickers, and category labels.

This DESIGN.md file packages the homepage system into a structured spec. Inside: twenty color tokens covering the ink, hazard red, illustration accents, and the cssVariable greys that wrap loading placeholders; ten typography tokens spanning AGaramondPro article serif (16–38px), Atlantic Serif section labels (28–32px UPPERCASE), Logic Monospace metadata (10–14px), and a Graphik fallback used only inside CTAs and form inputs; a tight four-step radius scale anchored on "4px" with "12px" reserved for the magazine card lockup; a ten-step spacing scale built on a "4px / 20px" rhythm; and seventeen component specifications covering the masthead, photo grid, Atlantic Daily promo strip, footer rail, Subscribe pill, and the editorial moments that interrupt the article feed. The format follows the Google Labs DESIGN.md specification.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces The Atlantic's print-faithful voice — white canvas, two-serif typographic discipline, hazard-red CTA scarcity, monospace metadata, and photo-driven grid. Where most digital publications dilute their print identity for SaaS-friendly chrome, The Atlantic ports the 167-year-old magazine spine almost untouched: the serif is the brand, the photography is the layout, and the red Subscribe button is the same red that runs along the printed magazine's gutter. Reference the tokens directly in Tailwind config or paste the hex values into CSS variables — the spec captures the full ladder a long-form publication needs without inheriting the SaaS landing-page reflex.

What makes it distinct

Two-serif stackAGaramondPro carries article bodies and hero headlines, Atlantic Serif owns UPPERCASE section titles, never blended in the same headline
Hazard-red Subscribe CTA#e7131a fill at 4px radius is the single chromatic CTA in the system, used in just three of nineteen components
Logic Monospace UPPERCASE metadatakicker, timestamp, byline, and category tag all run mono at 10–14px, the fingerprint of an Atlantic page
Photo-grid identitysquare and 16:9 thumbnails do the work of feature illustrations; the chrome around them is 4px-radius restraint and pure black hairlines
Print-fidelity color disciplinefifteen extracted hexes, six chromatic, and only red appears in a CTA; the rest are reserved for editorial illustration

Live at theatlantic.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

theatlantic.com

Explore The Atlantic

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

The Atlantic design system FAQ

Common questions about The Atlantic's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

The Atlantic — official site

The publication itself — read the homepage to see AGaramondPro at 38px and the red Subscribe pill in context.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use The Atlantic in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→