Retrosystem
Y2K Glossy
This prompt produces genuinely distinct output
Generates UI soaked in early-2000s internet optimism ā chrome reflections, bubbly shapes, iridescent gradients, and that unmistakable glossy plastic sheen. Paris Hilton's Sidekick as a design system.
chromeiridescentbubbly2000sglossy
Added February 16, 2026 by unslop.dev
Example output
Glossy card
View code
<div style="padding: 2rem; background: linear-gradient(180deg, #e8edf4 0%, #dde4f0 100%); min-height: 200px;">
<div style="max-width: 22rem; background: linear-gradient(180deg, #ffffff 0%, #f0f2f8 100%); border-radius: 20px; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9); padding: 1.5rem; overflow: hidden;">
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
<div style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ff66b2 0%, #ff3399 50%, #cc0088 100%); box-shadow: 0 2px 8px rgba(255,51,153,0.3), inset 0 1px 0 rgba(255,255,255,0.3);"></div>
<div>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.9375rem; font-weight: 700; color: #2a3050; margin: 0;">My Profile</p>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.75rem; color: #808aaa; margin: 0;">Online now ā¦</p>
</div>
</div>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; color: #606880; line-height: 1.6; margin: 0 0 1.25rem 0;">Welcome to my page! Check out my latest photos and leave a comment on my guestbook ā§</p>
<div style="display: flex; gap: 0.5rem;">
<button style="background: linear-gradient(180deg, #ff66b2 0%, #ff3399 100%); color: white; border: none; border-radius: 9999px; padding: 0.5rem 1.25rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(255,51,153,0.3), inset 0 1px 0 rgba(255,255,255,0.3);">Add Friend</button>
<button style="background: linear-gradient(180deg, #ffffff 0%, #e8ecf2 100%); color: #606880; border: 1px solid #c8cee0; border-radius: 9999px; padding: 0.5rem 1.25rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);">Message</button>
</div>
</div>
</div>Button group with chrome
View code
<div style="padding: 2rem; background: linear-gradient(180deg, #e8edf4 0%, #dde4f0 100%); display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center;"> <button style="background: linear-gradient(180deg, #ff66b2 0%, #ff3399 100%); color: white; border: none; border-radius: 9999px; padding: 0.5rem 1.5rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(255,51,153,0.3), inset 0 1px 0 rgba(255,255,255,0.3);">ā¦ Primary</button> <button style="background: linear-gradient(180deg, #66bbff 0%, #0099ff 100%); color: white; border: none; border-radius: 9999px; padding: 0.5rem 1.5rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0,153,255,0.3), inset 0 1px 0 rgba(255,255,255,0.3);">ā¦ Secondary</button> <button style="background: linear-gradient(180deg, #ffffff 0%, #e0e4ee 100%); color: #606880; border: 1px solid #c0c8d8; border-radius: 9999px; padding: 0.5rem 1.5rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);">Outline</button> <button style="background: linear-gradient(180deg, #e0e0e8 0%, #c8c8d0 100%); color: #9898a8; border: none; border-radius: 9999px; padding: 0.5rem 1.5rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: not-allowed; opacity: 0.6; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);">Disabled</button> </div>
Notification toast
ā
Upload Complete!
Your photos have been added to your album ā§
View code
<div style="padding: 2rem; background: linear-gradient(180deg, #e8edf4 0%, #dde4f0 100%);">
<div style="max-width: 26rem; background: linear-gradient(180deg, #ffffff 0%, #f4f6fc 100%); border-radius: 16px; border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.875rem;">
<div style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #66ee99 0%, #00cc66 100%); box-shadow: 0 2px 8px rgba(0,204,102,0.3), inset 0 1px 0 rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span style="color: white; font-size: 0.875rem; font-weight: 800;">ā</span>
</div>
<div style="flex: 1;">
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.875rem; font-weight: 700; color: #2a3050; margin: 0;">Upload Complete!</p>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.75rem; color: #808aaa; margin: 0.125rem 0 0 0;">Your photos have been added to your album ā§</p>
</div>
<span style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 1rem; color: #c0c8d8; cursor: pointer;">Ć</span>
</div>
</div>Media player widget
Butterfly ā¦
Digital Dreamz ā Vol. 3
1:24
3:42
ā®
ā¶
ā
View code
<div style="padding: 2rem; background: linear-gradient(180deg, #e8edf4 0%, #dde4f0 100%);">
<div style="max-width: 20rem; background: linear-gradient(180deg, #ffffff 0%, #eef0f8 100%); border-radius: 24px; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9); padding: 1.5rem; text-align: center;">
<div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #ff99cc 0%, #ff3399 50%, #9933ff 100%); box-shadow: 0 4px 16px rgba(255,51,153,0.3), inset 0 2px 0 rgba(255,255,255,0.3); margin: 0 auto 1rem auto;"></div>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.9375rem; font-weight: 700; color: #2a3050; margin: 0;">Butterfly ā¦</p>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.75rem; color: #808aaa; margin: 0.25rem 0 1rem 0;">Digital Dreamz ā Vol. 3</p>
<div style="height: 4px; background: linear-gradient(90deg, #e0e4ee 0%, #e0e4ee 100%); border-radius: 9999px; margin-bottom: 0.5rem; overflow: hidden;">
<div style="width: 38%; height: 100%; background: linear-gradient(90deg, #ff3399 0%, #9933ff 100%); border-radius: 9999px;"></div>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
<span style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.625rem; color: #b0b8cc;">1:24</span>
<span style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.625rem; color: #b0b8cc;">3:42</span>
</div>
<div style="display: flex; justify-content: center; align-items: center; gap: 1.25rem;">
<span style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.875rem; color: #808aaa; cursor: pointer;">ā®</span>
<div style="width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #ff66b2 0%, #ff3399 100%); box-shadow: 0 4px 12px rgba(255,51,153,0.3), inset 0 1px 0 rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span style="color: white; font-size: 1rem; margin-left: 2px;">ā¶</span>
</div>
<span style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.875rem; color: #808aaa; cursor: pointer;">ā</span>
</div>
</div>
</div>Signup form
ā¦
Join the Party!
Create your profile in seconds ā§
Already a member? Sign in
View code
<div style="padding: 2rem; background: linear-gradient(180deg, #e8edf4 0%, #dde4f0 100%);">
<div style="max-width: 22rem; background: linear-gradient(180deg, #ffffff 0%, #f0f2f8 100%); border-radius: 20px; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9); padding: 1.75rem;">
<div style="text-align: center; margin-bottom: 1.25rem;">
<span style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 1.5rem;">ā¦</span>
<h2 style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 1.25rem; font-weight: 700; color: #2a3050; margin: 0.5rem 0 0.25rem 0;">Join the Party!</h2>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.75rem; color: #808aaa; margin: 0;">Create your profile in seconds ā§</p>
</div>
<div style="display: flex; flex-direction: column; gap: 0.625rem;">
<input type="text" placeholder="Username" style="border: 1px solid #c8cee0; border-radius: 12px; padding: 0.625rem 1rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; background: white; outline: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);" />
<input type="email" placeholder="Email address" style="border: 1px solid #c8cee0; border-radius: 12px; padding: 0.625rem 1rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; background: white; outline: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);" />
<input type="password" placeholder="Password" style="border: 1px solid #c8cee0; border-radius: 12px; padding: 0.625rem 1rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; background: white; outline: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);" />
<button style="background: linear-gradient(180deg, #ff66b2 0%, #ff3399 100%); color: white; border: none; border-radius: 12px; padding: 0.75rem; font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.875rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(255,51,153,0.3), inset 0 1px 0 rgba(255,255,255,0.3); margin-top: 0.25rem;">ā¦ Create Account</button>
</div>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.6875rem; color: #b0b8cc; text-align: center; margin: 1rem 0 0 0;">Already a member? <span style="color: #0099ff; cursor: pointer;">Sign in</span></p>
</div>
</div>Testimonial card
ā
ā
ā
ā
ā
"OMG this is literally the cutest app ever!! I've told all my friends about it and they love it too! The sparkly animations are sooo adorable ā§"
Jessica T. ā¦
Power User since 2025
View code
<div style="padding: 2rem; background: linear-gradient(180deg, #e8edf4 0%, #dde4f0 100%);">
<div style="max-width: 26rem; background: linear-gradient(180deg, #ffffff 0%, #f4f6fc 100%); border-radius: 20px; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9); padding: 1.5rem;">
<div style="display: flex; gap: 0.25rem; margin-bottom: 0.75rem;">
<span style="color: #ffaa00; font-size: 0.875rem;">ā
</span>
<span style="color: #ffaa00; font-size: 0.875rem;">ā
</span>
<span style="color: #ffaa00; font-size: 0.875rem;">ā
</span>
<span style="color: #ffaa00; font-size: 0.875rem;">ā
</span>
<span style="color: #ffaa00; font-size: 0.875rem;">ā
</span>
</div>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.875rem; color: #4a5070; line-height: 1.6; margin: 0 0 1.25rem 0; font-style: italic;">"OMG this is literally the cutest app ever!! I've told all my friends about it and they love it too! The sparkly animations are sooo adorable ā§"</p>
<div style="display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid #e8ecf4;">
<div style="width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #66bbff 0%, #0099ff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);"></div>
<div>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.8125rem; font-weight: 700; color: #2a3050; margin: 0;">Jessica T. ā¦</p>
<p style="font-family: Trebuchet MS, Verdana, sans-serif; font-size: 0.6875rem; color: #808aaa; margin: 0;">Power User since 2025</p>
</div>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a Y2K glossy style ā the hyper-optimistic, plasticky aesthetic of the early 2000s internet. Think iMac G3, frutiger aero, chrome text effects, bubbly shapes, and surfaces that look like they're made of candy-coated glass. Everything is shiny, rounded, and radiating millennial techno-utopia. VISUAL RULES: - Background: Soft silver-blue (#e8edf4) or gradient from pale lavender (#e8e0f0) to baby blue (#d8eaf8). Light, airy, slightly metallic. - Surfaces: White or very pale blue with a glossy highlight effect. Use a subtle gradient from white to light gray on surfaces to fake the 3D plastic look: `background: linear-gradient(180deg, #ffffff 0%, #e8ecf2 100%)`. - Primary accent: Hot pink (#ff3399) or electric blue (#0099ff). Saturated, confident, fun. - Secondary: Chrome silver (#c0c0c0 to #e8e8e8), iridescent purple-blue shifts. - Text: Dark blue-gray (#2a3050) for headings, medium gray (#606880) for body. Never pure black ā keep it soft. - Typography: Rounded, bubbly sans-serif. `font-family: 'Trebuchet MS', 'Verdana', 'Tahoma', sans-serif`. Headings can be bold and slightly larger. Text should feel friendly and approachable. - Border radius: Large and bubbly. 16px-24px on cards, 12px on buttons, 9999px (full round) on badges/pills. Everything is smooth and rounded. - Borders: 1px solid with slight transparency. Or use a subtle gradient border effect. Chrome/silver colored. - Shadows: Multi-layered for depth. `box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8)`. The inset highlight is KEY for the glossy look. - Glossy effect: Always add `inset 0 1px 0 rgba(255,255,255,0.6)` or a white-to-transparent gradient overlay on interactive elements to simulate the plastic sheen. SPECIFIC PATTERNS: - Cards: White bg with gradient overlay, thick rounded corners (16px+), layered shadow, subtle chrome border. Inner highlight on top edge. - Buttons: Gradient fill (top lighter, bottom darker of same hue). `background: linear-gradient(180deg, #ff66b2 0%, #ff3399 100%)` for primary. Rounded-full. Bold text. Inset top highlight + outer shadow. - Badges: Rounded-full, bright gradient fill, small drop shadow, white text. Pill-shaped. - Inputs: Rounded-xl, inset shadow (recessed look), white bg, silver border. Focus: blue glow ring. - Decorative: Small star/sparkle shapes (ā¦ ā§), iridescent orbs, chrome bars. - Scrollbars/chrome: Silver gradients on UI chrome elements. ANTI-PATTERNS: - No flat design. Everything needs depth, shadow, or gradient. - No sharp corners. Minimum 8px radius on everything. - No dark mode. This aesthetic is light and shiny. - No monospace or serif fonts. Keep it bubbly sans-serif. - No muted earthy colors. No terracotta, olive, or stone. - No brutalist elements ā no thick borders, no solid shadows.
Related prompts
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.
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.