Synthwave / Outrun UI design style
Dark horizons, neon grids, magenta-cyan light, sports cars, chrome lettering, and cinematic 1980s night-drive energy.
Design overview
- Signature elements
- neon horizon, magenta-cyan palette, wireframe grid, chrome lettering, sports-car silhouettes, night-drive glow. In daisyUI themes, set `--depth: 1;`.
- Best suited to
- Games, music, automotive, nightlife, streaming, and entertainment products.
- Layout principles
- Build a cinematic composition around a low neon horizon, deep perspective grid, and cockpit-like foreground, keeping actions near stable screen edges.
History and origins
A fact-checked account of where this visual language came from, with links to the references used.
- Period
- Mid-2000s–present
- Origin
- Online electronic-music scenes, especially French electro and international independent producers
Synthwave is not an original 1980s genre but a later internet-era reconstruction of 1980s film scores, games, television, and electronic music. It developed in the mid-to-late 2000s, while “Outrun”—named after Sega’s 1986 driving game—became associated with the car-centered neon-sunset branch and then with the genre’s wider visual shorthand.
Moodboard and visual references
A visual study of the forms, inspirations, materials, colors, type, and cultural references associated with this UI design style.
![Synthwave / Outrun aesthetic - Sunset fuel and driveway dreams. Retro heart, neon skies 🌅🚗✨ . created on @tensor.art . . Model used [Flux] with [RandomMaxx Animefy] LoRA . . #stablediffusion #stablediffusionart #nature #night #nightsky #lonley #illustration #instagram #aiart #artist #ai #anime #retrowave #beautiful #synthwave #backgroundart #animeart #animewallpaper #backgroundart #instagram #tensorart](../../moodboards/synthwave-outrun/01-synthwave-outrun.avif)
![Synthwave / Outrun aesthetic - “Racing through the 80s that never ended 🌙🔮” . created on @tensor.art . . Model used [Flux] with [RandomMaxx Animefy] LoRA . . #stablediffusion #stablediffusionart #nature #night #nightsky #lonley #illustration #instagram #aiart #artist #ai #anime #retrowave #beautiful #synthwave #backgroundart #animeart #animewallpaper #depthflow #backgroundart #instagram #tensorart](../../moodboards/synthwave-outrun/02-synthwave-outrun.avif)
Design principles and implementation
Use these principles to write a focused AI UI design prompt instead of asking for a vague visual treatment.
Color direction
Use midnight navy and black with electric magenta, cyan, violet, and sunset orange, adding chrome white for sharp highlights. In a daisyUI theme, use electric magenta for `primary`, cyan for `secondary`, and assign midnight navy, near-black blue, and black to `base-100`, `base-200`, and `base-300`.
Imagery direction
Choose sports cars, neon skylines, setting suns, palm silhouettes, wireframe mountains, chrome logos, and night-road photography.
Content density
Keep density low to medium, favoring one strong title, media control, or route at a time over crowded data panels.
Motion direction
Move the grid toward the viewer, pulse neon, scan the sun, and glide vehicles or light trails with steady night-drive momentum.
Shape language
Use triangles, horizon lines, wireframe planes, chrome capsules, sun discs, and aerodynamic slashes with strong perspective. In daisyUI themes, set the `--radius-*` variables between `0.25rem` and `1rem`.
Typography rules
Use italic techno or chrome display lettering for titles, paired with a clean condensed sans or mono for controls and track information.
Suggested Typfaces
Orbitron
Fresh daisies glow in warm sunlight
Fresh daisies glow in warm sunlight
1 2 3 4 5 6 7 8 9 0
Audiowide
Fresh daisies glow in warm sunlight
Fresh daisies glow in warm sunlight
1 2 3 4 5 6 7 8 9 0
Monoton
Fresh daisies glow in warm sunlight
Fresh daisies glow in warm sunlight
1 2 3 4 5 6 7 8 9 0
Russo One
Fresh daisies glow in warm sunlight
Fresh daisies glow in warm sunlight
1 2 3 4 5 6 7 8 9 0
Bruno Ace SC
Fresh daisies glow in warm sunlight
Fresh daisies glow in warm sunlight
1 2 3 4 5 6 7 8 9 0
Build a Synthwave / Outrun interface with daisyUI
The live example translates this direction into daisyUI components and semantic theme tokens.
To generate a full page in the same visual language, give the style name and the design rules above to Blueprint MCP.
Related UI design styles
Compare nearby visual languages that share typography, shapes, use cases, or signature elements.
Chrome / Liquid Metal UI design style
Mirror-like metallic surfaces, molten forms, sharp reflections, and high-contrast specular lighting.
Cybercore UI design style
A 2020s nostalgic remix of late-1990s and early-2000s digital culture combines saturated blue and silver with retro anime, obsolete devices, legacy software, and ethereal celestial symbolism.
Vaporwave UI design style
Pastel neon, digital sunsets, classical sculpture, grids, obsolete consumer imagery, and surreal 1980s–1990s nostalgia.