# The Washington Post

> `wapo@1.0.0`

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** · `wapo@1.0.0` · 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** `(playfair-display@1.0.0)` | OFL-1.1 | serif |
| `body` | **PT Serif** `(pt-serif@1.0.0)` | OFL-1.1 | serif |
| `sans` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `wapo@1.0.0` from the encyclopedia.*