Claymorphism: soft, inflated, playful

UI that looks squeezed and squishy

Claymorphism is the softened cousin of neomorphism: inflated, rounded volumes with directional shadows, saturated pastels, and a general sense that each card was squeezed out of a tube. It reads playful and tactile — kid-focused tools, wellness apps and creative products use it to feel approachable.

Recognize it by volume and color: forms that look puffed up, soft directional shading that suggests a light source, saturated pastel hues, and an overall low-stakes friendliness. The tension is built in — pastel saturation is exactly where text contrast quietly dies, so the style works hardest to stay usable.

Where neomorphism whispers, clay shouts softly. The difference that matters: neomorphism keeps one muted material, while claymorphism lets a whole pastel palette coexist — pink, violet, amber, mint — which is what gives it personality. That palette is also what puts the accessibility burden on you: every filled surface is a potential low-contrast backdrop, so the style only works if you respect that.

How to recognize it

The clay look has four unmistakable characteristics:

• Inflated volume — cards and buttons look puffed up, with a plump, rounded silhouette
• Directional shadows — one soft shadow on the bottom and one soft highlight on the top, like one believable light source
• Saturated pastels — pink, violet, mint, amber: colors are saturated yet light, never dusty
• Low-stakes friendliness — nothing looks heavy or official; the interface invites a poke

The claymorphism preset

The preset picks a saturated pink family with a violet support and an amber highlight, keeps the hues near-neighbors through an analogous strategy, rounds the radius to fully accommodate the inflated look, and pushes saturation up so the pastels actually read as clay rather than washed-out grey. A grotesque pairing keeps the cuteness from sliding into cartoon.

The three colors map onto the squish in a useful way: pink is the main clay everything sits on, violet is the second material so filled cards can differ from filled buttons, and amber is the fun detail you use once per screen. If that split feels familiar, it's the primary-secondary-accent grammar wearing a pastel coat — which is exactly why it generates so cleanly.

How the color roles land in this style

The roles follow the same grammar as any bright system, just in a softer key. Surface holds the base pastel so filled cards read as clay; primary is the main button and the featured card; secondary gives you distinct filled surfaces without reaching for extra hue families; and accent is the single high-chroma moment. Because there are no dark neutrals in this world, foreground text sits in a deep plum rather than black:

:root {
  --background: #fdf2f8;
  --surface: #fff7f9;
  --primary: #f472b6;
  --secondary: #a78bfa;
  --accent: #fbbf24;
  --foreground: #2d1b26;
}

Adapt it

The pastel trio is the whole personality; swap in your brand's hue family and keep saturation high but controlled. Walk the four previews looking at text-on-filled-card pairs specifically, and let the dark theme's chroma step down — inflated pastels read as radioactive on near-black if left alone.

Pick the third color deliberately. The amber accent is chosen to pop on both pink and violet; whatever trio you use, keep the two main clays close on the wheel and push the accent away from both. One accent, far away, used sparingly — that formula is what keeps clay read as trend-aware instead of disordered.