The Atlantic Design System: Editorial Authority & Clarity

Alright — let’s tear into The Atlantic’s design system.

1. Brand Overview

The Atlantic isn’t playing the same game as tech startups or e‑commerce giants. This is a century-old publication that’s selling trust, intellectual depth, and cultural gravitas. Their world page is heavy on editorial voice, light on overt brand marketing. Every design choice whispers: we’re serious, but accessible.

The vibe is traditional serif elegance with modern usability bolted on. You see it instantly in typography — Adobe Garamond Pro, Atlantic Serif, Times — not because they’re trendy, but because they carry history. Graphik and Logic Monospace are the “functional” counterpoints, handling UI labels, captions, and data calls in a no-nonsense way.

Colors are restrained. Lots of black (#000000), pure white (#ffffff), muted grays (#5e6a74), with a snap of red (#e7131a) as an accent — which absolutely screams “editorial urgency” in the news world. Blue (#0000ee) is link territory, and a darker, richer #005fcc appears on hover or focus states.

The audience? Readers who expect text to be the star. Designers working on this system can’t hide behind gradients and glowing buttons — content drives the layout. This means spacing, borders, and typographic hierarchy aren’t “supporting” the branding, they are the branding.

Philosophy in three words: Authority, clarity, restraint.

2. Color System

2.1 Primary Colors

What’s the main event here? Black, white, and blue links. Black (#000000) in text and UI containers keeps things sober. White (#ffffff) is the field — the untouched paper. Blue (#0000ee) is functional, not decorative: in this design language, blue = clickable.

They do throw in the vivid red (#e7131a) — a “break glass” color, used sparingly. This isn’t accent teal or brand mint. It’s designed to shout when the content needs urgency: breaking news, warnings, critical opinion pieces.

2.2 Complete Palette

This is a tight palette. Notice zero yellows, greens, oranges — they’re working in a two‑accent system (blue/red) laid over a grayscale foundation.

2.3 Color Relationships

Accessibility: Black (#000000) on white (#ffffff) — perfect contrast. Link Blue (#0000ee) passes for accessibility if not used on darker backgrounds. Red (#e7131a) needs white or very light gray behind it; it’s chromatically aggressive but can fail contrast when used as text over dark gray backgrounds — be careful.

Hover/Focus Rich Blue (#005fcc) is chosen for depth — it’s less “default link” and more “engaged state.” It’s dark enough to differentiate from default blue.

Dark mode — not much direct data here, but --nav-border-color-dark: #9b9b9b hints at a system aware of mode toggling.

2.4 Usage Guide

• Combos that work:

  • Black text (#000000) on white background (#ffffff) — base.
  • Blue (#0000ee) links in body copy — clear affordance.
  • Editorial red (#e7131a) on white — attention cue.
  • Rich Blue (#005fcc) as hovered/selected states — clear progression.

• Avoid:

  • Red text on gray (#5e6a74) — kills contrast.
  • Blue links on red background — illegible and jarring.
  • Mixing Rich Blue hover with red focus state — cognitive overload.

3. Typography

3.1 Font Families

They’re running a mixed stack:

• AGaramondPro — primary serif for headings and body. Fallbacks: Adobe Garamond Pro, garamond, Times.
• Atlantic Serif — custom serif (likely brand asset). Fallbacks: Atlantic, Bodoni, Times.
• Graphik — geometric sans for UI/captions. Fallbacks: system fonts like -apple-system, Roboto, Helvetica Neue, etc.
• Logic Monospace — for monospace text and certain UI signals. No fallbacks listed.
• Times — standard serif for some link and heading contexts.
• System fonts — for certain captions: -apple-system, blinkmacsystemfont, roboto, Helvetica Neue, helvetica, arial.

No Google Fonts, no Adobe cloud fonts — they’re self-hosting.

3.2 Type Scale

Partial table (linking size, weight, etc.):

3.3 Hierarchy

They use size and weight tightly to signal hierarchy. Big serifs dominate page titles (38px, 35.2px). The moment you drop into UI scale (16px, 14px, 12px), Graphik and Logic Monospace take over. It’s a clear editorial vs functional split.

Uppercase transforms and letterspacing (1px on Atlantic Serif, 0.5px on small monos) add texture without resorting to color changes.

4. Spacing & Layout

4.1 Spacing Scale

Base system: 8px scale. They also allow 4px and 2px — finer control in dense layouts.

Common values:

• 2px — micro gaps
• 4px — icon padding, tight UI clusters
• 5px, 6px — odd, probably editorial image captions
• 8px — small component padding
• 10px — rare inputs
• 12px — very common (92 uses), default small gap
• 16px — standard UI gap, small section padding
• 20px — dominant (115 uses), main content gap
• 24px — roomy component padding
• 32px+ — section breaks and hero spacing
• Upper range: 40px, 42px, 48px — major layout shifts
• Rare: 70px–164px — massive hero/feature spacing.

4.2 Layout

No breakpoints extracted (data says breakpoints: []), but the spacing profile suggests a responsive grid that scales in 8px increments. Without explicit widths, you’d match content containers roughly to editorial norms (~700–900px for body).

5. Visual Elements

Border Radius

• 2px — subtle rounding (badges, small divs)
• 4px — common (buttons, inputs)
• 8px — rarer, possibly large inputs

They keep corners crisp. No pills, no full-radius shapes for CTAs.

Shadows

Three shadows only:

• rgba(0,0,0,0.2) 0px 2px 20px 0px — deep, soft drop.
• rgba(0,0,0,0.5) 0px 1px 3px 0px — tight, sharp.
• rgb(128,128,128) 0px 0px 5px 0px — neutral edge.

Each appears just once. This brand isn’t using depth as a primary design cue — borders do most of the work.

Borders and Dividers

Heavy use: 1px solid black, white, or grays for container edges. none none solid bottom borders on div/li dominate. No gradient edges — all solid.

6. Components

6.1 Buttons

Two variants:

Primary (Magazine_button__ojSaE):

• Default: background: rgb(0,0,0), color: #ffffff.
• Padding: 8px top, 16px sides, 10px bottom.
• Border radius: 4px.
• Border: 1px solid black.
• Font size: 14px, weight: 400.

Hover/Active/Focus states not explicitly defined — probably handled by custom interactions.

Secondary (AIWatchdogPromo_button__z2iOh):

• Default: background white, text black.
• Same padding, radius, size, weight.
• Border: 1px solid white.

There’s minimal styling difference beyond inversion of colors.

6.2 Links

Three link styles:

1. White text, no underline, weight 700 — likely nav links.
2. Black text, underline, weight 400 — body inline links.
3. Blue (#0000ee), underline, weight 400 — traditional web links.

Hover states not documented — might rely on default browser behavior or color shifts via #005fcc.

6.3 Forms

Email input:

• Background white, text black.
• Border: 1px solid #c0ccda.
• Border radius: 4px.
• Padding: 10px top/bottom, 16px sides.

Focus state undefined here — implement with accessible outline if replicating.

6.4 Cards

No explicit “card” object in the data, but decorative borders/shadows suggest minimal card styling — likely white backgrounds with 1px borders, minimal shadows.

7. Design Tokens — CSS Custom Properties

:root {
  /* Colors */
  --color-link-blue: #0000ee;
  --color-white: #ffffff;
  --color-slate-gray: #5e6a74;
  --color-editorial-red: #e7131a;
  --color-rich-blue-hover: #005fcc;
  --nav-border-color-light: #c1c1c1;
  --nav-border-color-dark: #9b9b9b;
  --article-image-loading-placeholder-color: #c0ccda;
  --color-black: #000000;
  --color-border-img: #d3dce6;
  --color-border-link-red: #d0021b;
  --color-border-div-indigo: #655ade;
  --color-border-img-svg: rgba(0,0,0,0.4);
  --color-border-white: #ffffff;
  --color-border-input: #c0ccda;
  --color-border-textarea: #c1c1c1;

  /* Typography */
  --font-agaramondpro: "AGaramondPro","Adobe Garamond Pro",garamond,Times;
  --font-atlantic-serif: "Atlantic Serif","Atlantic","Bodoni",Times;
  --font-graphik: "Graphik",-apple-system,system-ui,Roboto,"Helvetica Neue","Segoe UI",Arial;
  --font-logicmono: "Logic Monospace";
  --font-times: Times;
  --font-system: -apple-system,blinkmacsystemfont,roboto,"Helvetica Neue",helvetica,arial;

  /* Spacing scale (px) */
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-42: 42px;
  --space-48: 48px;
  --space-70: 70px;
  --space-74: 74px;
  --space-76: 76px;
  --space-80: 80px;
  --space-164: 164px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.2) 0px 2px 20px 0px;
  --shadow-md: rgba(0,0,0,0.5) 0px 1px 3px 0px;
  --shadow-sm: rgb(128,128,128) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# The Atlantic Design System Specification

You are a The Atlantic design expert. Build UIs matching their visual language exactly.

## Brand Context
The Atlantic values editorial authority, clarity, and restrained visual design. Serif typography dominates page content, while sans-serif and monospace fonts handle functional UI. The color palette is tight and purposeful — blue for links, red for urgency, black and white for structure.

## Color Palette
- Link Blue: #0000ee — default hyperlinks
- White: #ffffff — backgrounds, nav text
- Slate Gray: #5e6a74 — secondary text, metadata
- Editorial Red: #e7131a — urgent content highlights
- Rich Blue (Hover/Focus): #005fcc — interactive states
- Nav Border Light: #c1c1c1 — light mode nav borders
- Nav Border Dark: #9b9b9b — dark mode nav borders
- Article Image Placeholder: #c0ccda — loading state
- Black: #000000 — primary text and border
- Soft Gray Border: #d3dce6 — image edges
- Dark Red Border: #d0021b — special link element
- Indigo Border: #655ade — decorative divider
- Semi-transparent Gray Border: rgba(0,0,0,0.4) — subtle UI edges
- Input Border: #c0ccda — form fields
- Textarea Border: #c1c1c1 — text areas

## Typography
- Headings: "AGaramondPro", Adobe Garamond Pro, garamond, Times
- Alternate Headings: "Atlantic Serif", Atlantic, Bodoni, Times
- UI Sans: "Graphik", -apple-system, system-ui, Roboto, Helvetica Neue, Segoe UI, Arial
- Monospace: "Logic Monospace"
- Standard Serif: Times

### Type Scale
| Level | Font | Size | Weight | Line Height | Use |
| H1 Large | AGaramondPro | 38px | 400 | 1.16 | Article titles |
| H1 Alt | Atlantic Serif | 35.2px | 100 | 1.14 | Special features |
| H1 Upper | Atlantic Serif | 32px | 400 | 1.00 | Section headers (uppercase) |
| UI Head | Graphik | 24px | 700 | 1.15 | Component headers |
| Body Serif | AGaramondPro | 18px | 400 | 1.44 | Paragraphs |
| UI Sans Sm | Graphik | 16px | 400/500 | 1.25 | Links, buttons |
| Caption Sans | Graphik | 14px | 400/700 | varies | Captions |
| Caption Mono | Logic Monospace | 12px | 400/500 | varies | Monospace labels |

## Spacing & Grid
Base: 8px. Scale: 2, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 42, 48, 70, 74, 76, 80, 164px.
- Buttons: 8px vertical, 16px horizontal
- Cards: 20px padding common
- Sections: 40px+ gaps

## Border Radius
- sm: 2px — badges
- md: 4px — buttons, inputs
- lg: 8px — large inputs

## Shadows & Depth
Rare usage:
- Large: rgba(0,0,0,0.2) 0px 2px 20px
- Medium: rgba(0,0,0,0.5) 0px 1px 3px
- Small: rgb(128,128,128) 0px 0px 5px
Prefer borders to define separation.

## Components

### Primary Button
```css
.btn-primary {
  background-color: #000000;
  color: #ffffff;
  padding: 8px 16px 10px;
  border-radius: 4px;
  border: 1px solid #000000;
  font-weight: 400;
  font-size: 14px;
  box-shadow: none;
}
```

### Secondary Button
```css
.btn-secondary {
  background-color: #ffffff;
  color: #000000;
  padding: 8px 16px 10px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  font-weight: 400;
  font-size: 14px;
}
```

### Link Styles
```css
.link-white {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}
.link-black {
  color: #000000;
  text-decoration: underline;
  font-weight: 400;
}
.link-blue {
  color: #0000ee;
  text-decoration: underline;
  font-weight: 400;
}
```

### Input Field
```css
.input-email {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #c0ccda;
  border-radius: 4px;
  padding: 10px 16px;
}
```

## Layout & Responsive Rules
- Max content width: ~700–900px for articles
- Page padding: multiples of 8px
- Grid gap between items: 20px common

## Interaction Rules
- Transition timing: 150ms ease for hover/focus changes
- Focus indicators: use #005fcc or system outline
- Loading states: #c0ccda placeholders for images

## DO List
- Use ONLY palette colors
- Maintain 8px grid
- Serif fonts for editorial content; sans for UI
- Use uppercase Atlantic Serif for section headings
- Keep borders 1px solid — no drop shadows unless specified
- Respect line heights

## DON'T List
- No new colors outside palette
- No pill-shaped buttons
- No heavy shadows unless specified
- No mixing serif and sans in the same line
- No changing link color from blue unless in nav context

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #000;
  color: #fff;
  padding: 8px 16px 10px;
  border-radius: 4px;
  border: 1px solid #000;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #fff;
  color: #000;
  padding: 8px 16px 10px;
  border-radius: 4px;
  border: 1px solid #fff;
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  border: 1px solid #d3dce6;
}
```

Form Input:
```css
.input {
  border: 1px solid #c0ccda;
  border-radius: 4px;
  padding: 10px 16px;
  background: #fff;
  font-size: 14px;
}
```

9. Summary

TL;DR — The Atlantic’s design system is editorial-first: high-contrast black and white, blue links, and sparing red for urgency. Serif for content, sans for function. Spacing is strict, corners are tight, shadows are rare.

Brand Keywords:

• editorial-authority
• serif-driven
• restrained-minimal
• content-centric
• functionally-sober