sci-fi-interface

Sci-Fi Interface Design (HUD)

"Heads-Up Display. Tactical, precise, and highly analytical."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Wireframe and Outlines: Interfaces are built almost entirely out of thin strokes rather than solid filled boxes.
2. Circular Arrays & Radars: Heavy use of concentric circles, radar sweeps, and curved progress bars.
3. Monochrome + Warning: Often entirely monochromatic (just blue, or just green) with a secondary color (red) used exclusively for alerts.

Visual DNA

• Colors: Midnight background. UI is pure Cyan, Emerald Green, or Amber (like classic monochrome monitors). Minimalist Slate works if made dark.
• Typography: Strict, technical monospace fonts (Share Tech Mono, VT323, Space Mono). All caps.
• Styling: Tiny UI chroming details (target brackets [ ], framing lines, precise pixel coordinates).

Web Implementation

• Heavy use of SVG for circular dials, and CSS borders for the layout.
• CSS Example:

body {
  background-color: #000b18; /* Deep space navy */
  color: #4df; /* Holographic cyan */
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
}

/* The HUD Frame */
.hud-container {
  border: