What is ProPublica's primary brand color?

ProPublica's brand voltage is a salmon-red wired as --p-color-salmon-02 and --p-dyn-color-salmon-02. It appears exactly 16 times in the captured page, every occurrence as a background fill — all on the Donate CTA pill button. It never appears as text, border, or link color. This is the most restrained single-voltage discipline in the news-publishing category: where the Guardian uses its blue on section labels and nav links across hundreds of elements, ProPublica holds the salmon-red for the single ask that keeps the organization solvent. Every other color on the page is a warm neutral or editorial photography.

What typefaces does ProPublica use and what are the best open-source substitutes?

ProPublica runs two families in deliberate division-of-labor. Feature Headline is a licensed display serif used for all article headlines, section heds, deks, and pull-quote type — sizes range from 20px to 48px for editorial content, with a 120px numeral variant for section counts. Brut Grotesque is a licensed grotesque sans used for all chrome: navigation, bylines, timestamps, labels, category tags, and the donate button. Good open-source substitutes: for Feature Headline, try Playfair Display or Source Serif 4 at the same optical sizes; for Brut Grotesque, Inter or DM Sans transfers cleanly.

Why does ProPublica avoid pure black and pure white in its editorial surfaces?

ProPublica's chromatic system is built from warm neutrals rather than pure blacks and whites. The primary text color is warm-black at near-black with a slight warm undertone, the page body uses warm-white, and even the dividers step through a six-step warm gray scale. This palette decision is consistent with the newspaper-origin design language: broadsheet newsprint was never pure white, and ink on newsprint was never pure black. The warmth reads as print credibility without literally imitating newsprint. Pure white is reserved for small-surface fills like article thumbnails, and pure black appears in only 9 elements, mostly borders.

What grid system does ProPublica use?

ProPublica runs a 14-column grid where each column is 3.7rem wide and gutters are 2.5rem wide. The full content width resolves to calc(3.7rem × 14 + 2.5rem × 13) — approximately 1026px at the default 16px root. Common column spans: 8-column for the main story well, 3-column for sidebar content, 5-column for a featured secondary story. Vertical rhythm uses a 2rem base step (--p-vert-rhythm-sm: 2rem, --p-vert-rhythm-lg: 5rem). The grid's unusually fractional column width (3.7rem rather than the common 60px/64px) is the tell — it produces an organic text measure rather than a screen-aligned grid.

Can I use this DESIGN.md to build an investigative-journalism site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce ProPublica's specific moves: warm neutrals instead of cool grays, Feature Headline serif for content headlines and Brut Grotesque for chrome, the 14-column fractional grid, and the salmon-red voltage held for exactly one CTA. You can reference tokens directly — every hex, font name, radius, and spacing value is a quoted scalar pasteable into Tailwind config or CSS variables. The most transferable principle: keep the editorial serif strictly inside content containers and the grotesque strictly inside chrome. The division makes the hierarchy legible without color.

ProPublica Design System

ProPublica's investigative-news design system.

About ProPublica DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source propublica.org

News & Publishing

ProPublica's homepage does something most news organizations have abandoned in the age of attention-maximizing feeds: it acts like a newspaper front page. The logotype "PROPUBLICA" renders large and plain in Brut Grotesque at the masthead, the story grid below it uses a strict 14-column rule, and the only chromatic brand signal on the entire page is the salmon-red pill that says "Donate" — 16 total occurrences, all background fills, all on that one element. Where the New York Times uses its corporate blue for links and section labels, and where Axios saturates every hed with a bold accent, ProPublica reserves its brand voltage for the one financial ask that keeps the newsroom alive and nowhere else.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 12 color tokens organized into a brand tier (one salmon-red voltage), a structural tier of warm neutrals stepping from near-black warm-black through charcoal, mid-gray, and warm-white, and a semantic tier of two blue link tones. Fourteen typography tokens span two families — Feature Headline (a display serif) and Brut Grotesque (a grotesque sans) — across a range from a 12px/800 uppercase label up to a 120px/500 editorial numeral. The grid is 14-column at 3.7rem columns with 2.5rem gutters, and vertical rhythm steps in 2rem increments.

Feed this file to Claude or Cursor and it reproduces ProPublica's specific moves: warm-toned neutrals instead of cool grays, a serif-for-editorial-content and grotesque-for-chrome split, and a single held-in-reserve brand accent that appears only on the donate button. The one disciplined move worth borrowing regardless of editorial context: the two-family split where the sans handles all chrome (nav, bylines, timestamps, labels) and the serif handles all content (heds, deks, article bodies). It enforces a visual hierarchy without requiring color.

What makes it distinct

Serif display hierarchyFeature Headline at 48px weight 500 anchors every story hed; a second weight-700 variant at 32px handles section fronts
Single salmon-red voltagethe brand color appears exactly 16 times, all as background fills on the donate CTA pill; every other chromatic moment comes from editorial photography
Brut Grotesque as chrome voiceall navigation, bylines, timestamps, and category labels run in the grotesque; the serif is editorial-only
Warm-toned neutralsthe palette steps from near-black warm-black through charcoal, mid-gray, and warm-white; no cool grays or pure whites in the editorial surface
120px editorial numerala Feature Headline display numeral at weight 500 appears as a section count device, the loudest single typographic moment on the page

Live at propublica.org

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

propublica.org

Explore ProPublica

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.

ProPublica design system FAQ

Common questions about ProPublica'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.

ProPublica — official site

ProPublica's public site — 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.