Playfulsystem
Acid Rave
This prompt produces genuinely distinct output
Generates UI pulsing with 90s rave energy — acid green on black, warped typography, smiley faces, repetitive grid patterns, and the frenetic joy of underground dance culture. 303 bassline as a design system.
acidraveneon green90sunderground
Added February 16, 2026 by unslop.dev
Example output
Rave event card
View code
<div style="padding: 2rem; background: #000000;">
<div style="max-width: 24rem; border: 2px solid #39ff14; padding: 0; font-family: Impact, 'Arial Black', sans-serif; overflow: hidden;">
<div style="background: #39ff14; padding: 0.375rem 1rem; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 0.75rem; color: #000; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em;">☺ Live Now</span>
<span style="font-size: 0.75rem; color: #000; font-weight: 900;">03:47 AM</span>
</div>
<div style="padding: 1.25rem;">
<h3 style="font-size: 2rem; font-weight: 900; text-transform: uppercase; color: #39ff14; margin: 0; line-height: 0.95; letter-spacing: -0.02em;">Warehouse<br>Sessions<br>Vol. 14</h3>
<p style="font-size: 0.75rem; color: #ccff00; margin: 0.75rem 0; text-transform: uppercase; letter-spacing: 0.1em;">>> Acid House >> Techno >> Breaks</p>
<div style="border-top: 1px solid rgba(57,255,20,0.3); padding-top: 0.75rem; margin-top: 0.75rem; display: flex; gap: 0.5rem;">
<button style="background: #39ff14; color: #000; border: none; padding: 0.5rem 1.25rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; cursor: pointer; letter-spacing: 0.08em;">Enter</button>
<button style="background: transparent; color: #39ff14; border: 2px solid #39ff14; padding: 0.5rem 1.25rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; cursor: pointer; letter-spacing: 0.08em;">Info</button>
</div>
</div>
</div>
</div>Acid button strip
View code
<div style="padding: 2rem; background: #000; font-family: Impact, 'Arial Black', sans-serif; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;"> <button style="background: #39ff14; color: #000; border: none; padding: 0.5rem 1.5rem; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; font-family: inherit;">☺ Go</button> <button style="background: #ccff00; color: #000; border: none; padding: 0.5rem 1.5rem; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; font-family: inherit;">Next >></button> <button style="background: transparent; color: #39ff14; border: 2px solid #39ff14; padding: 0.5rem 1.5rem; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; font-family: inherit;">Outline</button> <button style="background: transparent; color: #333; border: 2px solid #333; padding: 0.5rem 1.5rem; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; cursor: not-allowed; font-family: inherit;">Offline</button> </div>
BPM monitor
â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â–
138
BPM
4/4
Time
A3
Key
â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â–
View code
<div style="padding: 2rem; background: #000; font-family: Impact, 'Arial Black', sans-serif;">
<div style="max-width: 30rem;">
<p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #39ff14; margin: 0 0 0.75rem 0;">â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– </p>
<div style="display: flex; gap: 0;">
<div style="flex: 1; border: 2px solid #39ff14; padding: 1rem; text-align: center;">
<p style="font-size: 3rem; font-weight: 900; color: #39ff14; margin: 0; line-height: 1;">138</p>
<p style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #ccff00; margin: 0.25rem 0 0 0;">BPM</p>
</div>
<div style="flex: 1; border: 2px solid #39ff14; border-left: none; padding: 1rem; text-align: center;">
<p style="font-size: 3rem; font-weight: 900; color: #ccff00; margin: 0; line-height: 1;">4/4</p>
<p style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #ccff00; margin: 0.25rem 0 0 0;">Time</p>
</div>
<div style="flex: 1; border: 2px solid #39ff14; border-left: none; padding: 1rem; text-align: center;">
<p style="font-size: 3rem; font-weight: 900; color: #fff; margin: 0; line-height: 1;">A3</p>
<p style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #ccff00; margin: 0.25rem 0 0 0;">Key</p>
</div>
</div>
<p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #39ff14; margin: 0.75rem 0 0 0;">â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– </p>
</div>
</div>Lineup poster
View code
<div style="padding: 2rem; background: #000; font-family: Impact, 'Arial Black', sans-serif;">
<div style="max-width: 28rem; border: 2px solid #39ff14; padding: 0; overflow: hidden;">
<div style="background: #39ff14; padding: 0.5rem 1rem; text-align: center;">
<span style="font-size: 1.75rem; font-weight: 900; text-transform: uppercase; color: #000; letter-spacing: 0.03em;">☺ ACID NIGHT ☺</span>
</div>
<div style="padding: 1.25rem;">
<p style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.3em; color: #ccff00; margin: 0 0 1rem 0;">>> >> >> SATURDAY 22 FEB 2026 >> >> >></p>
<div style="margin-bottom: 0.75rem;">
<p style="font-size: 2rem; font-weight: 900; text-transform: uppercase; color: #39ff14; margin: 0; line-height: 1;">DJ Acid Queen</p>
<p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #ccff00; margin: 0.125rem 0 0 0;">23:00 — 01:30 // Main Room</p>
</div>
<div style="margin-bottom: 0.75rem;">
<p style="font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color: #fff; margin: 0; line-height: 1;">Warehouse Kid</p>
<p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #ccff00; margin: 0.125rem 0 0 0;">01:30 — 04:00 // Main Room</p>
</div>
<div style="margin-bottom: 0.75rem;">
<p style="font-size: 1.25rem; font-weight: 900; text-transform: uppercase; color: rgba(57,255,20,0.6); margin: 0; line-height: 1;">303 Collective</p>
<p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(204,255,0,0.5); margin: 0.125rem 0 0 0;">22:00 — 02:00 // Room 2</p>
</div>
<div style="border-top: 2px solid #39ff14; padding-top: 0.875rem; margin-top: 1rem; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 0.75rem; font-weight: 900; text-transform: uppercase; color: #39ff14;">$15 Door</span>
<button style="background: #39ff14; color: #000; border: none; padding: 0.375rem 1.25rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; cursor: pointer;">Get Tickets ☺</button>
</div>
</div>
</div>
</div>RSVP form
☺ Get On The List
View code
<div style="padding: 2rem; background: #000; font-family: Impact, 'Arial Black', sans-serif;">
<div style="max-width: 22rem; border: 2px solid #39ff14;">
<div style="padding: 0.5rem 1rem; border-bottom: 2px solid #39ff14;">
<span style="font-size: 1rem; font-weight: 900; text-transform: uppercase; color: #39ff14; letter-spacing: 0.05em;">☺ Get On The List</span>
</div>
<div style="padding: 1.25rem;">
<div style="margin-bottom: 0.75rem;">
<label style="display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #ccff00; margin-bottom: 0.25rem;">>> Name</label>
<input type="text" placeholder="YOUR NAME" style="width: 100%; box-sizing: border-box; background: #000; border: 2px solid #39ff14; color: #39ff14; padding: 0.5rem 0.75rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.8125rem; text-transform: uppercase; outline: none;" />
</div>
<div style="margin-bottom: 0.75rem;">
<label style="display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #ccff00; margin-bottom: 0.25rem;">>> Email</label>
<input type="email" placeholder="YOUR@EMAIL.COM" style="width: 100%; box-sizing: border-box; background: #000; border: 2px solid #39ff14; color: #39ff14; padding: 0.5rem 0.75rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.8125rem; text-transform: uppercase; outline: none;" />
</div>
<div style="margin-bottom: 1rem;">
<label style="display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #ccff00; margin-bottom: 0.25rem;">>> +1s</label>
<div style="display: flex; gap: 0.5rem;">
<button style="background: #000; border: 2px solid #39ff14; color: #39ff14; width: 2.5rem; height: 2.5rem; font-family: inherit; font-size: 1rem; cursor: pointer;">0</button>
<button style="background: #000; border: 2px solid rgba(57,255,20,0.3); color: rgba(57,255,20,0.3); width: 2.5rem; height: 2.5rem; font-family: inherit; font-size: 1rem; cursor: pointer;">1</button>
<button style="background: #000; border: 2px solid rgba(57,255,20,0.3); color: rgba(57,255,20,0.3); width: 2.5rem; height: 2.5rem; font-family: inherit; font-size: 1rem; cursor: pointer;">2</button>
<button style="background: #000; border: 2px solid rgba(57,255,20,0.3); color: rgba(57,255,20,0.3); width: 2.5rem; height: 2.5rem; font-family: inherit; font-size: 1rem; cursor: pointer;">3</button>
</div>
</div>
<button style="width: 100%; background: #39ff14; color: #000; border: none; padding: 0.625rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 1rem; font-weight: 900; text-transform: uppercase; cursor: pointer; letter-spacing: 0.08em;">☺ Submit ☺</button>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI with an acid rave aesthetic — the visual language of 90s underground dance culture, acid house flyers, and warehouse party posters. Acid green on black, smiley faces, warped and stretched typography, repetitive hypnotic patterns, and raw DIY energy. Interfaces that feel like they were designed at 3am under strobe lights. Maximum energy, zero corporate polish. VISUAL RULES: - Background: Pure black (#000000) or near-black (#0a0a0a). The darkness of a warehouse at night. - Primary color: Acid green (#39ff14) — electric, radioactive, unmissable. THE signature color. Used for text, borders, accents, everything important. - Secondary: Acid yellow (#ccff00) for variation and highlights. - Tertiary: Hot white (#ffffff) for maximum contrast moments. Optional: UV purple (#9933ff) for secondary accents. - Text: Acid green on black for primary. White for secondary. Never gray — this aesthetic is high contrast only. - Typography: Bold, compressed, industrial. `font-family: 'Impact', 'Haettenschweiler', 'Arial Black', sans-serif`. Headings in ALL CAPS, massive size, tight leading. Can be stretched horizontally (`transform: scaleX(1.2)`) or compressed. Text IS the graphic. - Borders: 2px solid acid green. Bold and visible. Double borders for emphasis. - Border radius: 0px for most elements (raw, angular). Exception: 9999px (full circle) for smiley face elements and circular badges. - Spacing: Dense and packed like a rave flyer. Minimal padding, tight gaps. Information overload is part of the aesthetic. - Decorative elements: Smiley faces (☺), asterisks (*), arrows (>>), repeated characters (■■■■), horizontal rules of repeated symbols. - Animation energy: Elements should feel like they want to pulse. Use `border-style` patterns and repeated visual rhythms. SPECIFIC PATTERNS: - Cards: Black bg, 2px acid green border. Content packed in tight. Heading dominates the card. - Buttons: Acid green bg with black text OR black bg with acid green border and text. ALL CAPS. Bold. No subtlety. - Badges: Circular (border-radius: 50%) with acid green or yellow. Smiley face energy. Small and punchy. - Headers: MASSIVE. text-4xl or larger. ALL CAPS. Tight letter-spacing or stretched. Acid green color. - Dividers: Repeated characters: `■■■■■■■■` or `> > > > > > > >` in acid green. - Status indicators: Pulsing green dots. Alive and active. - Labels: ALL CAPS, tiny, acid green, wide letter-spacing. Prefixed with >> or *. ANTI-PATTERNS: - No subtle, muted, or pastel colors. Everything is ELECTRIC. - No serif fonts. Nothing refined or literary. - No rounded corners on cards/containers (circles only for badges/smileys). - No shadows or depth effects. This is flat, raw, graphic. - No light mode. Black backgrounds only. - No corporate polish. No clean whitespace. Pack it in. - No gradient fills. Flat neon color only. - No lowercase headings. CAPS LOCK IS ON.
Related prompts
Features
Everything you need to grow
Simple tools for complex problems. Built for teams of all sizes.
âš¡
Lightning Fast
Deploy in seconds, not hours. Speed is our obsession.
🔒
Secure by Default
Enterprise-grade security without the enterprise headaches.
📊
Smart Analytics
Insights that actually help. No vanity metrics here.
Playful
Corporate Memphis / Alegria
system
Generates UI in the Corporate Memphis / Alegria style — the flat illustration-driven aesthetic of big tech: oversized rounded shapes, muted-but-cheerful pastels, generous whitespace, and the friendly-corporate vibe of every SaaS landing page from 2018-2023.
847
Users
23
Issues
99%
Uptime
Playful
Isometric / Low-Poly 3D
system
Generates UI with isometric perspective and low-poly 3D aesthetics — CSS-transformed parallelograms, 30-degree angles, layered depth planes, faceted geometric shapes, and the charming dimensionality of a game world rendered in HTML.
Playful
Psychedelic 60s
system
Generates UI dripping with 1960s psychedelic poster energy — swirling color combos, organic curves, high-contrast complementary palettes, op-art patterns, and the mind-expanding visuals of the Summer of Love.