Design for AI

Sci-fi HUD: UI design prompt

Palette, type rules and a pasteable prompt for sci-fi hud. Also called HUD UI, FUI (fictional UI), heads-up display, spaceship interface, Iron Man UI, holographic UI. 2008 (Iron Man), 2013 (Oblivion), ongoing for games, defence, drones, space startups.

Traits

  • thin cyan or amber linework on black, with brackets, reticles, arcs and tick marks
  • data everywhere: readouts, coordinates, percentages, scrolling logs
  • circular gauges and radial progress; segmented bars
  • layered panels with clipped corners and semi-transparent fills (5-10%)
  • monospace and condensed type, uppercase, tiny sizes with wide tracking
  • constant subtle motion: rotating rings, blinking indicators, scanning lines
  • glow is thin and precise, not neon-thick

Palette

#04070d black, #00e5ff cyan, #ffb300 amber (alert), #ff3d00 red (critical), #7fdbff pale cyan text, rgba(0,229,255,0.08) panel fill

Type

Rajdhani, Orbitron, Michroma or Exo 2 for titles (500-600 uppercase 0.15em), Share Tech Mono or JetBrains Mono for readouts (11-13px); body kept minimal

Do

  • draw the chrome as inline SVG (brackets, rings, tick scales) so it scales crisp and animates by stroke
  • keep all decorative motion under 0.3 opacity and slow (rings 30-60s per rotation) so it never competes with content
  • use amber and red only for real states (warning, error), never as decoration

Don't

  • do not put real reading content on a HUD; use it for dashboards, games, demos and landing heroes only
  • do not fill the screen with fake numbers; every readout should map to something
  • do not soften with rounded corners; angles and arcs only

Known for it: Iron Man (Jarvis), Oblivion, Destiny 2 menus, SpaceX Dragon display, Anduril

CSS seed
:root {
  --bg: #04070d;
   --fg: #7fdbff;
   --accent: #00e5ff;
   --warn: #ffb300;
   --alert: #ff3d00;
   --panel: rgba(0,229,255,0.08);
   --radius: 0;
   --font: 'Rajdhani',sans-serif;
   --font-mono: 'Share Tech Mono',monospace
}
Prompt

Build the site as a sci-fi HUD. Background #04070d with a faint radial vignette. Text #7fdbff, primary line colour #00e5ff, amber #ffb300 for warnings only, red #ff3d00 for critical only. Fonts: Rajdhani 600 uppercase with 0.15em tracking for titles at 40/24/16px, Share Tech Mono 12px for readouts and labels. Panels: background rgba(0,229,255,0.08), 1px border rgba(0,229,255,0.5), clip-path with two clipped corners (12px), and inline SVG corner brackets 20px long, 1.5px stroke. Hero: a large circular gauge (SVG, 3 concentric rings with tick marks every 6deg, outer ring rotating 60s linear, inner ring counter-rotating 45s) with a central readout counting up on load. Sidebar: a scrolling log of mono lines fading in every 2s. Segmented progress bars (12 segments, 2px gaps). Thin glow: drop-shadow(0 0 2px #00e5ff) on strokes only. A 1px scan line sweeps down every 8s at opacity 0.15. No radius. Under prefers-reduced-motion stop all loops.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site as a sci-fi HUD. Background #04070d with a faint radial vignette. Text #7fdbff, primary line colour #00e5ff, amber #ffb300 for warnings only, red #ff3d00 for critical only. Fonts: Rajdhani 600 uppercase with 0.15em tracking for titles at 40/24/16px, Share Tech Mono 12px for readouts and labels. Panels: background rgba(0,229,255,0.08), 1px border rgba(0,229,255,0.5), clip-path with two clipped corners (12px), and inline SVG corner brackets 20px long, 1.5px stroke. Hero: a large circular gauge (SVG, 3 concentric rings with tick marks every 6deg, outer ring rotating 60s linear, inner ring counter-rotating 45s) with a central readout counting up on load. Sidebar: a scrolling log of mono lines fading in every 2s. Segmented progress bars (12 segments, 2px gaps). Thin glow: drop-shadow(0 0 2px #00e5ff) on strokes only. A 1px scan line sweeps down every 8s at opacity 0.15. No radius. Under prefers-reduced-motion stop all loops.

## Tokens
:root { --bg:#04070d; --fg:#7fdbff; --accent:#00e5ff; --warn:#ffb300; --alert:#ff3d00; --panel:rgba(0,229,255,0.08); --radius:0; --font:'Rajdhani',sans-serif; --font-mono:'Share Tech Mono',monospace }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.