All interface styles

Claymorphism

Puffy, rounded, matte shapes with an inner highlight and a coloured drop shadow, as if the interface were moulded from soft clay.

Also called: clay UI, 3d soft, puffy, playful depth

Claymorphism specimen

The drop shadows are tinted by their own element's colour rather than grey, and each shape carries a soft inner highlight at the top. Note how the radii stay large even on the input, so nothing looks like it came from a different material.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

What you see

The perceptual fingerprint, in the order you notice it.

  • Very large radii making every element read as a rounded lump
  • A soft inner highlight along the top inside edge
  • Coloured, not grey, drop shadows tinted by the element's own fill
  • Matte pastel fills with no gloss or specular highlight
  • Elements that overlap and stack like physical objects

Best for

  • Consumer, education and community products with a friendly voice
  • Onboarding, empty states and marketing pages that need warmth
  • Brands with pastel or mid-saturation palettes

Avoid when

  • The product is serious, professional or high-stakes
  • The interface is dense — the radii and shadows eat enormous space
  • The kit is monochrome or very dark; clay needs colour to tint its shadows

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Pastel fills with light text is the standard failure. Text on a clay surface must clear 4.5:1 against the actual fill, which usually means dark text on pastel.
  • Enormous radii shrink the usable content box — check that labels do not collide with the corner curve at small sizes.
  • The inner highlight is decorative; the element still needs a boundary that survives it, since clay shapes often sit on similarly tinted backgrounds.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Puffy, friendly 3D 'clay' surfaces — soft inner + outer shadows, big rounded geometry, bright playful palette.

Implementation bundle

Pro

What an agent needs in order to actually build Claymorphism on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Loading the implementation bundle…

Agent tags

The vocabulary a coding agent can match this style on.

  • large-radius
  • inner-highlight
  • tinted-shadow
  • matte-pastel
  • playful