Vaporwave

---
name: vaporwave
description: Apply the Vaporwave visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Vaporwave, mentions retrowave, synthwave, aesthetic, or describes neon pink and cyan, perspective grid horizon, glowing text-shadows — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Vaporwave Design System

The internet's neon nostalgia: sunset gradients, hot pink and cyan neon glows, chrome text, perspective grids to the horizon, Greco-Roman statues, and deliberate early-web kitsch over a deep purple night.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Vaporwave.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (retrowave, synthwave, aesthetic, outrun), or describes its traits: neon pink and cyan; perspective grid horizon; glowing text-shadows; sunset gradients; 80s-computing kitsch.

## Design tokens

### Color palette

- Deep purple night sky: `#1f1147` (--color-bg)
- Panel background, lighter purple: `#2b1a5e` (--color-surface)
- Primary text, near-white: `#f8f7ff` (--color-text)
- Secondary text, lavender: `#b8a8e0` (--color-text-muted)
- Neon pink — the hero color: `#ff71ce` (--color-accent)
- Neon cyan companion: `#01cdfe` (--color-accent-cyan)
- Neon mint for success/highlights: `#05ffa1` (--color-accent-mint)
- Pale sun yellow for gradients: `#fffb96` (--color-accent-sun)
- Neon borders, usually pink or cyan: `#ff71ce` (--color-border)

### Typography

- Display / headings: Orbitron (fallback: Impact, sans-serif)
- Body: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 900, line-height 1.2, letter-spacing 0.08em, uppercase
- Body: line-height 1.7, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64, 96 — Theatrical spacing — hero elements are staged like album covers with lots of dark sky around glowing objects.
- Border radius: none 0px, sm 4px — Mostly sharp; the era's UI was rectangular.
- Border treatment: 2px solid #ff71ce — Neon borders often doubled with an outer glow box-shadow in the same hue.

### Shadows

- glow-pink: `0 0 12px rgba(255, 113, 206, 0.8), 0 0 40px rgba(255, 113, 206, 0.4)` — Pink neon elements and borders
- glow-cyan: `0 0 12px rgba(1, 205, 254, 0.8), 0 0 40px rgba(1, 205, 254, 0.4)` — Cyan neon elements
- chrome-text: `0 2px 0 #01cdfe, 0 4px 12px rgba(1, 205, 254, 0.6)` — Layered text-shadow for chrome/extruded headline effects

### Layout

- Max content width: 1100px
- Hero staged as a scene: grid floor, sun/statue centerpiece, glowing title
- Content panels float like windows from a 1995 OS
- Japanese katakana subtitles as decorative accents

### Effects

- Perspective grid floor (repeating-linear-gradient with transform: perspective + rotateX)
- Sunset gradient orb (pink to yellow) behind heroes
- VHS scanline overlay at 3–5% opacity
- Slight chromatic aberration on hover (red/blue text-shadow offsets)

### Motion

- Easing: linear; durations 100ms / 300ms / 8000ms
- Grid floor scrolls slowly toward the viewer on loop
- Neon flicker animation on one element per view maximum
- Glitch/jitter transitions between sections, used sparingly

## CSS variables (drop-in)

```css
:root {
  --color-bg: #1f1147;
  --color-surface: #2b1a5e;
  --color-text: #f8f7ff;
  --color-text-muted: #b8a8e0;
  --color-accent: #ff71ce;
  --color-accent-cyan: #01cdfe;
  --color-accent-mint: #05ffa1;
  --color-accent-sun: #fffb96;
  --color-border: #ff71ce;
  --radius-none: 0px;
  --radius-sm: 4px;
  --shadow-glow-pink: 0 0 12px rgba(255, 113, 206, 0.8), 0 0 40px rgba(255, 113, 206, 0.4);
  --shadow-glow-cyan: 0 0 12px rgba(1, 205, 254, 0.8), 0 0 40px rgba(1, 205, 254, 0.4);
  --shadow-chrome-text: 0 2px 0 #01cdfe, 0 4px 12px rgba(1, 205, 254, 0.6);
  --border-default: 2px solid #ff71ce;
  --font-display: Orbitron, Impact, sans-serif;
  --font-body: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.7;
  --tracking-heading: 0.08em;
  --tracking-body: 0.02em;
  --ease: linear;
  --duration-fast: 100ms;
  --duration-base: 300ms;
  --duration-slow: 8000ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Slim bar styled like a retro OS titlebar (surface purple, 2px pink bottom border), links in uppercase Space Mono
- **Hero:** Uppercase Orbitron title with chrome-text shadow over the grid-floor scene, katakana subtitle, neon-bordered CTA
- **Card:** Surface purple, 2px neon border with matching glow, sharp corners, 24px padding; titlebar strip optional
- **Button (primary):** Transparent with 2px pink border and pink glow; fills pink with dark text on hover
- **Button (secondary):** Same treatment in cyan
- **Form fields:** Dark inset field, 2px cyan border, mono text; focus intensifies the glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A perspective wireframe grid receding to a sunset-gradient horizon, with neon glow (text-shadow: 0 0 20px) on pink and cyan display type. Spend boldness here; keep everything else quiet.

## Do

- Commit fully to the kitsch — statues, palm silhouettes, katakana, window chrome
- Use pink and cyan as a duotone system with mint and yellow as garnish
- Give every glowing element a matching-color box/text shadow
- Set body copy in mono to keep the computing-nostalgia register

## Don't

- Don't render neon colors as flat fills for text on dark — they need glow to read as neon
- No modern soft UI elements (frosted glass, subtle grays) mixed in
- Don't animate everything; one looping scene element per view
- Never use it for information-dense or trust-critical products

## Accessibility notes

- CONTRAST WARNING: neon pink #ff71ce on bg #1f1147 is ≈4.2:1 — fails AA for normal text; use it for large display text only, with near-white for body copy
- Pale yellow #fffb96 and mint #05ffa1 pass on the dark bg; cyan #01cdfe is borderline (≈6.9:1) and fine for UI text
- Scanline/flicker/glitch effects can trigger photosensitivity — keep flicker below 3Hz and honor prefers-reduced-motion

## Reference sites

- Vaporwave aesthetic wiki: https://aesthetics.fandom.com/wiki/Vaporwave
- Poolsuite: https://poolsuite.net
- New Retro Wave: https://newretrowave.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip vaporwave.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/vaporwave.json

Settings → Capabilities → Skills → Upload skill → vaporwave.zip