Media

The Atlantic

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.

Color Palette19 tokens

background#ffffff

surface#f5f5f5

surface-dark#000000

ink#000000

ink-secondary#5e6a74

on-background#000000

on-surface#000000

on-primary#ffffff

primary#e7131a

primary-dark#b5000a

nav-border-light#c1c1c1

nav-border-dark#9b9b9b

image-placeholder#c0ccda

error#e7131a

border#c1c1c1

border-soft#e5e5e5

input-border#c0ccda

shadow-soft#d9d9d9

focus-ring#e7131a

Buttons

TypographyGoogle Font

EB Garamondbrand uses AGaramondPro

display-hero

The quick brown fox

60px · 400 · -0.5px

display

The quick brown fox

38px · 400 · 0px

heading-section

The quick brown fox

32px · 400 · 1px

heading-sub

The quick brown fox

24px · 400 · 0px

section-kicker

The quick brown fox

32px · 400 · 1px

IconsLucide

Set: Lucide · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

The Atlantic

Editorial design system for a 165-year-old American magazine — serif authority, restrained ink palette, and a single fla…

Media

none

pill

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

The Atlantic

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…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeMediaThe Atlantic

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to The Atlantic.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// The Atlantic tokens
export const theme = {
  primary: "#e7131a",
  radius: "8px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

The Atlantic's visual identity carries 165 years of print authority into the browser without apology. The page opens on a pure white canvas () held together by two serifs — a sturd…

The Atlantic · Media