Stylogeny combining Dark Tech Minimalism × Fantasy User Interface

Try

Style combination · Contrasts

Dark Tech Minimalism × Fantasy User Interface

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.

From the research on Fantasy User Interface (FUI) & Sci-Fi HUD

Mix them and make something Dark Tech Minimalism Fantasy User Interface

FutureDark Tech Minimalism × Fantasy User Interface
A sample layout drawn from the recipe: shapes from Fantasy User Interface, their arrangement from Dark Tech Minimalism, the finish from Dark Tech Minimalism. Not a real work, and not an image of either style.

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.

Dark Tech Minimalism Fantasy User Interface (FUI) & Sci-Fi HUD

Type from Dark Tech Minimalism
Colour from Fantasy User Interface
Form from Fantasy User Interface
Composition from Dark Tech Minimalism
Surface from Dark Tech Minimalism

02

The type

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

Display · Dark Tech Minimalism

Future

Inter, standing in for Inter

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 Dark Tech Minimalism. The ink reads on the ground at 4.5:1 or more.

Dark Tech Minimalism Fantasy User Interface (FUI) & Sci-Fi HUD

  • #04070b ground · 36%
  • #e4f6ff ink · 14%
  • #ff9d2e accent · 18%
  • #a855f7 accent · 14%
  • #ff3b30 accent · 10%
  • #5e6ad2 accent · 8%

As CSS

:root {
  --ground: #04070b;
  --ink: #e4f6ff;
  --accent-1: #ff9d2e;
  --accent-2: #a855f7;
  --accent-3: #ff3b30;
  --accent-4: #5e6ad2;
  --font-display: "Inter", sans-serif;
  --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.

05

More combinations

With Dark Tech Minimalism

All 13 combinations with Dark Tech Minimalism

With Fantasy User Interface

All 12 combinations with Fantasy User Interface

Every style combination