W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
ProPublica
ProPublica is the nonprofit, independent investigative newsroom founded 2007 — winner of nine Pulitzer Prizes for journalism that "exposes abuses of power and betrayals of the public trust." The visual identity is restrained and authority-led: a warm-white canvas (#F2F1ED), warm-black body ink (#111110), a single saturated investigative red (#D92D03) as the call-to-action accent, and a quiet warm-gray scale for meta. The proprietary Feature Headline (display serif) and Tiempos Text (serif body) — paired with Brut Grotesque (sans) — carry the long-form investigative voice.
1 palette 4 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/propublica/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/propublica/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
ProPublica
ProPublica is the nonprofit, independent investigative newsroom founded 2007 — winner of nine Pulitzer Prizes for journalism that "exposes abuses of power and betrayals of the public trust." The visual identity is restrained and authority-led: a warm-white canvas (#F2F1ED), warm-black body ink (#111110), a single saturated investigative red (#D92D03) as the call-to-action accent, and a quiet warm-gray scale for meta. The proprietary Feature Headline (display serif) and Tiempos Text (serif body) — paired with Brut Grotesque (sans) — carry the long-form investigative voice.
Tags: propublica, news, journalism, nonprofit, investigative, brand, red, paper, light-first
Atoms
Palette
ProPublica · [email protected] · Proprietary — All Rights Reserved
The ProPublica palette as deployed on propublica.org. The Pulitzer-winning investigative nonprofit newsroom's identity is built on a quiet warm-white canvas (#F2F1ED), a warm near-black ink (#111110) for body content, and a saturated investigative red (#D92D03) used as the call-to-action and promo accent. The proprietary Feature Headline (serif display) and Tiempos Text (serif body) typefaces — paired with Brut Grotesque (sans) — carry the long-form investigative voice.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Playfair Display ([email protected]) |
OFL-1.1 | serif |
body |
Lora ([email protected]) |
OFL-1.1 | serif |
sans |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
warm-black |
Warm Black | #111110 |
black |
Black | #000000 |
warm-white |
Warm White | #F2F1ED |
white |
White | #FFFFFF |
investigative-red |
Investigative Red | #D92D03 |
investigative-red-deep |
Investigative Red Deep | #A00000 |
theme-blue |
Theme Blue | #304154 |
gray-warm |
Gray Warm | #5A5A5A |
gray-medium |
Gray Medium | #727272 |
gray-quiet |
Gray Quiet | #979797 |
gray-border |
Gray Border | #C7C7C7 |
gray-divider |
Gray Divider | #DFDFDF |
gray-tint |
Gray Tint | #EBEBEB |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
warm-white |
#F2F1ED |
surface |
gray-tint |
#EBEBEB |
surface-elevated |
white |
#FFFFFF |
text-primary |
warm-black |
#111110 |
text-secondary |
gray-warm |
#5A5A5A |
text-tertiary |
gray-medium |
#727272 |
primary |
investigative-red |
#D92D03 |
primary-hover |
investigative-red-deep |
#A00000 |
accent |
investigative-red |
#D92D03 |
accent-hover |
investigative-red-deep |
#A00000 |
error |
investigative-red-deep |
#A00000 |
border |
gray-divider |
#DFDFDF |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
warm-black |
#111110 |
surface |
theme-blue |
#304154 |
surface-elevated |
gray-warm |
#5A5A5A |
text-primary |
warm-white |
#F2F1ED |
text-secondary |
gray-divider |
#DFDFDF |
text-tertiary |
gray-border |
#C7C7C7 |
primary |
investigative-red |
#D92D03 |
primary-hover |
investigative-red-deep |
#A00000 |
accent |
investigative-red |
#D92D03 |
accent-hover |
investigative-red-deep |
#A00000 |
error |
investigative-red |
#D92D03 |
border |
gray-warm |
#5A5A5A |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
warm-white |
#F2F1ED |
on-identity |
warm-black |
#111110 |
primary |
investigative-red |
#D92D03 |
primary-hover |
investigative-red-deep |
#A00000 |
accent |
investigative-red |
#D92D03 |
accent-hover |
investigative-red-deep |
#A00000 |
mark |
warm-black |
#111110 |
error |
investigative-red-deep |
#A00000 |
text-primary-light |
warm-black |
#111110 |
text-primary-dark |
warm-white |
#F2F1ED |
background-light |
warm-white |
#F2F1ED |
background-dark |
warm-black |
#111110 |
surface-light |
gray-tint |
#EBEBEB |
surface-dark |
theme-blue |
#304154 |
text-secondary-light |
gray-warm |
#5A5A5A |
text-tertiary-light |
gray-medium |
#727272 |
border-light |
gray-divider |
#DFDFDF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
ui |
sans |
code |
mono |
Rules
🛑 error (5)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Warm Black (#111110) on warm white (#F2F1ED) gives ~16:1 — past AAA. ProPublica's investigative-feature format involves long article sessions and dense data tables; the enhanced contrast target supports that reading posture and the newsroom's commitment to accessibility.
colorChoice → roles.colors.accent
- allowed: investigative-red, investigative-red-deep
- forbidden: theme-blue, gray-warm, black
ProPublica's accent palette is intentionally minimal — a single investigative red carries CTA and emphasis semantics. Substituting the theme-blue or any gray for the accent would conflate the newsroom's deliberate monochrome-with-red voice with chrome colors.
contextRestriction → roles.colors.primary
- forbiddenContexts: default-link, body-text
- allowedContexts: cta, donate, editorial-emphasis, feature-callout, support-button
The investigative red is reserved for high-emphasis surfaces — the "Donate" / "Support" CTAs, feature callouts, and editorial bridges. Using it as the in-copy link color would dilute the high-signal weight the newsroom assigns to this color in --promo-banner tokens.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
ProPublica pairs Feature Headline (a tall display serif) with Tiempos Text for body prose at a clear size step. The display-to-prose hierarchy is part of the investigative-feature page identity; a 1.5× minimum ratio preserves it when open-source substitutes (Playfair Display, Lora) stand in.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
The ProPublica wordmark is a restrained, type-led mark consistent with the newsroom's investigative-authority voice. Recoloring, stretching, rotating, or applying gradients conflicts with the brand's editorial discipline.
⚠️ warning (2)
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. ProPublica's mission of producing journalism "in the public interest" includes universal access; the AAA target is the natural expression of that mission in the design tokens.
enumMembership → typography.body.fontStyle
- allowed: normal, italic
- forbidden: oblique
Tiempos Text ships true italics as a separate face — the Klim Type Foundry license includes the italic cut. Synthetic oblique skews are forbidden, both for the proprietary face and for the Lora substitute.
💡 recommendation (1)
compositionConstraint → roles.colors.accent
- pairsWith: warm-white, white, warm-black
- doesNotPairWith: theme-blue, gray-warm
Investigative red reads cleanest on the warm-white canvas or against warm-black ink. Placing it adjacent to the theme-blue or gray-warm surfaces collapses the monochrome-with-red hierarchy that defines the brand's visual restraint.
Provenance
- Source: https://www.propublica.org/
- License:
Proprietary — All Rights Reserved - Attribution: ProPublica, Inc. — visual identity captured from the deployed concatenated WordPress stylesheet at propublica.org/_static/. ProPublica, the Feature Headline / Tiempos Text / Brut Grotesque typefaces are property of ProPublica, Inc. (or their licensors, e.g., Klim Type Foundry for Tiempos).
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.propublica.org/ on 2026-05-19; no public brand guide located. The propublica-2026 theme exposes --p-color-* and --p-fonts-* custom properties in the concatenated stylesheet. Tiempos Text is licensed from Klim Type Foundry; Feature Headline and Brut Grotesque are the newsroom's proprietary cuts. Open-source substitutes — lora@1 for body prose, playfair-display@1 for the display serif role, inter@1 for sans — are referenced from the brand atom.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by ProPublica
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
ProPublica
A clear hierarchy in ProPublica's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
ProPublica
[email protected]font · heading
Playfair Display
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Lora
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · sans
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ investigative-red #D92D03 accent-hover
→ investigative-red-deep #A00000 background-dark
→ warm-black #111110 background-light
→ warm-white #F2F1ED border-light
→ gray-divider #DFDFDF error
→ investigative-red-deep #A00000 identity
→ warm-white #F2F1ED mark
→ warm-black #111110 on-identity
→ warm-black #111110 primary
→ investigative-red #D92D03 primary-hover
→ investigative-red-deep #A00000 surface-dark
→ theme-blue #304154 surface-light
→ gray-tint #EBEBEB text-primary-dark
→ warm-white #F2F1ED text-primary-light
→ warm-black #111110 text-secondary-light
→ gray-warm #5A5A5A text-tertiary-light
→ gray-medium #727272 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Playfair Display prose
→ body Lora ui
→ sans Inter Palette mode mappings (from propublica)
Light mode (12 roles)
accent
→ investigative-red accent-hover
→ investigative-red-deep background
→ warm-white border
→ gray-divider error
→ investigative-red-deep primary
→ investigative-red primary-hover
→ investigative-red-deep surface
→ gray-tint surface-elevated
→ white text-primary
→ warm-black text-secondary
→ gray-warm text-tertiary
→ gray-medium Dark mode (12 roles)
accent
→ investigative-red accent-hover
→ investigative-red-deep background
→ warm-black border
→ gray-warm error
→ investigative-red primary
→ investigative-red primary-hover
→ investigative-red-deep surface
→ theme-blue surface-elevated
→ gray-warm text-primary
→ warm-white text-secondary
→ gray-divider text-tertiary
→ gray-border Rules (8 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Warm Black (#111110) on warm white (#F2F1ED) gives ~16:1 — past AAA. ProPublica's investigative-feature format involves long article sessions and dense data tables; the enhanced contrast target supports that reading posture and the newsroom's commitment to accessibility.
colorChoice roles.colors.accent allowed investigative-red, investigative-red-deep forbidden theme-blue, gray-warm, black ProPublica's accent palette is intentionally minimal — a single investigative red carries CTA and emphasis semantics. Substituting the theme-blue or any gray for the accent would conflate the newsroom's deliberate monochrome-with-red voice with chrome colors.
contextRestriction roles.colors.primary forbiddenContexts default-link, body-text allowedContexts cta, donate, editorial-emphasis, feature-callout, support-button The investigative red is reserved for high-emphasis surfaces — the "Donate" / "Support" CTAs, feature callouts, and editorial bridges. Using it as the in-copy link color would dilute the high-signal weight the newsroom assigns to this color in --promo-banner tokens.
fontPairing typography.display requires prose minSizeRatio 1.5 ProPublica pairs Feature Headline (a tall display serif) with Tiempos Text for body prose at a clear size step. The display-to-prose hierarchy is part of the investigative-feature page identity; a 1.5× minimum ratio preserves it when open-source substitutes (Playfair Display, Lora) stand in.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo The ProPublica wordmark is a restrained, type-led mark consistent with the newsroom's investigative-authority voice. Recoloring, stretching, rotating, or applying gradients conflicts with the brand's editorial discipline.
warning · 2 rules
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. ProPublica's mission of producing journalism "in the public interest" includes universal access; the AAA target is the natural expression of that mission in the design tokens.
enumMembership typography.body.fontStyle allowed normal, italic forbidden oblique Tiempos Text ships true italics as a separate face — the Klim Type Foundry license includes the italic cut. Synthetic oblique skews are forbidden, both for the proprietary face and for the Lora substitute.
recommendation · 1 rule
compositionConstraint roles.colors.accent pairsWith warm-white, white, warm-black doesNotPairWith theme-blue, gray-warm Investigative red reads cleanest on the warm-white canvas or against warm-black ink. Placing it adjacent to the theme-blue or gray-warm surfaces collapses the monochrome-with-red hierarchy that defines the brand's visual restraint.
Provenance
- Source
- https://www.propublica.org/
- License
Proprietary — All Rights Reserved- Attribution
- ProPublica, Inc. — visual identity captured from the deployed concatenated WordPress stylesheet at propublica.org/_static/. ProPublica, the Feature Headline / Tiempos Text / Brut Grotesque typefaces are property of ProPublica, Inc. (or their licensors, e.g., Klim Type Foundry for Tiempos).
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.propublica.org/ on 2026-05-19; no public brand guide located. The propublica-2026 theme exposes --p-color-* and --p-fonts-* custom properties in the concatenated stylesheet. Tiempos Text is licensed from Klim Type Foundry; Feature Headline and Brut Grotesque are the newsroom's proprietary cuts. Open-source substitutes — lora@1 for body prose, playfair-display@1 for the display serif role, inter@1 for sans — are referenced from the brand atom.