Perspective grid
A wireframe floor stretching to the horizon, from early computer graphics when a grid was all a machine could render fast.
Retro future
A look built on memories of the 1980s. Neon grids run toward a striped sunset, and chrome letters shine as if lit from a dashboard.
Enter the grid Copy promptSynthwave started as a music genre. The visuals grew from album covers and remix a handful of 1980s motifs again and again.
A wireframe floor stretching to the horizon, from early computer graphics when a grid was all a machine could render fast.
A gradient sun sliced by horizontal bands, probably the most recognisable synthwave symbol.
Magenta and cyan light on deep purple night. Layered shadows fake the halo of a gas tube.
Metallic italic type with a hard horizon line through the middle, borrowed from 1980s film titles.
Synthwave is nostalgia for a future people imagined forty years ago.
Tron shows glowing grids inside a computer. The same year, Blade Runner pairs neon cities with Vangelis's synthesizer score.
The TV series pushes pastel suits and pink neon onto prime time.
Sega's arcade driving game sends players toward sunsets in a sports car. Its name becomes outrun, a label for the whole scene.
Producers such as Kavinsky and College rebuild 1980s synth sounds, and online communities share the look alongside the music.
The film Drive uses tracks by Kavinsky and College, and the sound reaches a mainstream audience.
Games like Far Cry 3: Blood Dragon (2013), album art and web design adopt the grid and the sunset as shorthand for retro fun.
Synthwave motion is an endless drive. Loops never resolve: the road keeps coming and the sun never sets.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
The genre's home ground. A sun, a grid and a title are often the whole composition.
Retro and racing games promise arcade energy before a single level loads.
Neon type on purple says late-night coding from across a room.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Deep purple night lit by magenta and cyan, with a warm sunset gradient for hero moments. Tap a swatch to copy its hex value.
:root{
--night: #140A2A;
--deep-purple: #3A1266;
--magenta: #FF2E97;
--cyan: #27F2FF;
--sun-gold: #FFC43D;
--sunset-orange: #FF6A3D;
--lavender-text: #F3E9FF;
}A neon display face for logos and section titles only, and one squared techno sans in italic for everything else.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Chakra Petch",system-ui,sans-serif;
--font-b: "Chakra Petch",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(46px, 9vw, 96px);
--fs-1: 45.6px; --fs-2: 35.7px;
--fs-3: 27.9px; --fs-4: 21.8px;
--fs-body: 17px; --fs-sm: 13.3px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 700;
letter-spacing: .01em;
text-transform: none;
line-height: 1.05;
}
/* fonts: Monoton for logos, Chakra Petch for everything else */Standard grid, dark ground. Glowing borders separate blocks, so keep generous gaps to stop halos from merging.
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; }
}Barely rounded corners, angled button ends, and glow instead of shadow.
:root {
--radius: 4px;
--radius-sm: 3px;
--bw: 1px;
--shadow: 0 0 24px rgba(255,46,151,.25), inset 0 0 24px rgba(255,46,151,.08);
--shadow-sm: 0 0 12px rgba(255,46,151,.35);
--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.
/* Synthwave kit · Anti-Boring */
:root{
--bg:#140A2A;
--surface:#1E0F3D;
--surface2:#1A0C36;
--fg:#F3E9FF;
--muted:#B8A6DA;
--accent:#FF2E97;
--accent-fg:#FFFFFF;
--accent2:#27F2FF;
--accent2-fg:#140A2A;
--border:rgba(255,46,151,.6);
--bw:1px;
--radius:4px;
--radius-sm:3px;
--shadow:0 0 24px rgba(255,46,151,.25), inset 0 0 24px rgba(255,46,151,.08);
--shadow-sm:0 0 12px rgba(255,46,151,.35);
--font-d:"Chakra Petch",system-ui,sans-serif;
--font-b:"Chakra Petch",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:700;
--h-track:.01em;
--h-case:none;
--h-style:italic;
--h-lh:1.05;
--gap:24px;
--pad:24px;
--focus:rgba(39,242,255,.45);
--ok:#3DFFB0;
--warn:#FFC43D;
--danger:#FF4D6D;
--info:#27F2FF;
--field-bg:#0B0520;
--field-shadow:none;
--media:linear-gradient(#0B0520 0,#3A1266 55%,#FF6A3D 56% 58%,#140A2A 58%);
--code-bg:#0B0520;
--code-fg:#27F2FF;
--btn-case:uppercase;
--btn-track:.12em;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.3px;
--fs-body:17px;
--fs-4:21.8px;
--fs-3:27.9px;
--fs-2:35.7px;
--fs-1:45.6px;
--fs-d:clamp(46px, 9vw, 96px);
}
*,*::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{border:0;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);box-shadow:none;filter:drop-shadow(0 0 10px rgba(255,46,151,.6))}
.btn-2{filter:drop-shadow(0 0 10px rgba(39,242,255,.6))}
.btn-ghost{clip-path:none;border:1px solid var(--accent2);color:var(--accent2);filter:none}
.btn:hover{background:#FFC43D;color:#140A2A}
.card{background:linear-gradient(160deg,rgba(255,46,151,.14),rgba(39,242,255,.06))}
.card h3,.card h4{color:var(--accent2)}
.badge{background:transparent;color:var(--accent2);border-color:var(--accent2);box-shadow:0 0 8px rgba(39,242,255,.5);border-radius:2px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2),0 0 16px rgba(39,242,255,.4)}
.switch:checked{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.progress i{background:linear-gradient(90deg,#FFC43D,#FF6A3D,#FF2E97);box-shadow:0 0 12px #FF2E97}
.alert{background:rgba(11,5,32,.7)}
.tab[aria-selected="true"]{color:var(--accent2);border-bottom-color:var(--accent2);text-shadow:0 0 8px var(--accent2)}
.pager a[aria-current]{box-shadow:0 0 12px var(--accent)}
.table th{color:var(--accent2)}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#FFF0F7;
--surface:#FFFFFF;
--surface2:#FBE3F0;
--fg:#2A0F4A;
--muted:#6B4C8A;
--border:rgba(200,0,110,.45);
--field-bg:#FFFFFF;
--code-bg:#140A2A;
--accent2:#007C8A;
--accent2-fg:#FFFFFF;
}
html.alt .card h3,html.alt .card h4{color:#B0006A}html.alt .card{background:#fff}html.alt .alert{background:#fff}html.alt .table th{color:#B0006A}html.alt body::after{opacity:.35}html.alt .tl .yr{color:#B0006A}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 late-night radio station for electronic music in an authentic Synthwave style.
Palette: Night #140A2A, Deep purple #3A1266, Magenta #FF2E97, Cyan #27F2FF, Sun gold #FFC43D, Sunset orange #FF6A3D, Lavender text #F3E9FF.
Typography: Monoton only for the logo and section titles, Chakra Petch italic 700 for headings and uppercase buttons, Chakra Petch 400 for body.
Layout: Full-height hero: striped gradient sun behind a cyan-outlined mountain range, a magenta perspective grid rolling toward the viewer, a chrome italic title centered on the horizon.
Signature details: Chrome text gradient with a dark band at 50%, faint CRT scanlines over the page, glowing magenta borders on cards, a timeline with glowing cyan dots.
Components: Parallelogram buttons with neon drop-shadow glow, dark inputs that glow cyan on focus, sunset-gradient progress bars, outlined neon badges.
Motion: An endlessly rolling grid, a dashed road, palm trees scaling past. Linear, looping, hypnotic.
Avoid: glow on paragraph text, white backgrounds, flat corporate illustration, more than two 1980s motifs at once.
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.
Blurred halos make paragraphs hard to read. Keep glow for short headings.
Hairline display fonts vanish at small sizes. Check legibility on a phone at arm's length.
Rolling grids can trigger motion sickness. Honour reduced motion and offer a pause control.
Sun, grid, palms, car and chrome all at once becomes parody. Pick two motifs.