Stylogeny combining Fantasy User Interface × Y2K Futurism

Try

Style combination · Contrasts

Fantasy User Interface × Y2K Futurism

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.

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

Mix them and make something Fantasy User Interface Y2K Futurism

OrbitFantasy User Interface × Y2K Futurism
A sample layout drawn from the recipe: shapes from Fantasy User Interface, their arrangement from Fantasy User Interface, the finish from Y2K Futurism. 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.

Fantasy User Interface (FUI) & Sci-Fi HUD Y2K Futurism

Type from Y2K Futurism
Colour from Fantasy User Interface
Form from Fantasy User Interface
Composition from Fantasy User Interface
Surface from Y2K Futurism

02

The type

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

Display · Y2K Futurism

Orbit

Michroma, standing in for Eurostile Extended

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

Fantasy User Interface (FUI) & Sci-Fi HUD Y2K Futurism

  • #04070b ground · 36%
  • #e4f6ff ink · 14%
  • #ff9d2e accent · 18%
  • #1f6fff accent · 14%
  • #ff3b30 accent · 10%
  • #b4f02e accent · 8%

As CSS

:root {
  --ground: #04070b;
  --ink: #e4f6ff;
  --accent-1: #ff9d2e;
  --accent-2: #1f6fff;
  --accent-3: #ff3b30;
  --accent-4: #b4f02e;
  --font-display: "Michroma", 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 Fantasy User Interface

All 12 combinations with Fantasy User Interface

With Y2K Futurism

All 15 combinations with Y2K Futurism

Every style combination