Synthwave
A neon sunset theme: hot-pink and violet over deep night, retro glow, and bold type for music, gaming, and night-mode apps.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Outfit carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Glow hot-pink against deep indigo-night surfaces.
- •Use glow shadows instead of flat elevation.
Don't
- •Don't use it in bright, daytime productivity contexts.
- •Don't desaturate the neons.
- •Let neon elements pulse and glow on entrance.
Hover to feel this theme's base transition.
Lucide · 1.75px stroke · 1rem. Outline icons with a consistent stroke width; size icons to match adjacent text and align them optically.
- Never use color as the only signal — pair it with text, an icon, or a shape.
- Every interactive element must be keyboard reachable and show a visible focus ring.
- Honor prefers-reduced-motion: reduce by disabling non-essential animation.
- Keep a logical heading order and give every form control a label.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.5rem |
| Padding | 0 1.15rem |
| Height | 2.7rem |
| Weight | 700 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 9999px |
| Padding | 0.15rem 0.55rem |
| Font size | 0.72rem |
| Weight | 700 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0.75rem |
| Padding | 1rem 1.25rem |
| Border | 1px solid var(--border) |
Always pair the color with an icon and a text label — never rely on color alone.
Form field
| Background | var(--background) |
| Border | 1px solid var(--input) |
| Radius | 0.5rem |
| Height | 2.7rem |
| Padding | 0.5rem 0.75rem |
Label sits above the field; helper or error text sits below.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 0.75rem |
| Padding | 1.5rem |
| Shadow | 0 0 28px -4px rgba(251,113,133,0.35) |
The design brief
Synthwave is a neon sunset design system: hot-pink and violet over a deep night sky, retro glow, and bold type. It evokes 80s sci-fi and late-night energy.
Principles
- Hot-pink primary glows against deep indigo-night surfaces.
- Retro glow shadows replace flat elevation.
- Bold type and saturated accents lean into the aesthetic.
When to use
Use Synthwave for music, gaming, streaming, and night-mode product UIs. Avoid it for daytime productivity or finance tools.
Signature details
- Hot-pink
#fb7185glow over indigo-night#160a28. - Outfit + Space Mono, 0.5rem radius.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0.5rem;
--background: #fff7f9;
--foreground: #2a0a18;
--card: #ffffff;
--card-foreground: #2a0a18;
--popover: #ffffff;
--popover-foreground: #2a0a18;
--primary: #be123c;
--primary-foreground: #ffffff;
--secondary: #fff0f3;
--secondary-foreground: #2a0a18;
--muted: #f9edf0;
--muted-foreground: #7a4858;
--accent: #ffe4ec;
--accent-foreground: #9f1239;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--border: #f1dbe1;
--input: #f1dbe1;
--ring: #be123c;
--shadow-sm: 0 1px 2px rgba(76,5,25,0.25);
--shadow-md: 0 0 28px -4px rgba(251,113,133,0.35);
--shadow-lg: 0 0 56px -8px rgba(167,139,250,0.40);
--font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: cubic-bezier(0.4,0,0.2,1);
--ease-emphasized: cubic-bezier(0.16,1,0.3,1);
--duration-base: 260ms;
}
.dark {
--background: #160a28;
--foreground: #f6e4f0;
--card: #1f1038;
--card-foreground: #f6e4f0;
--popover: #1f1038;
--popover-foreground: #f6e4f0;
--primary: #fb7185;
--primary-foreground: #4c0519;
--secondary: #2a1644;
--secondary-foreground: #f6e4f0;
--muted: #2a1644;
--muted-foreground: #c0a3cf;
--accent: #5a1f4a;
--accent-foreground: #ffe4ec;
--destructive: #fda4af;
--destructive-foreground: #450a0a;
--border: #392058;
--input: #392058;
--ring: #fb7185;
}More designs
Cosmic
A deep-space theme: violet-on-midnight, nebula accents, and luminous type for AI, astronomy, and dark-first product UIs.
Neon Grid
A cyberpunk theme: dark grid surfaces, electric-cyan primary, and sharp mono type for hacker dashboards and dev tools.
Brutalist
Loud neo-brutalist theme — hard edges, offset shadows.