# Synthwave

> Synthwave

- Skill: `jdsadminllc/synthwave` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/synthwave`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/synthwave/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/synthwave

---

# Synthwave
## Mission
Transport users to a neon-drenched 1980s fever dream where chrome meets cathode rays and the sun never fully sets.
## Brand
### 🎨 Colors
- `#FF007F` — Primary (neon pink)
- `#7B2FFF` — Secondary (electric purple)
- `#00F0FF` — Accent (cyan glow)
- `#1A0A2E` — Background (deep purple-black)
- `#FF6B00` — Highlight (neon orange)
- `#FFFFFF` — Text (white)
### 🔤 Typography
- Heading font: Orbitron (Google Fonts, geometric sci-fi)
- Body font: Rajdhani (Google Fonts, sharp tech sans-serif)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2.5rem / 3xl 3.5rem
### 📐 Spacing
- Grid: 12-column, centered max-width 1200px
- Section padding: 6rem vertical, 2rem horizontal
- Card gaps: 2rem
### 🧩 Components
- Buttons: Chrome gradient border, dark translucent fill, neon text glow on hover. Sharp corners with 2px chamfer.
- Cards: Dark glass panels with 1px neon border, subtle inner glow, backdrop-blur effect.
- Nav: Centered horizontal links with neon underline on hover, persistent perspective grid background.
- Hero: Full-viewport retrowave sunset gradient (pink→purple→cyan), wireframe perspective grid floor, large chrome title text.
- Footer: Dark bar with neon separator line, social icons in glowing outline style.
### ♿ Accessibility
- Neon text must have dark backing for sufficient contrast (aim 4.5:1)
- All neon colors paired with dark backgrounds; pure neon on black passes 3:1 for large text
- Focus rings: bright cyan glow with outline offset
- `prefers-reduced-motion`: disable grid animation, fade instead of glow pulse
### ✍️ Writing Tone
Bold, dramatic, cinematic. Short punchy headlines. Embrace the retro-futuristic vocabulary: "drive," "night," "chrome," "dream." All caps for UI labels.
## Do / Don't
### ✅ Do
1. Use the perspective grid as a unifying background element
2. Layer neon glows with CSS `text-shadow` and `box-shadow` for depth
3. Pair dark backgrounds with electric accents — never light backgrounds
4. Use chrome/metallic gradients on key CTAs and borders
5. Include subtle scanline or CRT effects for texture
### ❌ Don't
1. Use soft pastels or muted earth tones — it's neon or nothing
2. Add rounded corners beyond a 2px chamfer
3. Mix serif fonts with the synthwave aesthetic
4. Over-animate — one moving element (grid, pulse, or scanlines) at a time
5. Use full-white backgrounds anywhere on the page
## Quality Gates
- [ ] Perspective grid or sunset gradient present on the hero
- [ ] At least 3 neon colors used across the page
- [ ] All interactive elements have a glow hover/focus state
- [ ] No rounded corners (2px chamfer max)
- [ ] Dark background throughout — no light sections
- [ ] Chrome gradient appears on at least one key element