# Vaporwave

Also called: vaporwave aesthetic, a e s t h e t i c web, synthwave-adjacent, Windows 95 retro  
Era: 2011-2016 origin (music and art); web usage ongoing for portfolios, music and merch  
Page: https://designforai.dev/style/vaporwave

## 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

```css
: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.