---
version: alpha
name: USPS Delivers
description: Civic-editorial confidence built on the United States Postal Service's flag-derived palette — Postal Blue and Postal Red over clean white, with a bold sans display voice, generous editorial whitespace, and timeline-driven storytelling for a generational research report.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f4f6f9"
  surface-blue: "#eef3fa"
  ink: "#1a1a1a"
  ink-secondary: "#4a4f57"
  ink-muted: "#6e7681"

  # Brand — USPS flag palette
  primary: "#004b87"        # Postal Blue
  primary-dark: "#003366"   # Eagle / deep navy
  accent: "#da291c"         # Postal Red
  accent-dark: "#b71f15"

  # Generational section tints (editorial story sections)
  tint-warm: "#f6ede3"
  tint-cool: "#e7f0f7"

  # Interactive
  link: "#004b87"
  link-hover: "#003366"
  focus-ring: "#1b7fd1"

  # Neutral scale
  gray-900: "#1a1a1a"
  gray-700: "#3d4148"
  gray-500: "#6e7681"
  gray-300: "#c4cad2"
  gray-200: "#dfe3e8"
  gray-100: "#eceff3"

  # On-color
  on-primary: "#ffffff"
  on-accent: "#ffffff"
  border: "#dfe3e8"

typography:
  display-hero:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -1px
  section-heading:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.25px
  eyebrow:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.5px
  card-title:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  stat-number:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.25px
  caption:
    fontFamily: "Public Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.25px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-dark}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    borderColor: "{colors.primary}"

  eyebrow-label:
    textColor: "{colors.accent}"
    typography: "{typography.eyebrow}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-blue}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.gray-200}"

  stat-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.stat-number}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  timeline-node:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.gray-300}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.focus-ring}"

  badge:
    backgroundColor: "{colors.surface-blue}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# USPS Delivers Design System

## Overview

USPS Delivers is the United States Postal Service's marketing-insights brand, and its generational research report carries the visual weight of a 250-year-old institution speaking with editorial confidence. The system is built on the USPS flag-derived palette — Postal Blue (`{colors.primary}`) and Postal Red (`{colors.accent}`) over a clean white canvas (`{colors.background}`) — the same red-white-and-blue trust signals that ride on every mail truck and stamp. The result reads as civic, authoritative, and unmistakably American without tipping into kitsch.

The report is a long-form editorial experience organized as a generational timeline: Boomer, Gen X, Millennial, and Gen Z sections that the reader scrolls or steps through. Each section earns generous whitespace (`{spacing.3xl}`–`{spacing.4xl}` between major blocks), letting large display headlines and oversized statistics breathe. This is data journalism dressed as a design system: the hero (`{typography.display-hero}`) commands at 56px weight 800, while statistics (`{typography.stat-number}`) land at 48px to make survey numbers feel like headlines in their own right.

Typography does the institutional heavy lifting. A clean, slightly geometric sans (Public Sans as the closest open equivalent — itself a USWDS government typeface) is used in heavy weights (700–800) for display and headings, with a relaxed 400-weight reading body at comfortable 17–20px sizes and 1.6+ line-height. The voice is governmental but warm: confident headlines, plain-language body, and small uppercase eyebrow labels (`{typography.eyebrow}`) in Postal Red that tag each section.

Color discipline keeps the palette functional. Postal Red (`{colors.accent}`) is reserved for primary calls-to-action and eyebrow accents — the moments that demand attention. Postal Blue (`{colors.primary}`) anchors links, secondary buttons, timeline nodes, and statistics. Soft blue and warm tints (`{colors.surface-blue}`, `{colors.tint-warm}`) differentiate editorial story sections without breaking from the achromatic-plus-flag scheme.

**Key Characteristics:**
- USPS flag palette — Postal Blue (`{colors.primary}`) and Postal Red (`{colors.accent}`) over pure white
- Heavy display sans (weights 700–800) for headlines and oversized statistics
- Editorial timeline structure: Boomer → Gen X → Millennial → Gen Z
- Postal Red reserved for primary CTAs and uppercase eyebrow labels
- Generous editorial whitespace between long-form story sections
- Oversized statistic numbers (48px+) treated as headlines
- Small, low-radius rectangular buttons — civic, not playful
- Soft blue/warm tints to separate story sections without breaking the flag scheme

## Colors

### Primary
- **Postal Blue** (`{colors.primary}`): The institutional anchor — links, secondary CTAs, timeline nodes, statistics, headings.
- **Eagle Navy** (`{colors.primary-dark}`): Deep hover/active variant of Postal Blue.
- **Postal Red** (`{colors.accent}`): Primary CTAs and eyebrow accents — the attention color.
- **Postal Red Dark** (`{colors.accent-dark}`): Hover state for red CTAs.

### Canvas & Ink
- **White** (`{colors.background}`): Page and card surface.
- **Soft Surface** (`{colors.surface-soft}`): Subtle section banding.
- **Surface Blue** (`{colors.surface-blue}`): Tinted feature cards and badges.
- **Ink** (`{colors.ink}`): Primary reading text.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata.

### Editorial Tints
- **Warm Tint** (`{colors.tint-warm}`): Older-generation story sections.
- **Cool Tint** (`{colors.tint-cool}`): Younger-generation story sections.

### Interactive
- **Link** (`{colors.link}`): Postal Blue links.
- **Link Hover** (`{colors.link-hover}`): Eagle navy on hover.
- **Focus Ring** (`{colors.focus-ring}`): Bright blue keyboard focus outline.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Darkest text.
- **Gray 700** (`{colors.gray-700}`): Body emphasis.
- **Gray 500** (`{colors.gray-500}`): Muted text.
- **Gray 300** (`{colors.gray-300}`): Input borders.
- **Gray 200** (`{colors.gray-200}`): Card outlines.
- **Gray 100** (`{colors.gray-100}`): Dividers, subtle fills.
- **Border** (`{colors.border}`): Default card/divider line.

## Typography

### Font Family
- **Primary**: `Public Sans`, with fallbacks `Helvetica Neue, Arial, sans-serif`. Public Sans is the U.S. Web Design System typeface — the closest open, civic-coded match to the report's clean institutional sans.
- **Weights**: 400 (body), 500 (captions), 700 (headings/UI), 800 (display + statistics).

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline — report title |
| `section-heading` | Generational section titles |
| `sub-heading` | Sub-section headings |
| `eyebrow` | Small uppercase Postal Red section labels |
| `card-title` | Insight / card headings |
| `stat-number` | Oversized survey statistics |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Secondary copy, inputs |
| `button-ui` | Buttons, nav links, timeline labels |
| `caption` | Metadata, badges, footnotes |

### Principles
- **Weight signals hierarchy**: 800 for display and statistics, 700 for headings and UI, 400 for reading. No light weights — this is an institution speaking plainly.
- **Statistics as headlines**: Survey numbers render at 48px+ weight 800 so data leads the eye.
- **Uppercase eyebrows**: Small tracked-out Postal Red labels tag each generational section.
- **Comfortable reading**: Body at 17–20px with 1.6+ line-height for long-form editorial.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, scaling to large editorial gaps (`{spacing.3xl}`–`{spacing.4xl}`) between story sections.

### Grid & Container
- Max content width: approximately 1200px, with narrower ~720px measure for long-form reading passages.
- Hero: full-width with large display headline and a Postal Red CTA.
- Story sections: single-column editorial flow with interspersed stat cards and feature callouts.
- Timeline: horizontal pill-node navigation across the four generations.

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical gaps between generational sections frame each as its own chapter.
- **Data given air**: Oversized statistics sit in generous space so numbers register before supporting copy.
- **Banding for rhythm**: Soft blue/warm tinted sections alternate with white to pace the long scroll.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page background, text blocks |
| Outline | `1px solid {colors.border}` | Standard cards, inputs |
| Tinted | Filled `{colors.surface-blue}` panel | Feature callouts |
| Raised | `0 4px 12px rgba(0,0,0,0.08)` | Stat cards, hovered cards |
| Focus | `2px solid {colors.focus-ring}` outline | Keyboard focus |

**Shadow Philosophy**: Depth is restrained and civic — thin outlines and soft tints carry most separation, with only modest drop shadows on elevated stat cards. Trust comes from clarity, not theatrics.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed image bands |
| `xs` | 2px | Hairline accents |
| `sm` | 4px | Buttons, inputs |
| `md` | 6px | Small containers |
| `lg` | 10px | Cards, stat panels |
| `xl` | 16px | Large feature panels |
| `pill` | 9999px | Timeline nodes, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Postal Red fill, white text, low 4px radius. The lead CTA ("Start Exploring", "Download Report").
- **`button-secondary`** — Postal Blue fill, white text.
- **`button-outline`** — White with Postal Blue text and border.

### Cards
- **`card`** — White, thin border, 10px radius.
- **`card-feature`** — Tinted blue surface for editorial callouts.
- **`stat-card`** — Oversized Postal Blue statistic over a white panel.

### Timeline
- **`timeline-node`** — Postal Blue pill marking each generation (Boomer / Gen X / Millennial / Gen Z).

### Labels & Badges
- **`eyebrow-label`** — Uppercase Postal Red section tag.
- **`badge`** — Tinted blue pill for small metadata.

### Navigation
- **`nav-bar`** — White header with bottom border, bold Postal Blue/ink links.

### Inputs
- **`input`** — White, gray border; focus switches to bright blue `{colors.focus-ring}`.

## Do's and Don'ts

### Do
- Use Postal Red (`{colors.accent}`) for the single primary CTA and eyebrow accents only
- Anchor links, statistics, and secondary actions in Postal Blue (`{colors.primary}`)
- Treat survey statistics as oversized 48px+ headlines
- Keep generous editorial whitespace between generational sections
- Use heavy weights (700–800) for display and plain 400 for reading
- Use low rectangular radii for buttons — civic confidence, not playful pills

### Don't
- Don't scatter Postal Red across the UI — it's the attention color, used sparingly
- Don't use light font weights for headings
- Don't crowd statistics; they need surrounding space to read as headlines
- Don't introduce off-brand colors outside the flag-derived blue/red + neutrals
- Don't use heavy drop shadows — depth is thin outlines and soft tints

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked timeline, 32px headline |
| Tablet | 600–1024px | Two-column stat grids, expanded padding |
| Desktop | 1024–1200px | Full editorial layout, horizontal timeline |
| Large | >1200px | Centered max-width with generous margins |

### Touch Targets
- Buttons use 14px vertical padding for comfortable tap targets
- Timeline nodes are pill-shaped with ample padding
- Nav links spaced for touch

### Collapsing Strategy
- Hero headline scales 56px → 32px on mobile
- Horizontal generational timeline collapses to a stacked/vertical stepper
- Stat grids: multi-column → single column
- Feature callouts maintain tinted treatment at all sizes
- Section spacing compresses from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

### Image Behavior
- Generational section background images go full-bleed
- Portraits and editorial imagery maintain aspect ratio
- Stat panels stay legible over tinted backgrounds at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Postal Red `{colors.accent}`
- Secondary CTA / links / stats: Postal Blue `{colors.primary}`
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Eyebrow accent: Postal Red `{colors.accent}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create an editorial hero: white background, 56px weight-800 headline in `{colors.ink}`, a small uppercase Postal Red eyebrow (`{colors.accent}`, 14px weight 700, 1.5px tracking) above it, 20px weight-400 lead paragraph in `{colors.ink-secondary}`, and a Postal Red CTA button (`{colors.accent}`, 4px radius, 14px 28px padding)."
- "Build a stat card: white panel, 1px `{colors.border}`, 10px radius, 32px padding. Number at 48px Public Sans weight 800 in Postal Blue `{colors.primary}`, label below at 15px weight 400 `{colors.ink-secondary}`."
- "Design a generational timeline: horizontal row of Postal Blue pill nodes (`{colors.primary}`, white text, 9999px radius) labeled Boomer, Gen X, Millennial, Gen Z."
- "Create a feature callout: tinted blue surface `{colors.surface-blue}`, 10px radius, 32px padding, 22px weight-700 title, 17px reading body."

### Iteration Guide
1. Lead with the flag palette — Postal Blue structural, Postal Red for the one CTA
2. Statistics are headlines: render survey numbers oversized in Postal Blue
3. Use heavy weights for display, plain 400 for long-form reading
4. Keep generous whitespace between generational chapters
5. Low rectangular button radii keep the institutional, civic tone
6. Soft blue/warm tints band the editorial sections without breaking the scheme

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by USPS Delivers. Brand names and trademarks belong to their respective owners.