NASA Brand Design System Deep-Dive

1. Brand Overview

NASA’s digital presence is exactly what you’d expect from a space agency with decades of public visibility: clear, authoritative, and functional. The brand voice is built for a global audience that includes scientists, engineers, educators, students, and the general public. There’s no visual fluff here—every design choice supports clarity, credibility, and resilience across platforms.

The NASA logo on the site is the traditional “meatball” insignia—blue field, white lettering, red vector—scaled to 110×92 pixels in the header. No safe zone padding is applied around it (safeZone all zero). This lack of buffer is telling: they’re confident in the mark, and they fit it tightly in the layout to maximize usable space.

The site’s design feels like a hybrid between government standards and modern web UI. There’s obvious influence from US Web Design System (USWDS) conventions (Public Sans, clear focus states, accessible color contrast) mixed with NASA’s own red-blue identity. Fonts are a mix of Inter for headings and links, and Public Sans Web for buttons, captions, and UI controls—again, USWDS alignment.

This is not a “brand for selling products.” The design is for delivering information at scale—mission updates, imagery, research papers—without losing brand authority. The color palette leans dark neutral with functional blues and occasional red for CTAs. Spacing follows a strict 8px grid. Borders are sparse; depth is achieved through contrast, not heavy shadows. Components are built to survive in high-density layouts and still meet accessibility rules.

NASA’s brand design online must work for everyone: a scientist skimming data, a student looking for images, a journalist grabbing a press release. That’s why the typography scale is wide, the link styles are strong, and buttons have clear hover/focus states. They’re designing for reliability, not trendiness.

2. Color System

2.1 Primary Colors

NASA’s primary brand color in the UI is white (#ffffff) for text and foreground elements against dark backgrounds. The functional accent is blue—specifically #0000ee (pure link blue) and #005ea2 / #2491ff for hover/focus outlines. Red (rgb(216, 57, 51)) is reserved for primary action buttons (“bg-nasa-red”).

White as a primary in UI terms is about legibility on dark backgrounds. Blue is used for interactive elements, aligning with NASA’s technical and scientific identity. Red is rare—it’s a “break glass” color for high-priority actions. Compared to other agencies, NASA’s palette is more restrained: NOAA uses more blues, ESA uses cooler grays, NASA keeps strong contrast.

2.2 Complete Palette

2.3 Color Relationships

Contrast is high across the system. White (#ffffff) on #1b1b1b gives a WCAG AAA ratio (>15:1). Link blue (#0000ee) on white is borderline for accessibility but meets AA for larger text; NASA offsets this with hover states turning links to #fee685 (pale yellow) for emphasis. Red on white is acceptable, but red on dark backgrounds is more striking.

Dark mode isn’t “optional” here—it’s the baseline. The palette is inherently dark-background-first. Light mode equivalents aren’t present in the extracted data.

2.4 Usage Guide

• Do use NASA Red only for high-value CTAs.
• Do keep link blue consistent for inline text links.
• Avoid mixing #0000ee and #005ea2 in the same element—it dilutes hierarchy.
• Do maintain high contrast: light text on dark bg or vice versa.
• Avoid using bright blue (#2491ff) for anything other than focus outlines—it’s a signal, not a style.

3. Typography

3.1 Font Families

Two main families:

• Inter: Used for headings (heading-1), links, some body text. No fallback stack listed—likely loaded self-hosted or via CDN.
• Public Sans Web: Used for buttons, captions, and some headings. Fallbacks include system fonts (-apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol).

No Google Fonts or Adobe Fonts detected; likely USWDS’s Public Sans and Inter are self-hosted.

3.2 Type Scale

3.3 Hierarchy

H1 jumps from 72px down to 29px—this is a huge range, allowing for massive hero titles and compact section headers without introducing new type styles. Inter’s uniform weight 700 for headings keeps authority. Public Sans is used for UI controls—buttons feel consistent with USG sites. Line heights get tighter as sizes drop, which maintains vertical rhythm in dense data layouts.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px. All common values are multiples of 8, with occasional fractional (11.2px, 29.008px) for typographic alignment.

4.2 Layout

Breakpoints are numerous, from 350px up to 1600px, covering mobile, tablet, and multiple desktop tiers. This suggests NASA uses component-based responsive rules rather than fixed container widths—likely because content ranges from small text blocks to huge imagery.

5. Visual Elements

Border Radius:

• 0px 4px 4px 0px — asymmetric, used in search inputs.
• 4px — small buttons.
• 7px — div elements.
• 50% — circular buttons/icons (social media icons).
• 100% — fully rounded divs.

Shadows: Only one shadow value detected: rgba(2, 2, 2, 0) 0px 0px 0px 0px — essentially no shadow. NASA is running a flat design here.

Borders: Mostly 0px 0px 1px solid in white or gray for underlines. A few solid borders for dividers. No heavy border usage beyond functional separation.

6. Components

6.1 Buttons

Primary (usa-button usa-button--secondary bg-nasa-red):

• Default: bg rgb(216, 57, 51) (NASA Red), text white, padding 12px 20px, radius 4px, border none.
• Hover: text rgba(43,51,63,0.75), bg rgb(28,103,227), box-shadow inset white border + theme color, border 1px solid black, scale 1.05.
• Active: text #cccccc, bg initial, no border.
• Focus: bg rgb(28,103,227), text white, outline #2491ff solid 0.25rem.

Circular Icon Buttons (hds-mag-progress):

• Default: bg #efefef, text black, radius 50%.
• Hover: bg rgb(28,103,227), scale 1.1.
• Active: bg rgba(204,24,24,0.08).
• Focus: outline #2491ff solid 0.25rem.

6.2 Links

Multiple link styles:

• White text links, hover pale yellow (#fee685).
• Gray text links (#565c65), hover pale yellow.
• Link blue (#0000ee), hover pale yellow.

No underlines—rely on color change for hover.

6.3 Forms

Search input:

• Default: bg black, text white, border 1px solid #565c65, radius none, padding 0 8px.
• Focus: outline #288bff solid 2px, border-color #288bff.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-transparent: transparent;
  --color-gray-a: #959599;
  --color-black-a: #1b1b1b;
  --color-link-blue: #0000ee;
  --color-gray-b: #2e2e32;
  --color-black: #000000;
  --color-gray-c: #b9b9bb;
  --color-gray-d: #58585b;
  --color-gray-e: #8c8c8c;
  --color-nasa-blue: #005ea2;
  --color-bright-blue: #2491ff;
  --color-nasa-red: rgb(216, 57, 51);

  /* Typography */
  --font-inter: "Inter";
  --font-public-sans: "Public Sans Web", -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  /* Spacing */
  --space-5: 5px;
  --space-8: 8px;
  --space-11_2: 11.2px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-22: 22px;
  --space-24: 24px;
  --space-29_008: 29.008px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-72: 72px;

  /* Radius */
  --radius-search: 0px 4px 4px 0px;
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-full: 50%;
  --radius-max: 100%;

  /* Shadows */
  --shadow-none: rgba(2, 2, 2, 0) 0px 0px 0px 0px;
}

8. AI Coding Assistant Prompt

# NASA Design System Specification

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

## Brand Context
NASA's digital design is functional, high-contrast, and accessibility-first. It prioritizes clarity for a global audience, using a dark background with light text and restrained accent colors. Components follow USWDS patterns with Inter and Public Sans typography.

## Color Palette
- Primary White: #ffffff — text, icons on dark backgrounds
- Transparent Secondary: transparent — overlay backgrounds
- Neutral Gray A: #959599 — secondary text, UI chrome
- Neutral Black A: #1b1b1b — page background, nav bars
- Link Blue: #0000ee — inline text links, downloads
- Dark Neutral B: #2e2e32 — dividers, side panels
- Pure Black: #000000 — icons, nav toggles
- Neutral Gray B: #b9b9bb — secondary labels
- Neutral Gray C: #58585b — dividers, captions
- Neutral Gray D: #8c8c8c — disabled states
- NASA Blue: #005ea2 — link hover, focus outlines
- Bright Blue: #2491ff — focus outlines for buttons
- NASA Red: rgb(216, 57, 51) — primary action buttons

## Typography
- Headings: "Inter"
- Body/UI: "Public Sans Web", -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1-lg | 72px | 700 | 1.05 | Hero titles |
| H1-md | 56px | 700 | 1.10 | Page titles |
| H1-sm | 48px | 700 | 0.95 | Section headers |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px. Scale: 5px, 8px, 11.2px, 12px, 14px, 15px, 16px, 22px, 24px, 29.008px, 32px, 40px, 48px, 56px, 72px.

## Border Radius
- search: 0px 4px 4px 0px
- sm: 4px — buttons
- md: 7px — divs
- full: 50% — circular icons
- max: 100% — fully rounded divs

## Shadows & Depth
Flat design—no visible shadows. Use borders for separation.

## Components

### Primary Button
Default: bg #d83933, color #ffffff, padding 12px 20px, radius 4px, border none.  
Hover: bg #1c67e3, color rgba(43,51,63,0.75), border 1px solid #000000, scale 1.05.  
Focus: bg #1c67e3, color #ffffff, outline #2491ff solid 0.25rem.  
Active: color #cccccc, bg initial.

### Secondary Circular Button
Default: bg #efefef, color #000000, radius 50%.  
Hover: bg #1c67e3, scale 1.1.  
Focus: outline #2491ff solid 0.25rem.

### Links
Default: white/gray/blue depending on context, no underline.  
Hover: pale yellow #fee685.

### Input Fields
Default: bg #000000, color #ffffff, border 1px solid #565c65, padding 0 8px.  
Focus: outline #288bff solid 2px, border-color #288bff.

## Layout & Responsive Rules
Breakpoints: 350px, 450px, 480px, 550px, 576px, 600px, 767px, 768px, 781px, 782px, 800px, 850px, 959px, 960px, 992px, 1023px, 1024px, 1025px, 1080px, 1100px, 1200px, 1440px, 1600px.

## Interaction Rules
Transition timing: 150ms ease for state changes.  
Focus indicators: solid outlines with bright blue or NASA blue.  
No motion-heavy effects.

## DO
- Use only colors from palette
- Maintain 8px grid
- Use Inter for headings, Public Sans for UI
- Keep link hover consistent (#fee685)
- Use NASA Red only for primary CTAs

## DON'T
- Add custom shadows
- Mix rounded and sharp corners inconsistently
- Use colors outside palette
- Underline links

## Code Examples

```css
.btn-primary {
  background: rgb(216, 57, 51);
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 22.08px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: rgb(28, 103, 227);
  color: rgba(43, 51, 63, 0.75);
  border: 1px solid #000;
  transform: scale(1.05);
}
.btn-primary:focus {
  outline: #2491ff solid 0.25rem;
}
```

```css
.input-search {
  background: #000;
  color: #fff;
  border: 1px solid #565c65;
  padding: 0 8px;
}
.input-search:focus {
  outline: #288bff solid 2px;
  border-color: #288bff;
}
```

9. Summary

TL;DR — NASA’s web design is a dark, high-contrast, accessibility-first system. It uses Inter and Public Sans, an 8px spacing grid, white and blue for interaction, and red for rare CTAs. No fluff—just clear, authoritative UI.

Brand Keywords:

• space-authoritative
• high-contrast
• government-functional
• accessibility-driven
• flat-design