CDC Brand Design System Deep Dive

1. Brand Overview

The CDC site design is exactly what you expect from a public health authority — no fluff, no trend-chasing, no playful distractions. It’s functional. It’s authoritative. It’s built to be trusted by everyone from scientists to the general public.

The vibe: institutional but accessible. This isn’t the sterile “government blue” of the 1990s, but it’s still rooted in deep blues and neutral grays. Those choices communicate reliability and seriousness. They don’t want you to “explore” — they want you to find and understand.

Typography reinforces that seriousness. Poppins and Nunito are clean sans-serifs, but they’re not hyper-modern like Inter or geometric like Futura. Poppins has a slightly humanist feel that softens the edges; Nunito is rounder, warmer. Together they keep the site from feeling cold.

The spacing and layout are predictable — an 8px base grid with common increments like 9px, 18px, 36px shows they’ve extended beyond strict multiples where needed but kept the rhythm tight. Breakpoints are classic Bootstrap-ish widths (576px, 768px, 992px, 1200px, 1400px) with a few oddball ones like 770px and 991px that probably patch specific layout cases.

Borders and shadows are used sparingly. Borders dominate — thin 1px lines in blues and grays — with shadows only appearing in subtle rgba(0,0,0) values for depth when necessary.

Overall philosophy: clarity first, accessibility always, aesthetics second but not neglected. If you’re designing for them, you need to respect that hierarchy.

2. Color System

2.1 Primary Colors

The main brand color is rgb(0, 95, 163) — normalized as #005fa3 — a deep, saturated blue. It’s the anchor for CTAs, key actions, and identity. Psychologically, this blue lands between trust and authority. It’s not navy (too muted) and not cyan (too playful). It’s the kind of blue you see in safety signage — it demands attention without shouting.

Competitor comparison: WHO uses lighter blues (#0093d0), which feel more open but less authoritative. CDC’s choice is heavier, which matches its U.S. federal role.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid — white text on #005fa3 meets WCAG AA (ratio ~8.5:1). Black on white is obviously fine. They avoid low-contrast combinations. Links (#005ea2) on white are borderline for small text but pass for normal sizes.

Dark mode? Not implemented — palette is fixed for light backgrounds. If you were to adapt, you’d invert the background to #1c1d1e and flip text to white, but you’d need new link colors to keep contrast.

2.4 Usage Guide

Works well:

• #005fa3 background with white text — high trust, high clarity.
• #dfe1e2 borders with white backgrounds — clean separation without heaviness.
• #3d4551 text on light backgrounds — softer than pure black.

Avoid:

• Blue on blue — #005fa3 text over #005ea2 background is a contrast fail.
• Light gray text (#dfe1e2) on white — fails WCAG.

3. Typography

3.1 Font Families

• Poppins — headings, buttons, some links. No fallbacks listed, but typically sans-serif fallback.
• Nunito — links, body, captions. Rounder, softer.
• cdc-fa, cdc-icons — icon fonts (likely private). Used for glyphs.
• No Google Fonts or Adobe Fonts loaded — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

They mix weights more than sizes to create hierarchy. H1 at 48px is rare — most headings are in the 18–22px range. That’s a deliberate choice: keeps density high, avoids massive headers. Line heights are generous (1.5+), aiding legibility. Uppercase is used on buttons and some links to differentiate them from body copy.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px-ish grid, but with odd increments.

4.2 Layout

Breakpoints:

• 98px — icon threshold?
• 380px — micro layout change.
• 576px — Bootstrap small.
• 768px — tablets.
• 770px — small desktop fix.
• 991px — legacy Bootstrap medium.
• 992px — Bootstrap large.
• 1200px — desktop large.
• 1400px — extra large.

Max container probably at 1400px. Mobile padding likely ~18px (matches spacing scale).

5. Visual Elements

Border Radius — inconsistent but deliberate.

• 0px — tables, nav links.
• 4.5px — subtle rounding (divs).
• 6px — cards.
• 6.75px — buttons/navigation.
• 9px — images/buttons.
• 13.5px — buttons.

Corners are always small — no pill shapes.

Shadows — only two:

• rgba(0,0,0,0.067) 0px 2px 5px 1px — light depth.
• rgba(0,0,0,0.1) 5px 5px 5px -4px — offset depth.

Borders — heavy use, especially 1px solid #165fa3 for buttons and 1px solid #dfe1e2 for dividers.

6. Components

6.1 Buttons

Single nav-link style in data:

Default:

• Background: transparent
• Color: white
• Padding: 9px
• Radius: 0
• Outline: none
• Font: Poppins 18px, weight 300

Hover:

• Color: var(--colors-gray-cool-70) (not listed, but likely darker gray)
• Outline: solid 2px #005fa3
• Box-shadow: inset black 0px 0px 5px
• Border: 1px solid white

Active:

• Background: #00508a
• Color: #005fa3
• Box-shadow: rgba(0,0,0,0.35) offset
• Outline: solid 1px #005fa3
• Border: 1px solid transparent

Focus:

• Outline: solid 1px white
• Background: transparent
• Opacity: 0.9

They avoid disabled states in extracted data.

6.2 Links

Six variants:

• Blue (#005ea2) underlined — hover to gray.
• Black (#000) — hover to gray, underline.
• White (#fff) — hover to gray.
• Primary blue (#005fa3) — hover to gray.
• Dark gray (#555c66) — hover to gray.
• Slate (#3d4551) — hover to gray.

Underline appears on hover except for explicitly underlined default.

6.3 Forms

No input styles extracted — likely basic Bootstrap with CDC colors for focus.

6.4 Cards

Card radius: 6px or 6px top corners only. Padding likely 27px or 36px. Borders in light gray, minimal shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #005fa3;
  --color-language-link: #005ea2;
  --color-white: #ffffff;
  --color-dark-gray: #555c66;
  --color-very-dark-gray: #1c1d1e;
  --color-mid-gray: #555555;
  --color-slate: #3d4551;
  --color-black: #000000;
  --color-light-gray: #dfe1e2;
  --color-deep-navy: #0b4778;
  --color-medium-blue: #165fa3;
  --color-hover-blue: #00508a;
  --color-hover-white: #ffffff;

  /* Semantic CSS Vars */
  --colors-green-cool-50: #4D8055;
  --colors-gold-gold-5: #FEF0C8;
  --colors-red-cool-50: #CD425B;
  --colors-yellow-yellow-5: #FAF3D1;
  --colors-cyan-10: #EFF9FA;
  --colors-cdc-blue: #0057B7;
  --colors-orange-warm-50: #B25225;
  --colors-cyan-40v: #009EC1;
  --colors-red-cool-60: #9E394B;
  --colors-orange-warm-10: #FBE0D0;
  --colors-orange-warm-5: #FBF0E8;
  --colors-gray-cool-40: #8d9297;
  --colors-gray-cool-3: #F5F6F7;
  --colors-cyan-50v: #0081a1;

  /* Typography */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Nunito", sans-serif;
  --font-icons: "cdc-icons";
  --font-fa: "cdc-fa";

  /* Spacing */
  --space-1: 1px;
  --space-4_5: 4.5px;
  --space-5: 5px;
  --space-6_75: 6.75px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13_5: 13.5px;
  --space-18: 18px;
  --space-27: 27px;
  --space-36: 36px;
  --space-72: 72px;
  --space-90: 90px;
  --space-200: 200px;

  /* Radius */
  --radius-none: 0px;
  --radius-4_5: 4.5px;
  --radius-6: 6px;
  --radius-6_75: 6.75px;
  --radius-9: 9px;
  --radius-13_5: 13.5px;

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.067) 0px 2px 5px 1px;
  --shadow-offset: rgba(0, 0, 0, 0.1) 5px 5px 5px -4px;
}

8. AI Coding Assistant Prompt

# CDC Design System Specification

You are a CDC design expert. Build UIs matching their visual language exactly.

## Brand Context
CDC design is functional, authoritative, and accessible. It uses deep blues for trust and neutral grays for clarity. Typography is clean sans-serif, with generous line heights for legibility. Borders are subtle; shadows are minimal.

## Color Palette
- Primary Blue: #005fa3 — CTAs, brand identity, active states
- Language Link Blue: #005ea2 — inline links, language selector
- White: #ffffff — background, text on dark
- Dark Gray: #555c66 — secondary text
- Very Dark Gray: #1c1d1e — official notices
- Mid Gray: #555555 — icons, secondary UI
- Slate: #3d4551 — nav links, button text
- Black: #000000 — logo, headings
- Light Gray: #dfe1e2 — borders, dividers
- Deep Navy: #0b4778 — h2 borders
- Medium Blue: #165fa3 — button borders, active states
- Hover Blue: #00508a — hover overlays
- Hover White: #ffffff — hover overlays
- Green Cool 50: #4D8055 — success
- Red Cool 50: #CD425B — error
- Orange Warm 50: #B25225 — warning
- Cyan 50v: #0081a1 — info

## Typography
- Headings: "Poppins", sans-serif
- Body: "Nunito", sans-serif
- Icons: "cdc-icons"
- Font Awesome: icon font

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 300 | 1.5 | Page titles |
| H1 alt | 35px | 300 | 1.25 | Section titles |
| Link | 28px | 400 | 2.32 | Large links |
| Link bold | 28px | 600 | 1.5 | Emphasis links |
| Body | 18px | 400 | 1.5 | Paragraphs |
| Button | 18px | 300 | 1.5 | Uppercase buttons |

## Spacing & Grid
Base: 8px grid. Scale: 1px, 4.5px, 5px, 6.75px, 8px, 9px, 10px, 12px, 13.5px, 18px, 27px, 36px, 72px, 90px, 200px.

## Border Radius
- none: 0 — nav links
- xs: 4.5px — small divs
- sm: 6px — cards
- md: 6.75px — buttons
- lg: 9px — images/buttons
- xl: 13.5px — large buttons

## Shadows & Depth
- Light: rgba(0,0,0,0.067) 0px 2px 5px 1px
- Offset: rgba(0,0,0,0.1) 5px 5px 5px -4px

## Component Specifications

### Primary Button (nav-link)
Default:
- background: transparent
- color: #ffffff
- padding: 9px
- border-radius: 0
- font: Poppins 18px weight 300

Hover:
- color: var(--colors-gray-cool-70)
- outline: 2px solid #005fa3
- box-shadow: inset 0px 0px 5px black
- border: 1px solid #ffffff

Active:
- background: #00508a
- color: #005fa3
- outline: 1px solid #005fa3
- border: 1px solid transparent

Focus:
- outline: 1px solid #ffffff
- background: transparent
- opacity: 0.9

### Navigation Link
Default:
- color: #005ea2
- text-decoration: underline 1px
Hover:
- color: var(--colors-gray-cool-70)
- text-decoration: underline

## Layout & Responsive Rules
- Breakpoints: 98px, 380px, 576px, 768px, 770px, 991px, 992px, 1200px, 1400px
- Max width: 1400px desktop
- Mobile padding: 18px
- Grid gap: 18px–36px

## Interaction Rules
- Transitions: 150ms ease for state changes
- Focus: visible outline using palette colors
- No motion beyond fades for hover

## DO
- Use only palette colors
- Maintain 8px grid
- Keep headings in Poppins, body in Nunito
- Use small radius values consistently
- Keep contrasts WCAG compliant

## DON'T
- Use large radii or pills
- Invent new blues
- Apply heavy shadows
- Reduce line height below 1.5
- Use gray text below #555c66 on white

## Code Examples

### Primary Button
```css
.btn-primary {
  background: transparent;
  color: #ffffff;
  padding: 9px;
  border-radius: 0;
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 300;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: var(--colors-gray-cool-70);
  outline: 2px solid #005fa3;
  box-shadow: inset 0 0 5px #000;
  border: 1px solid #ffffff;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 6px;
  padding: 27px;
  border: 1px solid #dfe1e2;
}
```

### Input
```css
.input {
  border: 1px solid #dfe1e2;
  border-radius: 6px;
  padding: 10px;
  font-family: 'Nunito';
  font-size: 16px;
}
.input:focus {
  border-color: #005fa3;
  outline: none;
}
```

9. Summary

TL;DR — CDC’s design system is built for trust: deep blues, neutral grays, clean sans-serif typography, and tight spacing. Minimal shadows, small radii, and clearly defined link/button states make it predictable and accessible.

Brand Keywords — trust-first, grid-disciplined, blue-authoritative, accessible-minimal, border-not-shadow