Mood & theme · 1980s–present
FUI — Fictional UI
Holographic screens, spinning data globes, and cyan wireframes: the interface design language of science fiction, optimised for drama over usability.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(8% 0.04 250) - --fg
oklch(90% 0.04 210) - --muted
oklch(62% 0.06 218) - --surface
oklch(12% 0.05 248) - --surface-2
oklch(16% 0.055 245) - --border
oklch(40% 0.1 228) - --accent
oklch(78% 0.2 208) - --accent-fg
oklch(6% 0.04 250) - --focus
oklch(78% 0.2 208)
| Token | Value |
|---|---|
| --font-body | 'Helvetica Neue', Helvetica, system-ui, sans-serif |
| --font-display | 'Helvetica Neue', Helvetica, system-ui, sans-serif |
| --font-mono | 'Courier New', ui-monospace, monospace |
| --radius | 4px |
| --radius-sm | 2px |
| --shadow | 0 0 20px oklch(78% 0.2 208 / 0.1) |
| --shadow-lg | 0 16px 48px oklch(4% 0.04 250 / 0.7) |
:root {
--bg: oklch(8% 0.04 250);
--fg: oklch(90% 0.04 210);
--muted: oklch(62% 0.06 218);
--surface: oklch(12% 0.05 248);
--surface-2: oklch(16% 0.055 245);
--border: oklch(40% 0.1 228);
--accent: oklch(78% 0.2 208);
--accent-fg: oklch(6% 0.04 250);
--focus: oklch(78% 0.2 208);
--font-body: 'Helvetica Neue', Helvetica, system-ui, sans-serif;
--font-display: 'Helvetica Neue', Helvetica, system-ui, sans-serif;
--font-mono: 'Courier New', ui-monospace, monospace;
--radius: 4px;
--radius-sm: 2px;
--shadow: 0 0 20px oklch(78% 0.2 208 / 0.1);
--shadow-lg: 0 16px 48px oklch(4% 0.04 250 / 0.7);
}Where it came from
Origin: Science fiction film production design; Iron Man, Minority Report, Westworld
Fictional User Interface — FUI or "sci-fi UI" — is the discipline of designing interfaces for film and television that communicate technological power to an audience without training them to use anything. Mark Coleran's work on films including The Bourne Identity and Lara Croft: Tomb Raider defined a visual vocabulary: dark backgrounds, glowing cyan data, animated orbital diagrams. Iron Man and later Westworld pushed it mainstream. Real products increasingly borrow the aesthetic for its emotional associations.
How to spot it
- Deep dark navy or black background
- Cyan, electric blue, or holographic multicolour light elements
- Animated data streams, orbital paths, and scanning lines
- Thin, precise lines with occasional glow effects
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Immediately communicates advanced technology and power | Optimised for drama — slow and disorienting in actual use |
| Dark background excellent for data-dense monitoring contexts | Glow effects are expensive to render and can cause eye strain |
| Glow and animation effects provide strong visual hierarchy | Real usability concerns disappear behind the spectacle |
In the wild
- Iron Man JARVIS interface sequences
- Minority Report gesture-interface visualisations
- Westworld Mesa Hub control room
Use it when
The context is demonstration, installation, or entertainment — or the brand genuinely serves the technology sector and wants the association.