NPR's design system as a DESIGN.md file. NPRSans across every tier, single cobalt blue link voltage, NPRSerif body deks, photography-led story tiles, 9 colors, 18 components. For React, Next.js, and AI tools.
Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.
Set up MCPAbout
Curated by Dov Azencot · Updated May 18, 2026 · Source npr.org (opens in a new tab)
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 colors 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.
5
npr.org
A snapshot of the brand in production. Scroll the frame to see the whole page.
Colors
NPR's system runs on #0a61db as its primary voltage, used in 3 of 18 components. Type is set in NPRSans across 15 tokens from 10px to 32px, weights 400–700. Shape language is soft — components average 16px corner radius, with no sharp interactive edges.
Sparing, CTA-only voltage · 1
Page and card backgrounds · 2
Headlines, body, captions · 5
Dividers, outlines, rules · 1
Typography
Set in NPRSans across 15 tokens, from 10px to 32px, weights 400–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
Layout
5 corner radii and 7 spacing values. Shape language: soft.
Components
Each rendered from its tokens (color, type, radius, padding) on NPR's own canvas.
In use
NPR's tokens on the kind of product it builds.
Build something people actually use.
A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.
The quiet collapse of an old idea
For decades the consensus held that the system would correct itself. Then it didn't. This is the inside story of what changed, told by the people who watched it unravel.
"Nobody noticed because the failure was indistinguishable from progress."
By Sam Reporter · Updated 2 hours ago
FAQ
Common questions about NPR's tokens, components, and how to use this DESIGN.md in your project.
Read next
Specs, directories, and component libraries that pair with this design system.
Use it
One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of NPR.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match NPR's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
NPR's homepage looks like nothing else in US news media — and the trick is what it leaves out. Single-voltage broadcast utility. 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 {colors.ink} rather than pure black, and reserves exactly one chromatic voltage — cobalt blue {colors.primary} — 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 chromatic restraint is the move. Across the captured page the cobalt appears 485 times — 239 as text, 19 as background fill, 227 as border — almost entirely on link text and on the 60px-radius audio-play pills. The broadcaster-red token --red-500 and the NPR-pink-magenta tokens exist in the underlying variable palette (110 tokens spanning gray, blue, red, orange, yellow, green, teal, violet, magenta, tan families) but the homepage chrome uses just 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. Every other token in the palette is reserved for editorial overrides (election graphics, podcast art, special-report pages) that don't show on the homepage.
Typography is two families. NPRSans (Gotham-derivative) carries every headline, eyebrow, label, nav link, and most body strings — 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 and no display-sans-vs-text-sans split — the same NPRSans does both jobs at different sizes.
Key Characteristics:
{colors.ink} (#333333) ink instead of pure black — every headline and label renders 30 lightness points lighter than pure ink, softening the broadcaster utility tone.{colors.primary}) carries link text AND the audio-play pill buttons; no other saturated color appears in the homepage chrome.{colors.hairline} rules.{colors.primary} — #0a61db): frequency 485. Used as text (239), bg (19), border (227). The single chromatic voltage on the page. Wired as --blue-500. Carries link text in every body paragraph and the fill on the audio-play pill CTAs. The only saturated color in the rendered homepage chrome.{colors.ink} — #333333): frequency 1594. Used as text (795), bg (7), border (792). The dominant editorial color. Wired as --gray-700. Every NPRSans headline, eyebrow, dek body, and label renders in this charcoal. 30 lightness points lighter than pure black — the choice is deliberate.{colors.ink-soft} — #121212): frequency 67. Used as text (0), bg (1), border (0), shadow (55), gradient (11). Wired as --gray-900. Reserved for shadow tints under elevated surfaces and a single utility background — never for editorial text.{colors.ink-black} — #000000): frequency 39. Used as text (18), bg (4), border (16). Reserved for the masthead logo and a small set of utility chrome surfaces; not used on editorial headlines.{colors.canvas} — #ffffff): frequency 495. Used as text (218), bg (62), border (215). The page floor. Pure white. Wired as --white-100. Every story tile, the masthead, the nav bar, and the footer sit on this canvas with no off-white softening.{colors.muted} — #737373): frequency 363. Used as text (158), bg (47), border (158). Wired as --gray-500. Carries the body-dek text under each headline, the byline metadata, the eyebrow color, and the timestamp strings. The secondary-text workhorse.{colors.muted-2} — #575757): frequency 33. Used as text (16), bg (1), border (16). Wired as --gray-600. A darker mid-gray for slightly emphasized metadata — section labels in the dropdown nav, the "Updated 2 hours ago" timestamp on hero tiles.{colors.hairline} — #d4d4d4): frequency 17. Used as text (0), bg (0), border (17). Wired as --gray-100. The structural divider between story-tile rows and the bottom border on the top-nav. Used only as border; never as fill or text.{colors.surface-mute} — #f1f1f1): frequency 3. Used as text (0), bg (3), border (0). Wired as --gray-50 (and shared with the 50-tier of every color family). The pale loading-placeholder tone behind photographs while they load.The system runs two families. NPRSans (a Gotham-derivative sans wired as NPRSans, Helvetica, Arial, sans-serif) carries every headline, eyebrow, label, nav link, caption, and most body strings — at 10-32px across weights 400, 500, and 700. NPRSerif (NPRSerif, Georgia, serif) appears only at the body-dek tier (16px / 400 / 24px line height with 0.32px letter-spacing) under each story-tile headline. There is no third family and no separate display-vs-text split inside NPRSans — the same family does display at 32px / 700 and caption at 10px / 400.
| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
{typography.display-xl} | NPRSans | 32px | 700 | 40px | Hero story headline ("Trump drops his IRS lawsuit, paving the way for a settlement") |
{typography.display-md} | NPRSans | 24px | 700 | 27.6px | Secondary feature headlines and section-band titles |
{typography.heading-lg} | NPRSans | 22px | 700 | 27.5px | Story-tile headline on standard editorial tiles |
{typography.heading-md} | NPRSans | 18px | 700 | 22.5px | Smaller story-tile headlines in dense grids |
{typography.body-dek} | NPRSerif | 16px | 400 | 24px | The dek under every story-tile headline — the only serif tier in the system |
{typography.body-md} | NPRSans | 16px | 700 | 24px | Bolded body links and inline emphasis |
{typography.body-sm} | NPRSans | 14px | 400 | 21px | Default body and inline link strings |
{typography.caption} | NPRSans | 12px | 400 | 18px | Bylines, timestamps, photo captions |
{typography.eyebrow-cap} | NPRSans | 14px | 500 | 19.6px | Uppercase section eyebrow ("LAW," "POLITICS") with 0.84px tracking |
{typography.eyebrow-cap-sm} | NPRSans | 12px | 400 | 18px | Smaller uppercase eyebrows on dense tiles with 0.72px tracking |
{typography.meta-cap} | NPRSans | 14px | 400 | 14px | Uppercase metadata strings ("UPDATED," "BREAKING") with 0.84px tracking |
{typography.nav-link} | NPRSans | 14px | 400 | 21px | Top-nav link labels in cobalt |
{typography.pill-label} | NPRSans | 14px | 400 | 21px | Audio-play pill label ("Listen · 25:04") with 0.84px tracking |
{typography.span-md} | NPRSans | 18px | 400 | 22.5px | Inline emphasis spans inside body paragraphs |
{typography.micro} | NPRSans | 10px | 400 | 15px | Smallest footer chrome and accessibility hint text |
Display weight is 700 — NPR is one of the few news brands willing to go full bold on headlines because the underlying NPRSans family is a Gotham derivative with the wide-letterform proportions that hold up at heavy weights without crowding. Eyebrow and metadata labels use a 0.84px tracking value (about 6% of the 14px size) for the uppercase treatment — distinctive enough to signal "this is a section label" without veering into letterpress-pastiche territory. Body deks are the only serif moment; everything else is NPRSans.
Both families are licensed (NPRSans is a Gotham derivative; NPRSerif is NPR-specific). The closest open-source substitute for NPRSans is Inter at the same weights — proportions transfer cleanly and Inter's uppercase tracking responds well to the 0.84px treatment. The original Gotham (now licensed via Hoefler & Co.) is the closest paid alternative if you have the license. For NPRSerif use Source Serif 4 (Adobe's open-source serif) at 16px / 400 / 24px line height — the proportions match closely. PT Serif at the same size is the next-best open substitute.
{spacing.xs} 5px · {spacing.sm} 8px · {spacing.base} 10px · {spacing.md} 11px · {spacing.lg} 15px · {spacing.xl} 16px · {spacing.2xl} 20px.0px 20px on narrow viewports; 0px 64px on wide viewports (the latter inherited from the broadsheet content container).0px 0px 20px between story tiles; 20px 20px 0px on the section-band wrappers.20px 20px 0px on top / horizontal; the bottom edge inherits the 1px {colors.hairline} rule that separates rows.The page alternates between full-bleed photographic plates (the hero photograph, the audio-segment thumbnail, the embedded video tile) and dense editorial grids (the multi-story tile bands). Section bands are separated by {spacing.2xl} 20px vertical gutters with no additional decorative break — the photograph density carries the rhythm, not background-color shifts. There is no atmospheric gradient between bands; every section terminates on pure white with a 1px hairline rule.
The system has essentially no shadow tier on the editorial chrome. Story tiles sit flat on the white canvas, separated by 1px {colors.hairline} rules. Where most news sites use a 4-8px drop shadow under each tile, NPR uses border-only separation. The single exception is the audio-segment band, which carries a {colors.ink-soft} (#121212) shadow at low opacity under the embedded video card — but the editorial story tiles themselves are flat.
{colors.hairline} at 1px between rows of story tiles and below the top-nav.{colors.ink-soft} tint at low opacity under the embedded video card; not used anywhere else on the page.The radius scale is binary:
{rounded.none} 0px — story-tile photographs and the masthead surfaces.{rounded.sm} 2px — every card, dropdown, input, and most utility chrome surfaces. Frequency 79 in the captured CSS.{rounded.md} 6px — a small set of utility chips and the search input on the secondary nav. Frequency 8.{rounded.pill} 60px — the audio-play pill buttons. Frequency 26. Exclusively used for the listen-and-duration CTAs.{rounded.full} 9999px — profile-avatar treatments and play-icon glyphs (rendered as 50% in the captured CSS, frequency 12).There is no 8px or 12px tier. The page chooses between near-sharp editorial corners (2px) and fully-rounded action pills (60px), with nothing in between. The 15px / 40px values in the captured CSS belong to a podcast-art treatment band and the embedded video chrome — not part of the editorial radius scale.
button-primary — Cobalt {colors.primary} fill, white text, {rounded.pill} 60px radius, 0x10 padding, 30px height. The standing CTA pill in the masthead utility cluster ("Donate," "Subscribe"). Uses {typography.pill-label} (NPRSans 14px / 400 / 0.84px tracking).
button-secondary — Transparent fill, ink text, 1px {colors.hairline} border, {rounded.sm} 2px radius. Used for tertiary chrome buttons (filter chips, "Show more" toggles).
audio-play-pill — Cobalt {colors.primary} fill, ink text, {rounded.pill} 60px radius, 0x10 padding, 30px height. The signature CTA on the page. The label combines verb and duration ("Listen · 25:04," "Listen · 4:42") so the affordance and the time-commitment sit inside the same target. Used 26 times across the page wherever an audio segment is embedded.
top-nav — White canvas, ink text, 50px height, 15x20 padding, 1px {colors.hairline} bottom border. Houses the section navigation (News, Culture, Music, Podcasts, Programs, Newsletters), the search affordance, the cobalt-fill donate CTA, and the user-account chip.
nav-link — Transparent background, cobalt {colors.primary} text, {typography.nav-link} (NPRSans 14px / 400), 0x10 padding, 50px height. Cobalt is the only color used for nav link text in the standing nav — the same voltage as link text in editorial body.
hero-heading — Ink text on white canvas, {typography.display-xl} (NPRSans 32px / 700 / 40px line height). 0 padding. The lead story headline on the hero band.
section-heading — Ink text, {typography.display-md} (NPRSans 24px / 700). 16px bottom padding before the section's story-tile grid begins.
story-tile-headline — Ink text, {typography.heading-lg} (NPRSans 22px / 700), 8px vertical padding. The headline on every standard story tile in editorial bands.
body-paragraph — Muted text at {typography.body-dek} (NPRSerif 16px / 400 / 24px line height with 0.32px letter-spacing). The only serif moment in the system. Sits under every story-tile headline as the article dek.
eyebrow — Uppercase NPRSans 14px / 500 with 0.84px tracking in muted gray {colors.muted}. 5px bottom padding. Sits above every story-tile headline carrying the section name ("LAW," "POLITICS," "CULTURE," "NATIONAL SECURITY").
byline — Muted text, {typography.caption} (NPRSans 12px / 400 / 18px). 5px vertical padding. The named-host or correspondent byline below the dek ("By Becky Sullivan," "By Domenico Montanaro").
story-tile — White canvas, ink text, square corners, 20x20x0 padding, 1px {colors.hairline} bottom border (the row divider). The structural editorial container.
media-card — White canvas, {rounded.sm} 2px radius, 0 padding. The photograph-led media card with the image flush at the top edge.
card — White canvas, ink text, {rounded.sm} 2px radius, 12x16x16 padding, 1px {colors.hairline} border. Used for utility blocks (newsletter signup callout, donation prompt, podcast subscription card).
text-input — White canvas, ink text, 1px {colors.hairline} border, {rounded.sm} 2px radius, 0x12 padding, 40px height. Used in the search-input and the newsletter-signup form.
divider — 1px {colors.hairline} rule between story-tile rows and between section bands. The structural separator.
photograph — Pale {colors.surface-mute} placeholder while loading, {rounded.sm} 2px radius, 0 padding. Every story-tile image rides flush at the top of the tile.
footer — White canvas, muted text, {typography.caption} (NPRSans 12px / 400), 20x20x0 padding. Carries the standing footer link columns (Programs, Podcasts, About NPR, Stations, Press, Public Editor) and the legal / accessibility row beneath.
Do light link text AND the audio-play pill in the same cobalt {colors.primary} (#0a61db). The discipline is the move — using two different blues for "link" and "play" would break the single-voltage signal that distinguishes this brand from CNN's red-saturated chrome.
Do set every editorial headline in {colors.ink} (#333333), NOT in pure black. The 30-point lightness lift over {colors.ink-black} (#000000) is small but consistent, and it softens the broadcaster utility tone in a way that pure-black headlines wouldn't.
Do use uppercase NPRSans 14px / 500 with 0.84px tracking for every section eyebrow. The eyebrow-headline-dek lockup is the page's reading rhythm; the all-caps tracking specifically calls out "this is the section label, not the headline."
Do bake the duration into the audio-play pill label ("Listen · 25:04," not just "Listen"). The verb-plus-duration string is the distinctive affordance pattern; surfacing the time-cost up front fits a broadcaster whose audience picks between a 4-minute and a 25-minute segment.
Don't introduce a second saturated color into the editorial chrome — no red flag for "breaking," no orange for "opinion," no green for "live." The single-voltage discipline is the principle; multiplying brand voltages destroys it. Reserve the muted gray {colors.muted} (#737373) for any secondary semantic role you need.
Don't use 8px or 12px corner radii anywhere on the page. The system is binary at {rounded.sm} 2px for editorial chrome and {rounded.pill} 60px for action pills, with {rounded.full} for circular avatars. Adding a medium tier softens the editorial sharpness and weakens the contrast with the action pills.
Don't swap NPRSerif ({typography.body-dek}) into headline or eyebrow slots. The serif is the dek-only voice. Promoting it into headline tier would create a two-family display hierarchy and undercut the NPRSans-everywhere identity.
Don't add drop shadows under story tiles. The 1px {colors.hairline} rule is the divider; adding a 4-8px shadow makes the tiles read as floating cards and breaks the broadsheet-on-screen rhythm. The page is deliberately flat.
{colors.muted}-adjacent tokens (red, orange, yellow families) appear in election-night charts, congressional-vote maps, and breaking-news flag overlays — none of which render on the standard homepage.News & Publishing
More DESIGN.md files in News & Publishing.
Pricing
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.