NPR Brand Design System Deep Dive

1. Brand Overview

NPR’s design language is exactly what you’d expect from a public media powerhouse: clean, journalistic, and functional. It’s design for reading and listening, not for showboating. The site is built for people who want to consume content—articles, audio, live streams—without distraction. This is not a "brand screaming at you" aesthetic. It’s a steady hum.

The vibe is unapologetically utilitarian. Colors are purposeful. Typography is restrained but flexible. Elements don’t fight for attention—they cooperate. The visual system is tuned for clarity and trust, which makes sense for a brand whose entire reputation rests on perceived credibility.

NPRSans and NPRSerif carry the voice—custom fonts designed for legibility across screen sizes. The sans is modern but not cold, the serif adds a touch of authority without sliding into old-world stuffiness. Fallbacks to Helvetica, Arial, and Georgia ensure consistency.

Layout sticks to a predictable rhythm. The 8px spacing scale is everywhere, but they’re not religious about it—you’ll see 5px, 7px, 15px values in the mix. This isn’t a rigid atomic design token set; it’s a pragmatic system that adapts to content needs.

Buttons and links are understated until you interact with them. Hover states bring in brighter blues or subtle opacity shifts—clear feedback without breaking the visual calm.

NPR’s design is for readers, listeners, and multitaskers. It’s not chasing trends. It’s built to work for years, not months. If you’re designing for them, you have to respect that: clarity over novelty, trust over flash.

2. Color System

2.1 Primary Colors

The primary brand color in this extracted system is white (#ffffff) for surfaces, paired with deep neutral text (#333333). But in terms of interactive brand identity, the blue family is the hero:

• #2c63ae — Used in music logo, audio module listen buttons.
• #5076b8 — Used for secondary CTAs like “more” buttons.
• #6d8ac4 — Used for skip links and link text.

This blue range is calmer than the electric blues used by tech brands. It reads as trustworthy and professional. Compared to competitors like The Guardian (more saturated blue) or NYT (no blue at all), NPR’s palette is less aggressive, more approachable.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid. White backgrounds with #333333 text deliver a 15.9:1 ratio—well above WCAG AA and AAA. Blue link colors (#6d8ac4) against white have ~4.6:1 contrast—meets AA for normal text. The darker blues (#2c63ae, #5076b8) are even stronger.

Against black backgrounds, white text is perfect contrast. The system is clearly built for accessibility—no low-contrast gimmicks.

No dark mode tokens are present in extracted data, so presumably this is a light-mode-first system.

2.4 Usage Guide

Works well:

• White background + #333333 text for main content.
• #2c63ae buttons with white text for strong CTAs.
• #6d8ac4 links on white—readable, distinct.

Avoid:

• Using #767676 on white for body text—it’s too low contrast for long reading.
• Pairing #6d8ac4 with #5076b8 in the same component—too close in value, reduces hierarchy.
• Blue text on blue backgrounds—kills legibility.

3. Typography

3.1 Font Families

Two custom fonts dominate:

• NPRSans — fallback to Helvetica, Arial. Modern sans, versatile.
• NPRSerif — fallback to Georgia. Adds authority to select headings and captions. Fallbacks ensure safe rendering when custom fonts fail.

No Google or Adobe Fonts—these are custom-hosted.

3.2 Type Scale

(Full set includes every extracted style—this table condensed for readability.)

3.3 Hierarchy

The jump from 32px to 26px headline sizes is clear enough to define section hierarchy. Subheads down to 22px keep things compact. Body/link text sits at 16–18px, readable even on mobile.

Captions drop to 14px and 12px, but stay within accessibility guidelines when paired with high-contrast colors.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, but they mix in non-multiples (5px, 7px, 15px) for fine-tuning.

Common values:

• 1px (13 uses)
• 2px (79 uses)
• 3px (160 uses)
• 5px (252 uses)
• 7px (370 uses) — most frequent small gap
• 8px (159 uses) — base grid
• 10px (262 uses) — common for button padding
• 15px (138 uses) — small section gaps
• 20px (161 uses) — section spacing
• 100px (35 uses) — large hero gaps

4.2 Layout

Breakpoints:

• Mobile: 400px, 425px, 426px, 476px, 480px, 481px
• Tablet: 530px, 550px, 600px, 650px
• Desktop: 769px, 890px, 896px, 897px, 1023px, 1024px, 1280px

This is a granular set—probably tuned to specific components (audio player, nav, etc.), not a generic 3-breakpoint system.

5. Visual Elements

Border Radius

Lots of small radii—few big ones:

• 1px, 2px, 3px, 5px, 6px, 7px
• Pills: 15px, 18px, 40px, 60px
• Full circles: 50%

Pill buttons often use 60px radius. Cards/images get 2–5px.

Shadows

Mostly subtle:

• rgba(0,0,0,0.4) 0 0 10px — common (122 uses)
• rgba(0,0,0,0.05) 0 0 7px — soft lift
• Rare: rgba(0,0,0,0.2) 0px 2px 4px

This isn’t a flat design—shadows are used for depth, but sparingly.

Borders

Neutral greys dominate:

• 1px solid #ccc — common
• 1px solid #444 — for inputs
• 1px solid #2c63ae — rare, for blue buttons

6. Components

6.1 Buttons

Default system button:

• Background: #efefef
• Color: #000
• Padding: 1px 6px
• Border: 2px outset #000
• Radius: none
• Hover: opacity 0.7, white text, #1eaedb background
• Focus: white text, opacity 0.7, 2px solid black outline

Audio listen button:

• Background: #2c63ae
• Color: #333
• Radius: 60px
• Padding: 0 10px
• Hover: same as above
• Font size: 14px

Audio queue button:

• Background: transparent
• Color: #2c63ae
• Border: 1px solid #ccc
• Radius: 60px

Vertical video navigation:

• Background: white
• Radius: 40px
• Shadow: rgba(0,0,0,0.25) 0 0 4px

More button:

• Background: #5076b8
• Color: white
• Padding: 10px
• Border: 1px solid #5076b8
• Radius: 2px
• Hover: black background

6.2 Links

Colors vary by context:

• #6d8ac4 (link blue)
• #4a4a4a (neutral)
• #ffffff (on dark)
• Hover: all shift to #3860be

No underlines.

6.3 Forms

No extracted inputs here—likely styled minimally with 1px borders and grey tones.

6.4 Cards

Borders and small shadows—2–5px radius, grey borders.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-neutral-dark: #333333;
  --color-white: #ffffff;
  --color-link-blue: #6d8ac4;
  --color-grey-secondary: #767676;
  --color-black: #000000;
  --color-brand-blue: #2c63ae;
  --color-cta-blue-secondary: #5076b8;
  --color-dark-grey: #696969;

  /* Typography */
  --font-npr-sans: "NPRSans", Helvetica, Arial;
  --font-npr-serif: "NPRSerif", Georgia;
  --font-arial: Arial, Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-100: 100px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-15: 15px;
  --radius-18: 18px;
  --radius-40: 40px;
  --radius-60: 60px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-strong: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.05) 0px 0px 7px 0px;
}

8. AI Coding Assistant Prompt

# NPR Design System Specification

You are an NPR design expert. Build UIs matching their visual language exactly.

## Brand Context
NPR values clarity, trust, and usability. The design system is built for content consumption—articles, audio, and live streams—without unnecessary visual noise. Colors, typography, and spacing are tuned for accessibility and credibility.

## Color Palette
- Neutral Dark: #333333 — Primary text
- White: #ffffff — Backgrounds, surfaces
- Link Blue: #6d8ac4 — Links, skip links
- Grey Secondary: #767676 — Metadata, captions
- Black: #000000 — Icons, strong text
- Brand Blue: #2c63ae — Music logo, audio module listen buttons
- CTA Blue Secondary: #5076b8 — Secondary CTAs, "more" buttons
- Dark Grey: #696969 — Category headers

## Typography
- Fonts:
  - NPRSans, Helvetica, Arial — Headings, body, UI text
  - NPRSerif, Georgia — Select headings, captions
- Sizes:
  - H1: 32px / 700 / 1.25
  - H2: 26px / 700 / 1.00
  - H3: 24px / 700 / 1.15
  - Body: 16–18px / 400 / 1.50
  - Caption: 14px / 400–700 / 1.50
  - Button: 14.4px / 700 / 1.00
- Use NPRSans for headings and UI, NPRSerif for emphasis.

## Spacing & Grid
Base: 8px grid. Common values: 1px, 2px, 3px, 5px, 7px, 8px, 10px, 15px, 20px, 100px.
Use multiples for component padding and margins.

## Border Radius
- none: 0 — default system buttons
- sm: 2–3px — cards, images
- md: 5–6px — buttons
- lg: 15–18px — medium pills
- pill: 40–60px — audio buttons
- full: 50% — avatars

## Shadows & Depth
- Strong: rgba(0,0,0,0.4) 0 0 10px
- Soft: rgba(0,0,0,0.05) 0 0 7px

## Component Specifications

### Primary Button
Default:
```css
background: #2c63ae;
color: #333333;
padding: 0 10px;
border-radius: 60px;
border: none;
font-size: 14px;
font-weight: 400;
```
Hover:
```css
opacity: 0.7;
color: #ffffff;
background: #1eaedb;
```
Focus:
```css
outline: 2px solid #000;
background: #1eaedb;
color: #ffffff;
```

### Secondary Button
Default:
```css
background: transparent;
color: #2c63ae;
border: 1px solid #ccc;
border-radius: 60px;
padding: 0 10px;
```

### Navigation Links
Default: link blue (#6d8ac4), no underline.
Hover: #3860be, no underline.

### Input Fields
Border: 1px solid #444
Font: 16px NPRSans
Padding: 5px–10px
Focus: border-color #2c63ae

### Card
Background: #ffffff
Border-radius: 2–5px
Shadow: soft

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 476px, 480px, 530px, 550px, 600px, 650px, 769px, 890px, 896px, 897px, 1023px, 1024px, 1280px

## Interaction Rules
Transition: 150ms ease
Focus indicators: solid outlines in black or blue
Hover: opacity changes, background shifts

## DO List
- Use only palette colors
- Maintain 8px grid
- Use NPRSans for headings, NPRSerif for special emphasis
- Keep hover states subtle
- Preserve high contrast in text

## DON'T List
- Don't invent new colors
- Don't mix rounded and square corners within a component
- Don't drop below AA contrast
- Don't overload buttons with shadows

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #2c63ae;
  color: #333333;
  padding: 0 10px;
  border-radius: 60px;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #1eaedb;
  color: #ffffff;
  opacity: 0.7;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: var(--shadow-soft);
  padding: 20px;
}
```

Input:
```css
.input {
  border: 1px solid #444;
  border-radius: 2px;
  padding: 5px 10px;
  font-family: var(--font-npr-sans);
}
.input:focus {
  border-color: #2c63ae;
  outline: none;
}
```

9. Summary

TL;DR: NPR’s design system is content-first, accessibility-conscious, and blue-accented. It uses NPRSans/NPRSerif for a balanced tone, sticks to an 8px grid with pragmatic deviations, and keeps interactive elements understated until engaged.

Brand Keywords: trust-driven, content-focused, utilitarian-modern, accessibility-first