Vaporwave
Mission
Collapse consumer capitalism into a nostalgic, ironic visual language — Roman busts, marble columns, and Windows 95 dialogs bathed in cyan and magenta.
Brand
🎨 Colors
#FF71CE— Primary (hot pink)#01CDFE— Secondary (cyan)#B967FF— Accent (lavender purple)#FFFB96— Highlight (pale yellow)#1A1A2E— Background (deep violet-black)#2D1B4E— Surface (rich purple)
🔤 Typography
- Heading font: VT323 (Google Fonts, pixel terminal)
- Body font: Share Tech Mono (Google Fonts, tech-serif hybrid)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2rem / 3xl 3rem
📐 Spacing
- Grid: 8-column, 12px base unit (deliberately coarse, evokes old UI)
- Section padding: 4rem vertical, 1.5rem horizontal
- Card gaps: 2rem
🧩 Components
- Buttons: Windows 95-style — raised 3D borders (light top/left, dark bottom/right), gray fill, pixelated hover state. Alternative: gradient magenta-cyan with glitch hover.
- Cards: Framed windows with title bars, minimize/maximize/close buttons, marble or grid background inside the viewport.
- Nav: Retro taskbar at bottom of viewport, icon + label, running-indicator underline.
- Hero: Marble statue bust with gradient overlay, split-color magenta/cyan text, glitch artifacts.
- Footer: Crushed VHS-style text, Japanese character accents, "A E S T H E T I C" spaced lettering.
♿ Accessibility
- Pixel fonts at small sizes risk illegibility — minimum 1rem for body text
- High-contrast pairing: cyan on dark purple, magenta on black
- Windows 95 button borders provide clear affordance
prefers-reduced-motion: disable glitch animations and CRT flicker
✍️ Writing Tone
Ironic, self-aware, nostalgic. Full-width characters (AESTHETIC) for emphasis. Mix English with Japanese phrases. Deadpan corporate satire. All caps sparingly used.
Do / Don't
✅ Do
- Use marble busts, Greek statues, and classical art as hero imagery
- Layer glitch effects (RGB split, scanlines, CRT warp) sparingly
- Reference early GUI elements: title bars, window chrome, pixel icons
- Split-color typography (magenta/cyan halves) on key headings
- Add Japanese text accents and full-width spacing for aesthetic flourishes
❌ Don't
- Use modern flat design conventions — embrace the 90s UI aesthetic
- Mix in warm organic colors — keep it synthetic and digital
- Overuse glitch to the point of illegibility
- Take itself too seriously — vaporwave is ironic by nature
- Use smooth transitions or modern animations — keep it choppy
Quality Gates
- At least one classical sculpture or marble texture present
- Split-color or glitch typography on the hero headline
- Windows 95-style UI element somewhere on the page
- Cyan and magenta appear as dominant accent colors
- No modern flat-design buttons or cards
- Maximum of 2 simultaneous animations (respect the era)