W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
The Washington Post
The Washington Post is the capital-bureau paper of record — serious, accountability-driven, with a brand voice built around the tagline "Democracy Dies in Darkness." The Washington Post Design System (WPDS) makes the brand legible at the token level: near-black ink on white, a deliberate primary blue for CTAs and trusted-source links, deep newsroom red for breaking-news emphasis, and a published 9-step gray scale. The proprietary Postoni Wide (display serif) and Franklin (sans) typefaces carry 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/wapo/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/wapo/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 Washington Post
The Washington Post is the capital-bureau paper of record — serious, accountability-driven, with a brand voice built around the tagline "Democracy Dies in Darkness." The Washington Post Design System (WPDS) makes the brand legible at the token level: near-black ink on white, a deliberate primary blue for CTAs and trusted-source links, deep newsroom red for breaking-news emphasis, and a published 9-step gray scale. The proprietary Postoni Wide (display serif) and Franklin (sans) typefaces carry the editorial voice.
Tags: washington-post, wapo, news, journalism, brand, blue, serif, light-first
Atoms
Palette
The Washington Post · [email protected] · Proprietary brand identity; design-token source code under repository license
The Washington Post palette, captured from the open-source Washington Post Design System (WPDS) tokens. The brand is a near-black ink ("gray20") on white, with a deliberate blue primary CTA (the WPDS "blue100") and a deep newsroom red reserved for breaking-news and emphasis. WPDS exposes a full 9-step gray scale and tonal ramps across blue, red, orange, green, gold, teal, purple, and pink.
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 |
|---|---|---|
gray-0 |
Gray 0 | #000000 |
gray-20 |
Gray 20 | #111111 |
gray-40 |
Gray 40 | #2A2A2A |
gray-60 |
Gray 60 | #494949 |
gray-80 |
Gray 80 | #666666 |
gray-100 |
Gray 100 | #737373 |
gray-200 |
Gray 200 | #AAAAAA |
gray-300 |
Gray 300 | #D4D4D4 |
gray-400 |
Gray 400 | #E9E9E9 |
gray-500 |
Gray 500 | #F0F0F0 |
gray-600 |
Gray 600 | #F7F7F7 |
gray-700 |
Gray 700 | #FFFFFF |
blue-40 |
Blue 40 | #0A3258 |
blue-60 |
Blue 60 | #0F4B84 |
blue-80 |
Blue 80 | #1366B3 |
blue-100 |
Blue 100 | #166DFC |
blue-200 |
Blue 200 | #5784C5 |
red-60 |
Red 60 | #8E1F1B |
red-80 |
Red 80 | #BE2C25 |
red-100 |
Red 100 | #EA0017 |
orange-80 |
Orange 80 | #D86100 |
green-80 |
Green 80 | #499327 |
gold-60 |
Gold 60 | #9E6105 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
gray-700 |
#FFFFFF |
surface |
gray-600 |
#F7F7F7 |
surface-elevated |
gray-700 |
#FFFFFF |
text-primary |
gray-20 |
#111111 |
text-secondary |
gray-60 |
#494949 |
text-tertiary |
gray-80 |
#666666 |
primary |
blue-100 |
#166DFC |
primary-hover |
blue-80 |
#1366B3 |
accent |
red-80 |
#BE2C25 |
accent-hover |
red-60 |
#8E1F1B |
warning |
orange-80 |
#D86100 |
error |
red-100 |
#EA0017 |
success |
green-80 |
#499327 |
border |
gray-300 |
#D4D4D4 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
gray-20 |
#111111 |
surface |
gray-40 |
#2A2A2A |
surface-elevated |
gray-60 |
#494949 |
text-primary |
gray-700 |
#FFFFFF |
text-secondary |
gray-400 |
#E9E9E9 |
text-tertiary |
gray-300 |
#D4D4D4 |
primary |
blue-200 |
#5784C5 |
primary-hover |
blue-100 |
#166DFC |
accent |
red-80 |
#BE2C25 |
accent-hover |
red-100 |
#EA0017 |
warning |
orange-80 |
#D86100 |
error |
red-100 |
#EA0017 |
success |
green-80 |
#499327 |
border |
gray-60 |
#494949 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
gray-700 |
#FFFFFF |
on-identity |
gray-20 |
#111111 |
primary |
blue-100 |
#166DFC |
primary-hover |
blue-80 |
#1366B3 |
accent |
red-80 |
#BE2C25 |
accent-hover |
red-60 |
#8E1F1B |
mark |
gray-0 |
#000000 |
success |
green-80 |
#499327 |
warning |
orange-80 |
#D86100 |
error |
red-100 |
#EA0017 |
text-primary-light |
gray-20 |
#111111 |
text-primary-dark |
gray-700 |
#FFFFFF |
background-light |
gray-700 |
#FFFFFF |
background-dark |
gray-20 |
#111111 |
surface-light |
gray-600 |
#F7F7F7 |
surface-dark |
gray-40 |
#2A2A2A |
text-secondary-light |
gray-60 |
#494949 |
text-tertiary-light |
gray-80 |
#666666 |
border-light |
gray-300 |
#D4D4D4 |
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
Gray 20 (#111111) on white gives ~19:1 — well past AAA. WPDS treats the gray-20-on-gray-700 pair as the canonical text/background combination for body prose; the accountability-journalism voice and long article sessions justify the AAA enhanced contrast target.
colorChoice → roles.colors.primary
- allowed: blue-100, blue-80, blue-60
- forbidden: red-100, red-80, orange-80
WPDS scopes blue as the primary CTA and trusted-link family. Substituting red (the breaking-news emphasis color) for the primary role would collapse two distinct semantic meanings in the design system — links and emergencies.
contextRestriction → roles.colors.accent
- forbiddenContexts: default-link, body-emphasis, default-cta
- allowedContexts: breaking-news, editorial-emphasis, opinion-tag, live-update
The WaPo red (red-80 / red-100) carries breaking-news and editorial-category meaning in WPDS. Using it as a default CTA color would dilute the semantic weight and conflict with WPDS role mappings (cta = blue100).
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
WaPo pairs Postoni Wide (a tall display serif) with Franklin for sans headings and Franklin / serif for body. The display-to-prose hierarchy is a defining element of the article-page identity; a 1.5× minimum size ratio preserves it when open-source substitutes stand in.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
The Old English wordmark is the institutional mark of the paper. Recoloring, rotation, gradients, or skewing conflict with the brand's voice of authority and the published WPDS asset guidance.
⚠️ warning (2)
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. WaPo's accountability-journalism mission and its long-form article format justify the enhanced 7:1 target.
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700, 900
Postoni Wide ships in Regular through Black. Heading weights below Regular and synthetic Heavy beyond the Black cut would degrade the masthead-character of WaPo display type.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: gray-700, gray-20, gray-600
- doesNotPairWith: red-80, red-100
Blue 100 on the white canvas or against ink reads cleanly as a link or CTA. Placing it adjacent to the breaking-news red collapses the editorial-color hierarchy that WPDS establishes between informational blue and urgency red.
Provenance
- Source: https://github.com/washingtonpost/tachyons-css/blob/main/src/wpds-colors-tokens.css
- License:
Proprietary brand identity; design-token source under repository license - Attribution: The Washington Post (WP Company LLC) — visual identity captured from the published Washington Post Design System (WPDS) color tokens at github.com/washingtonpost/tachyons-css. The Washington Post, the masthead, and the Postoni / Franklin typefaces are property of WP Company LLC.
- Imported:
2026-05-19 - Notes: Derived from the WPDS published color tokens on 2026-05-19; no consumer-facing brand guide located. The proprietary typefaces (Postoni Wide for display, Franklin / Franklin ITC variants for sans/text) are referenced in the design system but are not publicly distributed. Open-source substitutes are referenced — 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 Washington Post
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 Washington Post
A clear hierarchy in The Washington Post'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 Washington Post
[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
→ red-80 #BE2C25 accent-hover
→ red-60 #8E1F1B background-dark
→ gray-20 #111111 background-light
→ gray-700 #FFFFFF border-light
→ gray-300 #D4D4D4 error
→ red-100 #EA0017 identity
→ gray-700 #FFFFFF mark
→ gray-0 #000000 on-identity
→ gray-20 #111111 primary
→ blue-100 #166DFC primary-hover
→ blue-80 #1366B3 success
→ green-80 #499327 surface-dark
→ gray-40 #2A2A2A surface-light
→ gray-600 #F7F7F7 text-primary-dark
→ gray-700 #FFFFFF text-primary-light
→ gray-20 #111111 text-secondary-light
→ gray-60 #494949 text-tertiary-light
→ gray-80 #666666 warning
→ orange-80 #D86100 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Playfair Display prose
→ body PT Serif ui
→ sans Inter Palette mode mappings (from wapo)
Light mode (14 roles)
accent
→ red-80 accent-hover
→ red-60 background
→ gray-700 border
→ gray-300 error
→ red-100 primary
→ blue-100 primary-hover
→ blue-80 success
→ green-80 surface
→ gray-600 surface-elevated
→ gray-700 text-primary
→ gray-20 text-secondary
→ gray-60 text-tertiary
→ gray-80 warning
→ orange-80 Dark mode (14 roles)
accent
→ red-80 accent-hover
→ red-100 background
→ gray-20 border
→ gray-60 error
→ red-100 primary
→ blue-200 primary-hover
→ blue-100 success
→ green-80 surface
→ gray-40 surface-elevated
→ gray-60 text-primary
→ gray-700 text-secondary
→ gray-400 text-tertiary
→ gray-300 warning
→ orange-80 Rules (8 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Gray 20 (#111111) on white gives ~19:1 — well past AAA. WPDS treats the gray-20-on-gray-700 pair as the canonical text/background combination for body prose; the accountability-journalism voice and long article sessions justify the AAA enhanced contrast target.
colorChoice roles.colors.primary allowed blue-100, blue-80, blue-60 forbidden red-100, red-80, orange-80 WPDS scopes blue as the primary CTA and trusted-link family. Substituting red (the breaking-news emphasis color) for the primary role would collapse two distinct semantic meanings in the design system — links and emergencies.
contextRestriction roles.colors.accent forbiddenContexts default-link, body-emphasis, default-cta allowedContexts breaking-news, editorial-emphasis, opinion-tag, live-update The WaPo red (red-80 / red-100) carries breaking-news and editorial-category meaning in WPDS. Using it as a default CTA color would dilute the semantic weight and conflict with WPDS role mappings (cta = blue100).
fontPairing typography.display requires prose minSizeRatio 1.5 WaPo pairs Postoni Wide (a tall display serif) with Franklin for sans headings and Franklin / serif for body. The display-to-prose hierarchy is a defining element of the article-page identity; a 1.5× minimum size ratio preserves it when open-source substitutes stand in.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo The Old English wordmark is the institutional mark of the paper. Recoloring, rotation, gradients, or skewing conflict with the brand's voice of authority and the published WPDS asset guidance.
warning · 2 rules
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. WaPo's accountability-journalism mission and its long-form article format justify the enhanced 7:1 target.
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700, 900 Postoni Wide ships in Regular through Black. Heading weights below Regular and synthetic Heavy beyond the Black cut would degrade the masthead-character of WaPo display type.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith gray-700, gray-20, gray-600 doesNotPairWith red-80, red-100 Blue 100 on the white canvas or against ink reads cleanly as a link or CTA. Placing it adjacent to the breaking-news red collapses the editorial-color hierarchy that WPDS establishes between informational blue and urgency red.
Provenance
- Source
- https://github.com/washingtonpost/tachyons-css/blob/main/src/wpds-colors-tokens.css
- License
Proprietary brand identity; design-token source under repository license- Attribution
- The Washington Post (WP Company LLC) — visual identity captured from the published Washington Post Design System (WPDS) color tokens at github.com/washingtonpost/tachyons-css. The Washington Post, the masthead, and the Postoni / Franklin typefaces are property of WP Company LLC.
- Imported
2026-05-19- Notes
- Derived from the WPDS published color tokens on 2026-05-19; no consumer-facing brand guide located. The proprietary typefaces (Postoni Wide for display, Franklin / Franklin ITC variants for sans/text) are referenced in the design system but are not publicly distributed. Open-source substitutes are referenced — playfair-display@1 for the display serif, pt-serif@1 for body prose, and inter@1 for the sans role.