jdsadminllc 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
- Use the perspective grid as a unifying background element
- Layer neon glows with CSS
text-shadowandbox-shadowfor depth - Pair dark backgrounds with electric accents — never light backgrounds
- Use chrome/metallic gradients on key CTAs and borders
- Include subtle scanline or CRT effects for texture
❌ Don't
- Use soft pastels or muted earth tones — it's neon or nothing
- Add rounded corners beyond a 2px chamfer
- Mix serif fonts with the synthwave aesthetic
- Over-animate — one moving element (grid, pulse, or scanlines) at a time
- 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