Washington Post's homepage as a DESIGN.md file — Postoni serif headlines, Franklin Gothic body, subscription blue CTA pill on a pure-white editorial canvas. Tokens for React, Next.js, and AI coding tools.
Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.
Set up MCPAbout
Curated by Dov Azencot · Updated May 19, 2026 · Source washingtonpost.com (opens in a new tab)
The Washington Post's homepage does the opposite of what almost every contemporary news site does. There is no marketing hero, no rotating cover image, no full-bleed gradient, no animated headline carousel. The page opens directly on a three-column editorial grid — the lead story top-left, supporting stories to its right, an opinion rail on the far right — rendered in the same Postoni serif and Franklin Gothic body that carry the print edition. The engraved Postoni wordmark sits centered above the grid the way it sits centered on the broadsheet's front page. Beneath it: the tagline "Democracy Dies in Darkness," set in small Franklin Gothic caps. The only chromatic moment in the entire visible chrome is a saturated blue rounded pill in the top-right that reads "Save and subscribe."
The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 11 colors tokens organized around an off-black ink #111111 that carries 841 text and 832 border occurrences in the captured page, plus near-black charcoal #2a2a2a for sub-headlines and gray-mid #595959 for dek text — collectively the entire structural typography. A single subscription blue #166dfc serves as the CTA fill and #1366b3 as the link color; everything else is white canvas, near-white hairline, and a small set of subscription-plan accent navy and pink that never surface on the homepage chrome. Eleven typography tokens cover Postoni serif at 18 / 20 / 24 / 26px (all weight 700) plus Franklin Gothic at 12 / 14 / 16 / 18px in weights 300 / 400 / 700. Sixteen components describe the masthead, the story-cell variants, the opinion rail rows, the subscription pill, the rounded sub-section chips, and the hairline dividers.
Feed this file to an AI coding tool and it reproduces the Post's specific moves: the print-newspaper grid composed in HTML rather than InDesign, the serif-headline / sans-body pairing that has carried American broadsheets for a century, the off-black ink that signals engraved type rather than glowing pixels, and the single rounded-pill subscription CTA as the only piece of chrome that betrays the page is selling something. The one move worth borrowing for any editorial product: the willingness to skip a hero entirely and let the lead story be the lead story. Most publishers add a marketing band above the news; the Post trusts that readers came for the news.
5
washingtonpost.com
A snapshot of the brand in production. Scroll the frame to see the whole page.
Colors
The Washington Post's system runs on #166dfc as its primary voltage, used in 1 of 16 components. Type is set in Franklin across 11 tokens from 12px to 26px, weights 300–700. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.
Sparing, CTA-only voltage · 1
Page and card backgrounds · 1
Headlines, body, captions · 5
Dividers, outlines, rules · 1
Specialty colors · 3
Typography
Set in Franklin across 11 tokens, from 12px to 26px, weights 300–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
Layout
6 corner radii and 8 spacing values. Shape language: sharp.
Components
Each rendered from its tokens (color, type, radius, padding) on The Washington Post's own canvas.
In use
The Washington Post's tokens on the kind of product it builds.
Build something people actually use.
A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.
The quiet collapse of an old idea
For decades the consensus held that the system would correct itself. Then it didn't. This is the inside story of what changed, told by the people who watched it unravel.
"Nobody noticed because the failure was indistinguishable from progress."
By Sam Reporter · Updated 2 hours ago
FAQ
Common questions about The Washington Post's tokens, components, and how to use this DESIGN.md in your project.
Read next
Specs, directories, and component libraries that pair with this design system.
Use it
One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of The Washington Post.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match The Washington Post's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
The Washington Post's homepage inverts the convention that contemporary news sites lead with a marketing band. Newspaper-as-homepage. Where Axios, Puck, and Semafor open with a billboard headline and a single hero photo, the Post opens directly on a packed three-column editorial grid — lead story top-left, supporting columns to its right, an opinion rail on the far right — rendered in the same Postoni serif and Franklin Gothic body that carry the print broadsheet. The engraved Postoni masthead sits centered above the grid, the "Democracy Dies in Darkness" tagline underneath in small Franklin caps, and the single chromatic moment in the entire visible chrome is a saturated subscription-blue rounded pill in the top-right that reads "Save and subscribe."
The system's typographic discipline is the inverse of its peers. Serif-as-identity. Postoni at weight 700 carries every headline tier from 18px chip stories up to the 26px section heading; there is no sans-serif headline option anywhere on the page. Franklin Gothic — a sans drawing on the historical American newspaper sans family — handles body, dek, labels, and UI chrome at modest 12-18px sizes in weights 300 / 400 / 700. The pairing of a proprietary serif for headlines with a proprietary sans for body is the convention American broadsheets have held for a century; the Post's contribution is to render it in CSS without diluting it. Where Bloomberg and the FT lean on a heavier display weight, the Post stays at 700 and lets the serif do the editorial work.
Chrome is functionally monochrome. The structural ink ladder — {colors.ink} (#111111) for body, {colors.ink-soft} (#2a2a2a) for sub-headlines, {colors.muted} (#595959) for dek text — carries 100% of running text in graded charcoal tones. The only saturated color in the visible homepage is {colors.primary} (#166dfc), the subscription-CTA fill. The link color {colors.link} (#1366b3) is darker and reserves itself for section anchors and "Continue reading" affordances. The Post deliberately holds chromatic voltage in reserve for the act of asking the reader to subscribe — the single ad of the brand to the reader.
Key Characteristics:
{colors.ink} (#111111) at frequency 1673, {colors.ink-soft} (#2a2a2a) at 1199, {colors.muted} (#595959) at 300; pure black exists in CSS but never sets running text.{colors.primary} (#166dfc) appears twice on the page, both as the rounded-pill "Save and subscribe" CTA fill in the masthead.{colors.hairline} (#e9e9e9) marks story-cell vertical rules and the rare card divider; no card fills, no shadows, no border tints.{rounded.full}) is reserved for the subscription button only; every other surface is right-angled or 2-4px softened.{colors.subs-navy}, {colors.subs-pink}, {colors.subs-navy-dark}) live in the CSS as --color-subscription-* but never render on the homepage chrome.{colors.primary} — #166dfc): frequency 2 — both as background fill. Wired in CSS as --wpds-colors-cta, --subs-blue, --color-subscription-blue-normal. The rounded-pill "Save and subscribe" CTA in the masthead is the single chromatic moment in the entire visible chrome.{colors.link} — #1366b3): frequency 146 — 73 text, 73 border. Wired as --link-color, --wpds-colors-blue80, --color-brand-blue-normal. The darker blue used for section anchors, "Continue reading" links, and any underlined inline link in body copy.{colors.ink} — #111111): frequency 1673 — 841 text, 832 border. The dominant structural color. Wired as --wpds-colors-primary, --color-ui-offblack, --offblack. Carries headline body, primary nav labels, and the 1px hairline rules on cards.{colors.ink-soft} — #2a2a2a): frequency 1199 — 600 text, 599 border. Wired as --gray-darkest, --wpds-colors-gray40, --secondary-background. The lead-story headline tone — slightly softer than pure off-black to set the hero heading off from sibling stories.{colors.muted} — #595959): frequency 300 — 150 text, 150 border. Wired as --gray-dark, --wpds-colors-onBackground-subtle, --wpds-colors-accessible. The dek-paragraph tone and secondary caption color.{colors.canvas} — #ffffff): frequency 35 (the merged token also absorbs a near-white off-white surface variant). Wired as --white, --wpds-colors-background, --primary-fill. The pure-white floor of the entire page — there is no soft cream or warm white alternative.{colors.hairline} — #e9e9e9): frequency 3 — almost invisible in raw count because most divider work is carried by 1px {colors.ink} rules. Wired as --gray-lighter, --wpds-colors-faint. The rare soft-divider tone used on card surfaces below the fold.{colors.alpha-black} — #000000): frequency 125 — 60 text, 63 border. Wired as --black, --color-ui-black, plus a long ladder of --wpds-colors-alpha* opacity tokens. Pure black exists in the system but carries border and overlay duty only; body text never reaches it.{colors.subs-navy} — #0c198a): wired as --color-subscription-navy-normal. Appears in subscription-tier badges (the upper-tier plan card) on the pricing page; absent from the homepage.{colors.subs-navy-dark} — #0e1555): wired as --color-subscription-navy-dark. The pressed-state of the navy tier accent.{colors.subs-pink} — #b0578c): wired as --color-subscription-pink-normal. The all-access tier accent, also absent from the homepage chrome.The system runs two proprietary families. Postoni is the Post's commissioned serif and carries every headline tier — 18 / 20 / 24 / 26px, all weight 700. Fallback walks garamond, serif. Franklin (the Franklin Gothic variable) handles dek, body, labels, button text, and UI chrome at 12 / 14 / 16 / 18px in weights 300 / 400 / 700. Fallback walks Arial, Helvetica, sans-serif. There is no third typeface — no display sans for marketing, no monospace for code, no script for editorial pull-quotes. Postoni speaks, Franklin annotates.
| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
{typography.display-lg} | 26px | 700 | 28.6px | Section heading; lead-story headline above the fold |
{typography.display-md} | 24px | 700 | 26.4px | Secondary lead headlines |
{typography.heading-md} | 20px | 700 | 22px | Column-story headlines |
{typography.heading-sm} | 18px | 700 | 19.8px | Chip-story headlines, opinion-rail entries |
{typography.dek} | 16px | 300 | 20.8px | Lead-story dek paragraphs |
{typography.body-md} | 16px | 400 | 20px | Default running text in story cells |
{typography.body-sm} | 14px | 400 | 17.5px | Secondary body, byline metadata |
{typography.body-sm-bold} | 14px | 700 | 17.5px | Nav labels, section anchors |
{typography.caption} | 12px | 400 | 15px | Figure captions, timestamp meta, footnote rows |
{typography.button-md} | 16px | 700 | 16px | Subscription CTA label |
{typography.section-label} | 14px | 700 | 24.5px | "Politics" / "Opinion" / "Sports" section labels above story groups |
The headline ladder runs entirely at weight 700 in Postoni — there is no weight 400 or 600 Postoni instance in the captured page. Body tier runs in Franklin at weight 300 (dek), 400 (body), and 700 (labels, button, nav). The dek tier at weight 300 is the lightest typographic moment in the system and reads as a sub-headline lead rather than a pull-quote. The pairing — heavy serif headlines, modest sans body, light-weight sans deks — is the editorial-broadsheet convention the Post has held since the print masthead was redesigned.
Postoni and Franklin are proprietary. Source Serif Pro is the closest open-source substitute for Postoni — comparable cap height, similar diagonal stress, slightly looser counters. Source Sans Pro or IBM Plex Sans transfer cleanly for Franklin at the same weights; Plex Sans at 14-16px reads closest to Franklin's slightly compressed proportions. If you need a tighter sans alternative, Inter at weight 400 / 700 works at the body sizes.
{spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 80px.{colors.ink} bottom rule.The page is uniformly dense. There is no generous-versus-packed rhythm; every visible band carries multiple stories at high density. Section headings ({typography.section-label} at 14px / 700 with a 1px underline rule) mark the only structural pause between bands. The Post trusts the reader to scan a packed page in the same way a print broadsheet does — vertical scroll replaces horizontal newspaper folds, but the editorial density is identical.
The system has no shadow tier whatsoever on the visible chrome. Cards, story cells, and the opinion rail all sit flat on the white canvas; depth comes from typographic hierarchy and 1px hairline dividers rather than from layered elevation. The few drop-shadow values in the CSS (--wpds-colors-alpha* opacity ladder) carry overlay-scrim duty for modals and dropdowns rather than card elevation.
{colors.ink} or {colors.hairline} rules separate story cells, the top-nav from the masthead, and major sections from each other.--wpds-colors-alpha* opacity tokens are exposed in the CSS but not rendered on the captured homepage.The radius scale is minimal.
{rounded.none} 0px — every story cell, every section heading, every nav surface; the dominant radius value on the page.{rounded.xs} 2px — frequency 2; rare soft rounding on form inputs.{rounded.sm} 4px — frequency 11; soft cards in the below-fold "Today's WorldView" sections and a small set of icon buttons.{rounded.lg} 20px — frequency 2; large pill-style category chips.{rounded.pill} 30px — frequency 1; the "Most Read" right-rail header pill.{rounded.full} 9999px — frequency 19; the subscription CTA pill and a small set of circular icon backgrounds (avatar bubbles, social-share icons).The pill treatment ({rounded.full}) is reserved almost entirely for the single subscription CTA. The Post's shape language is right-angled editorial chrome; the pill exists only to mark the one act of commerce on the page.
top-nav — White {colors.canvas} surface with a 1px {colors.hairline} bottom rule, ~48px tall, 12×32px padding. Holds the Post's section labels (Politics / Opinions / Sports / Business / Tech / etc.) flush-left with the subscription CTA and account chip flush-right.
masthead — Centered engraved Postoni wordmark in {typography.display-lg} (26px / 700), white surface, 16×32px padding. The visual anchor of the entire page — the page's identity moment.
tagline — Centered Franklin caps in {typography.caption} (12px / 400) just below the masthead, rendered in {colors.ink-soft}. The "Democracy Dies in Darkness" line.
button-primary — The subscription CTA. Subscription-blue {colors.primary} fill, white {colors.canvas} text, fully-rounded {rounded.full} pill, 8×16px padding, 32px height, weight 700. "Save and subscribe" is the canonical instance, fixed in the top-right of the masthead band.
button-secondary — White {colors.canvas} fill, ink text, 1px {colors.ink} border, fully-rounded pill, 8×16px padding, 32px height. Used for "Sign in" and tertiary nav actions.
nav-link — Transparent fill, ink text in {typography.body-sm-bold} (14px / 700), 8×12px padding. No background-fill hover state on the captured surface; the hover affordance is an underline.
section-link — Link-blue {colors.link} text in {typography.body-sm-bold}. "View more" and "Continue reading" anchors below story cells.
hero-heading — Ink-soft {colors.ink-soft} text in {typography.display-lg} (26px / 700). The lead-story headline above the fold.
story-headline — Ink {colors.ink} text in {typography.heading-md} (20px / 700). The column-story headlines in the middle and right strips.
story-chip-headline — Ink text in {typography.heading-sm} (18px / 700). Chip-story headlines in the below-fold rows.
body-paragraph — Default ink running-text in {typography.body-md} (16px / 400). Story body and lead paragraphs.
dek-paragraph — Muted {colors.muted} text in {typography.dek} (16px / 300). The lead-story sub-headline lead.
section-heading — Ink text in {typography.section-label} (14px / 700, weighted line-height 24.5px) with a 1px {colors.ink} bottom rule. "Politics" / "Opinions" / "Sports" section labels.
story-cell — White surface, 0 left-padding, 40px right-padding, no border-radius, separated from siblings by 1px {colors.hairline} vertical rules.
opinion-row — White surface, 8×0 padding, 1px {colors.hairline} bottom rule between rows. The compact-list treatment for the right-rail "Opinions" stack.
text-input — White surface, ink text, 1px {colors.ink} border, {rounded.xs} 2px radius, 8×12px padding, 40px height.
Do treat the subscription blue {colors.primary} as the single chromatic voltage on the page. The system has exactly one rounded-pill CTA in subscription blue; multiplying it into multiple blue elements would dilute the only chromatic signal that admits the page is selling something.
Do render every headline in Postoni at weight 700. The system has no sans-serif headline option; using Franklin for a headline breaks the serif-identity discipline and turns the editorial broadsheet into a generic news site.
Do use the off-black ladder ({colors.ink} #111111, {colors.ink-soft} #2a2a2a, {colors.muted} #595959) instead of pure black for any running text. Pure #000000 exists in the CSS but is reserved for border and overlay duty.
Do separate story cells with 40px right-padding rather than with card backgrounds or shadows. The grid reads as broadsheet-editorial only when the cells share a continuous white canvas.
Don't add a marketing hero band above the news grid. The Post's lead is the lead story — inserting a brand-introduction billboard above it breaks the newspaper-as-homepage move that defines the system.
Don't introduce a third typeface. The system has Postoni + Franklin and no other tier — adding a display sans for marketing, a script for pull-quotes, or a monospace for tech labels breaks the two-voice editorial split.
Don't render the rounded-pill CTA in any color other than subscription-blue {colors.primary} (#166dfc). The pill shape is reserved for the single subscription moment; rendering it in ink, white-with-border, or another accent destroys its semantic role as "the act of commerce on this page."
Don't use {colors.hairline} (#e9e9e9) as a text or fill color — it carries border-only duty in the system. For card surfaces, use {colors.canvas} (#ffffff); for soft-tonal backgrounds, the system has no alternative and you should leave them absent.
{colors.subs-navy}, {colors.subs-navy-dark}, {colors.subs-pink} (and a parallel green / mustard / purple set) carry the pricing-page plan-tier accents. They are documented as CSS variables but never render on the homepage chrome.{component.text-input} carries the resting state only; newsletter-signup validation, paywall-form errors, and account-page input states are not exposed on the homepage.dark token set in the CSS but the homepage renders light-only. The dark variant is not represented here.News & Publishing
More DESIGN.md files in News & Publishing.
Pricing
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.