What is The Washington Post's primary brand color?

The Post is functionally monochrome in its body chrome — the only saturated color that appears on the visible homepage is the subscription blue used for the rounded 'Save and subscribe' CTA pill in the top-right masthead. That fill is rendered at #166dfc and the link color #1366b3 carries section-front anchors and 'continue reading' links. Both blues are wired into the proprietary WPDS design system as --wpds-colors-cta and --wpds-colors-cta-hover. Every other color on the page is structural — off-black ink, charcoal sub-text, mid-gray dek text, white canvas, and a near-white hairline. The Post deliberately holds chromatic voltage in reserve for the act of asking the reader to subscribe.

What typefaces does The Washington Post use?

The Post runs two proprietary families: Postoni for every headline tier and Franklin Gothic for every body, label, and UI tier. Postoni is a contemporary serif commissioned by the Post and used across both print and digital — it sits at 18px / 700 for chip-story headlines, 20px / 700 for column headlines, 24px / 700 for the lead, and 26px / 700 for the section heading. Franklin Gothic (in the Franklin variable) carries dek text at 18px / 300, body at 14-16px / 400, and small-caps labels at 14px / 700. The fallback stack walks 'garamond, serif' for the serif and 'Arial, Helvetica, sans-serif' for the sans. Source Serif Pro and Source Sans Pro are the closest open-source substitutes.

Why does The Washington Post have no marketing hero?

The homepage opens directly on the news grid rather than a marketing band because the Post is selling subscriptions to readers who came for journalism, not a brand experience. The visible above-the-fold space is occupied entirely by the lead story photograph and headline, two supporting columns of news, and an opinion rail. The engraved Postoni masthead and the 'Democracy Dies in Darkness' tagline carry the brand assertion — there is no separate hero band introducing the publication. This is closer to The New York Times homepage than to any startup news site (Axios, Semafor, Puck) that opens with a billboard. The single subscription CTA in the masthead is the only chrome that admits the page is also a storefront.

Why does The Washington Post use #111111 instead of pure black?

The body ink sits at #111111 (off-black) rather than #000000 because the page reads as engraved newsprint rather than glowing pixels. Pure black on a pure-white canvas at body sizes feels harsh on a backlit screen; the slight lightness lift to #111111 softens the contrast without losing the editorial weight a newspaper demands. The Post extends this through the structural ladder — #2a2a2a for sub-headlines, #595959 for dek text — so every typographic tier sits on a graded ink scale rather than collapsing into a single black. Pure #000000 does exist in the CSS as --color-ui-black but it carries only border duty (60 text occurrences, 63 border) and never sets running text.

Can I use this DESIGN.md to build my own editorial homepage?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce the Post's specific moves: three-column story grid instead of a marketing hero, serif-headline / sans-body pairing, off-black ink rather than pure black, hairline dividers between cells, and a single subscription CTA as the only chromatic voltage. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the grid-first homepage only works if your story volume is genuinely large enough to fill it. Two stories in a three-column grid looks empty in a way a hero band does not.

The Washington Post Design System

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.

About The Washington Post DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source washingtonpost.com

News & Publishing

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: 14 color 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.

What makes it distinct

Newspaper-as-homepageno marketing hero, no full-bleed photo; the page opens on a three-column story grid in print-edition chrome
Postoni serif as identitythe Washington Post's proprietary serif carries every headline from 18px chip stories up to the engraved 26px masthead
Single subscription voltagesaturated blue used exactly once in the visible chrome, on the rounded pill CTA in the top-right masthead
Off-black inkbody and headline text sits at near-black charcoal, never pure black; the ink reads as engraved newsprint rather than digital UI
Hairline-only dividersstory cells are separated by 1px charcoal rules, no shadows, no card fills, no border tints

Live at washingtonpost.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

washingtonpost.com

Explore The Washington Post

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

The Washington Post design system FAQ

Common questions about The Washington Post's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

The Washington Post — official site

The Washington Post's public homepage — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.