← Back
Best viewed on a desktop. Please switch to a larger device.

CYBER
PUNK
2077

A visual language born from 80s sci-fi and the underground hacking scene. Neon glows against deep darkness. Hard edges, broken grids, and terminal typography signal a world where technology has outpaced humanity.

80s
Origin
Neon
Signature
Dark
Mode Only
// NEON GLOW SYSTEM
box-shadow layered at 20px + 60px radius
ACTIVE
// SCANLINE OVERLAY
repeating-linear-gradient on ::after
RENDERING
// CORNER CLIPPING
clip-path: polygon() on containers
ENABLED
// GRID BACKGROUND
CSS grid lines at 3% opacity
VISIBLE
System

Neon Color Palette

All colours are pure, saturated, and used exclusively as glowing accents against near-black backgrounds.

PRIMARY
Neon Cyan
#00F5FF
Primary UI, links, active states
DANGER
Hot Magenta
#FF006E
Alerts, accents, CTA
WARNING
Electric Yellow
#FFE500
Warnings, highlights
ONLINE
Matrix Green
#00FF88
Success, online status
SYSTEM
Vaporwave Purple
#9B5DE5
Secondary accents
Type

Type System

Display CYBER CITY 56px · Exo 2 Black
−0.02em tracking
Hero / H1 DYSTOPIAN FUTURE 40px · Exo 2 Bold
+0.04em tracking
Section H2 SUBSYSTEM ACTIVE 28px · Rajdhani Bold
All-caps
Terminal / Mono >_ INITIALIZING PROTOCOL v2.0.77 16px · Share Tech Mono
Terminal aesthetic
Body Standard reading text in Rajdhani - modern, slightly condensed, maintaining readability at body sizes against dark backgrounds. 15px · Rajdhani Regular
1.7 line-height
Data / Label SYS_STATUS :: ONLINE · TEMP 42°C · MEM 78% 10px · Share Tech Mono
+0.12em tracking
Components

UI Components

// Buttons

// Input Fields

// Toggles & Progress

CPU LOAD 78%
MEMORY 91%
NETWORK 45%
DISK I/O 62%
Navigation

Navigation Patterns

Cards

Card Patterns

🔷
● ONLINE
Neural Core

Primary processing unit active. All subsystems nominal. Quantum encryption at 2048-bit.

4.2
GHz
99.8
Uptime
12k
Tasks
🔴
⚠ CRITICAL
Firewall Breach

Intrusion detected on port 8443. Countermeasures deployed. Isolating threat vector.

23
Threats
98%
Blocked
💚
● SECURE
Vault Access

Encrypted storage verified. Biometric scan complete. Access granted to clearance level 5.

4.8TB
Stored
AES
256-bit
Layout

Full HUD Layout

ALL SYSTEMS NOMINAL
📊DASHBOARD
🌐NETWORK
🔒SECURITY
💾STORAGE
ALERTS (3)
CONFIG

// SYSTEM OVERVIEW

4,821
Active Nodes
↑ 12.4%
23
Threats
↑ 3 new
99.8%
Uptime
Nominal
2.4ms
Latency
↓ Optimal

// NETWORK TRAFFIC · LAST 7 CYCLES

Principles

Core Principles

// 01 · NEON ON DARK

High Contrast Glow

Pure, saturated neons glow against near-black backgrounds. The contrast ratio is extreme by design - this is a world of harsh technological light in deep darkness.

// 02 · TERMINAL LANGUAGE

Monospace as Voice

Monospaced typefaces reference command-line interfaces and early computing. Labels read like system output. The UI speaks in machine dialect.

// 03 · CLIPPING & GEOMETRY

Hard Edge Aesthetic

Diagonal cuts, clipped corners, and angular forms reflect the fractured, fragmented world. Nothing is soft - every edge is deliberate and sharp.

// 04 · SCANLINES & NOISE

Texture of Technology

Scanline overlays, grid backgrounds, and subtle noise textures evoke CRT monitors and early digital aesthetics, grounding the design in its retro-futurist roots.