Washington Post Design System

# Washington Post Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by The Washington Post. "Washington Post Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Washington Post Design System
**Owner:** The Washington Post
**Official documentation:** https://build.washingtonpost.com/
**Visual character:** Newsroom typographic authority: Postoni headlines, Franklin workhorse text, ink black + one wire-service blue, zero decorative noise.

---

## Summary

Design system for The Washington Post's digital news platforms.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Ink Black | `#111111` | `--wpds-black` | Primary text and brand |
| Accent Blue | `#166dfc` | `--wpds-blue200` | Links and interactive elements |
| Gray 80 | `#666666` | `--wpds-gray80` | Secondary text |
| White | `#ffffff` | `--wpds-white` | Page background |
| Gray 400 | `#f0f0f0` | `--wpds-gray400` | Subtle background |
| Gray 300 Border | `#d5d5d5` | `--wpds-gray300` | Borders |
| Red / Alert | `#d0021b` | `--wpds-red100` | Breaking news and errors |
| Green / Success | `#008662` | `--wpds-green100` | Success |

## Typography

- **Display:** Postoni — weights 400, 700 — `Postoni, Georgia, serif`
- **Body:** Franklin (ITC) — weights 400, 500, 700 — `'Franklin', 'Libre Franklin', 'Helvetica Neue', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| headline-lg | `40px` | `44px` |
| headline-md | `28px` | `32px` |
| subhead | `20px` | `26px` |
| body | `16px` | `26px` |
| caption | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `2px` |
| default | `4px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 1px 4px rgba(0,0,0,0.16)` |

## Quick start (CSS)

```css
/* Washington Post Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://build.washingtonpost.com/ */

:root {
  /* Color */
  --wpds-black: #111111; /* Primary text and brand */
  --wpds-blue200: #166dfc; /* Links and interactive elements */
  --wpds-gray80: #666666; /* Secondary text */
  --wpds-white: #ffffff; /* Page background */
  --wpds-gray400: #f0f0f0; /* Subtle background */
  --wpds-gray300: #d5d5d5; /* Borders */
  --wpds-red100: #d0021b; /* Breaking news and errors */
  --wpds-green100: #008662; /* Success */

  /* Typography */
  --font-display: Postoni, Georgia, serif;
  --font-body: 'Franklin', 'Libre Franklin', 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-headline-lg: 40px /* line-height 44px */;
  --text-headline-md: 28px /* line-height 32px */;
  --text-subhead: 20px /* line-height 26px */;
  --text-body: 16px /* line-height 26px */;
  --text-caption: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;

  /* Radius */
  --radius-small: 2px;
  --radius-default: 4px;

  /* Elevation */
  --shadow-card: 0 1px 4px rgba(0,0,0,0.16);
}
```

## Engineering profile

- **Ships for:** React
- **Source model:** Closed

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Washington Post Design System by The Washington Post — Design system for The Washington Post's digital news platforms. Character: Newsroom typographic authority: Postoni headlines, Franklin workhorse text, ink black + one wire-service blue, zero decorative noise. Use a primary colour near #111111, the typeface "Franklin (ITC)" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Washington Post Design System documentation](https://build.washingtonpost.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/washpost-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._