CyberPunk DarkNet Interface

COLOR_SYSTEM

Primary Color Palette

Extracted directly from the cyberpunk.jpg source image. Every hex value is a real color from the original artwork — from the void-black depths to the neon cyan glow and purple nebula accents.

VOID BLACK

#00000F · --cp-void

ABYSS

#000018 · --cp-abyss

DEEP NAVY

#000030 · --cp-deep-navy

DARK ELECTRIC BLUE

#0A1A8A · --cp-blue-dark

ROYAL BLUE

#0F2E9A · --cp-blue-mid

VIVID ELECTRIC BLUE

#0044FF · --cp-blue-vivid

CYAN GLOW

#00C8E8 · --cp-cyan-glow

NEON CYAN ★ PRIMARY

#00E4FF · --cp-cyan-primary

BRIGHT CYAN

#31DCF9 · --cp-cyan-bright

ICE CYAN

#AAFAFF · --cp-cyan-ice

NEON PURPLE

#9B3AE8 · --cp-purple

HOT MAGENTA

#CC00FF · --cp-magenta

NEBULA PINK

#E060C0 · --cp-pink-nebula

/* ── READY-MADE CSS VARIABLES — Copy & Paste ── */
/* Backgrounds */
--cp-void: #00000F; /* Absolute void black — html/body bg */
--cp-abyss: #000018; /* Section deep bg */
--cp-deep-navy: #000030; /* Dominant card/panel bg */
--cp-blue-dark: #0A1A8A; /* Feature bg / hero gradient */
--cp-blue-mid: #0F2E9A; /* Hover states, mid accent */
--cp-blue-vivid: #0044FF; /* Vivid electric glow */
/* Neon Accents */
--cp-cyan-primary: #00E4FF; /* PRIMARY ACCENT — buttons, links, borders */
--cp-cyan-bright: #31DCF9; /* Hover neon glow */
--cp-cyan-pure: #00FFFF; /* Max glow intensity */
--cp-cyan-ice: #AAFAFF; /* Highlight / white-text tint */
--cp-purple: #9B3AE8; /* Secondary accent — headers */
--cp-magenta: #CC00FF; /* Tertiary / special CTA */
--cp-pink-nebula: #E060C0; /* Galaxy gradient tail */
/* Text */
--cp-text-primary: #C8EEFF; /* Body text */
--cp-text-muted: #5A9AB8; /* Secondary / descriptions */
--cp-text-faint: #1E4A6E; /* Labels / tertiary */
/* Glow box-shadows */
--cp-glow-sm: 0 0 8px rgba(0,228,255,0.6), 0 0 20px rgba(0,228,255,0.2);
--cp-glow-md: 0 0 15px rgba(0,228,255,0.8), 0 0 40px rgba(0,228,255,0.35);
--cp-glow-lg: 0 0 25px rgba(0,228,255,1), 0 0 60px rgba(0,228,255,0.5);

                /* Fonts: 'Orbitron' (display), 'Share Tech Mono' (terminal), 'Rajdhani' (body) */
            

USAGE_GUIDE

Usage Recommendations

How to assign each color to its correct role: backgrounds, neon elements, buttons, and text. Follow this hierarchy to achieve an authentic CyberPunk aesthetic.

Backgrounds

Use ultra-dark navy tones for all surfaces. Layer them from darkest (body) to slightly lighter (cards/panels) to create depth without noise.

body → #00000F (void)
sections → #000018 / #000030
cards → rgba(0,0,48,0.7)
hero bg → radial-gradient blue overlay
nav/modals → rgba(0,0,10,0.9) + blur

Neon Elements

Reserve neon cyan (#00E4FF) for primary interactive elements. Use box-shadow glows sparingly to preserve impact. Purple for secondary highlights.

links → #00E4FF + glow on hover
borders active → 1px solid #00E4FF
grid lines → rgba(0,228,255,0.08)
icons active → #00E4FF + glow
progress bars → gradient blue→cyan

Buttons & CTAs

Primary CTAs: solid cyan fill, dark text, clip-path angled corners. Secondary: outline style. Tertiary: ghost. Use purple for alternate actions.

.btn-primary → bg:#00E4FF, color:void
.btn-outline → border:#00E4FF, transparent bg
.btn-purple → bg:#9B3AE8, white text
.btn-ghost → border:rgba(cyan,0.2)
clip-path → angled parallelogram

Text & Typography

Three text levels for hierarchy. Monospace fonts for terminal/code elements. Display fonts for headings only. Never mix more than 3 font families.

headings → Orbitron, #E0F4FF
body → Rajdhani 400, #C8EEFF
terminal/code → Share Tech Mono, cyan
muted → #5A9AB8 (descriptions)
faint → #1E4A6E (labels only)

TYPOGRAPHY_SYSTEM

CyberPunk Font Stack

Recommended by geeks, enthusiasts, and developers of the CyberPunk, DarkNet, and DeepWeb aesthetic. Combination of angular display fonts, technical monospacers, and clean body text.

ORBITRON

ORBITRON — Google Fonts

The quintessential cyberpunk display font. Geometric, angular, futuristic. Used in gaming UIs, sci-fi interfaces, and hacker aesthetics worldwide. Perfect for headings, logos, and large callouts.

DISPLAY ONLY

SHARE_TECH
MONO.exe

SHARE TECH MONO — Google Fonts

A clean, readable monospace with a tech-terminal vibe. Ideal for code blocks, system messages, terminal output, hacker-text animations, and data readouts.

TERMINAL / CODE

Rajdhani
Body Text

RAJDHANI — Google Fonts

Condensed, angular, high-tech sans-serif. Excellent readability for body copy in dark interfaces. Multiple weights for hierarchy. Popular in gaming and tech UI design.

BODY TEXT

Exo 2
Interface

EXO 2 — Google Fonts

Futuristic sans-serif with a slight humanist touch. Excellent for UI labels, nav items, and section headings. Very legible at small sizes, distinctive at display size.

UI / LABELS

VT323
>_RETRO

VT323 — Google Fonts

Pixel-perfect retro terminal font. Perfect for glitch effects, old-school hacker terminal aesthetics, CRT screen simulations, and DarkNet/DeepWeb vibes. Load via Google Fonts.

RETRO TERMINAL

Courier Prime
typewriter style

COURIER PRIME — Google Fonts

Refined monospace for long-form content. Better than Courier New with improved hinting. Use for code documentation, README-style blocks, or DeepWeb manifesto-style text content.

DOCUMENTATION

AUDIOWIDE
DISPLAY ALT

AUDIOWIDE — Google Fonts

Rounded sci-fi display font with a more approachable, gaming-oriented feel. Great alternative to Orbitron for softer CyberPunk aesthetics, gaming interfaces, and branding.

DISPLAY ALT

/* ── RECOMMENDED FONT STACK FOR CYBERPUNK SITES ── */

--font-display: 'Orbitron', 'Exo 2', 'Courier New', monospace;

--font-mono: 'Share Tech Mono', 'VT323', 'Courier New', monospace;

--font-body: 'Rajdhani', 'Exo 2', system-ui, sans-serif;

/* Load all in one link tag: */

&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;600;700

&family=Exo+2:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">

CYBER PUNK DARKNET · INTERFACE