# Vaporwave > A dreamy pastel sunset, Windows-95 windows with candy title bars, marble statues on a grid floor and wide-spaced capitals. - Nickname: Aesthetic 95 - Also called: A E S T H E T I C, Vapor UI, Mallsoft - Category: Retro & Nostalgia - Moods: Nostalgic, Dreamy, Playful, Edgy - Industries: Media & Entertainment, Creative & Portfolio, Gaming, E‑commerce - Style page: https://uilingo.dev/styles/vaporwave/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Vaporwave" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A dreamy pastel sunset, Windows-95 windows with candy title bars, marble statues on a grid floor and wide-spaced capitals. Design keywords: pastel sunset sky, Windows 95 windows, beveled title bars, marble statue, pink grid floor, wide-spaced capitals, pink and cyan offset shadow, VHS on-screen text. ## Visual language A hazy, ironic daydream of 90s computing and mall culture. A pastel sky melts from lavender through pink to peach, a striped pastel sun sits on a pink perspective grid floor, and white marble busts float in the scene. Every content block is a Windows-95 window: square corners, two-tone bevels, a pink → violet → cyan title bar with tiny _ □ × buttons, and a hard pastel offset shadow. Headlines are wide, spaced-out capitals with doubled pink and cyan offset shadows; labels and numbers look like a VHS on-screen display. Slow, flat and tongue-in-cheek — no glow, no blur, no gloss. ## Signature details (must be visible) - Scene, hero and CTA only: each of those two sections owns an absolutely positioned scene layer (never a fixed page backdrop). Sky linear-gradient(180deg, #C9B2FF, #E9B8F4 34%, #FFB7DE 62%, #FFD7B8) down to a 4px #FF71CE horizon line about 180px above the section bottom (≈72% of a desktop hero), then #F7C9EC → #FBE4F6 below. A 160px pastel sun linear-gradient(#FFF3A8, #FFC18A 40%, #FF8AC9 75%, #FF71CE) is centred at 50% and sits on the horizon with its lower 28% cut off, sliced by 5 transparent horizontal slats via mask-image. Pad the section bottom (~310px) so the sun and floor sit below the content, never behind a heading, paragraph or window - Grid floor below the horizon: 2px rgba(214,64,170,.55) lines on 40px tiles, transform-origin top, transform: perspective(400px) rotateX(70deg), at least 6 visible rows, faded in over the first 12% with a mask; it fills the section down to its bottom edge - Win95 bevel on every panel and button: box-shadow inset -2px -2px 0 #2B1B47, inset 2px 2px 0 #FFFFFF, inset -4px -4px 0 #9286AC, inset 4px 4px 0 #F7F3FD; pressed/sunken swaps the light and dark sides. Radius 0 on all UI chrome — only the radio button, the sun and the bust may curve - Window title bar: a 20px strip linear-gradient(90deg, #FF71CE, #B967FF 55%, #01CDFE) inset 4px from the top, left and right of each window; an optional caption in VT323 1rem (Fahkwang 500 .8rem for Thai) in #241238, left-aligned at 6px; at the right a group of 14×12px #ECE7F5 buttons with a 1px raised bevel holding _ □ × in #241238. Content starts below the bar - Hard pastel offset shadows, never blurred. Exactly one outer offset per element (inset bevels do not count), by tier: badges and inputs 3px 3px 0 rgba(185,103,255,.55) (violet); primary buttons 4px 4px 0 rgba(1,205,254,.6) (cyan); cards and windows 6px 6px 0 rgba(255,113,206,.55) (pink); hero windows and the CTA dialog 10px 10px 0 rgba(1,205,254,.5) (cyan) - Headlines: Lexend Giga 600, uppercase, 0.12em tracking, #241238. Display uses text-shadow 3px 3px 0 #FF71CE, 6px 6px 0 #01CDFE; h1 2px 2px 0 #FF71CE, 4px 4px 0 #01CDFE; h2 a single 2px 2px 0 rgba(255,113,206,.7). Thai headings: Fahkwang 600 at about 1.2× the Latin size, line-height 1.4–1.5, no tracking, no uppercase and one 2px 2px 0 #FF71CE shadow only. In mixed-script headings wrap Latin runs in to get uppercase, 0.12em tracking and the doubled shadow; Thai runs keep the single 2px pink shadow - Art: one marble bust per viewport height (~900px). The CSS/SVG bust is a 5-circle curl cap, an oval head, a neck and a trapezoid chest on a 2-step plinth, filled #FFFFFF → #B9A2DA, with face lines (3px #9C86C2 round-capped strokes for brows, nose and a smile) and a 4px 4px 0 rgba(1,205,254,.45) drop-shadow. The hero bust sits about 40% above the top edge of the rear hero window, partly hidden behind it. Other art slots use a column pair, a palm or the sun inside a sunset window - Type and rhythm: VT323 for eyebrows ('▶ ' prefix), badges, KPI numbers and table headers. VT323 has no Thai, so Thai labels use Fahkwang 500 at about 0.8× the VT323 size (VT323 runs small); Thai body text is Fahkwang 400, never 300. Spacing: round 8px × 1.05 to an 8px rhythm (8/16/24/32); fractional values are not required. Declare every non-token colour as a --vw-* custom property: --vw-bevel-light #FFFFFF, --vw-bevel-mid #9286AC, --vw-bevel-hi #F7F3FD, --vw-primary-bevel #B0287F / #FFC2EA, --vw-accent-bevel #00799A / #B8F3FF, --vw-grid rgba(214,64,170,.55), --vw-marble-shade #B9A2DA, --vw-bust-line #9C86C2, --vw-bar (the title-bar gradient), plus the sky and sun gradients above ## Design tokens — use these exact values Colours (light mode): - background #FBE4F6 - surface #ECE7F5 - surface-2 #F6E9FB - text #241238 - text-muted #5B4878 - primary #FF71CE (text on it #241238) - secondary #01CDFE (text on it #241238) - accent #B967FF - border #2B1B47 - success #0B8F63 · warning #B86E00 · danger #D3215A - chart series #FF71CE, #01CDFE, #B967FF, #2BD9A0, #FFB86B Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 2px Shadows: sm `3px 3px 0 rgba(185,103,255,0.55)`, md `6px 6px 0 rgba(255,113,206,0.55)`, lg `10px 10px 0 rgba(1,205,254,0.5)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 60ms steps(2, end) ## Typography (Latin + Thai) - Headings: Lexend Giga 500/600 with Thai fallback Fahkwang 500/600 - Body: Lexend 300/400/500/600 with Thai fallback Fahkwang 300/400/500/600 - Mono: VT323 - Google Fonts URL: 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 - CSS stacks: heading `"Lexend Giga", "Fahkwang", system-ui, sans-serif`; body `"Lexend", "Fahkwang", system-ui, sans-serif`; mono `"VT323", ui-monospace, "SFMono-Regular", Menlo, "Fahkwang", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Fahkwang — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2rem, 4.2vw, 3.4rem), heading weight 600, heading tracking 0.12em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Default button: lilac-grey #ECE7F5 face with the raised bevel, uppercase 0.12em label (Latin only). Hover = face lightens 6% (filter: brightness(1.06)) and the label gets a 1px dotted underline; no lift, no glow, instant (steps(2)). :active flips to the sunken bevel and nudges 1px down-right - Primary button: #FF71CE face with a coloured bevel box-shadow: inset -2px -2px 0 #B0287F, inset 2px 2px 0 #FFC2EA, plus its single outer offset 4px 4px 0 rgba(1,205,254,.6) (cyan tier). Accent button: #01CDFE face with inset -2px -2px 0 #00799A, inset 2px 2px 0 #B8F3FF and no outer offset. Same hover as the default button - Cards = windows: #ECE7F5 body, raised bevel, gradient title bar and _ □ × buttons, a single 6px pink offset shadow; content starts below the bar. Hoverable cards brighten (brightness(1.06)) instead of lifting - Inputs: white field with the sunken bevel and a 3px violet offset, 0 radius; focus replaces the offset with a 2px pink outer ring and a dotted inner focus rectangle like Win95 - Checkbox: white sunken square with a plum tick; radio: a round sunken white circle with a plum dot; switch: square sunken track that fills with the title-bar gradient, with a square raised-bevel thumb (0 radius) - Progress: sunken white trough with a segmented purple fill (repeating 9px blocks with 2px gaps) - Tabs: beveled folder tabs on a 2px plum baseline, the active tab merges into the panel - Nav: grey menu bar with raised bevel; the current link is a sunken white box. Footer = grey beveled taskbar with a raised '▶ START' button at the left and a sunken VT323 clock at the right; the mobile tab bar is the same taskbar - Charts: square line joins, gradient bars with a bevel, heatmap from pale cyan to violet, sharp-cornered funnel steps - Tables live inside a window: VT323 header cells on a raised #ECE7F5 bevel; the story/title column wraps (min 12em) while the other columns stay tight and the status badge column is width:1%, so every column fits; if the table must scroll, the wrapper shows a Win95 scrollbar (scrollbar-color #9286AC #ECE7F5) rather than clipping ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → stats → showcase → testimonials → faq → cta. Feature section as alternating. Split hero: wide-spaced caps headline with the doubled pink/cyan shadow on the left (single 2px pink shadow on Thai), a cluster of overlapping Win95 windows (chart + KPIs, 10px cyan offset) on the right with one marble bust peeking from behind the rear window. Give the hero and the CTA section each their own absolutely positioned scene (sky gradient, sun centred at 50% on the horizon, grid floor in the bottom ~180px of that section, ≈72% down on desktop), with enough bottom padding that sun and floor never sit behind content. Every other section is an opaque #FBE4F6 or #F6E9FB band; the sky, sun and grid never show behind those. Features alternate an illustration window (sunset + grid inside: the bust, then a column pair, then a palm) with the feature copy in its own small window (title bar, title, one line) on the solid band — feature copy is never on sky. Showcase: copy with a ▶ checklist beside a large tabbed window holding the product mock (on a music product, a 3-up grid of playlist/album windows, each with a 1:1 sunset art tile, title, VT323 track count and a sunken mini progress bar). Stats are huge wide-caps numbers with the doubled shadow; testimonials and the FAQ are windows/beveled rows; the CTA is a dialog window sitting in the CTA scene above the sun. Long text sits in an opaque white window with a title bar. Other web pages (dashboard, form, article) keep a fixed pastel sky with a grid floor low in the viewport but no sun, so nothing peeks half-hidden behind a window. Dashboards use a grey beveled sidebar with a gradient active item and windows for every widget. The footer is a taskbar with a ▶ START button and a VT323 clock. ## Content Use realistic product copy (fictional brand) suited to: Music labels, playlists and radio. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Rounded corners, soft blurred shadows, glassmorphism or glossy highlights - Dark night skies, chrome lettering and neon glow — that is Retro-Futurism - Pixel fonts and notched pixel borders on everything — that is Pixel Art - Letter-spacing or uppercase tricks on Thai text, and statues or grid lines behind paragraphs - Stacking several offset shadows on one element, or the 3px/6px doubled text shadow on Thai headings - Saturated full-strength neon backgrounds; keep the sky pastel so plum text stays readable - Smooth springy animation — interactions are instant, like an old OS ## Stack notes One self-contained HTML file with a