Vaporwave

Also called: A E S T H E T I C, Vapor UI, Mallsoft

A dreamy pastel sunset, Windows-95 windows with candy title bars, marble statues on a grid floor and wide-spaced capitals.

“Aesthetic 95”Retro & NostalgiaEra: 2010s internet art, sampling the 80s–90sNostalgicDreamyPlayfulEdgy

Open full screen ↗

vaporwave / landingEN

vaporwave / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

pastel sunset skyWindows 95 windowsbeveled title barsmarble statuepink grid floorwide-spaced capitalspink and cyan offset shadowVHS on-screen text

Vaporwave is ironic nostalgia for early consumer computing and mall culture. A lavender-to-peach sky melts into a pink grid floor with a pastel striped sun; marble busts and palms float in the scene. Every panel is a Windows-95 window — square corners, two-tone bevels and a pink → violet → cyan title bar with tiny window buttons. Headlines are wide, spaced-out capitals with doubled pink/cyan offset shadows, and labels look like a VHS on-screen display. It is hazy, slow and tongue-in-cheek.

Best for

Music labels, playlists and radio
Art, zine and creator portfolios
Streetwear and merch drops
Indie games and internet-culture events

Avoid for

Banking, health and government services
Conversion-critical checkout flows
Accessibility-first products for older users
Corporate B2B

✓ Do

Wrap content in Win95 windows: 0 radius, 2-tone bevel, gradient title bar #FF71CE → #B967FF → #01CDFE
Keep the sky pastel so plum text (#241238) stays ≥ 7:1
Use wide letter-spacing (0.12–0.3em) on Latin caps only
One bust per view; other art uses columns, palms or the sun
Hover = slight face brighten (brightness 1.06) and dotted underline, no lift

✕ Don't

Don’t use a dark night sky with neon glow — that is Retro-Futurism
Don’t round corners or use soft blur shadows
Don’t letter-space Thai text
Don’t put the sun, statues or grid lines behind headings or paragraphs
Don’t stack offset shadows; one hard offset per element

Not to be confused with

Retro-Futurism →Retro-Futurism is a dark, heroic night with chrome type and neon outlines; Vaporwave is a pastel, hazy daydream with Windows-95 windows and marble statues.Y2K Aesthetic →Y2K is glossy white and hot pink with chrome rims and sparkles; Vaporwave is square, beveled and sunset-tinted with grid floors and statues.Pixel Art →Pixel Art is chunky 8-bit with pixel fonts and notched pixel borders; Vaporwave uses smooth gradients, wide sans capitals and OS-window bevels.

On mobile

Treat the phone as one big desktop: cards become small beveled windows with title bars, the tab bar is a gray Win95 taskbar with sunken active buttons, and the featured card is a sunset window with a statue. Keep the sky gradient static; no blur.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinLexend Giga · 500/600

The quick brown fox

Heading · ThaiFahkwang · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinLexend · 300/400/500/600

Clear words make shared decisions.

Body · ThaiFahkwang · 300/400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Fahkwang’s wide, airy stance and open loops echo the extended width of Lexend Giga, so Thai headlines keep the spacious “aesthetic” feel without letter-spacing.

Colour palette

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`2px`
Shadow	`6px 6px 0 rgba(255,113,206,0.55)`
Display	`clamp(2rem, 4.2vw, 3.4rem)`
Motion	`60ms steps(2, end)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Vaporwave (vaporwave) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@500;600&family=Lexend:wght@300;400;500;600&family=VT323:wght@400&family=Fahkwang:wght@300;400;500;600&display=swap
 */
:root {
  --radius: 0px;
  --background: #FBE4F6;
  --foreground: #241238;
  --card: #ECE7F5;
  --card-foreground: #241238;
  --popover: #ECE7F5;
  --popover-foreground: #241238;
  --primary: #FF71CE;
  --primary-foreground: #241238;
  --secondary: #01CDFE;
  --secondary-foreground: #241238;
  --muted: #F6E9FB;
  --muted-foreground: #5B4878;
  --accent: #F6E9FB;
  --accent-foreground: #241238;
  --destructive: #D3215A;
  --border: #2B1B47;
  --input: #2B1B47;
  --ring: #FF71CE;
  --chart-1: #FF71CE;
  --chart-2: #01CDFE;
  --chart-3: #B967FF;
  --chart-4: #2BD9A0;
  --chart-5: #FFB86B;
  --sidebar: #ECE7F5;
  --sidebar-foreground: #241238;
  --sidebar-primary: #FF71CE;
  --sidebar-primary-foreground: #241238;
  --sidebar-accent: #F6E9FB;
  --sidebar-accent-foreground: #241238;
  --sidebar-border: #2B1B47;
  --sidebar-ring: #FF71CE;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Vaporwave (vaporwave) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@500;600&family=Lexend:wght@300;400;500;600&family=VT323:wght@400&family=Fahkwang:wght@300;400;500;600&display=swap
 */
@theme {
  --color-bg: #FBE4F6;
  --color-surface: #ECE7F5;
  --color-surface-2: #F6E9FB;
  --color-text: #241238;
  --color-text-muted: #5B4878;
  --color-primary: #FF71CE;
  --color-on-primary: #241238;
  --color-secondary: #01CDFE;
  --color-on-secondary: #241238;
  --color-accent: #B967FF;
  --color-border: #2B1B47;
  --color-success: #0B8F63;
  --color-warning: #B86E00;
  --color-danger: #D3215A;
  --color-chart-1: #FF71CE;
  --color-chart-2: #01CDFE;
  --color-chart-3: #B967FF;
  --color-chart-4: #2BD9A0;
  --color-chart-5: #FFB86B;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --shadow-sm: 3px 3px 0 rgba(185,103,255,0.55);
  --shadow-md: 6px 6px 0 rgba(255,113,206,0.55);
  --shadow-lg: 10px 10px 0 rgba(1,205,254,0.5);
  --font-heading: "Lexend Giga", "Fahkwang", system-ui, sans-serif;
  --font-body: "Lexend", "Fahkwang", system-ui, sans-serif;
  --font-mono: "VT323", ui-monospace, "SFMono-Regular", Menlo, "Fahkwang", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Vaporwave (vaporwave). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@500;600&family=Lexend:wght@300;400;500;600&family=VT323:wght@400&family=Fahkwang:wght@300;400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.8941,
            0.9647
          ],
          "hex": "#fbe4f6"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.9059,
            0.9608
          ],
          "hex": "#ece7f5"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9137,
            0.9843
          ],
          "hex": "#f6e9fb"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.0706,
            0.2196
          ],
          "hex": "#241238"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.2824,
            0.4706
          ],
          "hex": "#5b4878"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4431,
            0.8078
          ],
          "hex": "#ff71ce"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.0706,
            0.2196
          ],
          "hex": "#241238"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0039,
            0.8039,
            0.9961
          ],
          "hex": "#01cdfe"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.0706,
            0.2196
          ],
          "hex": "#241238"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.4039,
            1
          ],
          "hex": "#b967ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1059,
            0.2784
          ],
          "hex": "#2b1b47"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.5608,
            0.3882
          ],
          "hex": "#0b8f63"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.4314,
            0
          ],
          "hex": "#b86e00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.1294,
            0.3529
          ],
          "hex": "#d3215a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4431,
            0.8078
          ],
          "hex": "#ff71ce"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0039,
            0.8039,
            0.9961
          ],
          "hex": "#01cdfe"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.4039,
            1
          ],
          "hex": "#b967ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.851,
            0.6275
          ],
          "hex": "#2bd9a0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7216,
            0.4196
          ],
          "hex": "#ffb86b"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.7255,
              0.4039,
              1
            ],
            "hex": "#b967ff",
            "alpha": 0.55
          },
          "offsetX": {
            "value": 3,
            "unit": "px"
          },
          "offsetY": {
            "value": 3,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.4431,
              0.8078
            ],
            "hex": "#ff71ce",
            "alpha": 0.55
          },
          "offsetX": {
            "value": 6,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0039,
              0.8039,
              0.9961
            ],
            "hex": "#01cdfe",
            "alpha": 0.5
          },
          "offsetX": {
            "value": 10,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Lexend Giga",
        "Fahkwang",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Lexend",
        "Fahkwang",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "VT323",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Fahkwang",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 60,
      "unit": "ms"
    }
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!