Retrosystem
Skeuomorphism
This prompt produces genuinely distinct output
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.
skeuomorphictexturerealisticios63d
Added February 16, 2026 by unslop.dev
Example output
Textured card with leather header
View code
<div style="padding: 2rem; background: #c5c0b6; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px);">
<div style="max-width: 24rem; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);">
<div style="background: linear-gradient(180deg, #5a3a22 0%, #3a2414 100%); padding: 0.875rem 1.25rem; border-bottom: 1px solid #2a1a0a; position: relative;">
<div style="position: absolute; top: 4px; left: 8px; right: 8px; bottom: 4px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 6px; pointer-events: none;"></div>
<h3 style="font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 1rem; font-weight: 600; color: #f0e8d8; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.4);">My Notebook</h3>
</div>
<div style="background: linear-gradient(180deg, #f8f6f0 0%, #f0ece2 100%); padding: 1.25rem;">
<p style="font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 0.8125rem; color: #4a4540; line-height: 1.65; margin: 0 0 1rem 0; text-shadow: 0 1px 0 rgba(255,255,255,0.5);">The most beautiful interfaces are those that feel like they exist in the real world. Texture, light, and shadow create trust through familiarity.</p>
<div style="display: flex; gap: 0.5rem;">
<button style="background: linear-gradient(180deg, #4a8ee6 0%, #2a6ac6 49%, #2460b8 50%, #1a50a0 100%); color: white; border: 1px solid #1a4080; border-radius: 6px; padding: 0.5rem 1.25rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);">Open</button>
<button style="background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 49%, #e0e0e0 50%, #d0d0d0 100%); color: #333; border: 1px solid #a0a0a0; border-radius: 6px; padding: 0.5rem 1.25rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.8125rem; font-weight: 500; cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,0.8); box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);">Share</button>
</div>
</div>
</div>
</div>Glossy button set
View code
<div style="padding: 2rem; background: #c5c0b6; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px); display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center;"> <button style="background: linear-gradient(180deg, #5dba4f 0%, #3da030 49%, #38952c 50%, #2a7a20 100%); color: white; border: 1px solid #1a6010; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);">Save</button> <button style="background: linear-gradient(180deg, #e85050 0%, #cc3030 49%, #c02828 50%, #a01818 100%); color: white; border: 1px solid #801010; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);">Delete</button> <button style="background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 49%, #e0e0e0 50%, #d0d0d0 100%); color: #333; border: 1px solid #a0a0a0; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.8125rem; font-weight: 500; cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,0.8); box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);">Cancel</button> <button style="background: linear-gradient(180deg, #e0e0e0 0%, #c8c8c8 49%, #c0c0c0 50%, #b0b0b0 100%); color: #999; border: 1px solid #999; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.8125rem; font-weight: 500; cursor: not-allowed; text-shadow: 0 1px 0 rgba(255,255,255,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); opacity: 0.6;">Disabled</button> </div>
Settings panel with toggles
View code
<div style="padding: 2rem; background: #c5c0b6; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px);">
<div style="max-width: 26rem; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.12);">
<div style="background: linear-gradient(180deg, #e8e8e8 0%, #c8c8c8 100%); padding: 0.75rem 1.25rem; border-bottom: 1px solid #a0a0a0;">
<h3 style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.9375rem; font-weight: 600; color: #333; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,0.8);">Settings</h3>
</div>
<div style="background: linear-gradient(180deg, #f8f6f0 0%, #f0ece2 100%);">
<div style="padding: 0.875rem 1.25rem; border-bottom: 1px solid #d8d4ca; display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.875rem; color: #333; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,0.5);">Push Notifications</p>
<p style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.6875rem; color: #888; margin: 0.125rem 0 0 0;">Receive alerts about new activity</p>
</div>
<div style="width: 44px; height: 24px; background: linear-gradient(180deg, #4a8ee6 0%, #2a6ac6 100%); border-radius: 12px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.3); position: relative; border: 1px solid #1a4a90;">
<div style="width: 20px; height: 20px; background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%); border-radius: 50%; position: absolute; top: 1px; right: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);"></div>
</div>
</div>
<div style="padding: 0.875rem 1.25rem; border-bottom: 1px solid #d8d4ca; display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.875rem; color: #333; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,0.5);">Sound Effects</p>
<p style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.6875rem; color: #888; margin: 0.125rem 0 0 0;">Play sounds on interactions</p>
</div>
<div style="width: 44px; height: 24px; background: linear-gradient(180deg, #e8e4dc 0%, #d0ccc4 100%); border-radius: 12px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); position: relative; border: 1px solid #b0a8a0;">
<div style="width: 20px; height: 20px; background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%); border-radius: 50%; position: absolute; top: 1px; left: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.8);"></div>
</div>
</div>
<div style="padding: 0.875rem 1.25rem; display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.875rem; color: #333; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,0.5);">Auto-Save Drafts</p>
<p style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.6875rem; color: #888; margin: 0.125rem 0 0 0;">Save every 30 seconds</p>
</div>
<div style="width: 44px; height: 24px; background: linear-gradient(180deg, #4a8ee6 0%, #2a6ac6 100%); border-radius: 12px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.3); position: relative; border: 1px solid #1a4a90;">
<div style="width: 20px; height: 20px; background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%); border-radius: 50%; position: absolute; top: 1px; right: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);"></div>
</div>
</div>
</div>
</div>
</div>Login form with metal toolbar
View code
<div style="padding: 2rem; background: #c5c0b6; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px);">
<div style="max-width: 22rem; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.25), 0 6px 20px rgba(0,0,0,0.15);">
<div style="background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 50%, #b8b8b8 50%, #aaa 100%); padding: 0.625rem 1.25rem; border-bottom: 1px solid #888; display: flex; align-items: center; gap: 0.5rem;">
<div style="width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #ff6058 0%, #e0443a 100%); border: 1px solid #d0352c; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);"></div>
<div style="width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #ffbd2e 0%, #dea020 100%); border: 1px solid #c88a18; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);"></div>
<div style="width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #28c840 0%, #1aaa30 100%); border: 1px solid #148a24; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);"></div>
<span style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.75rem; color: #555; margin-left: 0.5rem; text-shadow: 0 1px 0 rgba(255,255,255,0.5);">Sign In</span>
</div>
<div style="background: linear-gradient(180deg, #f8f6f0 0%, #ece8de 100%); padding: 1.5rem;">
<div style="text-align: center; margin-bottom: 1.25rem;">
<div style="width: 56px; height: 56px; margin: 0 auto 0.75rem; border-radius: 50%; background: linear-gradient(180deg, #d0d0d0 0%, #b0b0b0 100%); box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center;">
<span style="font-family: 'Helvetica Neue', sans-serif; font-size: 1.25rem; color: #666; text-shadow: 0 1px 0 rgba(255,255,255,0.5);">👤</span>
</div>
</div>
<div style="margin-bottom: 0.75rem;">
<label style="display: block; font-family: 'Helvetica Neue', sans-serif; font-size: 0.75rem; color: #555; margin-bottom: 0.25rem; text-shadow: 0 1px 0 rgba(255,255,255,0.5);">Username</label>
<input type="text" placeholder="Enter username" style="width: 100%; box-sizing: border-box; border: 1px solid #b0a8a0; border-radius: 6px; padding: 0.5rem 0.75rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.8125rem; background: white; outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);" />
</div>
<div style="margin-bottom: 1.25rem;">
<label style="display: block; font-family: 'Helvetica Neue', sans-serif; font-size: 0.75rem; color: #555; margin-bottom: 0.25rem; text-shadow: 0 1px 0 rgba(255,255,255,0.5);">Password</label>
<input type="password" placeholder="••••••••" style="width: 100%; box-sizing: border-box; border: 1px solid #b0a8a0; border-radius: 6px; padding: 0.5rem 0.75rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.8125rem; background: white; outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);" />
</div>
<button style="width: 100%; background: linear-gradient(180deg, #4a8ee6 0%, #2a6ac6 49%, #2460b8 50%, #1a50a0 100%); color: white; border: 1px solid #1a4080; border-radius: 8px; padding: 0.625rem; font-family: 'Helvetica Neue', sans-serif; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);">Sign In</button>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a skeuomorphic style — the rich, textured design philosophy where digital interfaces mimic real-world materials and objects. Leather with visible stitching, brushed metal panels, linen cloth textures, wooden shelves, glossy glass buttons with realistic light reflections, and the tactile depth of iOS 6 and early macOS. Every surface has a material. Every button looks like you could physically press it. VISUAL RULES: - Textures everywhere: Use CSS gradients to simulate real materials. Linen background: repeating subtle noise pattern. Leather: dark brown with faint grain. Brushed metal: linear gradient with subtle striations. Wood: warm brown gradient layers. - Linen background: `background: #c5c0b6; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px);` — or a warm gray (#d0cbc0) base. - Depth: Heavy use of multi-layered box-shadows. Buttons are raised: `box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 3px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15);`. Inset elements recessed: `box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0,0,0,0.15);`. - Glossy buttons: Two-tone gradient from lighter top to darker bottom. Glass highlight: `background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 49%, transparent 50%, rgba(0,0,0,0.05) 100%);` overlaid on the button color. - Colors: Rich, saturated. Deep blues (#2a5daa to #1a3d7a), warm grays (#8a8580), leather browns (#5a3a20), polished chrome (#c0c0c0 to #e8e8e8). Colors simulate actual materials. - Text: White with subtle text-shadow for raised text: `text-shadow: 0 1px 1px rgba(0,0,0,0.3)`. Dark text with light shadow on light surfaces: `text-shadow: 0 1px 0 rgba(255,255,255,0.5)`. - Typography: Rounded, friendly sans-serif. `font-family: 'Helvetica Neue', 'Lucida Grande', 'Segoe UI', sans-serif`. Medium weight. Clean and legible. - Borders: 1px solid darker shade of the element color. Distinct edge between elements. Elements have clear physical boundaries. - Border radius: 8-12px on buttons and cards. Generous but not extreme. Like rounded rectangle physical buttons. - Stitching effect: Use border with dashed pattern on leather surfaces. `border: 1px dashed rgba(255,255,255,0.3)` inset from the edge. - Light source: Consistent top-left light source. Highlights on top, shadows on bottom. SPECIFIC PATTERNS: - Cards: Textured background (linen, leather, or paper). Heavy rounded shadow. Raised above the surface. Inner highlight along top edge. - Buttons: Glossy gradient with glass highlight. Raised with multi-shadow. Active state: invert gradient and use inset shadow (pressed look). - Toggle switches: Realistic iOS-style with track and thumb. Track has inset shadow. Thumb has raised glossy gradient. - Inputs: Inset shadow (recessed into surface). White or light gray bg. 1px border slightly darker than surround. - Toolbars: Brushed metal gradient (subtle horizontal striations). Buttons embedded in the bar. - Sliders: Textured track with groove (inset shadow). Glossy circular thumb with shadow. - Tabs: Raised tab buttons, selected tab connects to content area. Like physical folder tabs. ANTI-PATTERNS: - No flat design. Every element needs depth, texture, or material simulation. - No transparent or glass-morphism blur. Surfaces are opaque materials. - No thin 1px borders without shadow. Everything has physical depth. - No monospace fonts. Keep it rounded and friendly. - No pure flat colors. Colors always have gradient or texture applied.
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.
🏛
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.