Vaporwave — Stylebook

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 16 tokens

--bg oklch(26% 0.1 305)
--fg oklch(90% 0.06 320)
--muted oklch(68% 0.08 320)
--surface oklch(30% 0.1 308)
--surface-2 oklch(34% 0.09 308)
--border oklch(50% 0.12 315)
--accent oklch(76% 0.22 355)
--accent-fg oklch(22% 0.1 305)
--focus oklch(82% 0.16 195)

Token	Value
--font-body	`'Space Mono', ui-monospace, monospace`
--font-display	`'Space Mono', ui-monospace, monospace`
--font-mono	`'Space Mono', ui-monospace, monospace`
--radius	`0px`
--radius-sm	`0px`
--shadow	`0 0 12px oklch(76% 0.22 355 / 0.25), 0 4px 16px oklch(0% 0 0 / 0.5)`
--shadow-lg	`0 0 32px oklch(76% 0.22 355 / 0.35), 0 12px 40px oklch(0% 0 0 / 0.65)`

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
	--bg: oklch(26% 0.1 305);
	--fg: oklch(90% 0.06 320);
	--muted: oklch(68% 0.08 320);
	--surface: oklch(30% 0.1 308);
	--surface-2: oklch(34% 0.09 308);
	--border: oklch(50% 0.12 315);
	--accent: oklch(76% 0.22 355);
	--accent-fg: oklch(22% 0.1 305);
	--focus: oklch(82% 0.16 195);
	--font-body: 'Space Mono', ui-monospace, monospace;
	--font-display: 'Space Mono', ui-monospace, monospace;
	--font-mono: 'Space Mono', ui-monospace, monospace;
	--radius: 0px;
	--radius-sm: 0px;
	--shadow: 0 0 12px oklch(76% 0.22 355 / 0.25), 0 4px 16px oklch(0% 0 0 / 0.5);
	--shadow-lg: 0 0 32px oklch(76% 0.22 355 / 0.35), 0 12px 40px oklch(0% 0 0 / 0.65);
}

Where it came from

Origin: Internet art and an online music micro-genre

Vaporwave began as a music micro-genre in the early 2010s, characterised by slowed and chopped 1980s elevator music and smooth jazz. Its album art — pastel gradients, classical busts, retro computer graphics — became its own aesthetic language, spreading through Tumblr and Reddit before reaching mainstream culture. It blends nostalgia for early computing, 1980s corporate aesthetics, and consumer capitalism into something simultaneously ironic and sincere.

How to spot it

Pastel pink, lavender, cyan, and magenta palette
Japanese text, classical statues, and retro computer graphics
Perspective grid floors and retrowave sunsets
Glitch bands and light scan-line overlays

Trade-offs

Strengths	Weaknesses
Instantly recognisable and culturally resonant	Very specific cultural references narrow its audience
Works as ironic commentary or genuine aesthetic	Readability is often secondary to mood
Strong fit for music, fashion, and internet culture	Already nostalgic for nostalgia — tends to date quickly

In the wild

Macintosh Plus — Floral Shoppe album art
Tumblr aesthetic accounts, 2013–2016
A E S T H E T I C S spaced-letter display type

Use it when

Music, games, or events where the ironic-nostalgic tone is the product.

Related styles

Synthwave Y2K Glitch