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

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

Claymorphism rejects the idea that digital products need to feel flat and weightless. 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 flat design can never achieve, and warmth creates trust faster than any amount of polished minimalism.

02

Color carries the emotion

The claymorphism palette is deliberately vivid — not neon, not pastel, but saturated and alive. 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 do emotional work that copy and layout cannot. This is why claymorphism apps feel friendly before a word is read.

03

Depth without shadows — depth through form

Traditional design uses drop shadows to simulate depth. 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 real rather than painted on.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
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 — Cursor references both files per request
★ 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, not a cartoon. 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 it looks chaotic rather than joyful. Give Claude a specific palette and tell it to stay within it.
! WARNING
Forgetting the background
The background is not white. 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

Two files. That's it.

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

UNLOCK WITH PRO →