Synthwave / Outrun

---
name: synthwave-outrun
description: Apply the Synthwave / Outrun visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Synthwave / Outrun, mentions outrun, retrowave, neon 80s, or describes perspective grid horizon, neon glow text and borders, gradient sunset sun with slats — 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
---

# Synthwave / Outrun Design System

Cinematic 1980s night-drive fantasy: a neon sun setting over a perspective grid floor, chrome italic titles, and magenta-to-cyan glow on deep indigo black. Where vaporwave is pastel and ironic, synthwave is saturated, kinetic, and plays itself completely straight.

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 Synthwave / Outrun.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (outrun, retrowave, neon 80s, newretrowave, 80s sunset grid), or describes its traits: perspective grid horizon; neon glow text and borders; gradient sunset sun with slats; chrome italic display type; magenta and cyan on near-black; scanline overlays.

## Design tokens

### Color palette

- Deep indigo-black night sky: `#150a30` (--color-bg)
- Raised panel over the night gradient: `#1f1145` (--color-surface)
- Near-white primary text with violet cast: `#f2e9ff` (--color-text)
- Secondary lavender text: `#b8a6d9` (--color-text-muted)
- Neon magenta — primary glow and CTAs: `#ff2e88` (--color-accent)
- Deeper magenta gradient stop: `#d30cb8` (--color-accent-magenta-deep)
- Neon cyan-teal counterpart glow: `#6df1d8` (--color-accent-cyan)
- Sunset orange for the sun gradient: `#f9ac53` (--color-sunset-orange)
- Electric indigo for grid lines and depth: `#153cb4` (--color-indigo)
- Dusk purple for horizon gradients: `#5c2c6d` (--color-purple)

### Typography

- Display / headings: Audiowide (fallback: Impact, Arial Black, sans-serif) (ideal: Monument Extended, premium — use Audiowide as the free substitute)
- Body: Rajdhani (fallback: Segoe UI, Arial, sans-serif)
- Mono / data: 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 400, line-height 1.2, letter-spacing 0.06em, uppercase
- Body: line-height 1.55, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Cinematic — huge vertical space around the hero horizon; content sections are widescreen frames, not stacked cards.
- Border radius: none 0px, sm 4px — Edges stay sharp; neon tubes and chrome slabs don't have rounded corners. 4px max to soften buttons slightly.
- Border treatment: 1px solid #ff2e88 — Borders read as neon tubes: 1px accent color plus an outer glow. Cyan borders for secondary elements.

### Shadows

- neon-magenta: `0 0 20px rgba(255,46,136,0.7), 0 0 40px rgba(211,12,184,0.35)` — Primary buttons, hero title, active borders
- neon-cyan: `0 0 20px rgba(109,241,216,0.6), 0 0 40px rgba(109,241,216,0.25)` — Secondary elements and focus states
- panel: `0 12px 40px rgba(0,0,0,0.6)` — Surface panels floating over the gradient sky

### Layout

- Max content width: 1280px
- Hero is a full-viewport scene: gradient sky, banded sun, perspective grid floor in indigo
- Content sections framed like film stills with letterboxed vertical padding
- Horizontal neon rule lines separate sections
- Symmetrical, centered composition — the vanishing point anchors everything

### Effects

- Perspective grid floor (CSS transform or SVG) receding to the horizon
- Banded gradient sun: orange to magenta with horizontal slat cutouts
- Scanline overlay at 3–5% opacity
- Chrome gradient text fill on the hero title (silver → white → steel blue)
- Slow background gradient shift from purple dusk to indigo night

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 150ms / 300ms / 600ms
- Grid floor scrolls toward the viewer in a seamless loop (pausable, disabled under prefers-reduced-motion)
- Neon elements flicker once on entry, then hold steady
- Hover intensifies glow radius rather than changing color
- Title text can shimmer with a slow chrome sweep

## CSS variables (drop-in)

```css
:root {
  --color-bg: #150a30;
  --color-surface: #1f1145;
  --color-text: #f2e9ff;
  --color-text-muted: #b8a6d9;
  --color-accent: #ff2e88;
  --color-accent-magenta-deep: #d30cb8;
  --color-accent-cyan: #6df1d8;
  --color-sunset-orange: #f9ac53;
  --color-indigo: #153cb4;
  --color-purple: #5c2c6d;
  --radius-none: 0px;
  --radius-sm: 4px;
  --shadow-neon-magenta: 0 0 20px rgba(255,46,136,0.7), 0 0 40px rgba(211,12,184,0.35);
  --shadow-neon-cyan: 0 0 20px rgba(109,241,216,0.6), 0 0 40px rgba(109,241,216,0.25);
  --shadow-panel: 0 12px 40px rgba(0,0,0,0.6);
  --border-default: 1px solid #ff2e88;
  --font-display: Audiowide, Impact, "Arial Black", sans-serif;
  --font-body: Rajdhani, "Segoe UI", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.55;
  --tracking-heading: 0.06em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}
```

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

## Component recipes

- **Nav:** Transparent over the sky gradient, uppercase Rajdhani links with letterspacing; active link underlined by a glowing magenta rule
- **Hero:** Full-viewport scene — banded sun, grid floor, heavy italic chrome Audiowide title with neon-magenta glow, subtitle in cyan mono
- **Card:** Surface panel, 1px neon border (magenta or cyan), panel shadow, sharp corners, uppercase card titles
- **Button (primary):** Transparent fill, 1px magenta neon border, magenta text and neon-magenta glow; fill floods magenta with dark text on hover
- **Button (secondary):** Same treatment in cyan: 1px cyan border, cyan text, neon-cyan glow on hover
- **Form fields:** Dark surface fill, 1px indigo border; focus swaps to cyan border with neon-cyan glow, label in uppercase mono

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 grid floor receding to a horizon under a banded gradient sun, with the title set in heavy italic chrome-gradient capitals haloed by a magenta neon glow (0 0 20px). Spend boldness here; keep everything else quiet.

## Do

- Build the hero as one cinematic scene — sun, grid, chrome title — and let the rest of the page stay darker and calmer
- Use glow as the hover language everywhere: intensity up, never color swap
- Keep magenta for primary and cyan for secondary, consistently
- Play it straight — synthwave is sincere cinema, not a joke

## Don't

- Don't drift pastel or add Roman busts, Japanese text, or glitch collage — that's vaporwave, a different skill
- No constant flicker loops; one entry flicker then steady
- Don't set body copy in the chrome or neon treatments
- Avoid rounded, friendly shapes — this style is sharp and cinematic

## Accessibility notes

- Entry flicker and scrolling grid animation can trigger photosensitivity — keep flicker to a single 2-frame event, never loop it, and disable both under prefers-reduced-motion
- Neon magenta on deep indigo passes 4.5:1 (about 5.3:1), but glow bloom can reduce perceived legibility — keep glowing text at 18px+
- Scanline overlays must stay below 5% opacity so they never pattern-interfere with body text

## Reference sites

- Hotline Miami: https://en.wikipedia.org/wiki/Hotline_Miami
- Kung Fury: https://en.wikipedia.org/wiki/Kung_Fury
- NewRetroWave: https://newretrowave.com
- Synthwave overview: https://en.wikipedia.org/wiki/Synthwave

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

Install this skill

unzip synthwave-outrun.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → synthwave-outrun.zip