Cyberpunk Visual Style × Fantasy User Interface

Lay HUD overlays and glyph streams over a street scene to carry the screen layer inside the city.

From the research on Cyberpunk Visual Style

Mix them and make something Cyberpunk Visual Style Fantasy User Interface

A sample layout drawn from the recipe: shapes from Fantasy User Interface, their arrangement from Fantasy User Interface, the finish from Cyberpunk Visual Style. 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.

Cyberpunk Visual Style Fantasy User Interface (FUI) & Sci-Fi HUD

Type from Cyberpunk Visual Style: Eclectic mixing
All caps
Colour from Cyberpunk Visual Style: Dark ground
Fluorescent & neon
Form from Fantasy User Interface: Geometric primitives
Rules & bars
Composition from Fantasy User Interface: Radial & concentric
Layered information
Surface from Cyberpunk Visual Style: Glitch
Grain & noise

The type

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

Display · Cyberpunk Visual Style

Future

Monoton, standing in for Japanese and Chinese neon signage characters beside Latin lettering

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 Cyberpunk Visual Style, with a counter-accent from Fantasy User Interface. The ink reads on the ground at 4.5:1 or more.

Cyberpunk Visual Style Fantasy User Interface (FUI) & Sci-Fi HUD

#0b0c14 ground · 36%
#39ff14 ink · 14%
#05d9e8 accent · 18%
#ff9d2e accent · 14%
#ff2a6d accent · 10%
#ff3b30 accent · 8%

As CSS

:root {
  --ground: #0b0c14;
  --ink: #39ff14;
  --accent-1: #05d9e8;
  --accent-2: #ff9d2e;
  --accent-3: #ff2a6d;
  --accent-4: #ff3b30;
  --font-display: "Monoton", sans-serif;
  --font-text: "IBM Plex Mono", monospace;
}

Use it with care

Cyberpunk Visual Style: Cyberpunk's East Asian cityscapes are often criticised as techno-Orientalism, which casts Asia as futuristic yet cold and dehumanising; Blade Runner and Neuromancer are both critiqued on these grounds. Do not use Japanese or Chinese script as exotic decoration or set meaningless characters on every sign; use real, correct text, and do not make Asian people or places the faceless backdrop of a dystopia.

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.

The two styles

1982–present · Global / networked, North America, East Asia Cyberpunk Visual Style A dystopian urban look of high technology and low life: night-city scenes in which neon signs, rain-slicked surfaces and glowing screens crowd a dark ground. Bilingual Latin and East Asian signage, grimy overload and green-cyan terminal glyphs mark it. It grew from Blade Runner, Akira and Neuromancer.

A glowing blue planet fills the center of a black, cyan, and orange science-fiction display, surrounded by concentric orbital lines and targeting marks. Angular panels contain a spiral galaxy, planetary diagrams, a wireframe space station, an asteroid, terrain graphs, and small bar charts.

1999–present · North America, Western Europe, Global / networked Fantasy User Interface (FUI) & Sci-Fi HUD 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'.