← ClaudeAtlas

neonlisted

Use when building or styling a UI in the Neon aesthetic — A dark-mode-first system built on glowing borders, fluorescent accents, and high-contrast cyberpunk energy. For Claude Code, Cursor, and Codex.
x77jh8gvrn-alt/staqd-skills · ★ 0 · Web & Frontend · score 75
Install: claude install-skill x77jh8gvrn-alt/staqd-skills
# Neon Neon is a dark-mode-first system that turns interfaces into glowing circuitry. Surfaces sit in near-black, and energy comes from luminous cyan and magenta edges, gradient text, and soft colored bloom. It feels electric, nocturnal, and high-stakes. Reach for Neon when you want an interface to feel like a control panel from a brighter, faster future — gaming and esports, crypto and web3, music and nightlife, and anything that thrives after dark. ## Design principles - **Dark always wins.** The canvas is near-black; light is something you emit, never a background. - **Glow over shadow.** Depth comes from colored box-shadow bloom, not gray drop shadows. - **Two charged accents.** Cyan and magenta carry the system; purple bridges them in gradients. - **Restrained luminance.** Glow is a spice — apply it to focal elements so everything doesn't scream. - **Technical typography.** Mono numerals and tracked-out uppercase labels evoke a HUD. - **Texture sparingly.** Faint grids and scanlines add atmosphere without noise. ## Color The base is a deep blue-black (`#0A0A12`) with surfaces lifting to `#13131F` and elevated panels to `#1A1A2E`. Text is a cool near-white (`#E8E8FF`) with muted lavender-gray (`#8B8BA7`) for secondary copy. - **Primary accent:** electric cyan (`#00E5FF`) — main actions, focus, key data. - **Secondary accent:** hot magenta (`#FF2E97`) — highlights, featured states, destructive actions. - **Bridge:** purple (`#A855F7`) — connects the two in gradients