What is NPR's primary brand color?

NPR's link voltage is cobalt blue #0a61db, wired into the CSS as --blue-500. It appears 485 times in the captured page — 239 as text, 19 as background fill, 227 as border — almost entirely on link text and on the audio-play pill CTAs. The page's NPR-pink-magenta logo color and the broadcaster red #d62021 (wired as --red-500) both exist in the variable palette but are not rendered in the homepage chrome; the cobalt does all the chromatic work above the fold. This is the inverse of CNN's red-masthead convention — NPR holds a single accent in reserve against a charcoal-on-white canvas and lets photography carry the rest.

What typefaces does NPR use, and what should I use as substitutes?

NPR runs two families. NPRSans (a Gotham-derivative sans) carries every headline, eyebrow, label, nav link, and most body strings — it appears at 10-32px across weights 400, 500, and 700. NPRSerif (an NPR-specific serif) appears only at the body-dek tier (16px / 400 / 24px line height) under each story-tile headline. There is no third family. The closest open-source substitute for NPRSans is Inter or the original Gotham (now licensed); the proportions transfer cleanly. For NPRSerif use Source Serif 4 or PT Serif at the same 16px / 400 weight — both share the contemporary screen-tuned serif feel.

Why does NPR use charcoal #333333 instead of pure black?

Every NPRSans headline and label renders in charcoal #333333 (wired as --gray-700), not in pure black. The pure-black token --gray-900 (#121212) exists in the palette but is reserved for shadow gradients (55 uses) and a single utility background — never for editorial text. The choice softens the broadcaster-utility tone: pure black headlines against pure white feel hard and tabloid-shaped, while charcoal-on-white reads as conversational broadcast voice. The 30-point lightness lift over pure black is small enough that most readers won't perceive it as a separate color, but the rendered page has a notably quieter contrast than CNN, Fox News, or BBC News.

What's special about NPR's audio play buttons?

Every audio segment on the page is fronted by a 30px-high pill button with cobalt blue #0a61db fill, charcoal text, and a 60px border radius. The label combines the action verb and the duration in one string ('Listen · 25:04', 'Listen · 4:42'), so the affordance and the duration commitment sit inside the same target. This pattern is rare in news-site design — most outlets either hide the duration behind a hover state or display it as a small label beside the player chrome. NPR's choice surfaces the time-cost up front, which suits a broadcaster whose audience is choosing between a 4-minute and a 25-minute segment.

What is NPR's corner-radius philosophy?

The system is binary: 2px for cards and dropdowns, 60px for the audio-play pills. 2px appears 79 times across the captured CSS — on story-tile borders, on dropdown surfaces, on form inputs. 60px appears 26 times — exclusively on the audio-play pills. There is no medium tier of 8px or 12px rounding; the page chooses between near-sharp editorial corners and fully-rounded action pills, with nothing in between. The 50% circular radius (12 uses) belongs to profile-avatar treatments and play-icon glyphs.

Can I use this DESIGN.md to build my own broadcaster or podcast site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce NPR's specific moves: NPRSans-equivalent sans across every tier, charcoal-not-black ink, single cobalt link voltage, NPRSerif body deks, photography-led story tiles, uppercase eyebrow labels with 0.84px tracking, and 60px pill audio CTAs with the duration baked into the label. The token references resolve without invention. One caveat: NPR's chromatic restraint works because their content surface is photography-heavy and the audio-pill duration string is the one persistent affordance; if your product needs status colors, error tints, or category accents, layer them on rather than expecting the single-accent discipline to scale.

NPR Design System

NPR's design system as a DESIGN.md file.

About NPR DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source npr.org

News & Publishing

NPR's homepage looks like nothing else in US news media — and the trick is what it leaves out. There is no red, no second saturated color, no atmospheric gradient. The page sets every word in NPRSans (a Gotham-derivative sans), prints headlines in charcoal #333333 rather than pure black, and reserves exactly one chromatic voltage — cobalt blue #0a61db — for link text and the audio-play pill buttons. Where CNN saturates its masthead in brand red, where The Guardian leans on a deep indigo masthead bar, and where The New York Times mixes serif headlines with red breaking-news flags, NPR runs the full editorial system in one typeface and one accent color and lets photography do every other chromatic job.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 9 color tokens drawn from a 110-variable gray / blue palette that NPR exposes as `--gray-100` through `--gray-900` and `--blue-100` through `--blue-900`. The rendered chrome uses 7 of them — `{colors.ink}` charcoal, `{colors.ink-soft}` near-black, `{colors.canvas}` white, `{colors.muted}` mid-gray, `{colors.muted-2}` dark gray, `{colors.hairline}` light gray, and `{colors.primary}` cobalt blue. 16 typography tokens cover NPRSans at four weights and four scale steps, plus NPRSerif at the body-dek tier. 4 radius tokens centered on 2px for cards and 60px for the audio-play pills. 18 components covering the headline-into-dek story tile, the cobalt audio-play pill, the uppercase section eyebrow, the secondary metadata strip, the photograph-led media card, and the top-nav with its cobalt link treatment.

Feed this file to an AI coding tool and it reproduces NPR's specific moves: NPRSans across every tier with NPRSerif reserved for body deks, charcoal-not-black ink, single cobalt link voltage with no second brand color, uppercase 14px / 500 eyebrows with 0.84px tracking, and 60px pill audio CTAs. The token references resolve cleanly. The one move worth borrowing if your product is news-or-podcast-shaped: the photography-led story-tile rhythm with a 1px hairline between rows. The one move to leave alone unless your brand actually owns a single accent color: the chromatic restraint — most products need at least a secondary semantic palette for status and category cues.

What makes it distinct

Charcoal-not-black inkevery story headline and body line renders in #333333, never pure black; the contrast against white softens the broadcaster utility tone
Single cobalt link voltage#0a61db is the only saturated color above the fold, carrying both link text and the audio-play pill buttons
NPRSans as workhorse, NPRSerif as accentthe Gotham-derivative sans runs every headline, label, and chrome string; the serif appears only in body deks
Uppercase eyebrow labels at 0.84px trackingsection names like Law, Politics, and Culture sit as 14px / 500 caps above each story tile
60px pill audio buttonsthe listen-and-duration CTAs use full pill rounding with the duration timestamp baked into the label

Live at npr.org

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

npr.org

Explore NPR

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.

NPR design system FAQ

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

NPR — official site

NPR's public marketing 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.