NASA Graphics Standards (1976)

---
name: nasa-graphics-standards
description: Apply the NASA Graphics Standards (1976) visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" NASA Graphics Standards (1976), mentions nasa worm, graphics standards manual, federal design modernism, or describes nasa red on white with black, lowercase worm-style display type, strict flush-left ragged-right grid — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# NASA Graphics Standards (1976) Design System

The 1976 NASA Graphics Standards Manual as a web style: the lowercase 'worm' logotype spirit, NASA Red (PMS 179) with black on vast white, Helvetica-only typography on a strict flush-left grid, bold horizontal rules, and technical-report numbering. Federal modernism at its most confident — engineered like a launch checklist.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as NASA Graphics Standards (1976).
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (nasa worm, graphics standards manual, federal design modernism, worm logotype style, nhb 1430.2), or describes its traits: nasa red on white with black; lowercase worm-style display type; strict flush-left ragged-right grid; bold horizontal red and black rules; technical report numbering and captions; helvetica-only typography.

## Design tokens

### Color palette

- White — the manual's dominant ground: `#ffffff` (--color-bg)
- Black text and rules: `#1a1a1a` (--color-text)
- Captions, folios, and report metadata gray: `#58585b` (--color-text-muted)
- NASA Red — PMS 179 conversion; the worm, rules, and key highlights: `#e03c31` (--color-accent)
- Light warm gray for diagram fills and secondary panels: `#d9d9d6` (--color-gray-light)
- Secondary support blue seen in manual diagrams and mission graphics, used sparingly: `#2a5caa` (--color-blue-support)

### Typography

- Display / headings: Inter (fallback: Helvetica Neue, Helvetica, Arial, sans-serif) (ideal: Helvetica (the manual specifies Helvetica exclusively), premium — use Inter as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Helvetica, Arial, sans-serif) (ideal: Helvetica, premium — use Inter as the free substitute)
- Mono / data: IBM Plex Mono (fallback: Courier New, monospace)
- Type scale: 1.414 ratio, base 16px — computed steps: 16px / 23px / 32px / 45px / 64px / 90px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 800, line-height 1.05, letter-spacing -0.02em, lowercase
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Editorial and airy: wide margins, deep space above headings, tight caption clusters. The grid is felt through alignment, and the white space is as deliberate as the red.
- Border radius: none 0px — Everything is rectilinear; the only curves belong to the letterforms.
- Border treatment: 1px solid #1a1a1a — Hairlines for tables and diagrams; section rules go heavy — 4-8px solid bars in black or NASA Red.

### Shadows

- none: `none` — Print-flat throughout; hierarchy comes from scale, rules, and red

### Layout

- Max content width: 1140px
- Strict flush-left, ragged-right; nothing is centered
- Heavy horizontal rules open sections; a red rule marks the most important one
- Report-style numbering (1.1, 1.2) on sections and figures
- Wide left margin column reserved for labels and folios, like the manual's pages

### Effects

- Worm-style logotype treatments for brand moments (heavy lowercase, tight tracking)
- Red duotone treatment for photography, echoing the manual's one-color plates
- Figure captions set small with 'Figure 3.2' mono prefixes

### Motion

- Easing: cubic-bezier(0.2, 0, 0, 1); durations 120ms / 200ms / 350ms
- Near-static: fades and small vertical reveals only
- Rules may draw in horizontally on first view, once
- No parallax, no floating elements — the page is a printed spread

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #58585b;
  --color-accent: #e03c31;
  --color-gray-light: #d9d9d6;
  --color-blue-support: #2a5caa;
  --radius-none: 0px;
  --border-default: 1px solid #1a1a1a;
  --font-display: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.05;
  --leading-body: 1.5;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A white bar with a lowercase red wordmark flush-left, plain black text links, and a full-width black hairline beneath; the active link is underlined with a short red rule.
- **Hero:** A manual title page: oversized lowercase heading in black or NASA Red spanning the grid, a heavy red rule beneath, report-number metadata top-right in small gray mono, and abundant white space below.
- **Card:** A ruled figure block: thin black hairline top and bottom, numbered caption ('3.1') in mono, content set flush-left; emphasis versions swap the top hairline for a 6px red bar.
- **Button (primary):** A rectangular block in NASA Red with white bold lowercase label, zero radius, no shadow; hover deepens the red and nothing else moves.
- **Button (secondary):** White with a 2px black border and black lowercase label — reads as an unfilled diagram box.
- **Form fields:** Underline-only field: a 1px black rule with flush-left input text, small gray label above, and a red rule replacing black on focus — a form as a technical worksheet.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A worm-style lowercase logotype block: heavy geometric lowercase display type in NASA Red #e03c31, sitting flush-left above a thick horizontal rule with a report number set small on the right margin. Spend boldness here; keep everything else quiet.

## Do

- Keep the palette to red, black, white, and gray — the discipline is the brand
- Set display type lowercase, heavy, and tightly tracked in the worm's spirit
- Use thick horizontal rules and report numbering to structure long pages
- Give white space engineering precision: consistent, measured, generous

## Don't

- Don't center anything or justify text — flush-left ragged-right always
- Don't add gradients, shadows, or rounded corners to 'modernize' it
- Don't reproduce the actual NASA worm or insignia for non-NASA work — evoke the system, not the mark
- Don't let red exceed roughly a tenth of the page; it works because it is scarce

## Accessibility notes

- NASA Red #e03c31 on white measures about 4.3:1 — just under AA for body text; reserve it for large display type, rules, and fills with white text at 18px+ bold, and keep body copy black.
- Lowercase-only headings can slow scanning for some readers; keep them short and support them with the numbering system.
- Red as the sole emphasis channel fails for red-blind users — pair red rules with weight or position cues.

## Reference sites

- Standards Manual reissue of the NASA Graphics Standards Manual: https://standardsmanual.com/products/nasa-graphics-standards-manual
- Original NHB 1430.2 manual PDF (nasa.gov): https://www.nasa.gov/sites/default/files/atoms/files/nasa_graphics_manual_nhb_1430-2_jan_1976.pdf
- NASA insignia and worm history: https://en.wikipedia.org/wiki/NASA_insignia

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip nasa-graphics-standards.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/nasa-graphics-standards.json

Settings → Capabilities → Skills → Upload skill → nasa-graphics-standards.zip