Retro-Futurism
Also called: Outrun, Synthwave UI, 80s Sci-Fi, Retrowave
The future as the 80s imagined it: chrome lettering, a striped sunset over a neon grid, and glowing outline panels on a midnight sky.
Design keywords
Say these words to ask for this style.
Retro-Futurism borrows the optimism of 80s sci-fi posters, arcade cabinets and album covers. A midnight-indigo sky fades into a magenta horizon with a striped sun, and a cyan perspective grid runs to infinity. Headlines are wide space-age caps filled with a chrome gradient (sky above, metal below, a hard horizon line through the middle). Panels are dark with thin neon outlines that glow; buttons are sunset-gradient capsules. It is cinematic and heroic rather than gritty.
Best for
- Game launches, esports and arcade events
- Music, synthwave and nightlife promos
- Hackathons and tech conference microsites
- Retro product drops and limited editions
Avoid for
- Banking, insurance and healthcare
- Long-form reading and documentation
- Data-dense enterprise tools
- Light-mode or print-first brands
✓ Do
- Run the cyan grid only below a horizon line, never behind body text
- Use the chrome gradient on display type only — one hero line per view
- Keep panels near-opaque (≥ 85%) so neon outlines stay crisp and text readable
- Pair one warm sunset gradient (orange → magenta) with one cool neon (cyan)
✕ Don't
- Don’t use chamfered corners or glitch effects — that is cyberpunk
- Don’t put chrome or glow on small text
- Don’t add a light mode; the night sky is the canvas
- Don’t use more than two glow colours per component
Not to be confused with
On mobile
Keep the night sky and a low horizon grid behind the screen, but drop glow blur to one layer (≤ 12px) for performance. The floating tab bar becomes a neon capsule; the featured card carries the sunset gradient and the chrome title.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.