Playfulsystem
Claymorphism
AI would generate this anyway
Generates UI with soft 3D depth — inflated surfaces, inner shadows, pastel backgrounds, and elements that look like friendly clay objects sitting on a shelf. Tactile, dimensional, inviting.
3d depthinner shadowspasteltactile
Added February 5, 2026 by unslop.dev
Example output
Card component
✦
Creative Toolkit
Everything you need to bring your ideas to life, packed into one delightful workspace.
View code
<div style="padding: 3rem; background: linear-gradient(135deg, #ede9fe, #fce7f3);">
<div style="background: rgba(255,255,255,0.75); border-radius: 1.5rem; padding: 2rem; max-width: 22rem; box-shadow: 10px 10px 20px rgba(0,0,0,0.06), -4px -4px 12px rgba(255,255,255,0.8), inset 2px 2px 4px rgba(255,255,255,0.6), inset -1px -1px 3px rgba(0,0,0,0.03);">
<div style="width: 3rem; height: 3rem; border-radius: 1rem; background: linear-gradient(135deg, #a78bfa, #8b5cf6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.25rem; box-shadow: 4px 4px 10px rgba(139,92,246,0.25); margin-bottom: 1rem;">✦</div>
<h3 style="font-size: 1.125rem; font-weight: 600; color: #1e1b4b; margin: 0 0 0.5rem 0;">Creative Toolkit</h3>
<p style="font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin: 0 0 1.25rem 0;">Everything you need to bring your ideas to life, packed into one delightful workspace.</p>
<button style="background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; border: none; border-radius: 9999px; padding: 0.625rem 1.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; box-shadow: 4px 4px 12px rgba(139,92,246,0.2);">Get started</button>
</div>
</div>Input group
Create your account
View code
<div style="padding: 3rem; background: linear-gradient(135deg, #ecfdf5, #ede9fe);">
<div style="max-width: 22rem;">
<p style="font-size: 0.8125rem; font-weight: 600; color: #1e1b4b; margin: 0 0 0.5rem 0;">Create your account</p>
<div style="margin-bottom: 0.75rem;">
<input type="text" placeholder="Full name" style="width: 100%; background: rgba(255,255,255,0.5); border: none; border-radius: 1rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: #1e1b4b; outline: none; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.04), inset -1px -1px 2px rgba(255,255,255,0.5); box-sizing: border-box;" />
</div>
<div style="margin-bottom: 0.75rem;">
<input type="email" placeholder="Email address" style="width: 100%; background: rgba(255,255,255,0.5); border: none; border-radius: 1rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: #1e1b4b; outline: none; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.04), inset -1px -1px 2px rgba(255,255,255,0.5); box-sizing: border-box;" />
</div>
<button style="width: 100%; background: linear-gradient(135deg, #34d399, #10b981); color: white; border: none; border-radius: 9999px; padding: 0.75rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; box-shadow: 6px 6px 16px rgba(16,185,129,0.2), inset 1px 1px 2px rgba(255,255,255,0.3); box-sizing: border-box;">Create account</button>
</div>
</div>Stat badges
2.4k
Downloads
98%
Satisfaction
4.9
Rating
View code
<div style="padding: 3rem; background: linear-gradient(135deg, #fef3c7, #fce7f3); display: flex; gap: 1rem; flex-wrap: wrap;">
<div style="background: rgba(255,255,255,0.7); border-radius: 1.25rem; padding: 1.25rem 1.5rem; box-shadow: 8px 8px 16px rgba(0,0,0,0.05), -3px -3px 10px rgba(255,255,255,0.7), inset 1px 1px 3px rgba(255,255,255,0.5), inset -1px -1px 2px rgba(0,0,0,0.02); text-align: center; min-width: 7rem;">
<p style="font-size: 1.5rem; font-weight: 700; color: #7c3aed; margin: 0;">2.4k</p>
<p style="font-size: 0.75rem; color: #6b7280; margin: 0.25rem 0 0 0;">Downloads</p>
</div>
<div style="background: rgba(255,255,255,0.7); border-radius: 1.25rem; padding: 1.25rem 1.5rem; box-shadow: 8px 8px 16px rgba(0,0,0,0.05), -3px -3px 10px rgba(255,255,255,0.7), inset 1px 1px 3px rgba(255,255,255,0.5), inset -1px -1px 2px rgba(0,0,0,0.02); text-align: center; min-width: 7rem;">
<p style="font-size: 1.5rem; font-weight: 700; color: #ec4899; margin: 0;">98%</p>
<p style="font-size: 0.75rem; color: #6b7280; margin: 0.25rem 0 0 0;">Satisfaction</p>
</div>
<div style="background: rgba(255,255,255,0.7); border-radius: 1.25rem; padding: 1.25rem 1.5rem; box-shadow: 8px 8px 16px rgba(0,0,0,0.05), -3px -3px 10px rgba(255,255,255,0.7), inset 1px 1px 3px rgba(255,255,255,0.5), inset -1px -1px 2px rgba(0,0,0,0.02); text-align: center; min-width: 7rem;">
<p style="font-size: 1.5rem; font-weight: 700; color: #f59e0b; margin: 0;">4.9</p>
<p style="font-size: 0.75rem; color: #6b7280; margin: 0.25rem 0 0 0;">Rating</p>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a claymorphism style — soft, inflated, three-dimensional surfaces that look like friendly clay or rubber objects. Think: if your UI was a toy, it would be a high-quality silicone desk organizer. Approachable 3D without being cheesy. VISUAL RULES: - Background: Soft pastel. Light lavender (#ede9fe), pale pink (#fce7f3), soft mint (#ecfdf5), or warm cream (#fef3c7). Slight gradient acceptable. - Surfaces: Rounded, puffy appearance created with DUAL shadows — an outer shadow for lift and an INNER shadow for the clay/inflated effect. - Shadow formula for every card/surface: - Outer: `12px 12px 24px rgba(0,0,0,0.08), -6px -6px 16px rgba(255,255,255,0.7)` - Inner: `inset 2px 2px 4px rgba(255,255,255,0.6), inset -2px -2px 4px rgba(0,0,0,0.04)` - Background of surfaces: slightly lighter than page bg, or white with low opacity. - Border radius: Very large. rounded-3xl (24px) minimum on cards. rounded-full on buttons and badges. - Colors: Pastel primaries. Muted purple (#8b5cf6 at 60% sat), soft rose (#f472b6), warm amber (#fbbf24). All at high lightness. - Typography: Rounded sans-serif feel. font-semibold for headings. Warm dark for text (#1e1b4b or #312e81 — a dark purple, not black). - Borders: None. Depth is created entirely through shadows. - Spacing: Generous. p-8 inside cards. Elements feel puffy and spaced apart. SPECIFIC PATTERNS: - Cards: bg-white/80 rounded-3xl, dual shadow (outer + inner). p-8. Content centered or left-aligned. - Buttons: bg-gradient (subtle, like purple-400 to purple-500), rounded-full, text-white, px-8 py-3. Shadow same as card but smaller. Hover: scale(1.02) + stronger shadow. - Badges: bg-pastel fill (like purple-100), rounded-full, text-sm. Inner shadow for puffiness. - Inputs: bg-white/60 rounded-2xl, inner shadow only (looks recessed). No border. - Icons: Filled style, medium weight, matching the pastel accent. Never thin stroke. ANTI-PATTERNS: - No flat surfaces. Everything has the dual shadow treatment. - No sharp corners. Minimum 16px radius. - No dark backgrounds. This is light and airy. - No thin strokes or fine details. Everything is soft and chunky. - No pure black text. Use dark indigo/purple.
Related prompts
✦
Magic Moments
Capture and relive your favorite memories with beautiful, automatically organized collections.
2.4k
Photos
128
Albums
47
Shared
Playful
Candy Pop
system
Generates UI that looks like a high-end candy shop — pastel rainbow gradients, oversized rounded elements, bubbly shadows, soft saturated colors. Sweet, vibrant, and irresistibly clickable.
Playful
Acid Rave
system
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.
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.