NOAA Brand Design System Deep Dive

1. Brand Overview

NOAA’s brand presence is functional, authoritative, and data-driven. This is a public service agency — the U.S. National Oceanic and Atmospheric Administration — so the design language has to communicate trust, precision, and accessibility before anything else. There’s no fluff here. The website design feels engineered for clarity: clear typography, government-standard blues, and a disciplined grid. It’s closer to a scientific dashboard than a lifestyle brand.

The NOAA logo is a known shape in public service branding — a bold, circular seal with an abstract bird and wave. On the site, the logo is presented in SVG form with no extra safe zone padding, meaning it sits flush to its bounding box. That tells you they’re making efficient use of space, a theme you’ll see everywhere in the design system.

The typography choices — Nunito Sans and Source Sans Pro — balance friendliness and legibility. Nunito Sans has rounded terminals and a modern humanist feel, softening the otherwise stern government aesthetic. Source Sans Pro is the workhorse for UI and form elements, chosen for its clarity at small sizes.

Color is dominated by deep blues: #003087 and #005ea2. These aren’t fashion blues; they’re “government service blues.” They signal stability and seriousness. Supporting grays (#333333, #707070) keep things neutral, while bright blue (#2491ff) appears only in focus states, ensuring high visibility for keyboard navigation.

Spacing is built on an 8px scale, but with some odd decimals like 4.5px and 13.5px — clearly inherited from the U.S. Web Design System (USWDS) conventions. This means NOAA’s system isn’t purely “designer aesthetic” — it’s a practical implementation of shared federal UI standards.

Borders and radii are restrained. No heavy shadows. No soft, overblown cards. Flat design dominates, relying on color and typography for hierarchy.

This brand system is built for audiences ranging from scientists to the general public needing weather alerts. Accessibility is not a nice-to-have — it’s mission-critical. Every color choice, font size, and interaction state has been designed with that in mind.

2. Color System

2.1 Primary Colors

NOAA’s primary brand color is deep blue (#003087). This is the anchor color — used in the footer logo, form fields, and certain headings. It’s a strong, saturated blue that evokes authority and maritime associations. If you think of NASA’s blue, you’re close — but NOAA’s is even darker, leaning towards navy.

The secondary interactive blue is #005ea2. This is a brighter, more energetic blue, used for links and some CTAs. It’s still conservative enough to feel official, but has more vibrancy for clickable elements.

A focus state blue (#2491ff) is the only “electric” tone in the palette. It pops hard against dark backgrounds, ensuring WCAG-compliant visibility for focus outlines.

Compared to corporate tech brands, NOAA’s blues are more muted and formal. There’s no teal, no gradients — just solid, dependable hues.

2.2 Complete Palette

2.3 Color Relationships

Contrast ratios are strong across the board. White text (#ffffff) on deep blue (#003087) is well above WCAG AA requirements. Electric blue (#2491ff) on dark gray (#333333) is extremely visible for focus states. Gray shades are used sparingly for text to maintain readability.

Noaa’s palette is inherently dark-mode friendly because the primary UI backgrounds are dark gray or deep blue. Inverse usage (dark text on white backgrounds) is reserved for content areas.

2.4 Usage Guide

• Pair #003087 (deep blue) with #ffffff for primary branding — great for headers, footers.
• Use #005ea2 for interactive links. Hover states shift to #1a4480 for subtle feedback.
• Reserve #2491ff for focus outlines — don’t use it for decorative elements.
• Avoid using #1b1b1b for large text blocks; it’s best for small UI elements or borders.
• Keep grays (#707070) away from primary actions — they dilute the sense of importance.

3. Typography

3.1 Font Families

• Nunito Sans — Primary display and link font. Fallbacks: Open Sans, Helvetica Neue. Source: Google Fonts.
• Source Sans Pro Web — Secondary UI font for buttons, forms. Fallbacks: Helvetica Neue, Helvetica, Roboto, Arial. Source: Google Fonts.
• System UI Stack (-apple-system) — Used for certain link contexts.

Nunito Sans adds warmth and modernity to an otherwise formal palette. Source Sans Pro brings clarity and neutrality, especially in dense UI elements.

3.2 Type Scale

3.3 Hierarchy

The scale jumps from massive (60px) titles to practical 20px and 18px body text. The large display sizes are rare — likely reserved for campaign pages or hero sections. Most UI work happens in the 18–20px range, balancing readability and density. The use of extremely light weights (100) in headings is unusual — it’s a deliberate softness that contrasts with bold numerals and strong CTAs.

4. Spacing & Layout

4.1 Spacing Scale

NOAA runs an 8px base grid, but allows fractional values (4.5px, 13.5px) — probably due to USWDS component padding.

4.2 Layout

Breakpoints range from 360px up to 1920px. There’s clear attention to small devices — multiple breakpoints under 800px suggest fine-tuned mobile layouts. No max content width is explicitly defined in the data, but the presence of 1920px indicates desktop-wide capability.

5. Visual Elements

• Border Radius: Small radii dominate — 4.5px is the most common, used for labels, buttons. Larger 9px appears only on modals. Rounded 50% for circular elements.
• Shadows: None. This is pure flat design.
• Borders: Thin 1px or 2px solids, often in grays (#565c65, #c9c9c9). Borders are functional, not decorative.

6. Components

6.1 Buttons

Primary NOAA button (usa-button class):

• Default:
  • Background: rgb(5, 111, 183)
  • Color: #ffffff
  • Padding: 13.5px 22.5px
  • Border Radius: 4.5px 4.5px 0px 0px
  • Border: none
  • Font: Source Sans Pro Web, 19.08px, weight 700
• Hover: Background transparent, color #757575
• Active: Background transparent, color #162e51
• Focus: Outline #2491ff solid 0.25rem

6.2 Links

Four main link styles:

1. Blue (#005ea2) underline, hover to navy (#1a4480)
2. White (#ffffff) bold, hover underline
3. Deep blue (#003087) semi-bold, hover white
4. Bright blue (#0085ca) bold, hover white

6.3 Forms

Text input:

• Default: Transparent background, white text, 0px radius, padding 15px 50px 10px 10px
• Focus: Electric blue outline (#2491ff), background #c9c9c9, text #003366

6.4 Cards

No explicit card data in JSON — cards likely use flat white backgrounds with small radii (4.5px) and no shadows.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-gray: #333333;
  --color-almost-black: #1b1b1b;
  --color-deep-blue: #003087;
  --color-medium-gray: #707070;
  --color-secondary-blue: #005ea2;
  --color-navy-blue: #1a4480;
  --color-electric-blue: #2491ff;

  /* Typography */
  --font-nunito-sans: "Nunito Sans", "Open Sans", "Helvetica Neue", sans-serif;
  --font-source-sans-pro: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --font-system-ui: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4-5: 4.5px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-12: 12px;
  --space-13: 13px;
  --space-13-5: 13.5px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22-5: 22.5px;
  --space-27: 27px;
  --space-40: 40px;
  --space-60: 60px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4.5px;
  --radius-md: 9px;
  --radius-full: 50%;
}

8. AI Coding Assistant Prompt

# NOAA Design System Specification

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

## Brand Context
NOAA’s design language is authoritative, functional, and accessibility-first. It uses deep blues, neutral grays, and clear typography to communicate trust and clarity. Layouts follow an 8px grid with subtle radii and no shadows.

## Color Palette
- White: #ffffff — Backgrounds, text on dark surfaces
- Dark Gray: #333333 — Header background, skip links
- Almost Black: #1b1b1b — Borders, alert bars
- Deep Blue: #003087 — Primary brand, footer logo, form fields
- Medium Gray: #707070 — Secondary text, muted UI
- Secondary Blue: #005ea2 — Links, CTAs
- Navy Blue: #1a4480 — Link hover
- Electric Blue: #2491ff — Focus outlines

## Typography
- Headings: Nunito Sans, Open Sans, Helvetica Neue
- Body/UI: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 60px | 700 | 1.10 | Hero titles |
| Body Large | 20px | 400 | 1.10 | Body text |
| Body Large Bold | 20px | 600 | 1.30 | Section heads |
| UI | 19.08px | 400 | 1.50 | Links, small text |
| Button | 19.08px | 700 | 0.90 | Primary buttons |
| Caption | 14px | 400 | 1.10 | Meta text |

## Spacing & Grid
Base: 8px grid. Values: 1px, 2px, 4.5px, 5px, 6px, 7px, 8px, 9px, 12px, 13px, 13.5px, 14px, 15px, 16px, 18px, 20px, 22.5px, 27px, 40px, 60px.

## Border Radius
- none: 0px — Data tables
- sm: 4.5px — Buttons, labels
- md: 9px — Modals
- full: 50% — Circular elements

## Shadows & Depth
Flat design — use borders, not shadows.

## Components

### Primary Button
Default:
```css
.btn-primary {
  background: rgb(5,111,183);
  color: #ffffff;
  padding: 13.5px 22.5px;
  border-radius: 4.5px 4.5px 0 0;
  border: none;
  font-family: var(--font-source-sans-pro);
  font-size: 19.08px;
  font-weight: 700;
}
.btn-primary:hover { background: transparent; color: #757575; }
.btn-primary:active { background: transparent; color: #162e51; }
.btn-primary:focus { outline: #2491ff solid 0.25rem; }
```

### Link
```css
.link-primary {
  color: #005ea2;
  text-decoration: underline;
}
.link-primary:hover { color: #1a4480; }
```

### Input Field
```css
.input {
  background: transparent;
  color: #ffffff;
  border-radius: 0;
  padding: 15px 50px 10px 10px;
}
.input:focus {
  outline: #2491ff solid 0.25rem;
  background: #c9c9c9;
  color: #003366;
}
```

## Layout & Responsive Rules
Breakpoints: 360px, 400px, 460px, 480px, 599px, 600px, 660px, 700px, 760px, 800px, 850px, 900px, 960px, 1000px, 1100px, 1199px, 1300px, 1920px.

## Interaction Rules
- Focus outlines: Electric blue #2491ff, 0.25rem thick
- Hover color shifts for all interactive elements
- No shadows — use borders for hover emphasis

## DO
- Use ONLY colors from the palette
- Maintain 8px grid or listed fractional values
- Use Nunito Sans for headings, Source Sans Pro for UI
- Keep buttons flat — no gradients, no shadows
- Preserve hover/focus states exactly

## DON'T
- Invent new blues or grays
- Use shadows
- Mix rounded and square corners inconsistently
- Reduce focus outline thickness
- Remove underline from inline links

## Code Examples

Primary Button:
```css
<button class="btn-primary">Submit</button>
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 4.5px;
  padding: 16px;
  border: 1px solid #c9c9c9;
}
```

9. Summary

TL;DR: NOAA’s design system is disciplined, accessibility-first, and built on federal standards. Deep blues, neutral grays, clear typography, and an 8px grid create a trustworthy, functional UI.

Brand Keywords:

• data-driven-authority
• accessibility-first
• flat-gov-ui
• disciplined-grid
• deep-blue-trust