ProPublica Design System

Overview

ProPublica's homepage acts like a broadsheet newspaper front page in a media landscape that has mostly traded editorial restraint for algorithmic density. Serif-sans labor split. Feature Headline carries every piece of journalism — headlines, deks, pull-quotes, section heds — while Brut Grotesque handles every piece of chrome: navigation, bylines, timestamps, category labels, and the donate button. The two families never cross roles. Where the New York Times uses its blue on links across hundreds of elements, and where The Atlantic uses its orange on section labels and featured cards, ProPublica holds its salmon-red for exactly 16 elements — all background fills, all on the donate CTA pill — and nowhere else.

The structural palette is entirely warm neutrals. Near-black warm-black carries the editorial heds, charcoal ink-soft carries running text, warm-white surface-warm is the body floor, and a six-step warm gray scale runs the dividers and borders. There is no cool gray and no pure black in the chrome — only nine pure-black occurrences exist in the entire captured page, mostly divider borders. This deliberate warmth is the print-credibility signal: broadsheet ink and newsprint were never truly black and white.

Key Characteristics:

• Single salmon-red voltage ({colors.primary}) reserved for the donate CTA pill — 16 occurrences, all background fills, zero link or text uses.
• Two-family typographic division: Feature Headline serif for all editorial content, Brut Grotesque grotesque for all chrome — the split enforces hierarchy without color.
• Warm neutral gray scale — six steps from warm-black through charcoal, mid-gray, and warm-white; no cool grays, no pure whites in the editorial surface.
• 14-column fractional grid (3.7rem columns, 2.5rem gutters) — a print-derived measure that produces organic text widths rather than screen-aligned columns.
• 120px Feature Headline editorial numeral — the loudest typographic moment on the page, used as a section-count device.
• Uppercase Brut Grotesque labels at 12px/800/0.6px tracking — the only all-caps moment in the system; used for category tags above story heds.
• Zero border-radius on article cards — the editorial grid is flush-edge, with dividers as the only separation device.

Colors

Brand

• Salmon Red ({colors.primary} — #ff4c3c): frequency 16. Used as background only — all 16 occurrences are background fills on the Donate CTA pill. Wired as --p-color-salmon-02 and --p-dyn-color-salmon-02. The single chromatic brand voltage on the page; every other color is a warm neutral or editorial photography.

Text

• Warm Black ({colors.ink} — #111110): frequency 99. Used as text (51), border (47), background (1). The headline and primary text tone — a near-black with a perceptible warm undertone. Wired as --p-color-warm-black and --p-color-text-hed.
• Ink Soft ({colors.ink-soft} — #31302d): frequency 385. The dominant body text tone — 198 as text, 183 as border. This is the most-used color in the system, running body paragraphs, dividers, and most layout edges. Wired as --p-color-gray-05 and --p-color-text-body.
• Ink Muted ({colors.ink-muted} — #5f5e59): frequency 64. Secondary text — 32 as text, 32 as border. Used for bylines, timestamps, and supplementary labels. Wired as --p-color-gray-04 and --p-color-text-meta.
• Ink Subtle ({colors.ink-subtle} — #92908b): frequency 160. Tertiary text — 80 as text, 80 as border. Used for supplementary captions and the least-prominent metadata. Wired as --p-color-gray-03 and --p-color-text-supp.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 17. Pure white — 9 as background fill on article thumbnail surfaces and the top-nav. Used sparingly; the page body runs on warm-white, not pure white.
• Surface Warm ({colors.surface-warm} — #f2f1ed): frequency 110. The page body floor — 55 as text on dark surfaces, 54 as border. The newsletter signup strip uses this as its text color against the dark band. Wired as --p-color-warm-white.

Hairlines

• Hairline ({colors.hairline} — #e3e2dd): frequency 3. The faintest divider tone — used for the lightest section separations. Wired as --p-color-gray-01 and --wp-editor-canvas-background.
• Hairline Mid ({colors.hairline-mid} — #c8c6c0): frequency 73. The primary divider tone — 37 as border, 36 as text. Used for most article-card bottom rules and section dividers. Wired as --p-color-gray-02.
• Hairline Dark ({colors.hairline-dark} — #92908b): frequency 160. The boldest divider/rule weight. Wired as --p-color-gray-03.

Link

• Link Blue ({colors.link-blue} — #52a7e0): frequency 4. Used as text (2) and border (2) for hyperlinks within article bodies. Wired as --p-color-blue-02 and the light value of --p-dyn-color-blue-02.
• Link Blue Dark ({colors.link-blue-dark} — #006eb7): frequency 2. Deeper blue for link hover or dark-mode contexts. Wired as --p-color-blue-03.

Typography

Font Families

The system runs two families in strict division-of-labor. Feature Headline — a licensed display serif (fallbacks: "Georgia Adjusted", Georgia, serif) — handles all editorial content: article headlines, section heds, deks, pull-quotes, and the 120px section numeral. Brut Grotesque — a licensed grotesque sans (fallbacks: system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif) — handles all chrome: navigation, bylines, timestamps, category labels, and the donate button. The families never trade roles.

Hierarchy

Principles

Feature Headline weight ranges from 500 to 700 — always a text-weight display serif, never a thin weight. The editorial-numeral token at 120px / 500 is the loudest typographic moment; it is used as a section count device rather than a headline, so its size is structural rather than conversational. Brut Grotesque's weights span 400 through 800 — the 800 weight serves the dual role of bylines and category labels, keeping the chrome voice disciplined even at its boldest.

Note on Font Substitutes

Feature Headline is a licensed display serif. Playfair Display or Source Serif 4 transfer well at the same optical sizes; both have comparable display personality and similar x-height. For the 120px numeral tier, Libre Baskerville at weight 400 reads close in spirit. For Brut Grotesque, Inter or DM Sans at the same weights are the cleanest open-source matches.

Layout

Spacing System

• Base unit: 4px, with 8px as the dominant rhythm unit.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 40px.
• Section padding (vertical): 2rem (--p-vert-rhythm-sm) between article rows; 5rem (--p-vert-rhythm-lg) between major page sections.
• Card top padding: 24px (top only, zero sides and bottom) — cards stack against each other without padding; the horizontal divider between them is the visual separator.

Grid & Container

• Column count: 14, each column 3.7rem wide, gutters 2.5rem.
• Full content width: calc(3.7rem × 14 + 2.5rem × 13) ≈ 1026px at 16px root.
• Typical spans: 8-column main story well, 3-column sidebar, 5-column featured secondary.
• Hero story: full 8-column span with a dominant Feature Headline hed at 48px.

Rhythm

The page reads as a traditional broadsheet front: dense above the fold (masthead + lead story + secondary stories in parallel columns), thinning below the fold into section-labeled story lists. Dividers (1px warm-gray rules at {colors.hairline-mid}) are the primary rhythmic device — not padding or whitespace. This is a compression-friendly layout: more stories per vertical inch than comparable news sites, by deliberate editorial philosophy.

Elevation

The system has no shadow tier on editorial surfaces. Story cards sit flush on the warm-white canvas with no lift; the divider rules between them are the sole separation. The only captured shadow is one occurrence on a single element (a tooltip or popover). ProPublica's editorial philosophy extends to the elevation language — shadows imply product-UI chrome, not a news surface, and the system avoids them entirely in the story grid.

Shapes

The radius scale is nearly flat, with a single pill exception:

• {rounded.none} 0px — every article card, every divider, every editorial container. The grid is flush-edge.
• {rounded.sm} 4px — one occurrence, on a small UI affordance (likely a tag chip or form control).
• {rounded.full} 999px — the donate CTA pill and the newsletter email input. The pill is the only rounded surface; it reads as the single "product" moment on an otherwise newspaper-flat editorial surface.

The system's radius discipline is the most austere in the news-publishing category. The Guardian uses 4px cards, the NYT uses 4-8px media cards — ProPublica uses zero. Every editorial container terminates at a right angle.

Components

button-primary — The donate CTA. Salmon-red {colors.primary} fill, white text, {rounded.full} 999px pill, 0px × 16px padding, 32px height. "Donate" is the canonical label. The pill shape on an otherwise flush-edge system is the most visually dissonant element on the page — deliberately so.

button-secondary — Transparent fill with warm-gray hairline border, ink-soft text, {rounded.full} pill. Used for secondary engagement CTAs below stories.

top-nav — Canvas white surface, 1px warm-gray bottom hairline. Houses the "PROPUBLICA" logotype flush left, topic navigation (Dismantling USAID, Immigration, etc.) in Brut Grotesque 600, and the donate pill flush right.

nav-link — Transparent background, warm-black text in {typography.nav-link} (16px / 600), no padding. Topic links sit flush in the nav band. On the captured page these are topical series links rather than standard section nav.

hero-heading — Warm-black text, Feature Headline 48px / 500, -0.48px tracking. The leading story headline, rendering in the serif display voice against a white or warm-white surface.

section-heading — Feature Headline 32px / 700, warm-black text. Used for secondary story heds in the main story grid.

body-paragraph — Brut Grotesque 20px / 500, ink-soft text. The lead paragraph / dek style — the grotesque here is unusual for news (most publications use their serif for body) but ProPublica keeps the serif strictly in headline positions.

byline — Brut Grotesque 16px / 800, ink-muted text. The visual weight at 800 is the highest in the system; byline authors get the boldest grotesque treatment.

category-label — Brut Grotesque 12px / 800, warm-black text, 0.6px letter-spacing, uppercase. Appears above story heds as a section/series tag.

card — Canvas white surface, {rounded.none} flush edges, 24px top padding only. Divides from adjacent cards with a 1px {colors.hairline-mid} top border. Holds a category label, headline, dek, and byline block.

text-input — Transparent background, warm-white text on the dark newsletter strip, {rounded.full} pill, 8px × 16px padding, 35px height, 1px ink-muted border.

newsletter-strip — Ink-soft dark background, warm-white text, 32px × 40px padding. The single dark band on an otherwise light editorial page — hosts the email signup form.

editorial-numeral — Feature Headline 120px / 500, warm-black text. Used as a section count device (e.g., a "27" displayed above "More than 100,000 American kids held").

footer — Canvas white, ink-muted text, body-sm (14px / 400), 40px top padding, 1px hairline top border.

Do's and Don'ts

Do treat the serif as editorial-only and the grotesque as chrome-only. The two-family split is the system's most load-bearing convention — a Feature Headline in a nav link or a Brut Grotesque article headline immediately breaks the editorial credibility signal.

Do use {colors.surface-warm} (#f2f1ed) as the page body floor. The warm-white is the editorial-credibility decision; swapping to pure #ffffff shifts the page toward SaaS white rather than newsprint warmth.

Do hold the salmon-red for the donate CTA only. The system's discipline is the 16-occurrence, background-fills-only rule. Adding it to links, hover states, or section labels reduces it from a financial ask to a brand accent.

Do use the 14-column fractional grid at the canonical 3.7rem / 2.5rem values. The fractional column width is what produces the organic text measure — rounding to 60px columns shifts the feel to a screen-product layout.

Don't add border-radius to editorial cards. The {rounded.none} rule on cards is the system's single most austere move — zero radius on every editorial container. Adding 4px or 8px cards would immediately read as news-product UI rather than newspaper editorial.

Don't use {colors.primary} (#ff4c3c) as a link or hover color anywhere in the editorial content. Its 16-occurrence restraint is the brand's discipline signal. Link color in article bodies is {colors.link-blue}.

Don't render display headlines in Brut Grotesque at weight 800. The 800 weight exists for bylines and category labels only — using it on headlines would create competing typographic loudness and break the serif/sans division.

Don't introduce a shadow tier on article cards. Shadows on editorial content read as product-UI intent. The flush-edge divider system is the ProPublica convention.

Known Gaps

• Dark mode: the site ships a dark variant (--p-dyn-color-* variables use light-dark() syntax throughout), but the captured surface is light-mode only. The dark values invert the warm-neutral scale — warm-black becomes warm-white and vice versa.
• Article body typography: the body copy inside long-form articles likely uses Tiempos Text (a licensed serif wired as --p-fonts-serif) rather than Brut Grotesque, but this was not rendered in the captured marketing surface.
• Monospace family: --p-fonts-mono is declared (ui-monospace, Menlo, Roboto Mono, Consolas) for data journalism tables and code blocks, but no mono-style components appeared in the captured page.
• Hover and focus states: only the resting state of the donate button is captured. Interactive states (hover, focus ring, active press) are not documented.
• Section-specific color variants: the CSS exposes additional tonal families (salmon, magenta, indigo, gold, green tiers) that appear to belong to content-type and topic-specific contexts (e.g., data visualization, series branding) but were absent from the captured homepage surface.
• Inline interactive elements: sponsored content labels, paywall nudges, and share-tool overlays that appear contextually in article pages were not present in the homepage capture.