# Neon

> Glow effects, dark backgrounds, electric colors, and nightlife energy with cyberpunk edge.

- Skill: `jdsadminllc/neon` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/neon`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/neon/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/neon

---

# Neon
## Mission
Electrify the screen — dark canvases lit by glowing type and borders, channeling nightlife, cyberpunk, and synthwave energy.
## Brand
### 🎨 Colors
- `#FF00FF` — Primary (magenta neon)
- `#00FFFF` — Secondary (cyan neon)
- `#39FF14` — Accent (electric green)
- `#0A0A0A` — Background (near-black)
- `#FFFFFF` — Text (white, for readability)
- `#FF6EC7` — Muted text (soft pink glow)
### 🔤 Typography
- Heading: **Monoton** (Google Fonts) — neon-sign display, or **Audiowide** for cyberpunk
- Body: **Rajdhani** (Google Fonts) — narrow, tech-forward sans-serif
- Scale: xs 0.75rem | sm 0.875rem | base 1rem | lg 1.125rem | xl 1.5rem | 2xl 2.5rem | 3xl 4rem
### 📐 Spacing
- Grid: center-aligned single column, max-width 900px
- Section padding: 6rem vertical, 2rem horizontal
- Card gaps: 3rem — generous spacing lets glow effects spread without collision
### 🧩 Components
- Buttons: transparent background, 2px glowing border (box-shadow + text-shadow), 4px radius, hover intensifies glow and fills background at 15% opacity
- Cards: dark semi-transparent background (rgba 0,0,0,0.4), 1px glowing border, subtle inner glow, backdrop-filter blur
- Nav: fixed top, transparent background with text-only links that glow on hover, thin bottom border with gradient glow
- Hero: dark background with radial glow spotlight, massive glowing headline, animated scanlines overlay optional
- Footer: minimal, small muted text with subtle top border glow, social links as glowing icons
### ♿ Accessibility
- Body text must be white (#FFFFFF) on dark background — contrast 15:1 minimum
- Glow effects must not be the sole indicator of interactive state — pair with underline or fill
- Focus states: 2px solid white ring with glow — unambiguous and bright
- Respect `prefers-reduced-motion` — disable pulsing, flickering, and scanline animations
- Minimum body font size 16px (1rem)
### ✍️ Writing Tone
- Energetic, futuristic, punchy. Rhythm-driven. Use line breaks like a DJ drops a beat.
- Labels in lowercase or ALL CAPS. CTAs are verbs. Ellipses are allowed... sparingly.
## Do / Don't
### ✅ Do
- Use CSS text-shadow for glowing typography — stack multiple shadows (0 0 10px, 0 0 40px, 0 0 80px)
- Apply box-shadow glow rings to borders and interactive elements
- Keep backgrounds near-black (#0A0A0A to #111111) — true black kills the glow effect
- Pair neon colors against dark — magenta on black, cyan on black, green on black
- Add subtle grain or scanline overlays for cyberpunk texture
### ❌ Don't
- Use white or light backgrounds — neon doesn't glow on light surfaces
- Apply heavy borders — 1-2px max, the glow carries the weight
- Mix more than 3 neon colors on one page
- Use serif typefaces — everything must feel digital and forward
- Overuse glow such that text becomes illegible — body text stays white, glow is for accents
## Quality Gates
- [ ] Background is near-black (#0A0A0A to #111111) across all surfaces
- [ ] At least 3 elements use stacked text-shadow for glow effect
- [ ] All interactive elements have glow-based hover states
- [ ] Body text is white (#FFFFFF) for maximum readability
- [ ] No light backgrounds anywhere — dark mode only
- [ ] `prefers-reduced-motion` disables all pulsing/flickering animations