Synthwave Grid
A neon grid running to a striped sunset: 1984 as remembered by a synthesizer.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
Deep violet night, a magenta-to-gold sunset sliced by horizontal bars and a cyan grid racing to the horizon. Wide techno capitals glow with neon text-shadow, scanlines hum underneath. Pure nostalgia for a future that only existed on VHS covers.
Synthwave Grid is a love letter to 1980s retro-futurism as seen through VHS covers, arcade attract screens and the neon-noir film posters of the era, filtered through the 2010s synthwave revival. A deep violet sky, a striped magenta-to-gold sunset, a cyan wireframe grid running to the horizon and neon type with glowing edges define it. Everything glows, but only slightly: the effect is a tube light at night, not a firework. Scanlines and a touch of chromatic aberration keep it lo-fi. It should feel nocturnal, cinematic and wistful.
Principles
- Darkness first: neon only reads against deep violet.
- Glow is a text-shadow, not a blur; keep it tight and layered.
- The sunset gradient is for one hero moment and the primary button.
- Cyan draws lines and grids; magenta draws actions.
- Wide uppercase display, light body: contrast of attitude.
Motion
The perspective grid scrolls toward the viewer in an endless 4-second loop while the sun's bars slowly drift upward. Headlines flicker on like a neon tube: two quick blinks, then full glow.
Do & don't
Do
- ✓ Layer two text-shadows on h1: magenta 0 0 12px and cyan 2px 2px 0.
- ✓ Keep scanlines at 4–6% opacity.
- ✓ Use version numbers and model codes in VT323.
Don't
- ✕ Don't use light mode.
- ✕ Don't stack more than two glows on one element.
- ✕ Don't use photography.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 371 lines of DESIGN.md in total.
More like this
All Neo-Retro →
Y2K Chrome
No. 038Liquid chrome, bubble shapes and frosted-blue gadgets from the year 2000.
Atomic Modern
No. 058Teal, mustard and teak with starbursts and boomerangs: 1956 at its most optimistic.
Beige Desktop
No. 059Bevelled grey windows, navy title bars and a pixel font: the 90s desktop as a website.
Checker Diner
No. 060Cherry red, cream vinyl and a checkerboard floor: a roadside diner menu, open late.
Gilded Deco
No. 061Black lacquer, gold leaf and sunburst geometry from a 1920s grand hotel lobby.
Pixel Arcade
No. 0628-bit type, stepped pixel borders and coin-yellow buttons. Insert coin to continue.