Cyberpunk UI
Also called: Neon noir, Cyberpunk 2077 UI
Acid-yellow and hot-magenta neon on near-black, chamfered corners, glitch-split headlines and terminal labels — high-tech, low-life.
Design keywords
Say these words to ask for this style.
Cyberpunk UI borrows from neon-soaked sci-fi cities and their games: a near-black base, one screaming acid-yellow, a hot-magenta and an electric-cyan accent. Every panel and button has a 45° chamfered (cut) corner instead of a radius, headlines are wide, uppercase and RGB-split like a glitching screen, and small mono labels read like terminal output (// SYS.ONLINE, [01]). Scanlines and hazard stripes add grit; the result is loud, aggressive and unmistakably in-world.
Best for
- Game launchers, store pages and esports
- Hacker events, CTFs and game jams
- Music/club nights and streetwear drops
- Crypto and web3 communities
Avoid for
- Healthcare, banking and anything that must feel calm and safe
- Long-form reading
- Older or low-vision audiences (glitch and neon fatigue)
✓ Do
- Cut corners with clip-path at 12–18px on one or two diagonal corners
- Reserve #FCEE0A yellow for the main action and key numbers
- Prefix labels with mono “//”, “>” or [01] codes
- Keep glitch to headlines and hover states, max 2–3px offset
✕ Don't
- No rounded corners or pill buttons
- No soft pastel gradients, frosted blur or grey drop shadows (neon glows are fine)
- Don’t glitch body text or animate it constantly
- Don’t let magenta and yellow fight on the same element
Not to be confused with
On mobile
Keep chamfers on cards and the main button only (12px), drop scanlines to a static 4% overlay, and make the tab bar a black strip with a yellow active block; glitch only on the screen title.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.