Design for AICyberpunk / neon: UI design prompt
Palette, type rules and a pasteable prompt for cyberpunk / neon. Also called cyberpunk UI, neon UI, synthwave, glitch design, night city. 1982 Blade Runner visuals; web waves 2017 (synthwave) and 2020 (Cyberpunk 2077 marketing).
Traits
- near-black backgrounds with saturated neon: magenta, cyan, yellow, acid green
- glow via layered text-shadows and box-shadows in the same neon hue
- clipped corners (clip-path polygons), diagonal cuts, warning stripes
- glitch effects: RGB split, skew jitter, scanning lines
- monospace or condensed uppercase type with wide tracking, numeric codes everywhere
- HUD elements: brackets, crosshairs, status readouts
- fast, sharp motion with occasional flicker
Palette
#050507 page, #f0f0f0 text, #ff2a6d magenta, #05d9e8 cyan, #f9f002 yellow, #d1f7ff pale cyan for glow tint
Type
Orbitron or Rajdhani for headings (700, uppercase, 0.1em tracking), Share Tech Mono or JetBrains Mono for data, Barlow Condensed for body; headings 40-80px
Do
- limit neon to two hues plus one warning yellow; three glows max on screen
- build glow with 3 stacked shadows (2px, 8px, 24px) in the same colour at falling alpha
- cut one corner of cards with clip-path: polygon() for the signature shape
Don't
- do not glow body text; glow is for headings, borders and buttons only
- do not run glitch animations continuously; trigger on hover or once on load
- do not use rounded corners; angles and cuts only
Known for it: Cyberpunk 2077, Razer, Ghost in the Shell tie-ins, Corsair iCUE
CSS seed
:root {
--bg: #050507;
--fg: #f0f0f0;
--accent: #ff2a6d;
--accent2: #05d9e8;
--warn: #f9f002;
--radius: 0;
--glow: 0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6);
--font: 'Orbitron',sans-serif
}
Prompt
Build the site in cyberpunk neon style. Background #050507 with a faint 48px grid (rgba(5,217,232,0.06) lines). Text #f0f0f0, neon magenta #ff2a6d, neon cyan #05d9e8, warning yellow #f9f002. Fonts: Orbitron 700 uppercase with 0.1em tracking for headings at 64/40/24px, Barlow Condensed 400 at 18px for body, Share Tech Mono 13px for codes, timestamps and labels. Cards: background #0b0b12, 1px border #05d9e8, one corner cut with clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Primary button #ff2a6d with the same glow recipe in magenta and a diagonal yellow-black warning stripe on its left edge. Headings get text-shadow 0 0 8px currentColor. Hero title runs a one-time 600ms glitch on load (skewX jitter and 2px RGB split via pseudo-elements) and repeats on hover. No border-radius anywhere. Motion fast: 120ms transitions.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in cyberpunk neon style. Background #050507 with a faint 48px grid (rgba(5,217,232,0.06) lines). Text #f0f0f0, neon magenta #ff2a6d, neon cyan #05d9e8, warning yellow #f9f002. Fonts: Orbitron 700 uppercase with 0.1em tracking for headings at 64/40/24px, Barlow Condensed 400 at 18px for body, Share Tech Mono 13px for codes, timestamps and labels. Cards: background #0b0b12, 1px border #05d9e8, one corner cut with clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Primary button #ff2a6d with the same glow recipe in magenta and a diagonal yellow-black warning stripe on its left edge. Headings get text-shadow 0 0 8px currentColor. Hero title runs a one-time 600ms glitch on load (skewX jitter and 2px RGB split via pseudo-elements) and repeats on hover. No border-radius anywhere. Motion fast: 120ms transitions.
## Tokens
:root { --bg:#050507; --fg:#f0f0f0; --accent:#ff2a6d; --accent2:#05d9e8; --warn:#f9f002; --radius:0; --glow:0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6); --font:'Orbitron',sans-serif }
Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.