Pastel neon
Pink, cyan, mint and lavender, softer than synthwave and always a little faded.
A dreamy internet aesthetic built from pastel sunsets, marble columns, checkered floors and old computer windows. It feels like a mall at closing time in 1994, played in slow motion.
Open the kit Copy promptVaporwave remixes the consumer culture of the 1980s and 1990s into a hazy daydream. It mixes classical statues, early 3D graphics and pastel neon.
Pink, cyan, mint and lavender, softer than synthwave and always a little faded.
Marble columns and statues sit next to wireframes and old software windows.
Fullwidth letters spread out like ａｅｓｔｈｅｔｉｃ, a signature joke of the style.
VHS lines, slow motion and loops give everything a sleepy, nostalgic blur.
Vaporwave began as a music genre built from slowed-down samples, and the visuals grew around the albums.
Early releases loop and slow down pop and elevator music, setting the sound of the genre.
A release by Macintosh Plus features a marble bust on a pink grid, one of the most copied vaporwave images.
Tumblr and forums turn the look into a shared visual language with its own jokes.
Clothing brands, game art and websites borrow the pastel sunsets and marble columns.
Vaporwave motion floats. A wireframe cube spins slowly over a checkered floor while VHS lines crawl across the screen.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Artists and labels use pastel windows and marble for album pages.
Clothing drops lean on the ironic nostalgia of the look.
Hobby sites and portfolios use it as a playful internet in-joke.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Five soft neon colours from sunset to swimming pool, grounded by a deep night purple for text. Tap a swatch to copy its hex value.
:root{
--lavender: #B967FF;
--hot-pink: #FF71CE;
--cyan: #01CDFE;
--mint: #05FFA1;
--pale-yellow: #FFFB96;
--night-purple: #2B1E4A;
}Times and Arial style faces on purpose, with italics for titles. Their default feel is part of the joke.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Tinos","Times New Roman",serif;
--font-b: "Arimo",Arial,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(49px, 9vw, 107px);
--fs-1: 48.6px; --fs-2: 37.3px;
--fs-3: 28.7px; --fs-4: 22.1px;
--fs-body: 17px; --fs-sm: 13.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: .02em;
text-transform: none;
line-height: 1.05;
}
/* fonts: Tinos and Arimo, free fonts that match classic Times and Arial */Windows and panels float over dreamy backgrounds. Keep reading areas in simple columns.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}No radius. Old-computer bevels and hard drop shadows frame every window.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 2px;
--shadow: inset -2px -2px 0 #8E7BB5, inset 2px 2px 0 #FFFFFF, 4px 4px 0 rgba(43,30,74,.35);
--shadow-sm: inset -2px -2px 0 #8E7BB5, inset 2px 2px 0 #FFFFFF;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Vaporwave kit · Anti-Boring */
:root{
--bg:#F9D6F2;
--surface:#FFFFFF;
--surface2:#E9D7FF;
--fg:#2B1E4A;
--muted:#5C4B80;
--accent:#FF71CE;
--accent-fg:#2B1E4A;
--accent2:#01CDFE;
--accent2-fg:#2B1E4A;
--border:#2B1E4A;
--bw:2px;
--radius:0px;
--radius-sm:0px;
--shadow:inset -2px -2px 0 #8E7BB5, inset 2px 2px 0 #FFFFFF, 4px 4px 0 rgba(43,30,74,.35);
--shadow-sm:inset -2px -2px 0 #8E7BB5, inset 2px 2px 0 #FFFFFF;
--font-d:"Tinos","Times New Roman",serif;
--font-b:"Arimo",Arial,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:.02em;
--h-case:none;
--h-style:italic;
--h-lh:1.05;
--gap:24px;
--pad:24px;
--focus:rgba(1,205,254,.5);
--ok:#0A8F6A;
--warn:#8A5A00;
--danger:#C0265A;
--info:#3E4FC8;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(#FF71CE 0,#FFFB96 50%,transparent 50%),repeating-linear-gradient(90deg,#B967FF 0 2px,transparent 2px 24px),linear-gradient(#01CDFE,#01CDFE);
--code-bg:#2B1E4A;
--code-fg:#05FFA1;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:17px;
--fs-4:22.1px;
--fs-3:28.7px;
--fs-2:37.3px;
--fs-1:48.6px;
--fs-d:clamp(49px, 9vw, 107px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{background:linear-gradient(90deg,#FF71CE,#B967FF);color:#fff;text-shadow:1px 1px 0 #2B1E4A}
.btn-2{background:linear-gradient(90deg,#01CDFE,#05FFA1);color:#2B1E4A;text-shadow:none}
.btn-ghost{background:#E6E0F0;color:#2B1E4A;text-shadow:none}
.card{padding:0}
.card::before{content:"ａｅｓｔｈｅｔｉｃ.exe";display:block;padding:5px 10px;margin-bottom:var(--pad);background:linear-gradient(90deg,#FF71CE,#01CDFE);color:#fff;font:italic 400 1rem var(--font-d)}
.card>*:not(.card-media){margin-left:var(--pad);margin-right:var(--pad)}
.card .card-media{margin:0 var(--pad) 1em}
.card>*:last-child{margin-bottom:var(--pad)}
.badge{background:#05FFA1;color:#2B1E4A;border-radius:0}
.alert{background:var(--surface)}
.switch,.switch::before,.check{border-radius:0}
.progress{border-radius:0}
.progress i{background:linear-gradient(90deg,#FF71CE,#B967FF,#01CDFE)}
.tab[aria-selected="true"]{border-bottom-color:#FF71CE}
.table th{background:linear-gradient(90deg,#FF71CE,#01CDFE);color:#fff;font-style:italic}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#1A1033;
--surface:#2A1B4E;
--surface2:#221543;
--fg:#F6E9FF;
--muted:#C8B6E8;
--border:#F6E9FF;
--code-bg:#0E0820;
}
html.alt body{background:#1A1033!important}html.alt .docnav{background:#221543!important}html.alt .tl .yr{color:#FF71CE}html.alt .vwin p{color:#2B1E4A}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a retro online radio station in an authentic Vaporwave style.
Palette: Lavender #B967FF, Hot pink #FF71CE, Cyan #01CDFE, Mint #05FFA1, Pale yellow #FFFB96, Night purple #2B1E4A.
Typography: Tinos italic (Times style) for titles, Arimo (Arial style) for body. Fullwidth characters only for small decorative labels.
Layout: Hero with a lavender to pink sunset, a striped pastel sun, a perspective checkerboard floor, a white marble column on the left, and an old-computer window on the right holding the title and text.
Signature details: Pink #FF71CE, cyan #01CDFE, mint #05FFA1, lavender #B967FF, pale yellow #FFFB96. Bevelled window chrome with gradient title bars, faint VHS lines.
Components: Gradient bevel buttons, windowed cards with gradient title bars, mint badges, gradient table headers.
Motion: Slow spinning wireframe cube, crawling VHS lines, gentle stepped jitter.
Avoid: decorative Japanese text used without meaning, copies of famous album art, dark gritty cyberpunk, rounded modern cards.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Random Japanese characters as decoration can read as meaningless or insensitive. Use text you understand.
The best-known vaporwave images belong to their makers. Draw your own columns and scenes.
Fullwidth letters are a garnish. Keep real content in normal text.
Pink and cyan behind light text fail contrast. Put text on white windows.