Library /Retro Synthwave
Design System v1984

Retro Synthwave

Neon-drenched 80s VHS aesthetic — hot magenta, electric cyan, and grid horizons

Official docs

Color Palette

Typography — Orbitron

H1 · 900 · 48px · #FF006E

MIDNIGHT RUNNER

H2 · 700 · 36px · #00F5FF

Neon Highway

H3 · 700 · 28px · #FCE4FF

Arcade Protocol

H4 · 700 · 22px · #FFBE0B

Sunset Drive

H5 · 700 · 18px · #00F5FF
System Online
H6 · 700 · 14px · #B388FF
INSERT COIN

Body · 400 · 15px

The year is 1989. Chrome DeLoreans reflect neon signage. Every interface pulses with analog warmth — scanlines optional, nostalgia mandatory. Your UI should feel like a cassette tape rewinding at 2 AM.

Caption · 12px

TRACK 04 · SIDE B · 128 KBPS

Buttons

Neon Primary

Hot pink fill with cyan glow box-shadow, uppercase tracking

Cyan Outline

Transparent with electric cyan border and text glow

Sunset Gradient

Orange-to-pink gradient button like a horizon line

VHS Overlay

Buttons on scanline-heavy dark panels

Form Inputs

Badges & Tags

LIVESTEREOHi-Fi

Surfaces & Cards

Grid Horizon

Deep purple with perspective grid lines fading into a neon sunset.

VHS Panel

Dark card with purple tint — like a paused frame on a CRT.

Neon Sign

Transparent panel with glowing cyan border — signage aesthetic.

Cassette Shell

Flat orange accent block — like a vintage tape label.

Border Radius Scale

sharp
0px
bevel
2px
arcade
4px
crt
8px
pill-neon
pill

Component Example

Outrun Mode

Infinite scrolling grid roads and chrome reflections.

VHS Tracking

Subtle scanlines and chromatic aberration on hover.

Neon Glow

Box-shadow halos on every interactive element.

Design Tokens

Token Value Usage
--synth-bg
#1A0A2E
Deep space background
--synth-neon-pink
#FF006E
Primary neon
--synth-cyan
#00F5FF
Secondary glow
--synth-sunset
#FFBE0B
Horizon accent
--synth-purple
#8338EC
Mid-tone surfaces
--synth-glow
0 0 20px
Neon box-shadow spread
--synth-radius
0px
Default: sharp corners