UI Lingo
Shortlist 0

Claymorphism

Also called: Clay UI, Clay 3D, Plasticine UI

Chunky pastel shapes that look squeezed from modelling clay: huge radii, a bright inner highlight and a soft coloured shadow underneath.

“Puffy clay”Soft & DimensionalEra: 2022 → todayPlayfulFriendlyDreamy
Prompt builder
Open full screen ↗
claymorphism / landingEN
claymorphism / landingTH

Design keywords

Say these words to ask for this style.

puffy clay cardspastel fillshuge rounded cornersinner highlight + inner shadecoloured soft drop shadowchunky rounded typeclay ball iconssquishy press

Claymorphism makes every card and button look like a soft, inflated piece of plasticine. Each surface gets a pastel fill, very large rounded corners (24–44px), two inner shadows — a white highlight top-left and a darker tint bottom-right — and a blurred, colour-tinted drop shadow that lifts it off a light lilac page. Type is chunky and rounded, icons sit in glossy clay balls, and the overall feel is playful, tactile and friendly — perfect for learning, kids and casual consumer apps.

Best for

  • Learning and course apps for students and kids
  • Onboarding and empty-state illustrations
  • Casual games, habit trackers and rewards
  • Friendly consumer landing pages

Avoid for

  • Serious finance, legal or government products
  • Dense data dashboards
  • Luxury or minimal brands

✓ Do

  • Use radii of 22–44px and keep shapes plump, never sharp
  • Stack two inner shadows (white highlight top-left, tinted shade bottom-right) plus one coloured outer shadow
  • Rotate 6 pastel fills across cards: lilac #E9E0FF, mint #D3F5E8, peach #FFE2D2, sky #DAEDFF, butter #FFF1BF, pink #FFE0EC
  • Make presses squish: translateY(2px) scale(.97) and a shorter outer shadow

✕ Don't

  • Don’t use thin outlines or hairline borders
  • Don’t use grey or black drop shadows — tint them with the primary colour
  • Don’t pair it with thin or condensed type
  • Don’t put multi-line body text on saturated fills; keep paragraphs on pale pastels

Not to be confused with

Neumorphism →Neumorphism is one monochrome colour with shadows matching the page; Claymorphism uses many pastel fills, inner highlights and a coloured drop shadow.Kawaii / Cute →Kawaii is about cute faces, sparkles and stickers; Claymorphism is about the puffy 3D material of the components themselves.Tactile Digital / Deformable UI →Tactile/deformable UI animates squash-and-stretch and chrome hybrids; Claymorphism is mostly static matte clay.

On mobile

Clay is great under the thumb: plump 52px buttons that squish on press, pastel lesson cards, clay-ball icons and a floating white clay tab bar where the active icon sits in a purple clay blob. Keep inner shadows but shorten outer shadows to ~12px on long lists.

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

✓ Audited by agent review (3×)
Copied!