Style combination · Pairs well
Fantasy User Interface × Glitch Art
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.
Mix them and make something Fantasy User Interface Glitch Art
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 Glitch Art & Datamosh Graphics
- Type from Glitch Art
- Colour from Fantasy User Interface
- Form from Fantasy User Interface
- Composition from Fantasy User Interface
- Surface from Glitch Art
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Glitch Art
Circuit
Workbench, standing in for Raw file bytes opened as text (databending in a text editor): garbled characters and code in system monospace
Text · Fantasy User Interface
Fantasy user interfaces are the screen graphics of films and series: computer screens, holograms and helmet HUDs made to be watched for a few seconds, not used. From Minority Report and The Bourne Identity (2002) to Marvel's Iron Man HUDs, Mark Coleran, Cantina Creative and Territory Studio set glowing cyan and amber hairlines on black or clear glass. The screens carry concentric rings, targeting brackets, wireframe models, maps and dense micro-text in tracked capitals and monospace, packed to the edges around an open centre. Everything moves, and each screen has one big 'read'.
IBM Plex Mono; Fantasy User Interface used 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) and Blender (Nik Thoenen, 2003), an angular geometric sans that team member Navarro Parker named as the UI font of Oblivion
03
The colours
The ground and leading colours come from Fantasy User Interface, with a counter-accent from Glitch Art. The ink reads on the ground at 4.5:1 or more.
Fantasy User Interface (FUI) & Sci-Fi HUD Glitch Art & Datamosh Graphics
-
#04070bground · 36% -
#e4f6ffink · 14% -
#ff9d2eaccent · 18% -
#ff00ffaccent · 14% -
#ff3b30accent · 10% -
#00e5ffaccent · 8%
As CSS
:root {
--ground: #04070b;
--ink: #e4f6ff;
--accent-1: #ff9d2e;
--accent-2: #ff00ff;
--accent-3: #ff3b30;
--accent-4: #00e5ff;
--font-display: "Workbench", monospace;
--font-text: "IBM Plex Mono", monospace;
}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.
Glitch Art & Datamosh Graphics: Glitch video and animated glitch effects often flicker: keep flashes to three or fewer in any one second, and be stricter with saturated red, to meet WCAG 2.3.1 and protect people with photosensitive epilepsy. Datamoshing and databending usually start from someone else's footage or photographs, so clear the rights before corrupting them for commercial work. When a datamosh or pixel-sort look follows a particular artist's process, credit it; the 2009 music videos overtook the artists who developed the technique.
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.
- Glassmorphism Contrasts · 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.
- 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.
- 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 Glitch Art
- Grunge Typography Contrasts · Grunge scanned in photocopier grain and dirt and layered type on the Mac; glitch art breaks the file and lets the codec make the damage. Pick analogue distress or digital failure deliberately rather than stacking both.
- Vaporwave Pairs well · Vaporwave uses glitch as one surface among busts, grids and pastel 3D; give a vaporwave video a real datamosh between its found clips so the smear comes from the file rather than a plug-in.
- Brutalist Web Design Pairs well · Both put the machinery on show; set corrupted images on a raw-HTML page of default fonts so the code and the broken pictures make one argument about the medium.
- Internet Ugly & Meme Vernacular Contrasts · Deep-fried memes also pile up JPEG damage, but as a joke for a crowd to copy; glitch art makes the damage its subject. Borrow the re-saving, not the punchline.
- Acid Graphics / New Ugly Contrasts · Acid graphics renders polished chrome and adds glitch as a finish; glitch art breaks the file and keeps what comes out. Decide whether a brief wants spectacle or exposure.
- Frutiger Aero Contrasts · Aero's glossy, seamless interface is the frictionless technology glitch art questions; corrupt one Aero-style screen to show what the gloss hides.
- International Typographic Style Contrasts · A clean Swiss grid is the perfect signal to break: tear one band of a strict layout sideways and let the rest stay legible as the reference.
- Witch House Graphics (Symbol Names and Haunted Web Imagery) Pairs well · Use channel displacement or compression damage to estrange a recognisable scene, but retain the symbol-name as the identity; the image need not become an abstract demonstration of file failure.