Expressive & trend · 2010s – present
Cyberpunk
Dark city, neon signs, corporate dystopia — angular cuts, acid-yellow and cyan on near-black, glitching type, and a world where the future arrived and it was not great.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(10% 0.04 265) - --fg
oklch(93% 0.02 265) - --muted
oklch(60% 0.06 265) - --surface
oklch(14% 0.04 265) - --surface-2
oklch(18% 0.05 265) - --border
oklch(36% 0.1 265) - --accent
oklch(89% 0.32 103) - --accent-fg
oklch(10% 0.04 265) - --focus
oklch(88% 0.18 192)
| Token | Value |
|---|---|
| --font-body | 'Exo 2', system-ui, sans-serif |
| --font-display | 'Orbitron', 'Exo 2', system-ui, sans-serif |
| --font-mono | 'Courier New', monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 0 0 12px oklch(89% 0.32 103 / 0.2), 0 4px 16px oklch(0% 0 0 / 0.6) |
| --shadow-lg | 0 0 30px oklch(89% 0.32 103 / 0.3), 0 8px 40px oklch(0% 0 0 / 0.7) |
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Exo+2:ital,wght@0,400;0,700;1,700&display=swap');
:root {
--bg: oklch(10% 0.04 265);
--fg: oklch(93% 0.02 265);
--muted: oklch(60% 0.06 265);
--surface: oklch(14% 0.04 265);
--surface-2: oklch(18% 0.05 265);
--border: oklch(36% 0.1 265);
--accent: oklch(89% 0.32 103);
--accent-fg: oklch(10% 0.04 265);
--focus: oklch(88% 0.18 192);
--font-body: 'Exo 2', system-ui, sans-serif;
--font-display: 'Orbitron', 'Exo 2', system-ui, sans-serif;
--font-mono: 'Courier New', monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 0 0 12px oklch(89% 0.32 103 / 0.2), 0 4px 16px oklch(0% 0 0 / 0.6);
--shadow-lg: 0 0 30px oklch(89% 0.32 103 / 0.3), 0 8px 40px oklch(0% 0 0 / 0.7);
}Where it came from
Origin: Cyberpunk fiction, Blade Runner, Ghost in the Shell, Neuromancer
William Gibson's Neuromancer and Ridley Scott's Blade Runner defined the cyberpunk visual vocabulary in the 1980s. The aesthetic moved into games, anime, and UI design, peaking with CD Projekt Red's Cyberpunk 2077 marketing in 2020. It combines noir darkness with hypersaturated neon, diagonal cuts, and the visual language of megacorp signage projected onto rain-slicked streets.
How to spot it
- Near-black base with neon yellow and cyan accents
- Diagonal cuts, angled borders, and clip-path shapes
- Glitching type, scanlines, and digital corruption
- Aggressive condensed or wide display type
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Extremely atmospheric and memorable | Very high visual noise — hard to keep readable |
| Strong contrast makes hierarchy clear | Strong genre associations narrow its audience |
| Natural fit for games, sci-fi, and tech brands | Glitch and neon effects tire quickly at scale |
In the wild
- Cyberpunk 2077 game UI and marketing
- Ghost in the Shell anime HUD overlays
- Deus Ex game interface design
Use it when
Games, events, or tech products where dark-city dystopian energy is the brand.