---
name: Cyberpunk UI
slug: cyberpunk-ui
category: aesthetic
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: "A dystopian sci-fi interface style: near-black surfaces, one or two
  toxic neon accents, monospace all-caps labels, clipped corners, and scanline
  or glitch noise laid over the top."
aliases:
  - name: cyberpunk style
  - name: cyberpunk aesthetic
  - name: neon dystopia UI
  - name: hacker UI
tags:
  - retro
relations:
  contrastWith:
    - solarpunk
    - fictional-user-interface
    - synthwave
    - terminal-aesthetic
  variantOf: []
  partOf: []
  seeAlso:
    - neon-glow
implementations: []
sources:
  - title: "stellae.design: Cyberpunk UI, dark themes, neon accents and terminal
      aesthetics"
    url: https://www.stellae.design/en/learn/cyberpunk-ui-design
  - title: "daisyUI trends: Cyberpunk UI design style"
    url: https://trends.daisyui.com/trend/cyberpunk/
demo: inline
exhibit: false
useWhen: dark dystopian surfaces with toxic neon accents
---

Cyberpunk UI is a worldview before it is a palette. The genre's summary, high tech and low
life, describes a future where the technology arrived and the social contract did not, so
its interfaces are corporate, surveilling, and slightly hostile to the person using them.
That reads on screen as near-black surfaces lit by one or two poisonous accents, usually
magenta with cyan or acid green, monospaced capitals with wide letterspacing, frames whose
corners are cut off at an angle, hazard chrome borrowed from industrial signage, warning
strips, serial numbers, and a layer of [scanlines](/scanlines) or
[glitch](/glitch-aesthetic) noise implying the display itself is compromised.

The distance from [synthwave](/synthwave) is the useful comparison, because both are 1980s
neon and they mean opposite things. Synthwave is sincere and nostalgic: a sunset, a coastal
road, a future somebody was looking forward to. Cyberpunk is noir. Its neon is a sign in the
rain above a street nobody should be on, its light source is advertising, and the mood it
wants is dread rather than warmth. Getting this wrong is the most common failure of the
style, and it shows up as a purple gradient with a friendly headline, which reads as neither.

It is also worth separating from [fictional user interface](/fictional-user-interface). FUI
is the craft of making screen graphics for fiction, and it will serve any story, including
optimistic ones. Cyberpunk is one genre with a fixed set of opinions. Most cyberpunk screens
are built with FUI techniques, and the tell that a screen is cyberpunk rather than merely
futuristic is the grime: damage, interference, corporate branding on something that should
not be branded, and a warning nobody can act on. Related registers on this site,
[terminal aesthetic](/terminal-aesthetic) and [neon glow](/neon-glow), are ingredients this
style reaches for rather than rivals.

Shipping it is mostly a contrast problem. Saturated neon on near black glows and vibrates,
thin cyan type on a dark field misses contrast minimums almost every time, and the cut
corners that make the style will happily clip a focus ring off a control if the shape is
applied without one. Treat the noise as decoration that can be switched off, since animated
interference and reduced motion are incompatible, and hold the style where it is looked at:
the landing page, the game menu, the event site. An interface a person has to work in for an
hour should not be shouting at them about the collapse of civilisation.