W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
The New York Times
The New York Times is the paper of record — a 170-year-old newsroom whose brand voice is authoritative, considered, and visually anchored in serif typography on bright white. The identity on nytimes.com renders as near-black ink on paper-white, with a desaturated reading blue for in-copy links and the masthead's deep red reserved for breaking-news bridges. The proprietary type family — Cheltenham (display serif), Imperial (body serif), and Franklin (sans) — carries the editorial voice.
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/nyt/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/nyt/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 New York Times
The New York Times is the paper of record — a 170-year-old newsroom whose brand voice is authoritative, considered, and visually anchored in serif typography on bright white. The identity on nytimes.com renders as near-black ink on paper-white, with a desaturated reading blue for in-copy links and the masthead's deep red reserved for breaking-news bridges. The proprietary type family — Cheltenham (display serif), Imperial (body serif), and Franklin (sans) — carries the editorial voice.
Tags: nyt, new-york-times, news, journalism, brand, serif, paper, light-first
Atoms
Palette
The New York Times · [email protected] · Proprietary — All Rights Reserved
The New York Times palette as deployed on nytimes.com. The brand is paper-toned and ink-led: a near-black "Ink" body color on a bright white canvas, with a small accent set — a desaturated link blue ("Reading Blue"), the masthead's deep red ("Masthead Red"), and a tight gray scale used for rules, captions, and meta. The result reads as authoritative print on screen.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Playfair Display ([email protected]) |
OFL-1.1 | serif |
body |
PT Serif ([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 |
|---|---|---|
ink-black |
Ink Black | #121212 |
ink-medium |
Ink Medium | #363636 |
ink-light |
Ink Light | #5A5A5A |
gray-light |
Gray Light | #727272 |
gray-rule |
Gray Rule | #979797 |
gray-border |
Gray Border | #C7C7C7 |
gray-divider |
Gray Divider | #DFDFDF |
gray-tint |
Gray Tint | #EBEBEB |
gray-surface |
Gray Surface | #F7F7F7 |
paper |
Paper | #F8F8F8 |
white |
White | #FFFFFF |
reading-blue |
Reading Blue | #346EB7 |
reading-blue-hover |
Reading Blue Hover | #2B8AD8 |
masthead-red |
Masthead Red | #D0021B |
masthead-red-bright |
Masthead Red Bright | #F4564A |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
paper |
#F8F8F8 |
surface-elevated |
white |
#FFFFFF |
text-primary |
ink-black |
#121212 |
text-secondary |
ink-medium |
#363636 |
text-tertiary |
ink-light |
#5A5A5A |
primary |
reading-blue |
#346EB7 |
primary-hover |
reading-blue-hover |
#2B8AD8 |
accent |
masthead-red |
#D0021B |
accent-hover |
masthead-red-bright |
#F4564A |
error |
masthead-red |
#D0021B |
border |
gray-divider |
#DFDFDF |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
ink-black |
#121212 |
surface |
ink-medium |
#363636 |
surface-elevated |
ink-light |
#5A5A5A |
text-primary |
white |
#FFFFFF |
text-secondary |
gray-divider |
#DFDFDF |
text-tertiary |
gray-border |
#C7C7C7 |
primary |
reading-blue-hover |
#2B8AD8 |
primary-hover |
reading-blue |
#346EB7 |
accent |
masthead-red-bright |
#F4564A |
accent-hover |
masthead-red |
#D0021B |
error |
masthead-red-bright |
#F4564A |
border |
ink-light |
#5A5A5A |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
ink-black |
#121212 |
primary |
reading-blue |
#346EB7 |
primary-hover |
reading-blue-hover |
#2B8AD8 |
accent |
masthead-red |
#D0021B |
accent-hover |
masthead-red-bright |
#F4564A |
mark |
ink-black |
#121212 |
error |
masthead-red |
#D0021B |
text-primary-light |
ink-black |
#121212 |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
ink-black |
#121212 |
surface-light |
paper |
#F8F8F8 |
surface-dark |
ink-medium |
#363636 |
text-secondary-light |
ink-medium |
#363636 |
text-tertiary-light |
ink-light |
#5A5A5A |
border-light |
gray-divider |
#DFDFDF |
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 Black (#121212) on White (#FFFFFF) gives ~18:1 — well past AAA. The NYT's long-form reading posture and the density of body type on a typical article page justify the AAA enhanced contrast target rather than the AA floor.
colorChoice → roles.colors.accent
- allowed: masthead-red, masthead-red-bright
- forbidden: reading-blue, reading-blue-hover
The masthead red (#D0021B) is reserved for breaking-news bridges, live-update kickers, and the legacy masthead bridge. Substituting reading-blue (the in-copy link color) for the accent role would conflate the link-affordance meaning with the breaking-news meaning.
contextRestriction → roles.colors.accent
- forbiddenContexts: default-link, body-emphasis, cta
- allowedContexts: breaking-news, live-update, editorial-kicker, masthead
Masthead Red carries semantic weight in NYT's editorial grammar — it signals urgency and live coverage. Using it as a default CTA or in-copy link color would dilute that meaning and conflict with the editorial taxonomy.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
NYT pairs the Cheltenham display serif with Imperial for body prose at a clear size step. The display-to-prose hierarchy is part of how the page reads as a newspaper — a 1.5× minimum ratio preserves that hierarchy when open-source substitutes (Playfair Display / PT Serif) stand in for the proprietary primaries.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, cropped
The NYT Old English masthead is a near-sacred mark. Any recoloring, rotation, gradient, or skew would conflict with the brand's authority and is forbidden by the NYT brand standards reflected in every published rendering.
⚠️ warning (2)
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. NYT's body type is dense; readers spend long sessions on article pages. The AAA contrast target serves that reading posture better than the AA floor.
enumMembership → typography.prose.fontStyle
- allowed: normal, italic
- forbidden: oblique
Imperial (and the PT Serif substitute) ships true italics cut as a separate face. Synthetic oblique skews are forbidden — they degrade legibility of the body face and conflict with the typographic discipline that defines the NYT reading experience.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: white, paper, ink-black
- doesNotPairWith: masthead-red, masthead-red-bright
Reading Blue (#346EB7) reads cleanest on the paper canvas or against ink. Placing it adjacent to the masthead red introduces an editorial-color collision — the page loses its hierarchy because two competing accent signals fight for attention.
Provenance
- Source: https://www.nytimes.com/
- License:
Proprietary — All Rights Reserved - Attribution: The New York Times Company — visual identity captured from the deployed HTML and inline CSS on nytimes.com. The New York Times, its masthead, and the Cheltenham / Imperial / Franklin typefaces are property of The New York Times Company.
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.nytimes.com/ on 2026-05-19; no public brand guide located. The proprietary NYT type family (nyt-cheltenham, nyt-imperial, nyt-franklin) is declared in @font-face on the live site but is not publicly distributed. Open-source substitutes are referenced here — playfair-display@1 for the display serif, pt-serif@1 for body prose, and inter@1 for the sans role.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by The New York Times
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 New York Times
A clear hierarchy in The New York Times'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 New York Times
[email protected]font · heading
Playfair Display
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
PT Serif
[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
→ masthead-red #D0021B accent-hover
→ masthead-red-bright #F4564A background-dark
→ ink-black #121212 background-light
→ white #FFFFFF border-light
→ gray-divider #DFDFDF error
→ masthead-red #D0021B identity
→ white #FFFFFF mark
→ ink-black #121212 on-identity
→ ink-black #121212 primary
→ reading-blue #346EB7 primary-hover
→ reading-blue-hover #2B8AD8 surface-dark
→ ink-medium #363636 surface-light
→ paper #F8F8F8 text-primary-dark
→ white #FFFFFF text-primary-light
→ ink-black #121212 text-secondary-light
→ ink-medium #363636 text-tertiary-light
→ ink-light #5A5A5A Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Playfair Display prose
→ body PT Serif ui
→ sans Inter Palette mode mappings (from nyt)
Light mode (12 roles)
accent
→ masthead-red accent-hover
→ masthead-red-bright background
→ white border
→ gray-divider error
→ masthead-red primary
→ reading-blue primary-hover
→ reading-blue-hover surface
→ paper surface-elevated
→ white text-primary
→ ink-black text-secondary
→ ink-medium text-tertiary
→ ink-light Dark mode (12 roles)
accent
→ masthead-red-bright accent-hover
→ masthead-red background
→ ink-black border
→ ink-light error
→ masthead-red-bright primary
→ reading-blue-hover primary-hover
→ reading-blue surface
→ ink-medium surface-elevated
→ ink-light text-primary
→ white text-secondary
→ gray-divider text-tertiary
→ gray-border Rules (8 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Ink Black (#121212) on White (#FFFFFF) gives ~18:1 — well past AAA. The NYT's long-form reading posture and the density of body type on a typical article page justify the AAA enhanced contrast target rather than the AA floor.
colorChoice roles.colors.accent allowed masthead-red, masthead-red-bright forbidden reading-blue, reading-blue-hover The masthead red (#D0021B) is reserved for breaking-news bridges, live-update kickers, and the legacy masthead bridge. Substituting reading-blue (the in-copy link color) for the accent role would conflate the link-affordance meaning with the breaking-news meaning.
contextRestriction roles.colors.accent forbiddenContexts default-link, body-emphasis, cta allowedContexts breaking-news, live-update, editorial-kicker, masthead Masthead Red carries semantic weight in NYT's editorial grammar — it signals urgency and live coverage. Using it as a default CTA or in-copy link color would dilute that meaning and conflict with the editorial taxonomy.
fontPairing typography.display requires prose minSizeRatio 1.5 NYT pairs the Cheltenham display serif with Imperial for body prose at a clear size step. The display-to-prose hierarchy is part of how the page reads as a newspaper — a 1.5× minimum ratio preserves that hierarchy when open-source substitutes (Playfair Display / PT Serif) stand in for the proprietary primaries.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, cropped The NYT Old English masthead is a near-sacred mark. Any recoloring, rotation, gradient, or skew would conflict with the brand's authority and is forbidden by the NYT brand standards reflected in every published rendering.
warning · 2 rules
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. NYT's body type is dense; readers spend long sessions on article pages. The AAA contrast target serves that reading posture better than the AA floor.
enumMembership typography.prose.fontStyle allowed normal, italic forbidden oblique Imperial (and the PT Serif substitute) ships true italics cut as a separate face. Synthetic oblique skews are forbidden — they degrade legibility of the body face and conflict with the typographic discipline that defines the NYT reading experience.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith white, paper, ink-black doesNotPairWith masthead-red, masthead-red-bright Reading Blue (#346EB7) reads cleanest on the paper canvas or against ink. Placing it adjacent to the masthead red introduces an editorial-color collision — the page loses its hierarchy because two competing accent signals fight for attention.
Provenance
- Source
- https://www.nytimes.com/
- License
Proprietary — All Rights Reserved- Attribution
- The New York Times Company — visual identity captured from the deployed HTML and inline CSS on nytimes.com. The New York Times, its masthead, and the Cheltenham / Imperial / Franklin typefaces are property of The New York Times Company.
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.nytimes.com/ on 2026-05-19; no public brand guide located. The proprietary NYT type family (nyt-cheltenham, nyt-imperial, nyt-franklin) is declared in @font-face on the live site but is not publicly distributed. Open-source substitutes are referenced here — playfair-display@1 for the display serif, pt-serif@1 for body prose, and inter@1 for the sans role.