Cyberpunk
赛博朋克
Aliases:赛博朋克赛博风格霓虹故障风黑底荧光紫青数字废土风黑客终端风Cyberpunk UINeon Glitch
What is it
"High tech, low life" as a visual language: neon cyan and magenta edges cut through a near-black ground, monospace type and terminal glyphs run throughout, and scanlines plus glitch offsets suggest overloaded systems. Light is sliced out of darkness — the screen feels hijacked.
Design spec
Typography
Monospace type with neon glow titles
Color
Night navy #0B0F1A with cyan #00E5FF
Border
1px neon cyan borders, tiny radius
Shadow
Cyan neon glow shadows
Spacing
Terminal-dense layout
Motion
120ms neon ignition transitions; honour prefers-reduced-motion
States
Hover brightens the cyan neon; focus shows a visible 2px cyan outline; active flickers inverted once; disabled fades to dim grey without glow; error uses magenta neon
Style in action
See the full page, then try the interactive sceneFull-page preview
WAKE UP,
SAMURAI
The neon never sleeps.
High contrast · Neon borders · Holograms
Connect to the network →+15% neural speed
A breach in just 3 seconds
Anonymous trading
Interactive scene
Loading demo…
✓ When to use
- Games, sci-fi projects and hacker communities where style is worldbuilding
- Music, club and esports brands signaling subculture
- Already-dark products that can layer neon accents cheaply
✕ When not to use
- Accessibility-critical reading — neon flicker and contrast hurt
- Enterprise contexts where subculture erodes trust
- Existing light-theme systems — a hard pivot is costly
Variants
Neon City
霓虹都市
Cyan-magenta duo like a Ghost in the Shell nightscape
Terminal Hacker
终端黑客
Monochrome phosphor green or amber on CRT
Glitch Art
故障艺术
RGB channel offsets and datamosh strips take over
Implementation
box-shadow: 0 0 8px #0fftext-shadowclip-path@keyframes glitchrepeating-linear-gradientGround runs #0a0a12–#12101f. Neon needs both glow (box-shadow/text-shadow 0 0 8px in the same hue) and a solid border — glow alone smears. Replace radii with clip-path corner cuts (8–12px, one or opposite corners). Scanlines are a repeating-linear-gradient overlay kept under 0.06 opacity. Glitch is two-layer RGB offset text — short bursts, rare, respecting prefers-reduced-motion.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a terminal-style Cyberpunk input and panel section in the current project.
Inspect the existing theme system first; scope the neon-dark theme behind an isolated class so the default theme stays untouched.
Requirements:
- Near-black ground with neon cyan/magenta borders and glow; corner-cut panels via clip-path
- Monospace type and terminal glyphs ("> _") throughout
- Scanline overlay at opacity ≤ 0.06; glitch animations rare, brief, respecting prefers-reduced-motion
- Body text keeps compliant contrast; neon is accent-only, never body color
- No new dependencies
Run existing project checks when done and list the modified files.
Additional requirements:
- Dark mode support
- Respect prefers-reduced-motion
- No new dependencies
- Run existing checks and list modified filesHand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language reviving turn-of-the-millennium digital optimism: liquid chrome, iMac translucent candy plastics, bubble type, sparkle stars, and pink-purple-blue gradients on silver highlights. It mixes naive futurism with clumsy low-poly 3D — sweet, shiny, gloriously unrestrained.
StylesSimilarThe future as imagined by the past: cream-orange-brown warm palettes, chunky rounded casings, orbit lines and planet decals, pixel screens and CRT phosphor — optimistic tech that has aged. Space-age dashboards, vintage appliances and space-race posters fold into one warm nostalgic future.
StylesSimilarA loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice.
StylesSimilarA single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsAffectsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffects