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
The same page, ready to useConnect to the network establishes an offline district connection and can disconnect. Toggle gear to update the district, connection and loadout HUD. Districts, Gear, Black market and SYS status reveal local content without real networking or trades.
Full-page preview · interact directly
What to look for
- 01Use NEON://CITY’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the NEON://CITY task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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 signal-connectrepeating-linear-gradientNEON://CITY uses midnight blue-black, solid cyan rules and high-contrast monospace type. An original three-district signal map replaces the chart; the decorative map is not an interactive control. Reduce ambient glow and card fills. The terminal exposes real connection text, gear checkboxes and a single stepped signal animation, without perpetual flashing.
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.
Build a complete NEON://CITY page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. NEON://CITY uses midnight blue-black, solid cyan rules and high-contrast monospace type. An original three-district signal map replaces the chart; the decorative map is not an interactive control. Reduce ambient glow and card fills. The terminal exposes real connection text, gear checkboxes and a single stepped signal animation, without perpetual flashing. Reuse current preview.tokens: background #0B0F1A; foreground #EAF6FF; accent #00E5FF / #050810; card rgba(0,229,255,.06); border rgba(0,229,255,.35); radius 4px; font 'SF Mono', Menlo, monospace; card shadow 0 0 14px rgba(0,229,255,.25). Retain the existing workspace dark and variant modes. style-signatures.css owns this brand’s hero, continuation and microinteractions; covers and full pages share one renderer. Full-page operations: Connect to the network establishes an offline district connection and can disconnect. Toggle gear to update the district, connection and loadout HUD. Districts, Gear, Black market and SYS status reveal local content without real networking or trades. Share one renderer between static covers, the detail experience and /style-scenes/cyberpunk/ (English /en/style-scenes/cyberpunk/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand 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