W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
The Atlantic
The Atlantic is a 165-year-old American magazine — founded 1857 — known for long-form essay journalism on politics, ideas, and culture. The visual identity is paper-toned and considered: warm cream canvas, deep ink body, a signature ™-red (#E7131A) for the masthead lockup, and a calm cyan-blue for trusted-source link affordances. The proprietary Lyon (display serif), Atlantic Condensed, Druk, and Goldwyn carry the editorial voice, with Graphik handling sans-serif chrome.
1 palette 4 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/the-atlantic/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/the-atlantic/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
The Atlantic
The Atlantic is a 165-year-old American magazine — founded 1857 — known for long-form essay journalism on politics, ideas, and culture. The visual identity is paper-toned and considered: warm cream canvas, deep ink body, a signature ™-red (#E7131A) for the masthead lockup, and a calm cyan-blue for trusted-source link affordances. The proprietary Lyon (display serif), Atlantic Condensed, Druk, and Goldwyn carry the editorial voice, with Graphik handling sans-serif chrome.
Tags: the-atlantic, atlantic, magazine, journalism, brand, red, cream, serif, essay
Atoms
Palette
The Atlantic · [email protected] · Proprietary — All Rights Reserved
The Atlantic palette as deployed on theatlantic.com. The 165-year publication's identity is anchored by the signature Atlantic red (#E7131A) — the masthead and ™ accent — paired with a deep graphite ink on a warm cream canvas (#FAF4EB). Secondary desaturated grays and a calm teal-cyan handle data viz and interactive emphasis. The proprietary Lyon (display serif), Atlantic Condensed, Druk (display), Goldwyn, and Graphik (sans) typefaces carry the long-form essay voice.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Playfair Display ([email protected]) |
OFL-1.1 | serif |
body |
Lora ([email protected]) |
OFL-1.1 | serif |
sans |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
signature-red |
Atlantic Red | #E7131A |
red-bright |
Red Bright | #F0204F |
red-deep |
Red Deep | #D0021B |
cream |
Cream | #FAF4EB |
white |
White | #FFFFFF |
surface-light |
Surface Light | #F7F7F7 |
surface-tint |
Surface Tint | #F5F5F5 |
surface-quiet |
Surface Quiet | #F4F4F4 |
surface-faint |
Surface Faint | #F0F0F0 |
ink |
Ink | #1E1E1E |
ink-warm |
Ink Warm | #2C2C2C |
ink-cool |
Ink Cool | #2D2D2D |
graphite |
Graphite | #39434B |
graphite-medium |
Graphite Medium | #484542 |
graphite-quiet |
Graphite Quiet | #5E6A74 |
gray-disabled |
Gray Disabled | #9B9B9B |
gray-border |
Gray Border | #C1C1C1 |
gray-divider |
Gray Divider | #DBDBDB |
cyan-deep |
Cyan Deep | #00ADC3 |
cyan-bright |
Cyan Bright | #31C6CC |
blue-link |
Blue Link | #0076BF |
blue-link-deep |
Blue Link Deep | #0066BE |
navy |
Navy | #000929 |
gold |
Gold | #FFC200 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
cream |
#FAF4EB |
surface |
surface-light |
#F7F7F7 |
surface-elevated |
white |
#FFFFFF |
text-primary |
ink |
#1E1E1E |
text-secondary |
graphite |
#39434B |
text-tertiary |
graphite-quiet |
#5E6A74 |
primary |
blue-link |
#0076BF |
primary-hover |
blue-link-deep |
#0066BE |
accent |
signature-red |
#E7131A |
accent-hover |
red-deep |
#D0021B |
warning |
gold |
#FFC200 |
error |
red-deep |
#D0021B |
border |
gray-divider |
#DBDBDB |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
ink |
#1E1E1E |
surface |
graphite |
#39434B |
surface-elevated |
graphite-medium |
#484542 |
text-primary |
cream |
#FAF4EB |
text-secondary |
gray-divider |
#DBDBDB |
text-tertiary |
gray-border |
#C1C1C1 |
primary |
cyan-bright |
#31C6CC |
primary-hover |
cyan-deep |
#00ADC3 |
accent |
signature-red |
#E7131A |
accent-hover |
red-bright |
#F0204F |
warning |
gold |
#FFC200 |
error |
red-bright |
#F0204F |
border |
graphite |
#39434B |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
cream |
#FAF4EB |
on-identity |
ink |
#1E1E1E |
primary |
blue-link |
#0076BF |
primary-hover |
blue-link-deep |
#0066BE |
accent |
signature-red |
#E7131A |
accent-hover |
red-deep |
#D0021B |
mark |
signature-red |
#E7131A |
warning |
gold |
#FFC200 |
error |
red-deep |
#D0021B |
text-primary-light |
ink |
#1E1E1E |
text-primary-dark |
cream |
#FAF4EB |
background-light |
cream |
#FAF4EB |
background-dark |
ink |
#1E1E1E |
surface-light |
surface-light |
#F7F7F7 |
surface-dark |
graphite |
#39434B |
text-secondary-light |
graphite |
#39434B |
text-tertiary-light |
graphite-quiet |
#5E6A74 |
border-light |
gray-divider |
#DBDBDB |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
ui |
sans |
code |
mono |
Rules
🛑 error (5)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Ink (#1E1E1E) on cream (#FAF4EB) gives ~15:1 — past AAA. The Atlantic's long-form essay format is the canonical reading posture for the brand; the AAA contrast target preserves legibility through long article sessions.
colorChoice → roles.colors.mark
- allowed: signature-red, red-deep, ink
- forbidden: blue-link, cyan-deep, gold, navy
The Atlantic ™ mark is rendered in the signature red on cream or white. The blue, cyan, gold, and navy colors are reserved for link/data/warning roles; recoloring the mark would conflict with the editorial-identity hierarchy.
contextRestriction → roles.colors.accent
- forbiddenContexts: default-link, error-state, body-emphasis
- allowedContexts: masthead, mark, editorial-emphasis, feature-callout
The Atlantic red carries masthead and ™ semantic weight. The default link affordance is blue-link (#0076BF); using red as the in-copy link color would conflate identity-red with link-blue meaning.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
The Atlantic pairs Lyon display serif with Lyon Text for body — the same family at distinct optical sizes. The display-to-prose hierarchy is central to the magazine's voice; a 1.5× minimum ratio preserves it when open-source substitutes (Playfair Display, Lora) stand in.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
The Atlantic's ™ wordmark — the script "The" over Atlantic Condensed — is a heavily standardized mark. Recoloring it away from the signature red, stretching, or applying effects conflicts with the brand's print-magazine voice.
⚠️ warning (2)
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The Atlantic's reader profile skews toward long, reflective reading sessions; the enhanced contrast target supports that posture, especially against the warm cream canvas.
enumMembership → typography.body.fontStyle
- allowed: normal, italic
- forbidden: oblique
Lyon Text ships true italics as a separate face — synthetic oblique skews are forbidden in The Atlantic's typesetting and would degrade the substituting Lora face equivalently.
💡 recommendation (1)
compositionConstraint → roles.colors.accent
- pairsWith: cream, white, ink
- doesNotPairWith: blue-link, cyan-deep, gold
The Atlantic red reads cleanest on the warm cream canvas, against the ink, or on bright white. Placing it adjacent to the link blue, cyan, or gold introduces a chromatic conflict between identity-red and semantic-state colors that the magazine layouts treat as distinct registers.
Provenance
- Source: https://www.theatlantic.com/
- License:
Proprietary — All Rights Reserved - Attribution: The Atlantic Monthly Group LLC — visual identity captured from the deployed Next.js stylesheet at cdn.theatlantic.com/ _next/static/css/. The Atlantic, the Lyon / Atlantic Condensed / Druk / Goldwyn / Graphik typefaces are property of The Atlantic.
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.theatlantic.com/ on 2026-05-19; no public brand guide located. The proprietary Lyon (display serif — Kai Bernau's design, licensed by The Atlantic), Atlantic Condensed, Druk (display sans by Commercial Type), Goldwyn, and Graphik (sans by Commercial Type) typefaces are declared on the live stylesheet but are not publicly distributed in the cuts The Atlantic licenses. Open-source substitutes — lora@1 for body prose, playfair-display@1 for the display serif role, inter@1 for sans — are referenced from the brand atom.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by The Atlantic
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
The Atlantic
A clear hierarchy in The Atlantic's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
The Atlantic
[email protected]font · heading
Playfair Display
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Lora
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · sans
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ signature-red #E7131A accent-hover
→ red-deep #D0021B background-dark
→ ink #1E1E1E background-light
→ cream #FAF4EB border-light
→ gray-divider #DBDBDB error
→ red-deep #D0021B identity
→ cream #FAF4EB mark
→ signature-red #E7131A on-identity
→ ink #1E1E1E primary
→ blue-link #0076BF primary-hover
→ blue-link-deep #0066BE surface-dark
→ graphite #39434B surface-light
→ surface-light #F7F7F7 text-primary-dark
→ cream #FAF4EB text-primary-light
→ ink #1E1E1E text-secondary-light
→ graphite #39434B text-tertiary-light
→ graphite-quiet #5E6A74 warning
→ gold #FFC200 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Playfair Display prose
→ body Lora ui
→ sans Inter Palette mode mappings (from the-atlantic)
Light mode (13 roles)
accent
→ signature-red accent-hover
→ red-deep background
→ cream border
→ gray-divider error
→ red-deep primary
→ blue-link primary-hover
→ blue-link-deep surface
→ surface-light surface-elevated
→ white text-primary
→ ink text-secondary
→ graphite text-tertiary
→ graphite-quiet warning
→ gold Dark mode (13 roles)
accent
→ signature-red accent-hover
→ red-bright background
→ ink border
→ graphite error
→ red-bright primary
→ cyan-bright primary-hover
→ cyan-deep surface
→ graphite surface-elevated
→ graphite-medium text-primary
→ cream text-secondary
→ gray-divider text-tertiary
→ gray-border warning
→ gold Rules (8 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Ink (#1E1E1E) on cream (#FAF4EB) gives ~15:1 — past AAA. The Atlantic's long-form essay format is the canonical reading posture for the brand; the AAA contrast target preserves legibility through long article sessions.
colorChoice roles.colors.mark allowed signature-red, red-deep, ink forbidden blue-link, cyan-deep, gold, navy The Atlantic ™ mark is rendered in the signature red on cream or white. The blue, cyan, gold, and navy colors are reserved for link/data/warning roles; recoloring the mark would conflict with the editorial-identity hierarchy.
contextRestriction roles.colors.accent forbiddenContexts default-link, error-state, body-emphasis allowedContexts masthead, mark, editorial-emphasis, feature-callout The Atlantic red carries masthead and ™ semantic weight. The default link affordance is blue-link (#0076BF); using red as the in-copy link color would conflate identity-red with link-blue meaning.
fontPairing typography.display requires prose minSizeRatio 1.5 The Atlantic pairs Lyon display serif with Lyon Text for body — the same family at distinct optical sizes. The display-to-prose hierarchy is central to the magazine's voice; a 1.5× minimum ratio preserves it when open-source substitutes (Playfair Display, Lora) stand in.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo The Atlantic's ™ wordmark — the script "The" over Atlantic Condensed — is a heavily standardized mark. Recoloring it away from the signature red, stretching, or applying effects conflicts with the brand's print-magazine voice.
warning · 2 rules
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The Atlantic's reader profile skews toward long, reflective reading sessions; the enhanced contrast target supports that posture, especially against the warm cream canvas.
enumMembership typography.body.fontStyle allowed normal, italic forbidden oblique Lyon Text ships true italics as a separate face — synthetic oblique skews are forbidden in The Atlantic's typesetting and would degrade the substituting Lora face equivalently.
recommendation · 1 rule
compositionConstraint roles.colors.accent pairsWith cream, white, ink doesNotPairWith blue-link, cyan-deep, gold The Atlantic red reads cleanest on the warm cream canvas, against the ink, or on bright white. Placing it adjacent to the link blue, cyan, or gold introduces a chromatic conflict between identity-red and semantic-state colors that the magazine layouts treat as distinct registers.
Provenance
- Source
- https://www.theatlantic.com/
- License
Proprietary — All Rights Reserved- Attribution
- The Atlantic Monthly Group LLC — visual identity captured from the deployed Next.js stylesheet at cdn.theatlantic.com/ _next/static/css/. The Atlantic, the Lyon / Atlantic Condensed / Druk / Goldwyn / Graphik typefaces are property of The Atlantic.
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.theatlantic.com/ on 2026-05-19; no public brand guide located. The proprietary Lyon (display serif — Kai Bernau's design, licensed by The Atlantic), Atlantic Condensed, Druk (display sans by Commercial Type), Goldwyn, and Graphik (sans by Commercial Type) typefaces are declared on the live stylesheet but are not publicly distributed in the cuts The Atlantic licenses. Open-source substitutes — lora@1 for body prose, playfair-display@1 for the display serif role, inter@1 for sans — are referenced from the brand atom.