Dark & Elegant • Urban Nightscape • Neon Accents
City Lights embodies the sleek sophistication of a modern metropolis at night. Deep, near-black backgrounds evoke the urban darkness, while vibrant neon accents mimic the electric glow of city lights, creating a high-contrast, elegant aesthetic perfect for premium applications and modern interfaces.
#00d9ff
Electric cyan & blue
#b968ff
Neon purple
#ffd700
Neon gold & amber
#ff6ec7
Neon pink
#0a0e1a
Deep midnight
#0f1419
Dark steel
#141922
Charcoal blue
#f0f6fc
#c9d1d9
#8b949e
Body text uses IBM Plex Sans for optimal readability in the dark theme. The high contrast between the bright text and deep backgrounds ensures comfortable reading for extended periods.
Muted text is perfect for supplementary information and metadata.
Default card with subtle background and border. Hover for lift effect.
Opaque background for emphasis and hierarchy.
Enhanced shadow for prominent content sections.
Electric cyan border with subtle glow effect.
Neon purple border with purple glow effect.
Neon gold border with warm glow effect.
Electric cyan accent with subtle glow - perfect for general information.
Neon purple accent with purple glow - great for success messages.
Neon gold accent with warm glow - ideal for warnings and cautions.
Neon pink accent with pink glow - for critical alerts and errors.
Use inline code for variable names, function() calls, and CSS properties within text.
// Neon color system
const colors = {
neon: '#00d9ff', // Electric cyan
cyber: '#b968ff', // Neon purple
glow: '#ffd700', // Neon gold
alert: '#ff6ec7' // Neon pink
};
// Apply glow effect
element.style.boxShadow = '0 0 20px rgba(0, 217, 255, 0.5)';| Variable | Color | Usage |
|---|---|---|
--accent-neon-1 |
#00d9ff | Primary actions, links |
--accent-cyber-1 |
#b968ff | Secondary accents |
--accent-glow-1 |
#ffd700 | Highlights, warnings |
--accent-alert-1 |
#ff6ec7 | Alerts, errors |
--text-primary |
#f0f6fc | Main text content |
City Lights uses subtle glow effects to create the neon aesthetic:
/* Glow variables */
--glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
--glow-purple: 0 0 20px rgba(185, 104, 255, 0.3);
--glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
--glow-pink: 0 0 20px rgba(255, 110, 199, 0.3);
/* Application */
h2 { text-shadow: var(--glow-cyan); }
.btn-primary { box-shadow: var(--glow-cyan); }