Style combination · Pairs well

Fantasy User Interface × Flash-Era Web Design

The film HUD shares its hairlines and tracked caps on black; borrow its radial readouts for a Flash-style console, but keep the stage navigable.

From the research on Flash-Era Web Design (Flash Portfolio Sites)

Mix them and make something Fantasy User Interface Flash-Era Web Design

A sample layout drawn from the recipe: shapes from Fantasy User Interface, their arrangement from Fantasy User Interface, the finish from Flash-Era Web Design. Not a real work, and not an image of either style.

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 Flash-Era Web Design (Flash Portfolio Sites)

Type from Flash-Era Web Design: Bitmap & pixel
All caps
Colour from Fantasy User Interface: Dark ground
Fluorescent & neon
Form from Fantasy User Interface: Geometric primitives
Rules & bars
Composition from Fantasy User Interface: Radial & concentric
Layered information
Surface from Flash-Era Web Design: Chrome & 3D render

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Flash-Era Web Design

Signal

Silkscreen, standing in for Silkscreen (Jason Kottke), a free pixel face for 'extremely small graphical display type', meant for nav bars, menus and captions at 8 pt multiples with anti-aliasing off

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

The colours

The ground and leading colours come from Fantasy User Interface, with a counter-accent from Flash-Era Web Design. The ink reads on the ground at 4.5:1 or more.

Fantasy User Interface (FUI) & Sci-Fi HUD Flash-Era Web Design (Flash Portfolio Sites)

#04070b ground · 36%
#e4f6ff ink · 14%
#ff9d2e accent · 18%
#ff6a00 accent · 14%
#ff3b30 accent · 10%
#9bd31c accent · 8%

As CSS

:root {
  --ground: #04070b;
  --ink: #e4f6ff;
  --accent-1: #ff9d2e;
  --accent-2: #ff6a00;
  --accent-3: #ff3b30;
  --accent-4: #9bd31c;
  --font-display: "Silkscreen", 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.