Design for AI

Vaporwave: UI design prompt

Palette, type rules and a pasteable prompt for vaporwave. Also called vaporwave aesthetic, a e s t h e t i c web, synthwave-adjacent, Windows 95 retro. 2011-2016 origin (music and art); web usage ongoing for portfolios, music and merch.

Traits

  • pink-to-cyan gradients, sunset bands, wireframe grids receding to a horizon
  • Windows 95 chrome, Greek busts, palm trees, dolphins, checkerboards, VHS scan lines
  • Japanese katakana next to English, wide letter-spacing
  • serif or slab type with chrome or outline effects
  • lo-fi textures: JPEG artifacts, CRT glow, colour fringing (chromatic aberration)
  • irony and nostalgia; deliberately dated UI
  • slow, dreamy motion: drifting gradients, gentle float

Palette

#ff71ce pink, #01cdfe cyan, #05ffa1 mint, #b967ff purple, #fffb96 pale yellow, #1a0b2e deep purple base

Type

Major Mono Display for headers, Cormorant Garamond or Times for classical contrast, IBM Plex Mono for UI; wide tracking (0.2-0.4em) on titles

Do

  • use a perspective grid (repeating-linear-gradient on a rotateX(60deg) plane) as the floor
  • pair pink #ff71ce and cyan #01cdfe in every gradient; that pairing is the signature
  • add katakana or Japanese subtitles under English headings, but keep them meaningful

Don't

  • do not use it for a business site; it reads as a joke unless the brand is in on it
  • do not go crisp and modern; add scan lines and slight blur to keep it lo-fi
  • do not confuse it with cyberpunk; vaporwave is soft, pastel and slow

Known for it: Macintosh Plus album art era, Vapor95, Poolsuite, Neocities communities

CSS seed
:root {
  --bg: #1a0b2e;
   --fg: #fffb96;
   --accent: #ff71ce;
   --accent2: #01cdfe;
   --accent3: #05ffa1;
   --radius: 0;
   --glow: 0 0 20px #ff71ce;
   --font: 'Major Mono Display',monospace
}
Prompt

Build the site in vaporwave style. Base #1a0b2e with a hero background gradient from #ff71ce (top) through #b967ff to #01cdfe (bottom) and a sun made of horizontal bands (repeating-linear-gradient in #ff71ce and #fffb96). Below it a cyan wireframe floor: a rotateX(60deg) plane with a 40px repeating grid in #01cdfe that scrolls slowly toward the viewer (translateY animation, 4s linear infinite). Type: Major Mono Display for headings at 56px with 0.3em letter-spacing and text-shadow 0 0 20px #ff71ce; Cormorant Garamond italic at 28px for subheads; IBM Plex Mono 14px for UI with Japanese katakana subtitles under each heading. Windows-95-style panels: #c0c0c0 with 2px bevel borders (light top-left, dark bottom-right) and a title bar gradient #000080 to #1084d0. Add a CRT scanline overlay at opacity 0.08 and a 1px chromatic-aberration text effect on the hero. Keep everything slow: 600ms ease transitions.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in vaporwave style. Base #1a0b2e with a hero background gradient from #ff71ce (top) through #b967ff to #01cdfe (bottom) and a sun made of horizontal bands (repeating-linear-gradient in #ff71ce and #fffb96). Below it a cyan wireframe floor: a rotateX(60deg) plane with a 40px repeating grid in #01cdfe that scrolls slowly toward the viewer (translateY animation, 4s linear infinite). Type: Major Mono Display for headings at 56px with 0.3em letter-spacing and text-shadow 0 0 20px #ff71ce; Cormorant Garamond italic at 28px for subheads; IBM Plex Mono 14px for UI with Japanese katakana subtitles under each heading. Windows-95-style panels: #c0c0c0 with 2px bevel borders (light top-left, dark bottom-right) and a title bar gradient #000080 to #1084d0. Add a CRT scanline overlay at opacity 0.08 and a 1px chromatic-aberration text effect on the hero. Keep everything slow: 600ms ease transitions.

## Tokens
:root { --bg:#1a0b2e; --fg:#fffb96; --accent:#ff71ce; --accent2:#01cdfe; --accent3:#05ffa1; --radius:0; --glow:0 0 20px #ff71ce; --font:'Major Mono Display',monospace }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.