HUD / Sci-Fi FUI
Also called: FUI, Fictional UI, Heads-up display, Sci-fi interface
Thin cyan wireframes, corner brackets, tick-mark rulers and live mono readouts on deep blue-black — a film-prop cockpit display.
Design keywords
Say these words to ask for this style.
HUD / FUI (fictional user interface) is the look of spaceship cockpits and holographic displays in sci-fi films: hairline cyan strokes on a deep blue-black, panels defined by corner brackets rather than full boxes, tick-mark rulers and crosshair reticles, tiny uppercase labels with codes, and numbers set in monospace like live telemetry. Colour is almost monochrome cyan with an amber caution and a red alert. It feels precise, calm and data-rich — instrument, not poster.
Best for
- Real-time monitoring, ops and security consoles
- AI model, robotics and drone telemetry dashboards
- Game menus and in-world screens
- Space, defence and deep-tech landing pages
Avoid for
- Friendly consumer apps for families or kids
- Long reading pages (thin type at small sizes tires eyes)
- Brands that need warmth or tactility
✓ Do
- Use 1px strokes and draw only the corners (10–14px brackets) of panels
- Set every number in a monospace font with tabular figures
- Keep 90% of the UI in one hue (cyan) and reserve amber/red for state
- Add tick rulers and coordinates as quiet decoration at 20–40% opacity
✕ Don't
- No solid filled colour blocks or chunky buttons (faint 12–24% cyan tints only)
- No rounded corners above 2px, no soft drop shadows
- Don’t use more than one accent hue for decoration
- Don’t let decorative tick marks sit behind body text
Not to be confused with
On mobile
Keep brackets on the hero card and the active tab only, use a single reticle in the app bar, and enlarge mono labels to 12px+ for touch screens; drop the scan line animation on phones.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.