← Back to Skills / Marketplace / claymorphism
SKL · 19PRO

Claymorphism.

Soft, inflated UI that looks sculpted from clay. The design language of Duolingo, Headspace, and consumer apps that make you smile.

UNLOCK WITH PRO →
● Live preview · Claymorphism demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Claymorphism is what happens when digital interfaces decide to be joyful about it. Every element looks like it was sculpted from soft, colorful clay — inflated, rounded, slightly three-dimensional, with the kind of depth that makes you want to reach through the screen and squeeze it. It's the design language behind the most delightful iOS apps, Duolingo's character illustrations, and a wave of consumer products that deliberately chose warmth over seriousness. If your app should make people smile the moment they open it, this is the skill.

● Looks Like
DuolingoHeadspaceLassoPlayful fintech appsTop apps in the App Store Games categoryApps described as fun and approachable that actually deliver on it
02 · Best For / Avoid If
＋ Best For
+Consumer apps targeting everyday users, not power users
+Education, language learning, and habit-tracking apps
+Health, wellness, and fitness apps where encouragement matters
+Kids' apps and family-oriented tools
+Onboarding flows where you want users to feel good immediately
+Any product where delight and warmth are core to the experience
× Avoid If
×Your product needs to communicate seriousness, precision, or authority
×You're building for enterprise, B2B, or professional contexts
×Your interface is data-heavy — claymorphism struggles with dense tables and complex dashboards
×Your audience would find the playful aesthetic condescending or juvenile
03 · Design Philosophy
01

Softness is a feature

Every element has a gentle puffiness — subtle inner shadows that make surfaces look inflated, outer shadows that lift elements off the background. This physical quality creates warmth that draws users in, and warmth builds trust quickly.

02

Color carries the emotion

The claymorphism palette is saturated and alive — vivid and warm, with each color carrying its own personality. Each color is carefully chosen to feel like the physical object it represents. A green button feels grassy. A blue card feels like water. The colors carry emotional weight before a word is read.

03

Depth through form

Claymorphism creates depth by making elements look three-dimensional from the inside out — through gradients that suggest a curved surface, through highlights that suggest a light source, through the slight rounding of every corner. The result is depth that feels physical.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Over-inflating
The claymorphic effect should be subtle — a gentle depth with soft puffiness. If elements look like they're about to float off the screen, pull the shadows and gradients back by 30%.
! WARNING
Too many colors at once
Claymorphism works with a focused palette of 3–4 colors. More than that and the palette starts to look chaotic. Give Claude a specific palette and tell it to stay within it.
! WARNING
Forgetting the background
Claymorphism needs a warm, slightly tinted background — soft cream, warm gray, or a very light version of your primary color — for the clay elements to sit in properly.
! WARNING
Dense information
Claymorphism needs breathing room. Tightly packed elements lose the depth effect and start looking messy. Tell Claude to be generous with padding and spacing throughout.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →