NIH Brand Design System Deep Dive

1. Brand Overview

The National Institutes of Health (NIH) is not a tech startup chasing visual trends. It's a U.S. government institution dealing with public health, research, and policy. Their brand isn't about selling a product — it's about authority, clarity, and accessibility. Everything in their design language leans toward trustworthiness and neutrality. No flashy gradients. No quirky micro-interactions. It's functional, almost austere, but with just enough personality to avoid looking like a PDF from 1998.

The NIH site runs on a clear visual hierarchy and a restrained color palette centered around a deep, professional blue (#005ea2) and a lot of neutral grays. This blue isn't playful — it's a "serious" blue, the kind you see in government seals and official documents. It works because NIH needs to project credibility and stability. If they leaned into teal or neon, it would clash with their mission.

Typography is a mix of serif and sans-serif, balancing the gravitas of Merriweather with the clean utility of Source Sans Pro. This dual-type approach is common in institutional design — serif for long-form or titles (authority), sans-serif for UI and navigation (clarity).

Spacing is clearly on an 8px grid, which keeps layouts predictable and easy to scale. Component styles are minimal: flat buttons, subtle hover effects, and no drop shadows except for a single inset shadow used for depth on certain UI elements.

NIH's design system feels like it's built to meet WCAG accessibility standards and government usability guidelines. You can tell they prioritize legibility, high contrast, and clear focus states. Even their hover states aren't about "fun" — they're about making it obvious something is interactive.

This isn't a brand trying to win design awards. It's a brand making sure the public can access health information without confusion. And in that context, the restraint works.

2. Color System

2.1 Primary Colors

The primary brand color is rgb(0, 94, 162) → #005ea2.

Why this works:

• Dark enough for high contrast against white text.
• Saturated enough to stand out for CTAs and links.
• Deep blue signals trust, stability, and professionalism — common in government and healthcare sectors.

Competitor comparison:

• CDC uses a similar dark blue.
• WHO uses lighter blues but the same trust signal.
• NIH's blue is slightly darker and less vibrant than tech brand blues like IBM, reinforcing its non-commercial tone.

2.2 Complete Palette

2.3 Color Relationships

Contrast:

• White on #005ea2 is very high contrast — comfortably above WCAG AAA.
• #2e2e2e on white is also solid — about 13:1 contrast ratio.
• #dfe1e2 on white is low contrast; used for subtle secondary text, not primary content.

Accessibility:

• Primary buttons meet WCAG AAA for text contrast.
• Hover red (#e60023) with white text is borderline AAA but passes AA.
• Focus outlines in bright blue are highly visible even for users with color vision deficiencies.

Dark mode:
No native dark mode — colors are optimized for light backgrounds. The palette would need rethinking for dark mode because many grays would collapse in contrast.

2.4 Usage Guide

Works well:

• Primary Blue (#005ea2) with White (#ffffff) → strong, clear CTAs.
• Deep Gray (#2e2e2e) for body text against white backgrounds.
• Bright Blue (#2491ff) for focus outlines — visually distinct.

Avoid:

• Using #dfe1e2 for body text — low contrast.
• Putting #454545 on #f0f0f0 without increasing font weight — can be hard to read.
• Overusing Hover Red (#e60023) for non-critical actions — red reads as warning/danger.

3. Typography

3.1 Font Families

• Merriweather Web (serif) — fallback: Georgia, Cambria, Times New Roman, Times
  Used for headings. Adds authority and formality.
• Source Sans Pro Web (sans-serif) — fallback: Helvetica Neue, Helvetica, Roboto, Arial
  Used for links, buttons, body copy. Clean, readable in UI contexts.

No Google Fonts or Adobe Fonts loading — likely self-hosted webfonts.

3.2 Type Scale

3.3 Hierarchy

NIH uses a compressed range of sizes — largest H1 at 39px, smallest caption at 12.8px. The serif/sans pairing creates hierarchy without huge jumps in size. Bold weights (600–700) are reserved for buttons and key headings. Body text sits around 16px — comfortably readable.

The small caps/uppercase styling for certain links (16.96px, 1.0176px letter spacing) adds emphasis without relying solely on color.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Every spacing value is a multiple or fraction of 8px.

4.2 Layout

No explicit breakpoints in the extracted data, but the 8px grid ensures predictable scaling. Given it's USWDS-based, expect mobile-first with standard government site breakpoints (~480px, 768px, 1024px).

5. Visual Elements

Border Radius:

• 0px 4px 4px 0px — asymmetric, used for buttons.
• 4px — common for buttons, small components.
• 24px — rare, possibly for pill-like links.

Shadows:
Only one: rgb(198, 202, 206) 0px 0px 0px 1px inset. Used for subtle depth, probably input fields. NIH is otherwise flat — they rely on borders.

Borders:

• Common: 1px solid #c6cace for cards.
• Dividers: 0px 0px 4px solid #2e2e2e for list items.
• Inputs have mixed: 1px solid #757575 in one variant.

6. Components

6.1 Buttons

Primary (usa-button):

Default:

• Background: #005ea2
• Text: #ffffff
• Padding: 0px 16px
• Border radius: 0px 4px 4px 0px
• Border: none
• Font weight: 600
• Size: 18.08px

Hover:

• Background: #e60023
• Text: #ffffff
• Border: 1px solid rgba(0, 0, 0, 0.1)
• Opacity: 0.8

Active:

• Background: #a9aeb1
• Text: #162e51

Focus:

• Background: transparent
• Text: #757575
• Outline: #2491ff solid 0.25rem

6.2 Links

Five variations, all text-decoration: none by default.

Example:

• Primary link: Blue (#005ea2), hover: White (#ffffff).
• Secondary: Gray (#2e2e2e), hover: White.
• Accent: Gray (#71767a), hover: White.
• White bold: White (#ffffff), weight 600.
• Footer link: Light gray (#dfe1e2), underline by default, hover: White.

6.3 Forms

Search input:

• Default: White background, Deep Gray text.
• Focus: Light gray background (#c9c9c9), darker text (#454545), box-shadow rgba(0, 0, 0, 0.125) 0px 1px 2px, outline bright blue (#2491ff).

6.4 Cards

Border: 1px solid #c6cace. No shadows except inset style. Spacing likely 12–16px inside.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #005ea2;
  --color-gray-dark: #2e2e2e;
  --color-white: #ffffff;
  --color-gray-medium: #454545;
  --color-black: #000000;
  --color-gray-light: #f0f0f0;
  --color-gray-cool-light: #dfe1e2;
  --color-gray-cool-mid: #c6cace;
  --color-navy: #1a4480;
  --color-bright-blue: #2491ff;
  --color-hover-red: #e60023;
  --color-active-gray: #a9aeb1;
  --color-active-text-blue: #162e51;
  --color-search-focus-gray: #c9c9c9;

  /* Typography */
  --font-serif: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times;
  --font-sans: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial;

  /* Spacing (px) */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-3-2: 3.2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-10-4: 10.4px;
  --space-12: 12px;
  --space-16: 16px;
  --space-16-96: 16.96px;
  --space-18-08: 18.08px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;

  /* Border Radius */
  --radius-asymmetric: 0px 4px 4px 0px;
  --radius-sm: 4px;
  --radius-lg: 24px;

  /* Shadows */
  --shadow-inset: rgb(198, 202, 206) 0px 0px 0px 1px inset;
}

8. AI Coding Assistant Prompt

# NIH Design System Specification

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

## Brand Context
NIH's design is functional, authoritative, and accessible. It blends serif headings for gravitas with sans-serif UI text for clarity. Colors are restrained, leaning on a deep blue for primary actions and neutral grays for structure.

## Color Palette
- Primary Blue: #005ea2 — Primary buttons, links, CTAs
- Deep Gray: #2e2e2e — Body text, navigation
- White: #ffffff — Backgrounds, text on dark
- Medium Gray: #454545 — Secondary text
- Black: #000000 — Icons
- Light Gray: #f0f0f0 — Background surfaces
- Cool Gray Light: #dfe1e2 — Footer links, subtle UI text
- Cool Gray Mid: #c6cace — Borders for cards
- Navy: #1a4480 — Hover/focus background
- Bright Blue: #2491ff — Focus outlines
- Hover Red: #e60023 — Button hover background
- Active Gray: #a9aeb1 — Button active background
- Active Text Blue: #162e51 — Button active text
- Search Focus Gray: #c9c9c9 — Search input focus background

## Typography
- Headings: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times
- Body/UI: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 39.04px | 400 | 1.20 | Page titles |
| Link large | 29.76px | 400 | 1.10 | Hero links |
| H1 mid | 27.36px | 400 | 1.40 | Section headings |
| H1 bold sans | 25.6px | 700 | 1.50 | Key headings |
| H1 small serif | 23.36px | 400 | 1.40 | Subtitles |
| Link med | 18.08px | 400 | 1.60 | Body links |
| Button | 18.08px | 600 | 1.60 | Primary buttons |
| H1 sans med | 18.08px | 600 | 1.60 | UI headings |
| Link tight | 18.08px | 600 | 1.00 | Compact links |
| Button small | 16.96px | 400 | 0.90 | Secondary buttons |
| Link uppercase | 16.96px | 400 | 1.30 | Nav links |
| Caption | 12.8px | 400 | 1.10 | Footnotes |

## Spacing & Grid
Base: 8px. Scale: 1, 2, 3, 3.2, 4, 8, 10, 10.4, 12, 16, 16.96, 18.08, 20, 24, 28, 32px.
Use multiples of 8px for layout gaps, padding, and margins.

## Border Radius
- Asymmetric: 0px 4px 4px 0px — Primary buttons
- Small: 4px — Inputs, small components
- Large: 24px — Rare pill links

## Shadows & Depth
Flat design with one inset shadow: `rgb(198, 202, 206) 0px 0px 0px 1px inset` — used for inputs.

## Component Specifications

### Primary Button
Default:
- background: #005ea2
- color: #ffffff
- padding: 0px 16px
- border-radius: 0px 4px 4px 0px
- font-weight: 600
- font-size: 18.08px

Hover:
- background: #e60023
- color: #ffffff
- border: 1px solid rgba(0, 0, 0, 0.1)
- opacity: 0.8

Active:
- background: #a9aeb1
- color: #162e51

Focus:
- outline: #2491ff solid 0.25rem
- background: transparent
- color: #757575

### Links
Primary:
- default: color #005ea2, no underline
- hover: color #ffffff, no underline

Footer:
- default: color #dfe1e2, underline
- hover: color #ffffff, no underline

### Input Fields
Search default:
- background: #ffffff
- color: #2e2e2e
Focus:
- background: #c9c9c9
- color: #454545
- box-shadow: rgba(0,0,0,0.125) 0px 1px 2px
- outline: #2491ff solid 0.25rem

### Cards
- border: 1px solid #c6cace
- padding: 12–16px
- no shadow except inset if needed

## Layout & Responsive Rules
- Maintain 8px grid
- Standard USWDS breakpoints (~480px, 768px, 1024px)

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: always visible, high contrast
- No motion-heavy animations

## DO
- Use only palette colors
- Maintain 8px grid
- Serif for headings, sans-serif for UI
- Keep buttons flat — no drop shadows
- Ensure focus outlines are visible

## DON'T
- Invent new colors
- Mix rounded and sharp corners inconsistently
- Reduce contrast below WCAG AA
- Use hover red for non-interactive elements

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #005ea2;
  color: #ffffff;
  padding: 0px 16px;
  border-radius: 0px 4px 4px 0px;
  font-weight: 600;
  font-size: 18.08px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #e60023;
  color: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  opacity: 0.8;
}
.btn-primary:focus {
  outline: #2491ff solid 0.25rem;
  background: transparent;
  color: #757575;
}
```

### Card
```css
.card {
  background: #ffffff;
  border: 1px solid #c6cace;
  padding: 12px;
}
```

### Search Input
```css
.input-search {
  background: #ffffff;
  color: #2e2e2e;
  padding: 0px 8px;
}
.input-search:focus {
  background: #c9c9c9;
  color: #454545;
  box-shadow: rgba(0,0,0,0.125) 0px 1px 2px;
  outline: #2491ff solid 0.25rem;
}
```

9. Summary

TL;DR: NIH's design system is a restrained, accessible, government-grade UI kit. Deep blue for authority, neutral grays for structure, serif headings for gravitas, sans-serif for functional clarity. Flat, grid-based, with high-contrast focus states.

Brand Keywords:

• authority-first
• grid-disciplined
• accessibility-driven
• flat-functional
• serif-sans-balanced