Mission-Control / Aerospace UI

---
name: mission-control-telemetry
description: Apply the Mission-Control / Aerospace UI visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Mission-Control / Aerospace UI, mentions NASA console, flight ops UI, telemetry dashboard, or describes status-color semantics (nominal/caution/critical), labeled mono readouts, dense multi-panel telemetry 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
---

# Mission-Control / Aerospace UI Design System

Dense flight-operations telemetry in the NASA/SpaceX console tradition: a near-black panel wall of labeled mono readouts, status grids, and strip charts where green means nominal, amber means caution, and red means act now. Every value has a label, a unit, and a threshold.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Mission-Control / Aerospace UI.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (NASA console, flight ops UI, telemetry dashboard, control room UI), or describes its traits: status-color semantics (nominal/caution/critical); labeled mono readouts; dense multi-panel telemetry grid; condensed uppercase labels; 2px radii and hairline borders; gauge and strip-chart clusters.

## Design tokens

### Color palette

- Console background, near-black blue-gray: `#0a0f14` (--color-bg)
- Panel and readout-cluster background: `#101820` (--color-surface)
- Primary readout text, cool light gray: `#cfdbe2` (--color-text)
- Labels, units, and static captions: `#75859a` (--color-text-muted)
- Data cyan: plots, selected values, links: `#22d3ee` (--color-accent)
- Green — system nominal / go: `#4ade80` (--color-nominal)
- Amber — caution / watch: `#fbbf24` (--color-caution)
- Red — critical / no-go: `#ef4444` (--color-critical)
- Plot gridlines and panel rules: `#22303c` (--color-grid)
- 1px panel borders: `#1c2833` (--color-border)

### Typography

- Display / headings: Barlow Condensed (fallback: Saira Condensed, Arial Narrow, sans-serif)
- Body: IBM Plex Mono (fallback: Menlo, Consolas, monospace)
- Mono / data: IBM Plex Mono (fallback: Menlo, Consolas, monospace)
- Type scale: 1.2 ratio, base 13px — computed steps: 13px / 16px / 19px / 22px / 27px / 32px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.2, letter-spacing 0.08em, uppercase
- Body: line-height 1.3, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 12, 16, 24, 32 — Deliberately dense: 4–8px internal gaps, 8–12px panel padding. Every pixel carries telemetry; whitespace is a luxury control rooms don't have.
- Border radius: none 0px, sm 2px — 2px maximum. Soft corners read as consumer software; consoles are square.
- Border treatment: 1px solid #1c2833 — Hairline borders divide panels; status cells may carry a 1px border in their status color.

### Shadows

- none: `none` — Panels are flat — no elevation model
- status-glow: `0 0 8px rgba(74, 222, 128, 0.35)` — Optional soft glow on active status cells (swap rgba to match caution/critical color)

### Layout

- Max content width: 2560px
- Full-bleed multi-panel grid tiled edge to edge; designed for large and multiple monitors
- Persistent header strip: mission clock (T+ / UTC), vehicle state, and comm status always visible
- Readouts grouped into labeled clusters: uppercase condensed label, mono value, unit in text-muted
- Strip charts scroll right-to-left with fixed y-axis thresholds drawn as amber/red lines

### Effects

- Blinking (1 Hz) reserved exclusively for unacknowledged critical alarms
- Value-change flash: a readout background pulses once when data updates
- Threshold lines drawn directly on gauges and strip charts
- Optional faint scan texture on panel backgrounds at ≤2% opacity

### Motion

- Easing: linear; durations 80ms / 120ms / 250ms
- Data updates in place with at most a one-frame background flash — no tweened numbers on live telemetry
- Strip charts advance continuously at fixed rate; nothing else moves continuously
- Alarm acknowledgment stops the blink and latches the cell to steady status color
- No decorative transitions between views; operators need zero ambiguity about state

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0a0f14;
  --color-surface: #101820;
  --color-text: #cfdbe2;
  --color-text-muted: #75859a;
  --color-accent: #22d3ee;
  --color-nominal: #4ade80;
  --color-caution: #fbbf24;
  --color-critical: #ef4444;
  --color-grid: #22303c;
  --color-border: #1c2833;
  --radius-none: 0px;
  --radius-sm: 2px;
  --shadow-status-glow: 0 0 8px rgba(74, 222, 128, 0.35);
  --border-default: 1px solid #1c2833;
  --font-display: "Barlow Condensed", "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Mono", Menlo, Consolas, monospace;
  --font-mono: "IBM Plex Mono", Menlo, Consolas, monospace;
  --text-base: 13px;
  --leading-heading: 1.2;
  --leading-body: 1.3;
  --tracking-heading: 0.08em;
  --tracking-body: 0;
  --ease: linear;
  --duration-fast: 80ms;
  --duration-base: 120ms;
  --duration-slow: 250ms;
}
```

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

## Component recipes

- **Nav:** 32px header strip on bg with 1px bottom border: mission name and clock in mono left, view-switcher tabs center, comm/link status lights right — no hamburger menus, everything visible
- **Hero:** None in the marketing sense; the entry view is the summary status grid plus the mission clock, which doubles as the identity moment
- **Card:** Telemetry panel: surface fill, 1px border, 2px radius, uppercase condensed title bar at 12px, body of labeled mono readouts in a tight two-column grid
- **Button (primary):** Command button: surface fill, 1px accent border, uppercase mono label, 2px radius; destructive/irreversible commands use a two-step arm-then-execute pattern with the critical color
- **Button (secondary):** Flat text button in text-muted, uppercase mono; underline on hover
- **Form fields:** Dark inset input (#0a0f14) with 1px border and mono text; focus border switches to accent; invalid input borders critical red with an inline reason

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

The status grid: a matrix of labeled cells (GNC, EPS, THERM, COMM…) each glowing steady green, amber, or red — a whole vehicle's health readable in one glance from across a control room. Spend boldness here; keep everything else quiet.

## Do

- Give every readout a label and a unit — naked numbers are forbidden in flight ops
- Reserve blink for unacknowledged critical alarms and nothing else
- Keep the mission clock and comm status visible at all times
- Use arm/execute two-step interactions for irreversible commands

## Don't

- Don't animate or tween live telemetry values — operators must trust what they read
- Don't use status colors (green/amber/red) for branding or decoration
- No modals that obscure the status grid; alerts dock, they don't cover
- Don't round corners past 2px or add elevation shadows — flatness signals instrumentation

## Accessibility notes

- Status semantics must never rely on color alone: pair green/amber/red with text state labels (NOM/CAUT/CRIT) or shape coding for color-blind operators
- 13px mono at this density is fatiguing; provide a display-scale setting for operators on smaller screens
- Blinking alarms must stay at or under 1 Hz (well below the 3-flashes-per-second seizure threshold) and must be accompanied by a non-visual channel (sound or log entry)
- Caution amber #fbbf24 on dark passes contrast, but amber-on-amber-tinted cells needs checking — keep text on status fills black or near-black

## Reference sites

- NASA: https://www.nasa.gov
- SpaceX: https://www.spacex.com
- Interface In Game (console UIs): https://interfaceingame.com

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

Install this skill

unzip mission-control-telemetry.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/mission-control-telemetry.json

Settings → Capabilities → Skills → Upload skill → mission-control-telemetry.zip