All Templates
◯
Warm & Organic
26. Tactile Depth
Soft claymorphic surfaces with gentle shadows, rounded forms, and an inviting earth-tone palette. Every element feels touchable — like real objects resting on a warm desk. Perfect for wellness apps, lifestyle brands, friendly SaaS, and products that want to feel human.
Visual Preview
New Collection
Design that feels right
Soft surfaces, gentle depth, and organic warmth. Every interaction crafted to feel like touching something real.
2.4s
Response
99.9%
Uptime
12k+
Users
When to Use
Wellness apps, lifestyle brands, friendly SaaS, creator tools, consumer products
Key Vocabulary
Claymorphismsoft shadowsrounded surfaceswarm earth tonesTactile UIorganic formsgentle depthinviting paletteDiffuse shadowspill shapesspring animationsfriendly SaaS
Example Prompt
Build a warm, tactile landing page with soft claymorphic depth: - Cream/off-white background (hsl(38, 33%, 95%)) with subtle warm undertones - Cards and surfaces: near-white (hsl(38, 30%, 98%)) with soft multi-layer diffuse shadows — use 3 stacked box-shadows for realistic depth: 0 2px 4px rgba(48,30,15,0.04), 0 8px 16px rgba(48,30,15,0.06), 0 24px 48px rgba(48,30,15,0.08) - Terracotta primary accent (hsl(16, 52%, 55%)) used sparingly for CTAs and highlights - Sage secondary (hsl(152, 22%, 42%)) for success states and indicators - Warm sand tertiary (hsl(38, 60%, 68%)) for decorative orbs and subtle gradients - Rounded-2xl or rounded-[28px] for all major surfaces — no sharp corners - Pill-shaped segmented controls with animated sliding background (framer-motion layoutId) - Generous inner padding on all cards (p-5 to p-6) - Typography: clean sans-serif, medium weight (500–600), tracking-tight for headlines - Headlines: warm charcoal (hsl(30, 12%, 22%)) not pure black - Body text: muted stone (hsl(30, 8%, 55%)) for secondary content - No hard borders — depth created purely through shadow layers - Gentle spring physics on all interactions (stiffness: 300, damping: 25) - Floating stat cards with staggered entrance animations - Mobile: maintain roundedness, stack cards vertically, keep generous touch targets
Pro Tip
"The magic is in the shadow stack. Three layered shadows with increasing blur and decreasing opacity create that soft, lift-off-the-page feeling. Never use a single hard shadow for claymorphism."