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.

“Cockpit HUD”Futuristic & TechEra: 1980s film → todayTechySeriousCalm

Open full screen ↗

hud-scifi-fui / landingEN

hud-scifi-fui / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md2pxRadius lg2pxRadius xl2pxDensity×0.9Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

thin cyan wireframecorner bracketstick-mark rulersmonospace readoutscrosshair reticlehairline gridamber caution / red alerttiny uppercase codes

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

Cyberpunk UI →Cyberpunk is loud, filled yellow/magenta blocks with glitch; HUD is calm, hairline cyan wireframes with brackets and rulers.Terminal CLI →Terminal CLI is a text-only command line in one mono font; HUD is graphical — reticles, gauges, brackets and charts drawn in hairlines.Real-Time Monitoring →Realtime monitoring is a dashboard pattern with neutral styling; HUD is a visual skin that can wrap any screen in sci-fi instrument chrome.

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.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinOxanium · 400/500

The quick brown fox

Heading · ThaiBai Jamjuree · 400/500

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinExo 2 · 300/400/500

Clear words make shared decisions.

Body · ThaiBai Jamjuree · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Bai Jamjuree is squarish and engineered with flat terminals, matching Oxanium’s squared sci-fi letterforms and Exo 2’s technical body text without Chakra Petch’s aggressive cuts.

Colour palette

Design tokens

Radius	`sm 0px · md 2px · lg 2px · xl 2px · pill 2px`
Border	`1px`
Shadow	`0 0 0 1px rgba(63,230,255,0.06)`
Display	`clamp(2.4rem, 5.2vw, 4.25rem)`
Motion	`200ms cubic-bezier(.4,0,.2,1)`
Density	`×0.9`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · HUD / Sci-Fi FUI (hud-scifi-fui) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500&family=Exo+2:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&family=Bai+Jamjuree:wght@300;400;500&display=swap
 */
:root {
  --radius: 2px;
  --background: #02070C;
  --foreground: #D6F6FF;
  --card: rgba(8,30,42,0.55);
  --card-foreground: #D6F6FF;
  --popover: rgba(8,30,42,0.55);
  --popover-foreground: #D6F6FF;
  --primary: #3FE6FF;
  --primary-foreground: #001218;
  --secondary: #FFB547;
  --secondary-foreground: #1A0F00;
  --muted: rgba(8,30,42,0.32);
  --muted-foreground: #7FA8B8;
  --accent: rgba(8,30,42,0.32);
  --accent-foreground: #D6F6FF;
  --destructive: #FF4D5E;
  --border: rgba(63,230,255,0.28);
  --input: rgba(63,230,255,0.28);
  --ring: #3FE6FF;
  --chart-1: #3FE6FF;
  --chart-2: #FFB547;
  --chart-3: #7C8CFF;
  --chart-4: #3DFFB0;
  --chart-5: #FF4D5E;
  --sidebar: rgba(8,30,42,0.55);
  --sidebar-foreground: #D6F6FF;
  --sidebar-primary: #3FE6FF;
  --sidebar-primary-foreground: #001218;
  --sidebar-accent: rgba(8,30,42,0.32);
  --sidebar-accent-foreground: #D6F6FF;
  --sidebar-border: rgba(63,230,255,0.28);
  --sidebar-ring: #3FE6FF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · HUD / Sci-Fi FUI (hud-scifi-fui) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500&family=Exo+2:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&family=Bai+Jamjuree:wght@300;400;500&display=swap
 */
@theme {
  --color-bg: #02070C;
  --color-surface: rgba(8,30,42,0.55);
  --color-surface-2: rgba(8,30,42,0.32);
  --color-text: #D6F6FF;
  --color-text-muted: #7FA8B8;
  --color-primary: #3FE6FF;
  --color-on-primary: #001218;
  --color-secondary: #FFB547;
  --color-on-secondary: #1A0F00;
  --color-accent: #FF4D5E;
  --color-border: rgba(63,230,255,0.28);
  --color-success: #3DFFB0;
  --color-warning: #FFB547;
  --color-danger: #FF4D5E;
  --color-chart-1: #3FE6FF;
  --color-chart-2: #FFB547;
  --color-chart-3: #7C8CFF;
  --color-chart-4: #3DFFB0;
  --color-chart-5: #FF4D5E;
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-pill: 2px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 0 1px rgba(63,230,255,0.06);
  --shadow-lg: 0 0 30px rgba(63,230,255,0.12);
  --font-heading: "Oxanium", "Bai Jamjuree", system-ui, sans-serif;
  --font-body: "Exo 2", "Bai Jamjuree", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · HUD / Sci-Fi FUI (hud-scifi-fui). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500&family=Exo+2:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&family=Bai+Jamjuree:wght@300;400;500&display=swap",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0078,
            0.0275,
            0.0471
          ],
          "hex": "#02070c"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.1176,
            0.1647
          ],
          "hex": "#081e2a",
          "alpha": 0.55
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.1176,
            0.1647
          ],
          "hex": "#081e2a",
          "alpha": 0.32
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.9647,
            1
          ],
          "hex": "#d6f6ff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.6588,
            0.7216
          ],
          "hex": "#7fa8b8"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.902,
            1
          ],
          "hex": "#3fe6ff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.0706,
            0.0941
          ],
          "hex": "#001218"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0588,
            0
          ],
          "hex": "#1a0f00"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.3686
          ],
          "hex": "#ff4d5e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.902,
            1
          ],
          "hex": "#3fe6ff",
          "alpha": 0.28
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            1,
            0.6902
          ],
          "hex": "#3dffb0"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.3686
          ],
          "hex": "#ff4d5e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.902,
            1
          ],
          "hex": "#3fe6ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.549,
            1
          ],
          "hex": "#7c8cff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            1,
            0.6902
          ],
          "hex": "#3dffb0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.3686
          ],
          "hex": "#ff4d5e"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2471,
              0.902,
              1
            ],
            "hex": "#3fe6ff",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2471,
              0.902,
              1
            ],
            "hex": "#3fe6ff",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 30,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Oxanium",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Exo 2",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Bai Jamjuree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.4,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.9
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!