# 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.

- Period: 1982–present
- Where: Global / networked, North America, East Asia
- Origin: Film, comics and fiction of the early 1980s: Blade Runner (1982), Akira (manga 1982), Neuromancer (1984)
- Branch: Digital native
- Also known as: Cyberpunk aesthetic, Neon noir, High tech, low life look
- Page: https://stylogeny.com/styles/cyberpunk-visual-style/

## Use it with care

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.

## How it works

- Set the scene at night and let neon signs and screens be the only light on a dark ground.
- Pack the frame with layered signage, wires, vents and adverts until the city feels overloaded.
- Mix Latin and East Asian scripts and invented corporate logos in the signage, but treat the script as real language, not exotic decoration.
- Keep the technology worn, dirty and wet; show grime and rain, never a clean showroom.
- Render interfaces as green or cyan monospace glyphs, scan lines and falling code over the street.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Dynamic asymmetry](https://stylogeny.com/design-choices/dynamic-asymmetry/) (characteristic)
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (characteristic)
- [Diagonal axis](https://stylogeny.com/design-choices/diagonal-axis/) (occasional)

### Space & hierarchy
- [Horror vacui](https://stylogeny.com/design-choices/horror-vacui/) (defining)
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (defining)
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (characteristic)
- [Extreme scale contrast](https://stylogeny.com/design-choices/extreme-scale-contrast/) (characteristic)
- [Visual tension](https://stylogeny.com/design-choices/visual-tension/) (occasional)

### Typography
- [Eclectic mixing](https://stylogeny.com/design-choices/eclectic-mixing/) (defining)
- [All caps](https://stylogeny.com/design-choices/all-caps/) (characteristic)
- [Monospace](https://stylogeny.com/design-choices/monospace/) (occasional)
- [Condensed display](https://stylogeny.com/design-choices/condensed-display/) (occasional)
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (occasional)

### Colour
- [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (defining)
- [Fluorescent & neon](https://stylogeny.com/design-choices/fluorescent-and-neon/) (defining)
- [Complementary clash](https://stylogeny.com/design-choices/complementary-clash/) (characteristic)
- [Gradients](https://stylogeny.com/design-choices/gradients/) (occasional)

### Form & shape
- [Angular & zigzag](https://stylogeny.com/design-choices/angular-and-zigzag/) (characteristic)
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (occasional)

### Surface & texture
- [Glitch](https://stylogeny.com/design-choices/glitch/) (characteristic)
- [Grain & noise](https://stylogeny.com/design-choices/grain-and-noise/) (characteristic)
- [Gloss & highlights](https://stylogeny.com/design-choices/gloss-and-highlights/) (occasional)

### Ornament
- [Abundant decoration](https://stylogeny.com/design-choices/abundant-decoration/) (characteristic)

### Imagery
- [3D render](https://stylogeny.com/design-choices/3d-render/) (characteristic)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (occasional)
- [Treated photography](https://stylogeny.com/design-choices/treated-photography/) (occasional)
- [Found & vernacular imagery](https://stylogeny.com/design-choices/found-and-vernacular-imagery/) (occasional)

### Medium & production
- [Architecture & signage](https://stylogeny.com/design-choices/architecture-and-signage/) (defining)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (characteristic)
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (occasional)

### Tone & intent
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (defining)
- [Rebellious & subversive](https://stylogeny.com/design-choices/rebellious-and-subversive/) (characteristic)

Avoids: Pastel, Light ground, Generous white space, Ornament-free, Floral & vegetal, Calm & contemplative, Warm & approachable, Nostalgic & retro, Script

Palette: #0b0c14, #ff2a6d, #05d9e8, #39ff14, #7a1fa2, #d1a516

Typefaces: Japanese and Chinese neon signage characters beside Latin lettering, Monospace terminal type, Condensed corporate sans logotypes

Known for: Blade Runner (1982, dir. Ridley Scott); Akira (manga 1982, Katsuhiro Otomo; film 1988); Neuromancer (1984, William Gibson); Moebius and Dan O'Bannon, The Long Tomorrow (1976); Frank Miller, Ronin (DC Comics, 1983-1984); Ghost in the Shell (1995 film); Cyberpunk 2077 (CD Projekt Red, 10 December 2020)

## Where it comes from, and what it’s close to

- Influenced by: [Hong Kong Neon & Beiwei Shop-Sign Lettering](https://stylogeny.com/styles/hong-kong-neon.md) (1950–present)
- Influenced by: [Story Manga (Postwar Japanese Comics)](https://stylogeny.com/styles/story-manga.md) (1947–present)
- Influenced by: [Fantasy User Interface (FUI) & Sci-Fi HUD](https://stylogeny.com/styles/fantasy-ui.md) (1999–present)
- Alike in its design choices: [Media-Player & Desktop Skins (Winamp-Era Skinning)](https://stylogeny.com/styles/media-player-skins.md) (1997–2008), 52% alike
- Alike in its design choices: [Acid Graphics / New Ugly](https://stylogeny.com/styles/acid-graphics.md) (2016–present), 42% alike
- Alike in its design choices: [Rave & Acid House Graphics](https://stylogeny.com/styles/rave-flyer.md) (1988–2000), 41% alike
- Alike in its design choices: [Matatu & Nganya Art](https://stylogeny.com/styles/matatu-art.md) (1990–present), 40% alike
- Alike in its design choices: [Neo-Andean Architecture (Cholets)](https://stylogeny.com/styles/neo-andean-cholet.md) (2005–present), 38% alike
- Alike in its design choices: [Gabber and Hardcore Graphics (Rotterdam and Thunderdome)](https://stylogeny.com/styles/gabber-hardcore-graphics.md) (1992–present), 37% alike

## Sources

- https://en.wikipedia.org/wiki/Cyberpunk
- https://en.wikipedia.org/wiki/Blade_Runner
- https://en.wikipedia.org/wiki/The_Long_Tomorrow_(comics)
- https://en.wikipedia.org/wiki/Techno-Orientalism

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Cyberpunk Visual Style”, https://stylogeny.com/styles/cyberpunk-visual-style/