RetroWave Design System

RetroWave Design System mockup preview
Click to expand

RetroWave is a synthwave-infused, gradient-soaked design system dripping with 80s nostalgia. Built for retro-themed entertainment and music platforms, it layers hot pink, electric purple, and neon blue over deep navy darkness. Every surface pulses with neon glow, every button carries a gradient, and the entire experience feels like driving through a cyberpunk cityscape at midnight. This is maximalism with a purpose.

Surface Base#0A0A2E
Hot Pink#FF006E
Purple#8338EC
Electric Blue#3A86FF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Bebas Neue · 56px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Bebas Neue · 44px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Bebas Neue · 32px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Poppins · 22px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyPoppins · 15px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallPoppins · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

tinyPoppins · 11px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoIBM Plex Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

RetroWave is a synthwave-infused, gradient-soaked design system dripping with 80s nostalgia. Built for retro-themed entertainment and music platforms, it layers hot pink, electric purple, and neon blue over deep navy darkness. Every surface pulses with neon glow, every button carries a gradient, and the entire experience feels like driving through a cyberpunk cityscape at midnight. This is maximalism with a purpose.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Filter ChipStatus Chip LiveStatus Chip UpcomingStatus Chip EndedStatus Chip Featured

lists

Default

Hover

Active

checkboxes

Default

Checked

Focus

radioButtons

Unchecked

Checked

Focus

tooltips

Default

Elevation & Depth

glow-pink-sm
glow-pink-md
glow-pink-lg
glow-purple-sm
glow-blue-sm
glow-blue-md
glow-combo
error-glow

Do's & Don'ts

Do

Don't apply neon glow to every element simultaneously; let key actions glow and let supporting elements stay dark.
Use pink-to-purple gradients as the signature visual element for primary actions and hero sections.
Use Bebas Neue at large sizes (32px+) in uppercase for that authentic retro display feel.
Use tracking and uppercase styling on buttons and labels for the synthwave aesthetic.
Ensure white text meets minimum 4.5:1 contrast against all dark surface variants.
Provide reduced-motion alternatives that replace glow animations with static borders.
Animate glow effects with subtle pulse transitions for interactive elements.
Don't use light backgrounds anywhere; the deep navy base is essential to neon visibility.

Don't

Don't combine all three neon colors (pink, purple, blue) in a single component; pick two maximum.
Don't use gradients on body text; reserve gradients for backgrounds, buttons, and decorative elements.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.5 KB
Downloads 0
bold dark experimental media playful

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/retrowave and implement it in my code

Don't have the MCP? Install it here