Retrosystem
Synthwave Sunset
This prompt produces genuinely distinct output
Generates UI bathed in 1980s synth aesthetics — hot pink to purple gradients, neon grid lines, chrome text effects, sunset palettes, and the retro-futuristic glow of an endless highway at dusk.
80sneongradientsretro futuristic
Added February 7, 2026 by unslop.dev
Example output
Neon hero section
View code
<div style="padding: 3rem; background: linear-gradient(180deg, #0a0010, #1a0030, #2d1050); position: relative; overflow: hidden;">
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: repeating-linear-gradient(90deg, rgba(255,45,149,0.05) 0px, transparent 1px, transparent 60px), repeating-linear-gradient(0deg, rgba(255,45,149,0.05) 0px, transparent 1px, transparent 60px); transform: perspective(200px) rotateX(40deg); transform-origin: bottom;"></div>
<div style="position: relative; z-index: 1; text-align: center; max-width: 28rem; margin: 0 auto;">
<div style="font-family: 'Courier New', monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.3em; color: #00e5ff; margin-bottom: 1rem;">ESTABLISHED · 1984</div>
<h1 style="font-family: 'Arial Black', 'Impact', sans-serif; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.75rem 0; line-height: 1; color: #fff; text-shadow: 0 0 20px rgba(255,45,149,0.5), 0 0 40px rgba(255,45,149,0.3), 0 0 80px rgba(177,74,237,0.2);">NIGHT<br>DRIVE</h1>
<p style="font-family: 'Helvetica', sans-serif; font-size: 0.9375rem; color: #d8b4fe; line-height: 1.6; margin: 0 0 2rem 0;">An endless highway stretching into the neon horizon. No destination. Just the road, the music, and the glow.</p>
<button style="background: linear-gradient(135deg, #ff2d95, #b14aed); color: white; border: none; border-radius: 4px; padding: 0.75rem 2.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; box-shadow: 0 0 20px rgba(255,45,149,0.3), 0 4px 15px rgba(177,74,237,0.3);">Enter the Grid</button>
</div>
</div>Stats with neon borders
Speed
188 mph
Distance
4,720 mi
Score
98.7k
View code
<div style="padding: 2rem; background: #0a0010;">
<div style="display: flex; gap: 0.75rem; max-width: 32rem;">
<div style="flex: 1; background: rgba(26,0,48,0.6); border: 1px solid rgba(255,45,149,0.3); border-radius: 6px; padding: 1.25rem; box-shadow: 0 0 15px rgba(255,45,149,0.08), inset 0 0 15px rgba(255,45,149,0.03);">
<div style="font-family: 'Courier New', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #ff2d95; margin-bottom: 0.5rem;">Speed</div>
<div style="font-family: 'Arial Black', sans-serif; font-size: 1.75rem; font-weight: 900; color: white; text-shadow: 0 0 10px rgba(255,45,149,0.4);">188<span style="font-size: 0.875rem; color: #d8b4fe;"> mph</span></div>
</div>
<div style="flex: 1; background: rgba(26,0,48,0.6); border: 1px solid rgba(177,74,237,0.3); border-radius: 6px; padding: 1.25rem; box-shadow: 0 0 15px rgba(177,74,237,0.08), inset 0 0 15px rgba(177,74,237,0.03);">
<div style="font-family: 'Courier New', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #b14aed; margin-bottom: 0.5rem;">Distance</div>
<div style="font-family: 'Arial Black', sans-serif; font-size: 1.75rem; font-weight: 900; color: white; text-shadow: 0 0 10px rgba(177,74,237,0.4);">4,720<span style="font-size: 0.875rem; color: #d8b4fe;"> mi</span></div>
</div>
<div style="flex: 1; background: rgba(26,0,48,0.6); border: 1px solid rgba(0,229,255,0.3); border-radius: 6px; padding: 1.25rem; box-shadow: 0 0 15px rgba(0,229,255,0.08), inset 0 0 15px rgba(0,229,255,0.03);">
<div style="font-family: 'Courier New', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #00e5ff; margin-bottom: 0.5rem;">Score</div>
<div style="font-family: 'Arial Black', sans-serif; font-size: 1.75rem; font-weight: 900; color: white; text-shadow: 0 0 10px rgba(0,229,255,0.4);">98.7<span style="font-size: 0.875rem; color: #d8b4fe;">k</span></div>
</div>
</div>
</div>Track listing
View code
<div style="padding: 2rem; background: #0a0010; font-family: 'Helvetica', sans-serif;">
<div style="max-width: 24rem; border: 1px solid rgba(255,45,149,0.2); border-radius: 6px; overflow: hidden; box-shadow: 0 0 20px rgba(255,45,149,0.05);">
<div style="background: linear-gradient(135deg, rgba(255,45,149,0.15), rgba(177,74,237,0.15)); padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,45,149,0.15);">
<span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #ff2d95; font-weight: 700;">Now Playing</span>
</div>
<div style="padding: 0.625rem 1rem; border-bottom: 1px solid rgba(255,45,149,0.08); display: flex; justify-content: space-between; align-items: center; background: rgba(255,45,149,0.05);">
<div>
<span style="font-size: 0.8125rem; color: #ffffff; font-weight: 600;">Midnight City</span>
<span style="font-size: 0.75rem; color: #d8b4fe; margin-left: 0.5rem;">M83</span>
</div>
<span style="font-size: 0.6875rem; color: #ff2d95;">▶ 3:42</span>
</div>
<div style="padding: 0.625rem 1rem; border-bottom: 1px solid rgba(255,45,149,0.08); display: flex; justify-content: space-between; align-items: center;">
<div>
<span style="font-size: 0.8125rem; color: #d8b4fe; font-weight: 500;">Nightcall</span>
<span style="font-size: 0.75rem; color: #9b7ec8; margin-left: 0.5rem;">Kavinsky</span>
</div>
<span style="font-size: 0.6875rem; color: #9b7ec8;">4:17</span>
</div>
<div style="padding: 0.625rem 1rem; display: flex; justify-content: space-between; align-items: center;">
<div>
<span style="font-size: 0.8125rem; color: #d8b4fe; font-weight: 500;">A Real Hero</span>
<span style="font-size: 0.75rem; color: #9b7ec8; margin-left: 0.5rem;">College</span>
</div>
<span style="font-size: 0.6875rem; color: #9b7ec8;">4:25</span>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a synthwave/retrowave style — the visual language of 1980s synth music, VHS aesthetics, and retro-futurism. Hot pink and purple gradients, neon grid lines, chrome effects, and the warm glow of a perpetual sunset. Think: an outrun game, a Kavinsky album cover, or a Miami Vice title card turned into a web app. VISUAL RULES: - Background: Dark with sunset gradient undertones. Base: #0a0010 (deep purple-black). Key gradients: `background: linear-gradient(180deg, #0a0010 0%, #1a0030 30%, #2d1050 60%, #4a1060 80%, #6b1070 100%)` for the sunset feel. Or use radial gradients simulating a setting sun. - Primary: Hot pink (#ff2d95). This is THE synthwave color. Used for borders, text highlights, CTAs. - Secondary: Electric purple (#b14aed). For secondary elements, gradient pairs. - Tertiary: Cyan (#00e5ff) for contrast accents, links, tertiary elements. - Warm: Sunset orange (#ff6b35) and gold (#ffb800) for warm gradient elements. - Text: White (#ffffff) for headings. Light pink (#ffd6e8) for body on dark. Light purple (#d8b4fe) for secondary. - Typography: `font-family: 'Orbitron', 'Rajdhani', 'Audiowide', sans-serif` for headings — geometric, futuristic. Sans-serif for body. Headings: uppercase, letter-spacing: 0.1-0.2em. Chrome/gradient text for hero elements. - Grid lines: Thin perspective grid lines (using repeating-linear-gradient) in pink or purple at low opacity. The vanishing-point grid floor is iconic synthwave. - Borders: Neon glow borders. `border: 1px solid rgba(255,45,149,0.5)` with `box-shadow: 0 0 10px rgba(255,45,149,0.3), inset 0 0 10px rgba(255,45,149,0.1)`. - Border radius: Small to medium. 4-8px. Nothing too rounded — keep it angular like 80s tech. SPECIFIC PATTERNS: - Panels: Dark bg with subtle gradient, neon pink border + glow. Content over the gradient. - Chrome text: `background: linear-gradient(180deg, #ffffff, #d8d8d8, #ffffff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent`. For premium headings. - Gradient fills: Pink→purple buttons and highlights. `background: linear-gradient(135deg, #ff2d95, #b14aed)`. - Neon outlines: Text with text-shadow glow: `text-shadow: 0 0 10px rgba(255,45,149,0.5), 0 0 20px rgba(255,45,149,0.3)`. - Sun element: Horizontal-striped circle (using repeating-linear-gradient on a border-radius: 50% div) as decorative element. ANTI-PATTERNS: - No cool, muted colors. Everything is vivid and electric. - No serif fonts. Nothing literary or editorial. - No flat, shadowless elements. The glow IS the design. - No white or light backgrounds. Dark canvas required. - No earth tones. No brown, beige, olive. This is neon and chrome. - No subtle, restrained aesthetics. Synthwave is maximalist.
Related prompts
// system metrics
cpu load
23.4%
memory
8.2 / 16 GB
disk i/o
94.1%
> uptime: 14d 6h 32m
node-07
Retro
Cyberpunk Neon
system
Generates UI drenched in neon glow — cyan, magenta, and violet on near-black surfaces. Glowing borders, scan-line textures, HUD-style overlays. Blade Runner meets Bloomberg Terminal.
Now Playing
Live
Side B — Evening Mix
Recorded Feb 14, 2026 · C-90
27:14
Retro
Cassette Tape
system
Generates UI with analog audio warmth — muted oranges and browns, VU meter aesthetics, tape reel decorations, and the cozy lo-fi quality of a well-loved mixtape. Press play on your interface.
*
Lecture 12 — Data Structures
A binary search tree maintains sorted order through its structure. For any node n, all values in the left subtree are < n and all values in the right subtree are > n.
→ see also: AVL trees, Red-Black trees
Retro
Chalk Blackboard
system
Generates UI that feels hand-drawn on a dusty blackboard — chalky white text on dark slate green, imperfect lines, mathematical notation vibes, and the nostalgic warmth of a classroom after hours.