---
version: alpha
name: "NPR"
website: "https://www.npr.org"
description: >-
  US public radio's news homepage, set entirely in NPRSans (a Gotham-derivative sans wired into a single typeface stack) with NPRSerif reserved for body deks and a small reading layer. The page runs charcoal ink #333333 on pure white with a single saturated cobalt blue #0a61db as the link and link-button voltage, plus a deeply muted gray #737373 carrying every secondary label and metadata strip. There is no second brand color above the fold — no red, no orange, no NPR-pink-magenta accent — and the section eyebrows ("Law," "Politics," "Culture") all render in uppercase 14px / weight 500 NPRSans with 0.84px tracking. Photography-led story tiles share an 18-22px headline-into-16px-body rhythm, separated by 1px gray-100 hairlines rather than card surfaces; the play-audio CTAs are 30px high pills filled in cobalt blue at 60px corner radius.

seo:
  title: "NPR Design System for React — cobalt blue on white, NPRSans, 18 components"
  metaDescription: "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."
  highlights:
    - "Charcoal-not-black ink — every 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 accent — the Gotham-derivative sans runs every headline, label, and chrome string; the serif appears only in body deks"
    - "Uppercase eyebrow labels at 0.84px tracking — section names like Law, Politics, and Culture sit as 14px / 500 caps above each story tile"
    - "60px pill audio buttons — the listen-and-duration CTAs use full pill rounding with the duration timestamp baked into the label"
  tags:
    - "News & Publishing"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.npr.org"
      title: "NPR — official site"
      description: "NPR's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is NPR's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typefaces does NPR use, and what should I use as substitutes?"
      answer: "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."
    - id: "ink-charcoal"
      title: "Why does NPR use charcoal #333333 instead of pure black?"
      answer: "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."
    - id: "audio-play-buttons"
      title: "What's special about NPR's audio play buttons?"
      answer: "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."
    - id: "rounded-style"
      title: "What is NPR's corner-radius philosophy?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own broadcaster or podcast site?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "editorial-article"

colors:
  primary: "#0a61db"
  ink: "#333333"
  ink-soft: "#121212"
  ink-black: "#000000"
  canvas: "#ffffff"
  muted: "#737373"
  muted-2: "#575757"
  hairline: "#d4d4d4"
  surface-mute: "#f1f1f1"

typography:
  display-xl:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: 0
  display-md:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 27.6px
    letterSpacing: 0
  heading-lg:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 27.5px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 22.5px
    letterSpacing: 0
  body-dek:
    fontFamily: "\"NPRSerif\", Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "0.32px"
  body-md:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: "0.32px"
  body-sm:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: "0.28px"
  caption:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0.24px"
  eyebrow-cap:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 19.6px
    letterSpacing: "0.84px"
  eyebrow-cap-sm:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0.72px"
  meta-cap:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: "0.84px"
  nav-link:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: "0.28px"
  pill-label:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: "0.84px"
  span-md:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0
  micro:
    fontFamily: "\"NPRSans\", Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: "0.2px"

rounded:
  none: "0px"
  sm: "2px"
  md: "6px"
  pill: "60px"
  full: "9999px"

spacing:
  xs: "5px"
  sm: "8px"
  base: "10px"
  md: "11px"
  lg: "15px"
  xl: "16px"
  2xl: "20px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.pill-label}"
    rounded: "{rounded.pill}"
    padding: "0px 10px"
    height: "30px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
    height: "32px"
    borderColor: "{colors.hairline}"
  audio-play-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.pill-label}"
    rounded: "{rounded.pill}"
    padding: "0px 10px"
    height: "30px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "15px 20px"
    height: "50px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: "0px 10px"
    height: "50px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px 0px 16px"
  story-tile-headline:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
    padding: "8px 0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.muted}"
    typography: "{typography.body-dek}"
    padding: "0px 0px 16px"
  eyebrow:
    backgroundColor: "transparent"
    textColor: "{colors.muted}"
    typography: "{typography.eyebrow-cap}"
    padding: "0px 0px 5px"
  byline:
    backgroundColor: "transparent"
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
    padding: "5px 0px"
  story-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "20px 20px 0px"
    borderColor: "{colors.hairline}"
  media-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "12px 16px 16px"
    borderColor: "{colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "0px 12px"
    height: "40px"
    borderColor: "{colors.hairline}"
  divider:
    backgroundColor: "{colors.hairline}"
    height: "1px"
    padding: "0px"
  photograph:
    backgroundColor: "{colors.surface-mute}"
    rounded: "{rounded.sm}"
    padding: "0px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
    padding: "20px 20px 0px"
---

## Overview

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:**
- Charcoal `{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.
- Single cobalt voltage (`{colors.primary}`) carries link text AND the audio-play pill buttons; no other saturated color appears in the homepage chrome.
- NPRSans across every tier with NPRSerif reserved only for body deks under story headlines.
- Uppercase eyebrow labels at 14px / 500 with 0.84px tracking sit above every story tile carrying the section name ("Law," "Politics," "Culture," "National Security").
- 60px pill rounding for audio-play CTAs, 2px rounding for cards / inputs / dropdowns — a binary radius system with nothing in between.
- Photography-led story tiles: every tile begins with a full-width image, then eyebrow, then headline, then NPRSerif dek, separated from neighbors by 1px `{colors.hairline}` rules.
- Audio CTAs bake the duration into the label ("Listen · 25:04," "Listen · 4:42") so the affordance and the time-commitment sit inside the same target.
- The 110-token underlying color variable palette (gray-100..900, blue-100..900, red, orange, yellow, green, teal, violet, magenta, tan families) carries every potential editorial accent but only 7 are rendered on the homepage chrome.

## Colors

- **Cobalt Primary** (`{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.
- **Ink** (`{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.
- **Ink Soft** (`{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.
- **Ink Black** (`{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.
- **Canvas** (`{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.
- **Muted** (`{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.
- **Muted-2** (`{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.
- **Hairline** (`{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.
- **Surface Mute** (`{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.

## Typography

### Font Family

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.

### Hierarchy

| 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 |

### Principles

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.

### Note on Font Substitutes

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.

## Layout

### Spacing System

- **Base unit:** 5px (with 15px as the dominant module — 93 occurrences across the captured page).
- **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 11px · `{spacing.lg}` 15px · `{spacing.xl}` 16px · `{spacing.2xl}` 20px.
- **Page padding (horizontal):** `0px 20px` on narrow viewports; `0px 64px` on wide viewports (the latter inherited from the broadsheet content container).
- **Section padding (vertical):** `0px 0px 20px` between story tiles; `20px 20px 0px` on the section-band wrappers.
- **Story-tile padding:** `20px 20px 0px` on top / horizontal; the bottom edge inherits the 1px `{colors.hairline}` rule that separates rows.

### Grid & Container

- **Max content width:** ~1280px on the outer container, with the hero story column constrained to ~720px wide for headline readability.
- **Hero band:** 2-column at desktop with the lead story (headline + dek + audio-play pill + photograph) on the left and a secondary stack of three follow-on stories on the right.
- **Story-tile grid:** 4-column on dense editorial bands ("More Top Stories"), collapsing to 2-column on tablet and 1-column on narrow viewports.
- **Audio-segment band:** dedicated full-bleed dark-background row with the segment thumbnail, title, host name, and audio-play pill.
- **Footer:** 4-column NPRSans link grid carrying the standing sections and the donation / membership prompt.

### Rhythm

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.

## Elevation

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.

- **Flat (no shadow):** every editorial story tile, the masthead, the nav bar, the footer — 99% of surfaces.
- **Hairline divider:** `{colors.hairline}` at 1px between rows of story tiles and below the top-nav.
- **Single shadow exception:** the audio-segment dark band uses a `{colors.ink-soft}` tint at low opacity under the embedded video card; not used anywhere else on the page.

## Shapes

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.

## Components

**`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's and Don'ts

**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.

## Known Gaps

- **Hover and focus states:** documented only for resting states; the full state matrix (focus rings, disabled tints, error states) is not captured from the marketing surface.
- **Dark mode:** there is none on the homepage. The captured surface is light-only.
- **The full 110-token color palette:** the underlying CSS exposes gray, blue, red, orange, yellow, green, teal, violet, magenta, and tan families at 50/100/200/300/400/500/600/700/800/900 steps, but only 9 of those tokens render on the homepage chrome. The rest are reserved for editorial overrides (election graphics, podcast art, special-report pages, data visualizations) that are not represented here.
- **Audio-player chrome:** the embedded persistent-player at the foot of the page (the "Now Playing" strip with scrubber, host-name, and queue) uses a different surface treatment that is not tokenized in this file.
- **Election and special-report graphics:** the bright red `{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.
- **Podcast-art surfaces:** the 15px and 40px radii in the captured CSS belong to podcast-cover-art treatments and embedded video chrome — separate sub-systems with their own radius scale.
- **Mobile-specific affordances:** the captured CSS includes mobile breakpoint variations that are not enumerated as separate tokens in this file.