Get started
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

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Claymorphism changes

Surface material, borders, shape, depth, component layout, states, and motion.

Claymorphism specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Claymorphism applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: 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.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Claymorphism to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

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