Style combination · Contrasts
Fantasy User Interface × Glassmorphism
Glassmorphism's frosted, rounded panes are soft and meant to be used. FUI's clear glass carries hard hairlines and brackets. Take glassmorphism's blur behind an FUI panel when real users have to read it.
Mix them and make something Fantasy User Interface Glassmorphism
01
What each style brings
Each part of the design comes from the style with the stronger say in it, and each style gives at least two.
Fantasy User Interface (FUI) & Sci-Fi HUD Glassmorphism
- Colour from Glassmorphism
- Form from Fantasy User Interface
- Composition from Fantasy User Interface
- Surface from Glassmorphism
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Fantasy User Interface
Signal
Michroma, standing in for Squared, extended sans in the line of Microgramma (Aldo Novarese & Alessandro Butti, 1952) and Eurostile (Novarese, Nebiolo, 1962), science fiction's screen face since the Eurostile Bold Extended displays of 2001: A Space Odyssey (1968)
Text · Glassmorphism
An interface style of translucent, frosted panels floating over vivid, blurred backgrounds, so that depth and hierarchy come from layered transparency. Rooted in Windows Aero glass, the blur layers of iOS 7 and Fluent Design's Acrylic, it was named in 2020 around the launch of macOS Big Sur and returned in 2025 as Apple's refractive Liquid Glass.
Inter; Glassmorphism used SF Pro and Segoe UI Variable
03
The colours
The ground and leading colours come from Glassmorphism, with a counter-accent from Fantasy User Interface. The ink reads on the ground at 4.5:1 or more.
Fantasy User Interface (FUI) & Sci-Fi HUD Glassmorphism
-
#1b1a33ground · 36% -
#ffffffink · 14% -
#2cb1fcaccent · 18% -
#ff9d2eaccent · 14% -
#7f5af0accent · 10% -
#ff3b30accent · 8%
As CSS
:root {
--ground: #1b1a33;
--ink: #ffffff;
--accent-1: #2cb1fc;
--accent-2: #ff9d2e;
--accent-3: #7f5af0;
--accent-4: #ff3b30;
--font-display: "Michroma", sans-serif;
--font-text: "Inter", sans-serif;
}Use it with care
Fantasy User Interface (FUI) & Sci-Fi HUD: FUI is built to be watched for seconds, not used. When the look moves into a real product, game or dashboard, keep the single read, size micro-text and contrast to WCAG rather than to a cinema screen, and keep flashing scans and blinking alerts to three flashes or fewer per second. Never present invented data as real data. Its targeting reticles, facial recognition and surveillance feeds come from military and intelligence imagery, so think about what they glamourise before using them on civilian or campaign work.
04
The two styles
05
More combinations
With Fantasy User Interface
- Synthwave / Outrun Contrasts · Both glow in neon on black, but synthwave paints a nostalgic horizon with chrome and a sunset, while FUI shows a present-tense instrument. Choose synthwave for a mood and FUI when the picture has to look like it is working.
- Techno-Futurist Graphics Pairs well · Techno-futurism's invented corporate logos, pictograms and warning labels make convincing in-world branding for FUI screens. Use them on boot screens and on the agencies and corporations whose software the characters run.
- Generative & Dynamic Identities Pairs well · Drive FUI's maps, network graphs and counters from live data or code, so the screen's motion is real rather than a loop of invented numbers.
- Y2K Futurism Contrasts · Both float HUD-style overlays, wireframes and orbit lines, but Y2K sets them on glossy chrome, bubble forms and white voids for optimism, while FUI draws hairline instruments on black for a machine at work. Choose Y2K for a product's shine and FUI when the screen has to look busy with a task.
- Glitch Art & Datamosh Graphics Pairs well · For worn screens like Territory's Blade Runner 2049 playback, with screen burn, ghosting, colour degradation and glitches in place of clean glow, take the damage from glitch art's real file and signal faults rather than from a preset filter.
- International Typographic Style Pairs well · A strict grid and a neutral sans keep FUI's density legible; Oblivion hung every element on a dot grid. Start from Swiss order, then add rings and readouts.
- Dark Tech Minimalism Contrasts · Both put light type on black, but dark tech minimalism is a real interface that people use, sparse and quiet. FUI is staged for a camera and piles on density and glowing rings. Borrow one radial gauge for a product hero, not the whole cockpit.
- Cassette Futurism Contrasts · Its clean, glowing, layered HUDs came later; cassette futurism answers with worn hardware and one phosphor colour.
With Glassmorphism
- Dark Tech Minimalism Pairs well · On near-black grounds, a single glass pane with a 1px light border and a soft glow adds depth without clutter.
- Brutalist Web Design Contrasts · Brutalism's opaque, bordered boxes are the antidote when stacked translucency starts to hurt legibility.
- Risograph & Indie Print Culture Contrasts · Riso grain and misregistered spot inks offer a tactile print counterpoint to pristine digital translucency.
- Y2K Futurism Pairs well · Add Y2K iridescent sheen and chrome icons to frosted panes for a playful retro-future variant.
- Metro (Microsoft Design Language) Contrasts · Translucent depth against opaque flat colour blocks; use blur sparingly to soften an overly stark tile wall.
- Claymorphism & Soft 3D Pairs well · Set opaque clay icons on or behind frosted glass panes: the blur gives the toys a layered backdrop, and the solid objects anchor translucent cards that would otherwise drift.
- Frutiger Aero Pairs well · Glassmorphism is its flatter heir; reintroduce a touch of Aero gloss and nature photography to warm up frosted-glass UI.
- Material Design Pairs well · Replace opaque sheets with frosted panes at the highest elevations (dialogs, navigation) so the stack stays legible over imagery.