# HUD / Sci-Fi FUI > Thin cyan wireframes, corner brackets, tick-mark rulers and live mono readouts on deep blue-black — a film-prop cockpit display. - Nickname: Cockpit HUD - Also called: FUI, Fictional UI, Heads-up display, Sci-fi interface - Category: Futuristic & Tech - Moods: Techy, Serious, Calm - Industries: AI Products, SaaS, Gaming, Corporate & B2B, Media & Entertainment - Style page: https://uilingo.dev/styles/hud-scifi-fui/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "HUD / Sci-Fi FUI" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Thin cyan wireframes, corner brackets, tick-mark rulers and live mono readouts on deep blue-black — a film-prop cockpit display. Design keywords: thin cyan wireframe, corner brackets, tick-mark rulers, monospace readouts, crosshair reticle, hairline grid, amber caution / red alert, tiny uppercase codes. ## Visual language A fictional cockpit / holographic display: deep blue-black (#02070C) with a faint 40px cyan grid, a few concentric reticle rings and a slow scan line. Everything is drawn in 1px cyan hairlines (#3FE6FF); panels are defined by corner brackets rather than full boxes, tick-mark rulers separate sections, and numbers are set in IBM Plex Mono like live telemetry. Latin type is light and squared (Oxanium), uppercase with wide tracking; Thai is Bai Jamjuree without uppercase or tracking. Almost monochrome cyan, with amber (#FFB547) for caution and red (#FF4D5E) for alerts — precise, quiet, instrument-like. ## Signature details (must be visible) - Corner brackets on every panel: 8 linear-gradient segments (N × 1px and 1px × N) at the four corners in #3FE6FF, plus a faint full hairline inset 0 0 0 1px rgba(63,230,255,.13) - Bracket scale (arm length N): panels/cards 12px; stat readouts and mobile list groups 10px; highlight card 20px; CTA panel 26px; hero media 22px; art blocks and mobile featured card 18px; pull quote 16px; primary/secondary button and sidebar active item 7px; trust items 8px; tab-bar active icon and segmented control 6px; input end ticks 1px × 8px at both ends of the underline - Tick-mark rulers: minor ticks 1px wide × 5px tall every 10px at rgba(63,230,255,.45), major ticks 1px × 10px every 50px at rgba(63,230,255,.7), on a 1px baseline at .3–.35 alpha. Used under the nav, atop alternate sections and the footer, under the hero media and atop the tab bar (minor ticks only there) - Hero reticle: one radial-gradient ring set on the hero section only (not the page background), centred on the hero media column (≈ 75–80% across, 50% down the hero); 1px rings at 140/220/340px radii at 10% / 7% / 5% cyan alpha. The hero box clips them, so stats are their own section below the hero with no rings behind them. Every other page and every phone screen has no background rings at all - Background: the fixed page background is only the 40px cyan grid at 4.5% alpha (never above 6%), a soft blue glow at the top and a vignette. The grid may sit behind text; reticles and tick rulers may not - Monospace telemetry: KPI values, stats, prices and table cells in IBM Plex Mono with a 16–20px cyan text glow - Labels as tiny codes: Latin codes and labels = IBM Plex Mono 0.68–0.75rem uppercase with .14–.2em tracking (MOD-01, TRK-04 · LIVE FEED). Any label containing Thai switches to Bai Jamjuree at .82–.9rem, tracking 0, no uppercase. Mono stack: "IBM Plex Mono", "Bai Jamjuree", monospace - Status as diamonds: 8px squares rotated 45° with a glow, never round dots. Slow scan line: a 120px cyan-tinted band translating down the viewport over 9s (web only, reduced-motion safe) ## Design tokens — use these exact values Colours (dark mode): - background #02070C - surface rgba(8,30,42,0.55) - surface-2 rgba(8,30,42,0.32) - text #D6F6FF - text-muted #7FA8B8 - primary #3FE6FF (text on it #001218) - secondary #FFB547 (text on it #1A0F00) - accent #FF4D5E - border rgba(63,230,255,0.28) - success #3DFFB0 · warning #FFB547 · danger #FF4D5E - chart series #3FE6FF, #FFB547, #7C8CFF, #3DFFB0, #FF4D5E Radius: sm 0px, md 2px, lg 2px, xl 2px, pill 2px Border width: 1px Shadows: sm `none`, md `0 0 0 1px rgba(63,230,255,0.06)`, lg `0 0 30px rgba(63,230,255,0.12)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.9 density Motion: 200ms cubic-bezier(.4,0,.2,1) ## Typography (Latin + Thai) - Headings: Oxanium 400/500 with Thai fallback Bai Jamjuree 400/500 - Body: Exo 2 300/400/500 with Thai fallback Bai Jamjuree 300/400/500 - Mono: IBM Plex Mono - Google Fonts URL: 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 - CSS stacks: heading `"Oxanium", "Bai Jamjuree", system-ui, sans-serif`; body `"Exo 2", "Bai Jamjuree", system-ui, sans-serif`; mono `"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Bai Jamjuree — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.4rem, 5.2vw, 4.25rem), heading weight 400, heading tracking 0.06em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Allowed fills: there are no filled CTA blocks. The only fills are 12–24% cyan tints on buttons, the checked checkbox square, and a ≤12% top-to-bottom cyan wash on the highlight card. Glows (16–24px cyan text-shadow at 25–45%) on numbers and headings are part of the style; grey or offset drop shadows are not - Surfaces: panels are rgba(8,30,42,.55) straight over the grid, with no backdrop-filter. No denser fill is needed behind small Thai labels: the 4.5% grid is ~2% through a panel and keeps Thai text at 12px+ well above 4.5:1; just never raise the grid alpha above 6% - Primary button: no fill block — 12% cyan tint, 1px cyan hairline at 45%, 7px corner brackets, cyan uppercase Oxanium 500; hover = 24% tint + 26px glow - Secondary button: 7px cyan corner brackets plus the hairline inset 0 0 0 1px rgba(63,230,255,.13), no fill, light text; hover adds an 8% cyan tint. Accent/danger variants swap the bracket colour to amber/red with a 12% tint of that hue - Cards: rgba(8,30,42,.55) panels with 12px brackets; highlight = 20px brackets and a ≤12% cyan top-to-bottom wash - Feature list: numbered spec rows separated by hairlines, each with a mono 'MOD-0n' code top-right and a reticle icon: a 44px circle with a 1px rgba(63,230,255,.35) outer ring, an inner 30px ring at .18 alpha, and the icon at 18px in cyan - Inputs: rgba(8,30,42,.45) fields with a 1px cyan underline at 50% and 8px end ticks; focus adds a full hairline and glow; select arrow drawn in cyan - Checkbox/radio/switch: square, hairline cyan; checked = 25% cyan fill square with glow. Badges and chips: square, mono, uppercase, 1px currentColor outline; active chip glows. Trust items = bracketed mono compliance codes (ISO 27001, SOC 2, PDPA, 99.99% UPTIME) - Charts: 1.5px glowing cyan lines, amber dotted comparison, dotted cyan gridlines, hollow-outline heatmap cells filled by intensity, funnel steps as left-ruled cyan gradients - Tab bar: dark strip with a minor-tick ruler on top, mono labels, active icon framed by 6px brackets ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → stats → features → showcase → steps → trust → faq → cta. Feature section as list. Use a split hero: thin uppercase headline left, the product shot right framed by 22px brackets with a 'TRK-04 · LIVE FEED' tag on its top edge and a tick ruler below, and the hero reticle rings centred behind that media column only. Stats are their own section below the hero: bracketed readouts. Then a two-column numbered spec list of features, a showcase, steps with ringed mono numerals, trust items, FAQ with [+] toggles and a CTA panel with 26px corner brackets; its reticle rings (90/160px radius, .18/.10 alpha) are centred on an empty side area of the panel (e.g. the bottom-right corner, 40px in from the right edge) or on the CTA's decorative art, never behind the headline, paragraph or input — drop them when the panel is narrower than ~1000px. Dashboards are monitoring consoles: compact density, sidebar with bracketed active item, KPIs in glowing mono, live line chart + system status, activity + heatmap, funnel + forecast. Thai builds: the Thai display headline is Bai Jamjuree 400 with no uppercase and no tracking; keep the uppercase signature through Latin mono codes around it, e.g. an eyebrow code 'SYS-00 · ALL NODES NOMINAL' above a Thai eyebrow and the Latin 'TRK-04 · LIVE FEED' tag on the hero media. ## Content Use realistic product copy (fictional brand) suited to: Real-time monitoring, ops and security consoles. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Loud glitch effects, filled slabs and neon yellow/magenta (that is Cyberpunk) - Full four-sided bright cyan boxes around every panel — draw the corners; the full outline stays at ~13% alpha - Text-only green-phosphor screens or one mono font for everything (that is Terminal CLI) — headings stay Oxanium/Bai Jamjuree - Neutral grey dashboard chrome with cyan only on the charts (that is plain Realtime monitoring) — nav, inputs and tab bar must carry brackets and rulers too - Reticle rings on the fixed page background or centred on a headline, paragraph, list or form field - Letter-spaced or uppercased Thai labels and headlines ## Stack notes One self-contained HTML file with a