A neon-soaked dystopian aesthetic rooted in the science fiction subgenre of the same name. Rain-slick megacity streets, holographic advertisements, glitch artifacts, and corporate decay -- a world of high technology and low life.
The visual language draws from 1980s sci-fi cinema -- Blade Runner, Akira, Ghost in the Shell -- combining dense urban layering with electric neon lighting, CRT scan lines, and corrupted digital interfaces.
Deep navy, charcoal, or pure black simulating nighttime megacity environments. Darkness is the dominant canvas -- light is always artificial, always neon.
Electric cyan, hot magenta, toxic green, and warning amber used sparingly for maximum impact. Color is light: every colored element should appear to emit its own glow.
Chromatic aberration, scan lines, pixel displacement, and data corruption artifacts. Glitch effects should feel intentional -- controlled chaos.
Monospaced and code-like fonts that evoke hacker culture and machine interfaces. Typography should feel utilitarian and machine-generated.
Overlapping UI panels, translucent overlays, and information-rich layouts. Layer information densely but maintain readability through luminance contrast.
Glass-like panels with backdrop blur and neon-tinted borders. Layered depth through translucency creates an in-world terminal feeling.
Visible structural scaffolding suggesting exposed digital infrastructure. Faint grid overlays reveal the underlying data architecture.
Scan lines, screen flicker, phosphor glow, and vignette darkening at edges. These atmospheric details create immersion and narrative depth.
Fictional mega-corp logos, barcode elements, and Japanese/CJK character accents suggesting a globalized megacity culture.
Animated rain streaks, floating dust motes, and fog overlays. Atmospheric particles bring the dystopian environment to life.
Embrace the tension between high technology and urban decay. The interface itself is a narrative element -- a diegetic in-world terminal.
Use darkness as the dominant canvas. Light is always artificial, always neon. Every colored element should appear to emit its own glow.
Glitch effects should feel intentional, not broken. Reserve warm colors (amber, red) for warnings. Cool colors (cyan, blue) for information.
Typography should feel utilitarian and machine-generated, never decorative or calligraphic. Layer information densely but maintain readability.
Neon Megacity Palette -- dark backgrounds pierced by vivid neon accents. Cool colors for interactive and informational tones. Warm colors for warnings and danger.
:root { /* Backgrounds */ --cyber-bg-void: #0a0a0f; --cyber-bg-dark: #12121a; --cyber-bg-panel: #1a1a2e; --cyber-bg-elevated: #2a2a3e; /* Neon accents */ --cyber-cyan: #00f0ff; --cyber-blue: #0080ff; --cyber-magenta: #ff0080; --cyber-green: #00ff41; --cyber-amber: #ffb800; --cyber-red: #ff1744; --cyber-purple: #b000ff; /* Glows */ --cyber-glow-cyan: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 40px rgba(0, 240, 255, 0.15); --cyber-glow-magenta: 0 0 10px rgba(255, 0, 128, 0.5), 0 0 40px rgba(255, 0, 128, 0.15); }
Monospaced and mechanical. Angular and utilitarian. Uppercase-heavy for display. No rounded, friendly shapes -- letterforms feel stamped or engineered.
| Heading Font | Body Font | Character |
|---|---|---|
| Orbitron (700) | Share Tech Mono (400) | Classic cyberpunk terminal, high-tech |
| Exo 2 (700) | IBM Plex Mono (400) | Clean futuristic, readable |
| Rajdhani (600) | Fira Code (400) | Condensed tech, developer-oriented |
| Audiowide (400) | Space Mono (400) | Retro-futuristic, editorial |
| Electrolize (400) | Share Tech Mono (400) | Dashboard, data-heavy interfaces |
HUD-like panel layouts suggesting a multi-monitor command center. More content per viewport than typical web design -- Cyberpunk is maximalist within its dark frame.
Dark, full-bleed backgrounds -- the entire viewport is a dark canvas; there is no white space, only darkness
Asymmetric panel layouts -- HUD-like panels of varying sizes, suggesting a multi-monitor command center
Visible grid lines -- faint grid overlays that suggest the underlying data architecture
Dense information layouts -- more content per viewport; maximalist within the dark frame
Layered depth through translucency -- panels with backdrop-filter: blur() float over background imagery
Neon border accents -- thin glowing borders delineate panels instead of shadows or spacing
Dark translucent top bar with neon-accented active states and monospaced labels
Full-viewport dark background with massive glowing headline, atmospheric particles
Grid of semi-transparent cards with neon borders displaying metrics or features
Monospaced text block styled as a command-line interface
Dark background with single neon-glowing button and stark headline
Dense, data-rich footer with grid lines and muted secondary text
Maintain dark backgrounds at all breakpoints -- never introduce light backgrounds on mobile
Stack panels vertically on mobile; reduce grid complexity to single-column
Preserve neon glow effects but reduce blur radius on lower-powered devices
Production-ready CSS patterns for building cyberpunk interfaces. Copy-paste components with neon glows, clip-paths, and atmospheric effects.
.cyber-card { background: rgba(26, 26, 46, 0.8); border: 1px solid rgba(0, 240, 255, 0.15); border-radius: 2px; padding: 28px; backdrop-filter: blur(10px); transition: border-color 0.3s, box-shadow 0.3s; } .cyber-card:hover { border-color: rgba(0, 240, 255, 0.4); box-shadow: var(--cyber-glow-cyan); } /* Corner accent marks */ .cyber-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; } .cyber-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.cyber-button { background: transparent; color: var(--cyber-cyan); border: 1px solid var(--cyber-cyan); padding: 12px 32px; font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; clip-path: polygon( 0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px) ); } .cyber-button:hover { background: var(--cyber-cyan); color: var(--cyber-bg-void); box-shadow: var(--cyber-glow-cyan); }
@keyframes cyber-glitch { 0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); } 20% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); } 40% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); } } .cyber-glitch::before { color: var(--cyber-magenta); animation: cyber-glitch 3s infinite linear alternate; } .cyber-glitch::after { color: var(--cyber-cyan); animation: cyber-glitch 2s infinite linear alternate-reverse; }
.cyber-scanlines::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px ); pointer-events: none; }
Critical rules for maintaining the cyberpunk aesthetic without breaking immersion or sacrificing usability.
The visual language of a world that has not yet arrived. Build interfaces that feel like they belong in the neon glow of a dying megacity.
Reinitialize