Design System

Synthwave

Chrome horizons and neon highways stretching into an endless sunset

Color Palette

Sunset Spectrum

Sun Yellow
#ffe566
Sun Orange
#ff6a00
Hot Pink
#ff2975
Magenta
#f222ff
Violet
#8b2fc9
Neon Blue
#00d4ff
Deep Blue
#0d0221
Chrome White
#e8e0ff

Typography

Chrome Display / Orbitron 900
Night Drive
H1 / Orbitron 900 / 3.5rem
Heading One
H2 / Orbitron 700 / 2.5rem
Heading Two
H3 / Orbitron 600 / 1.75rem
Heading Three
H4 / Audiowide / 1.35rem
Heading Four
H5 / Audiowide / 1.1rem
Heading Five
H6 / Orbitron 700 / 0.85rem
Heading Six
Body / Exo 2 / 1.05rem
The highway stretches endlessly ahead, twin lines of light converging at the vanishing point where the sun bleeds into the horizon. Chrome and glass catch the last rays, painting everything in shades of molten gold and electric violet. The city recedes in the rearview mirror -- all neon spires and reflective towers -- as the engine hums its low, steady anthem into the gathering dusk.

Spacing System

4px Base Unit

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px
--space-10
128px

Buttons

Standard Sizes

Size Variants

With Icons

Forms

Encrypted channel. Maximum 500 characters.

Cards

Standard Cards

🌅
Sunset Boulevard

The horizon bleeds orange and pink as the sun drops below the skyline. Every surface catches fire, chrome and glass burning with reflected light.

🏎
Night Cruiser

Low and sleek, the machine cuts through the dark like a blade. Headlights carve twin paths into the void ahead, engine humming with restrained power.

🎶
FM Frequencies

The radio crackles with synthesizer arpeggios and pulsing basslines. Every station is a portal to a world that never was, a future that never came.

Variant: Neon Border

Grid Runner

The perspective grid stretches infinitely beneath your wheels. Each line pulses with electric blue, mapping the geometry of speed.

Variant: Sunset Gradient

Golden Hour

That fleeting moment when the sky is on fire and the world looks like it was painted by a machine dreaming of paradise.

Variant: Chrome

Mirror Finish

Polished to perfection, every surface reflects the neon spectacle. Chrome is the material of the future -- cold, brilliant, unyielding.

Data Table

Night Race Leaderboard

Rank Driver Vehicle Top Speed Status
01 Nighthawk Testarossa MK-VII 342 km/h Active
02 Chrome Viper Countach Spectra 328 km/h Active
03 Solar Flare Delorean Omega 315 km/h Pit Stop
04 Phantom Diablo Neon 309 km/h Active
05 Voltage Corvette Pulse 298 km/h Retired
06 Dusk Runner Supra Horizon 291 km/h Active

Badges & Tags

Outlined

Turbo Electric Nitro Overdrive Chrome

Filled

New Featured V2.0

Alerts

System Online

All navigation systems are operational. Autopilot engaged on the coastal highway. Estimated arrival: sunset.

Mission Complete

Night run finished successfully. New personal best recorded. Replay saved to onboard memory.

Caution Advised

Approaching restricted zone. Reduce speed and disable turbo boost. Radar activity detected ahead.

Critical Warning

Engine temperature exceeding safe limits. Immediate cooldown recommended. Pull over at next neon station.

Design Principles

01
Dramatic Warmth

Lead with the sunset palette. Every composition should feel like it is backlit by a horizon on fire -- warm oranges and pinks transitioning to cool violets and deep blues. The warmth is earnest, never ironic.

02
Chrome Precision

Metallic text and reflective surfaces convey the polished, high-performance feel of the aesthetic. Chrome is used for emphasis and hierarchy, catching light the way a sports car catches the eye.

03
Vanishing Point

Perspective and depth are essential. The grid road, the converging lines, the sense of speed and distance -- every layout should pull the eye toward a focal point on the horizon.

04
Cinematic Scale

Think movie poster, not UI mockup. Big type, bold gradients, generous whitespace. The synthwave aesthetic is about grandeur and atmosphere, not about cramming in content.

05
Restrained Glow

Neon effects are supporting actors, not the lead. Use glow sparingly to accent interactive elements and key focal points. Overuse dilutes the drama and strains the eye.

06
Forward Motion

The aesthetic is about movement -- driving, flying, racing toward something. Animations should be smooth and directional. Static compositions should still imply velocity and purpose.