Sci-Fi HUD / FUI

---
name: sci-fi-hud
description: Apply the Sci-Fi HUD / FUI visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Sci-Fi HUD / FUI, mentions FUI, fantasy UI, holographic interface, or describes neon cyan glow strokes, chamfered corners and corner brackets, circular gauges and segmented rings — 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
---

# Sci-Fi HUD / FUI Design System

Glowing holographic heads-up interface: thin cyan strokes on near-black space blue, chamfered corner brackets, circular gauges, segmented rings, dashed scales, and mono readouts — the movie-UI language of Iron Man and sci-fi games, adapted for the web.

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 Sci-Fi HUD / FUI.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (FUI, fantasy UI, holographic interface, heads-up display, Iron Man UI), or describes its traits: neon cyan glow strokes; chamfered corners and corner brackets; circular gauges and segmented rings; mono data readouts; scan-line and grid overlays; radial data layouts.

## Design tokens

### Color palette

- Deep space navy-black canvas: `#020814` (--color-bg)
- Panel fill, barely lighter than bg, often semi-transparent in practice: `#06101f` (--color-surface)
- Primary text — cyan-tinted white, never pure #fff: `#d9f6ff` (--color-text)
- Secondary labels, tick marks, inactive states: `#5f87a0` (--color-text-muted)
- Primary hologram cyan: strokes, gauges, active data: `#00e5ff` (--color-accent)
- Secondary cyan for fills and gradients: `#00d1ff` (--color-accent-dim)
- Warning/target orange — the counterpoint color: `#ff8a00` (--color-alert)
- Magenta for critical states and rare emphasis: `#ff2daa` (--color-critical)
- Background grid lines and dashed scale strokes: `#0c2438` (--color-grid)

### Typography

- Display / headings: Orbitron (fallback: Rajdhani, sans-serif)
- Body: Rajdhani (fallback: Saira, sans-serif)
- Mono / data: IBM Plex Mono (fallback: Consolas, monospace)
- Type scale: 1.25 ratio, base 14px — computed steps: 14px / 18px / 22px / 27px / 34px / 43px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.2, letter-spacing 0.12em, uppercase
- Body: line-height 1.4, letter-spacing 0.03em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Sparse and angular: elements float in dark space with generous gaps; density lives inside panels (tight mono readouts), not between them.
- Border radius: none 0px, chamfer 0px, ring 999px — No rounded rectangles — corners are square or chamfered via clip-path: polygon() cuts (8–12px 45° cuts). Circles are reserved for gauges.
- Border treatment: 1px solid #00e5ff66 — Thin glowing strokes at 30–50% opacity; full-opacity cyan only on active/focused elements. Corner brackets replace full borders on large panels.

### Shadows

- glow: `0 0 12px rgba(0, 229, 255, 0.45)` — Default neon glow on strokes, gauges, and active text
- glow-strong: `0 0 8px rgba(0, 229, 255, 0.8), 0 0 24px rgba(0, 229, 255, 0.4)` — Focused/active elements and primary CTA
- glow-alert: `0 0 12px rgba(255, 138, 0, 0.5)` — Warning states in orange

### Layout

- Max content width: 1600px
- Radial composition: a central focal element (globe, model, gauge) with data panels orbiting it
- Corner brackets anchor content to screen corners like a cockpit HUD
- Fine background grid or contour lines at very low opacity across the whole canvas
- Dashed scales and tick rulers along panel edges as decorative-functional trim

### Effects

- Scan-line sweep: a translucent cyan bar animating vertically across panels
- Hex-grid motif overlays at 3–5% opacity
- clip-path chamfered panel corners
- Text 'decode' effect: characters scramble then settle on load
- Dashed SVG rings with animated stroke-dashoffset rotation

### Motion

- Easing: cubic-bezier(0.16, 1, 0.3, 1); durations 150ms / 400ms / 900ms
- Panels boot in sequence: stroke draws, then fill fades, then data types on
- Gauges sweep from zero to value on entry with a slight overshoot
- Idle micro-motion: slow ring rotation and gentle glow pulsing keep the HUD alive
- All boot/scan/pulse animations must collapse to static states under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #020814;
  --color-surface: #06101f;
  --color-text: #d9f6ff;
  --color-text-muted: #5f87a0;
  --color-accent: #00e5ff;
  --color-accent-dim: #00d1ff;
  --color-alert: #ff8a00;
  --color-critical: #ff2daa;
  --color-grid: #0c2438;
  --radius-none: 0px;
  --radius-chamfer: 0px;
  --radius-ring: 999px;
  --shadow-glow: 0 0 12px rgba(0, 229, 255, 0.45);
  --shadow-glow-strong: 0 0 8px rgba(0, 229, 255, 0.8), 0 0 24px rgba(0, 229, 255, 0.4);
  --shadow-glow-alert: 0 0 12px rgba(255, 138, 0, 0.5);
  --border-default: 1px solid #00e5ff66;
  --font-display: Orbitron, Rajdhani, sans-serif;
  --font-body: Rajdhani, Saira, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --text-base: 14px;
  --leading-heading: 1.2;
  --leading-body: 1.4;
  --tracking-heading: 0.12em;
  --tracking-body: 0.03em;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 400ms;
  --duration-slow: 900ms;
}
```

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

## Component recipes

- **Nav:** Thin top strip with uppercase Orbitron wordmark left, mono status readouts (time, coordinates, version) right; links are letter-spaced uppercase labels that gain a glow-underline when active
- **Hero:** Full-viewport dark stage: central animated ring gauge or wireframe globe, oversized uppercase Orbitron headline with decode animation, corner brackets framing the viewport, mono sub-readouts
- **Card:** Chamfered panel with 1px semi-cyan stroke and corner brackets, transparent-to-surface fill, uppercase mono label row, data body; scan-line sweep on hover
- **Button (primary):** Chamfered rectangle, transparent fill, 1px full-opacity cyan stroke with glow-strong, uppercase letter-spaced label; fill flashes cyan at 15% on hover
- **Button (secondary):** Same geometry, text-muted stroke without glow; stroke and label shift to cyan on hover
- **Form fields:** Underline-only input: 1px dim cyan bottom stroke, mono text, uppercase floating label; focus animates the stroke to full glow from left to right

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

Corner brackets — four short 1px glowing cyan L-shapes framing every panel — plus at least one animated segmented ring gauge that sweeps on load like a targeting system acquiring lock. Spend boldness here; keep everything else quiet.

## Do

- Commit to one dominant hologram color (cyan) with orange strictly as counterpoint
- Draw UI as strokes and brackets, not filled boxes — hologram surfaces are mostly empty
- Use mono type for every number and readout; it sells the instrumentation fantasy
- Stage entrance animations — a HUD that appears fully-formed feels like a poster, not an interface

## Don't

- Don't use pure white text or opaque light surfaces; they break the hologram illusion
- No soft rounded corners or drop shadows — glows only
- Don't animate everything at once; idle motion should be sparse and slow
- Avoid dense paragraphs — this style is for data and headlines, not long-form reading

## Accessibility notes

- Neon-on-dark contrast: full cyan #00e5ff passes on #020814 (~12:1), but the 30–50% opacity decorative strokes and #5f87a0 muted text sit near or below 4.5:1 — keep real content at full opacity and treat dim strokes as decoration only
- Photosensitivity risk: glow pulsing, scan-line sweeps, and decode/glitch text can trigger discomfort or seizures — keep flashes under 3 per second, keep pulses low-amplitude, and disable all of them under prefers-reduced-motion
- Letter-spaced uppercase Orbitron is hard to read at length; use it for short labels and keep body copy in Rajdhani sentence case

## Reference sites

- HUDS+GUIS (FUI gallery): https://www.hudsandguis.com
- Territory Studio (film UI): https://territorystudio.com
- Interface In Game: https://interfaceingame.com

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

Install this skill

unzip sci-fi-hud.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/sci-fi-hud.json

Settings → Capabilities → Skills → Upload skill → sci-fi-hud.zip