Retrosystem
Cassette Tape
This prompt produces genuinely distinct output
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.
analogaudiocassettelo fiwarm
Added February 16, 2026 by unslop.dev
Example output
Tape player card
Now Playing
Live
Side B — Evening Mix
Recorded Feb 14, 2026 · C-90
27:14
View code
<div style="padding: 2rem; background: #f5f0e6;">
<div style="max-width: 26rem; background: #2a2018; border-radius: 6px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(42,32,24,0.2), inset 0 1px 0 rgba(255,255,255,0.05);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(245,240,230,0.4);">Now Playing</span>
<div style="display: flex; align-items: center; gap: 0.375rem;">
<span style="width: 6px; height: 6px; border-radius: 50%; background: #d48030; box-shadow: 0 0 4px rgba(212,128,48,0.4);"></span>
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #d48030;">Live</span>
</div>
</div>
<div style="background: #3d3228; border-radius: 4px; padding: 1rem; margin-bottom: 1rem;">
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 700; color: #f5f0e6; margin: 0; letter-spacing: 0.02em;">Side B — Evening Mix</p>
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; color: rgba(245,240,230,0.5); margin: 0.25rem 0 0 0;">Recorded Feb 14, 2026 · C-90</p>
</div>
<div style="display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem;">
<div style="flex: 1; height: 4px; background: #3d3228; border-radius: 2px; overflow: hidden;">
<div style="width: 62%; height: 100%; background: linear-gradient(90deg, #708060 0%, #708060 60%, #d48030 60%, #d48030 80%, #a04030 80%); border-radius: 2px;"></div>
</div>
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.625rem; color: rgba(245,240,230,0.4); flex-shrink: 0;">27:14</span>
</div>
<div style="display: flex; justify-content: center; gap: 0.75rem; align-items: center;">
<button style="background: #3d3228; color: rgba(245,240,230,0.6); border: none; width: 32px; height: 32px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">⏮</button>
<button style="background: #d48030; color: #2a2018; border: none; width: 40px; height: 40px; border-radius: 6px; font-size: 1rem; cursor: pointer; box-shadow: 0 2px 4px rgba(212,128,48,0.3);">▶</button>
<button style="background: #3d3228; color: rgba(245,240,230,0.6); border: none; width: 32px; height: 32px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">⏭</button>
</div>
</div>
</div>Equipment button strip
View code
<div style="padding: 2rem; background: #2a2018; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;"> <button style="background: #d48030; color: #2a2018; border: none; border-radius: 4px; padding: 0.5rem 1.25rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);">▶ Play</button> <button style="background: #a04030; color: #f5f0e6; border: none; border-radius: 4px; padding: 0.5rem 1.25rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);">⏺ Rec</button> <button style="background: #3d3228; color: rgba(245,240,230,0.6); border: none; border-radius: 4px; padding: 0.5rem 1.25rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);">⏹ Stop</button> <button style="background: #3d3228; color: rgba(245,240,230,0.25); border: none; border-radius: 4px; padding: 0.5rem 1.25rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: not-allowed; opacity: 0.4;">⏏ Eject</button> </div>
Mixtape tracklist
⏺ Mixtape
Late Night Drive
01
Slow Fade
3:42
▶
Amber Light
4:18
03
Highway Hymn
5:01
04
Last Exit
3:55
4 tracks
16:56 total
View code
<div style="padding: 2rem; background: #f5f0e6;">
<div style="max-width: 26rem; background: #faf5ea; border: 1px solid #c8b898; border-radius: 4px; padding: 0;">
<div style="padding: 1rem 1.25rem; border-bottom: 1px solid #c8b898; display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #d48030; margin: 0 0 0.25rem 0;">⏺ Mixtape</p>
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 700; color: #2a2018; margin: 0;">Late Night Drive</p>
</div>
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.625rem; color: #9a8878;">C-60</span>
</div>
<div style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8125rem;">
<div style="display: flex; align-items: center; padding: 0.625rem 1.25rem; border-bottom: 1px solid rgba(200,184,152,0.4); gap: 0.75rem;">
<span style="font-size: 0.6875rem; color: #d48030; flex-shrink: 0; width: 1.5rem; text-align: right;">01</span>
<span style="color: #2a2018; flex: 1;">Slow Fade</span>
<span style="font-size: 0.6875rem; color: #9a8878;">3:42</span>
</div>
<div style="display: flex; align-items: center; padding: 0.625rem 1.25rem; border-bottom: 1px solid rgba(200,184,152,0.4); gap: 0.75rem; background: rgba(212,128,48,0.06);">
<span style="font-size: 0.6875rem; color: #d48030; flex-shrink: 0; width: 1.5rem; text-align: right;">▶</span>
<span style="color: #d48030; flex: 1; font-weight: 600;">Amber Light</span>
<span style="font-size: 0.6875rem; color: #d48030;">4:18</span>
</div>
<div style="display: flex; align-items: center; padding: 0.625rem 1.25rem; border-bottom: 1px solid rgba(200,184,152,0.4); gap: 0.75rem;">
<span style="font-size: 0.6875rem; color: #9a8878; flex-shrink: 0; width: 1.5rem; text-align: right;">03</span>
<span style="color: #2a2018; flex: 1;">Highway Hymn</span>
<span style="font-size: 0.6875rem; color: #9a8878;">5:01</span>
</div>
<div style="display: flex; align-items: center; padding: 0.625rem 1.25rem; gap: 0.75rem;">
<span style="font-size: 0.6875rem; color: #9a8878; flex-shrink: 0; width: 1.5rem; text-align: right;">04</span>
<span style="color: #2a2018; flex: 1;">Last Exit</span>
<span style="font-size: 0.6875rem; color: #9a8878;">3:55</span>
</div>
</div>
<div style="padding: 0.625rem 1.25rem; border-top: 1px solid #c8b898; display: flex; justify-content: space-between;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #9a8878;">4 tracks</span>
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #9a8878;">16:56 total</span>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a cassette tape / analog audio aesthetic — the warm, tactile visual language of vintage audio equipment, mixtape culture, and lo-fi music production. Muted oranges and warm browns on off-white, VU meter styling, tape label typography, reel-to-reel references, and the comfortable patina of well-used analog gear. Interfaces that sound warm just by looking at them. VISUAL RULES: - Background: Warm off-white (#f5f0e6) like aged paper, or warm cream (#faf5ea). Equipment panels in warm dark (#2a2018) or medium brown (#3d3228). - Primary: Muted orange (#d48030). The color of VU meter needles, warm indicator lights, and vintage Ampex tape. Not bright — warm and saturated. - Secondary: Warm red-brown (#a04030) for accents, recording indicators, and active states. "REC" button energy. - Tertiary: Sage green (#708060) for passive states, completed indicators, and subtle accents. - Text: Dark warm brown (#2a2018) on light backgrounds, cream (#f5f0e6) on dark. Never cool or blue. - Typography: Industrial sans-serif for labels: `font-family: 'Helvetica Neue', 'Arial', 'DIN', sans-serif`. Headings bold/condensed, uppercase. Body in a clean serif or the same sans. Small text feels like equipment labeling — tiny, uppercase, wide-tracked. - Borders: 1px solid warm tones (#c8b898 on light, rgba(245,240,230,0.2) on dark). Subtle and warm. - Border radius: 4-6px on buttons and cards (like the rounded corners of equipment). 9999px on indicator dots/badges. - Spacing: Compact and functional like an equipment panel. Tight grids. Labels close to their values. - Decorative: VU meter bars, tape reel circles, REC/PLAY/STOP symbols (⏺ ▶ ⏹), level indicators, dotted lines for tape paths. SPECIFIC PATTERNS: - Cards: Warm dark bg like equipment face (#2a2018 to #3d3228). Inset panels with lighter warm bg. Equipment-panel feel. - Buttons: Rounded rectangle, warm colors. Inset/recessed look with subtle inner shadow. Like physical buttons on a tape deck. - Level meters: Horizontal bar indicators. Green → orange → red progression. Segmented (not smooth gradient). - Labels: UPPERCASE, tiny (10-11px), wide letter-spacing (0.15em+). Like silk-screened equipment text. - Status indicators: Small circles (6-8px). Orange = active/recording, green = ready, red-brown = stopped/error. - Dividers: Thin warm lines with small notches or tick marks. ANTI-PATTERNS: - No cool colors (no blue, purple, cyan). - No neon or electric brightness. Everything is warm and muted. - No sharp corners on interactive elements. Keep it slightly rounded. - No dark mode with blue undertones. Dark surfaces are warm brown, not gray. - No glass or transparency effects. Equipment is opaque. - No serif headings. Keep it industrial sans.
Related prompts
*
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.
Retro
Skeuomorphism
system
Generates UI with rich real-world textures — leather stitching, brushed metal, wood grain, linen backgrounds, and glossy glass buttons. iOS 6 energy. Every pixel pretends to be a physical material.
🏛
N E W A R R I V A L
PARADISE
楽園
A curated collection for dreamers navigating the corridors of eternal now.
Retro
Vaporwave Mall
system
Generates UI from a dead mall fever dream — pastel pinks and teals, Roman busts, faux-marble textures, Japanese text fragments, and the melancholy beauty of abandoned consumer paradise. A E S T H E T I C.