Skip to content
SloplessTry the picker

Base style · contemporary · balanced

Claymorphism

Soft, puffy UI that looks moulded from clay: big rounded candy-coloured cards with a clay shadow, floating blobs, 3D clay objects, pill buttons and chunky rounded type on a light tinted ground.

Use this styleDesigns in this style
Moods
playful, friendly, warm, bold
Suits
fintech, education, gaming, ecommerce, saas, health
Type
Fredoka + Nunito

Principles

  • Build every block from puffy clay cards: 32–40 px radius, an outer drop shadow plus an inner top-left highlight and inner bottom-right shade
  • Colour comes from the cards, not the text: candy fills (pink, mint, lilac, peach) on a light tinted ground, dark ink on every fill
  • Keep every line of text on a solid card or the page ground; blobs, circles and clay objects are decoration and never sit under copy
  • Illustrate with soft 3D clay objects and floating blobs instead of photos or flat icons
  • Set big friendly numbers and headlines in a chunky rounded face at 600–700; every button is a clay pill

Hard rules

  • No borders or hairlines on cards — the clay shadow is the edge. No dividers inside cards; use space.
  • No grey-on-pastel text, no white text on light candy fills, no text on blobs, gradients or clay objects. Check every fill against its text colour; never trade contrast for softness.
  • No neumorphic look: cards are never the same colour as the page, and the drop shadow is never paired with a light offset shadow on the opposite side.
  • No glassmorphism, no gradients, no glows, no photographs of people at desks; colour is flat candy fills, depth is the clay shadow.
  • No square corners anywhere (cards, buttons, inputs, images, chips): minimum radius 16 px.
  • No thin or condensed type, no serif, no all-caps labels, no weights under 400.

Full page preview with sample copy, rendered from the same tokens and layout the agent receives.

For coding agents

Rules and live patterns

Every pattern Claymorphism owns, drawn by the same renderer as the picker with the style's default tokens and sample copy. Each has an anchor (#<pattern id>). A design's own DESIGN.md and tokens.json stay the source of truth; this page shows what the patterns look like.

Reference render of the default designllms.txt

Do

  • Make every card the same clay material: a solid fill (`surface`, `surfaceAlt`, `accent` or `accent2`), the `radius` token (32 px; 40 px on hero slabs, 24 px on chips inside cards), no border, and the clay shadow: `box-shadow: 0 18px 36px -12px <shade 35%>, inset 0 -8px 16px <shade 22%>, inset 0 8px 14px rgb(255 255 255 / .6)`, where `<shade>` is the card's own fill darkened about 30 % (`color-mix(in oklch, <fill> 70%, black)`).
  • Light comes from the top: the inner highlight sits on the top edge, the inner shade on the bottom edge, the drop shadow falls straight down. Keep that direction on every element.
  • Pad cards generously: 48–64 px on hero and CTA slabs, 32–48 px on content cards, 24 px on small chips; gaps between clay siblings are 24 px (`gutter`) and never under 16 px.
  • Keep text on solid fills only: page ground, a card or a chip. Text colours are `heading` / `text` on bg, surface and surfaceAlt, `onAccent` on accent, `onAccent2` on accent2 — all four pairs are AA. `textMuted` only on bg and surface.
  • Make every button a clay pill: `border-radius: 999px`, 48–56 px tall, weight 700, the clay shadow in the button's own fill; on hover lift 2 px and grow the drop shadow; on press `scale(.97)` and swap to the pressed shadow (inner shade only).
  • Illustrate with soft 3D clay objects (`treatment: clay`): rounded, matte, slightly squashed forms with a top highlight, set on a surfaceAlt or surface card. One object per card, centred, filling about 80 % of the card.
  • Float decoration around the edges: one or two blobs or circles per section in `accent` / `accent2`, sticking out over a card's corner, never behind text and hidden at phone width.
  • Set headlines in the rounded face (Fredoka by default) at 700 with tight leading (1.0–1.1); hero headlines at step 7–8, section titles at step 5–7, numbers at step 6–8 with tabular figures. Body text in the rounded sans at 400–600, 17 px.
  • Put eyebrows and section labels in small clay pill chips (weight 700, padding 8 × 24 px), never as tracked caps.
  • Give motion a little bounce: 260 ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` on hover lifts and presses only; under `prefers-reduced-motion` drop the movement and keep the shadow change.
  • At 375 px: cards stack full width in source order, keep their radius (min 24 px) and clay shadow, padding drops to 24–32 px, decorative blobs disappear, 2×2 card grids stay two-up only for numbers and app tiles.

Don't

  • No borders or hairlines on cards — the clay shadow is the edge. No dividers inside cards; use space.
  • No grey-on-pastel text, no white text on light candy fills, no text on blobs, gradients or clay objects. Check every fill against its text colour; never trade contrast for softness.
  • No neumorphic look: cards are never the same colour as the page, and the drop shadow is never paired with a light offset shadow on the opposite side.
  • No glassmorphism, no gradients, no glows, no photographs of people at desks; colour is flat candy fills, depth is the clay shadow.
  • No square corners anywhere (cards, buttons, inputs, images, chips): minimum radius 16 px.
  • No thin or condensed type, no serif, no all-caps labels, no weights under 400.
  • No more than two levels of clay (a chip on a card on the page is the limit), and no more than one accent slab per section.
  • No three equal cards in a row: vary card size and fill, or use two or four.

Heroes (4)

Candy stage

hero.claymorphism-candy-stage · hero

Desktop, 1440 px
Phone, 390 px
Rule
Copy on the page ground in 1–6 (pill eyebrow, display headline at step 7, lead, pill buttons, two stat chips); a surfaceAlt clay platter in 7–12 holding a 1:1 clay object, a blob sticker and a floating clay toast.
Slots
eyebrow, headline, subhead, cta, cta2, stats[2..2], heroImage, caption, meta
Grid
copy 1-6 · platter 7-12
Notes
The platter is one clay card (radius 32–40 px, clay shadow). The toast card floats over the platter's bottom-left corner; the blob sticks out over its top-right. Text never sits on a blob.

Two halves, vertically centred, at least 82 vh. Columns 1–6 on the page ground: a white pill chip with the eyebrow, the display headline at step 7 (weight 700, ≤15 ch), a muted lead (≤42 ch), primary and secondary pill buttons, and two white stat chips side by side (number at step 4, small muted label). Columns 7–12: a surfaceAlt clay platter (padding 48 px) holding a 1:1 clay object, an accent blob sticking out over the top-right corner, a small accent2 dot on the left edge and a white toast card (dot, bold caption, muted line) floating over the platter's bottom-left. Phone: copy first, platter below, blob hidden.

Open alone, full size (desktop, tablet, phone; layout tree included)

App slab

hero.claymorphism-app-slab · hero

Desktop, 1440 px
Phone, 390 px
Rule
One big accent clay slab across 1–12: headline, lead and pill buttons in 1–7 on the accent, a phone in a device frame in 8–12; under it a row of four surface clay chips with a big number and a label.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, features[4..4]
Grid
slab 1-12 · copy 1-7 · device 8-12 · chips 1-12
Notes
The slab is the only accent area; buttons on it invert (heading-coloured fill). Device frame: a rounded phone bezel with a clay shadow. Four chips, never three.

One accent clay slab across all 12 columns (radius 40 px, padding 80 px): pill eyebrow, display headline at step 6 (≤15 ch), lead and pill buttons in 1–7 in `onAccent`; a 3:4 product screenshot in a device frame (rounded phone bezel with the clay shadow) in 8–12. Under the slab, four white clay chips in a row (two by two on phones): a big number in the link colour at the top, title and line at the bottom.

Open alone, full size (desktop, tablet, phone; layout tree included)

Blob type

hero.claymorphism-blob-type · hero

Desktop, 1440 px
Phone, 390 px
Rule
A huge rounded display headline in 1–8 beside a big accent blob in 9–12 (decoration only, never under text); below, a surface card with lead and buttons in 1–6, an accent2 stat card in 7–9 and a clay object card in 10–12.
Slots
headline, subhead, cta, cta2, stats[1..1], heroImage
Grid
headline 1-8 · blob 9-12 · card 1-6 · stat 7-9 · object 10-12
Notes
The stat repeat sits on accent2 as its own clay card (pad 32 px, number pinned top, label bottom). Blobs hide at phone width.

A huge display headline at step 8 (≤14 ch) bottom-aligned in 1–8 over two rows, with a big accent blob filling 9–12 and an accent2 circle above its corner — the blob never touches the headline. Row 3: a white card with lead and pill buttons in 1–6 (padding 64 px), an accent2 stat card in 7–9 (number at step 8 on top, label at the bottom) and a surfaceAlt card holding a 1:1 clay object in 10–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Wallet widget

hero.claymorphism-wallet-widget · hero

Desktop, 1440 px
Phone, 390 px
Rule
Copy in 1–7 (pill eyebrow, display at step 7, lead, inline email form); in 8–12 a surface clay widget: label, a giant balance number, two surfaceAlt stat pills and a 16:9 clay object; a row of client pills underneath.
Slots
eyebrow, headline, subhead, newsletter, label, price, stats[2..2], heroImage, clients[4..5]
Grid
copy 1-7 · widget 8-12 · clients 1-12
Notes
The widget is one clay card with nested clay pills (two levels deep at most). The balance number is the biggest thing on the page after the headline.

For fintech and apps. Columns 1–7: a surfaceAlt pill eyebrow, display at step 7 (≤14 ch), muted lead and an inline email form with a pill input and pill button. Columns 8–12: a white clay widget card: a muted label, a giant balance number at step 8, two surfaceAlt stat pills side by side and a 16:9 clay object in a rounded frame. Row 2: four or five client names as white clay pills (scrolls sideways on phones).

Open alone, full size (desktop, tablet, phone; layout tree included)

Navigation (2)

Content blocks (14)

Toy shelf

features.claymorphism-toy-shelf · features

Desktop, 1440 px
Phone, 390 px
Rule
An accent intro card in 1–4 over two rows (pill label, h2 at step 5, line, clay object, secondary button) beside four surface clay cards in a 2×2 on 5–12, each with a big number at the top and title plus line at the bottom.
Slots
sectionLabel, title, body, image, cta, features[4..4]
Grid
intro 1-4 · cards 5-12

An accent intro card in 1–4 over two rows: white pill label, h2 at step 5 (≤16 ch), a line, a 4:3 clay object and a secondary pill button at the bottom. In 5–12 a 2×2 of white clay cards: a big number at step 6 in the link colour with a small accent2 blob on the right at the top; title at step 2 and a muted line at the bottom.

Open alone, full size (desktop, tablet, phone; layout tree included)

App drawer

features.claymorphism-app-drawer · features

Desktop, 1440 px
Phone, 390 px
Rule
Title row (h2 at step 6 in 1–7, muted line in 8–12), then eight surface clay app tiles in a four-column grid: a 1:1 clay icon object, a bold title and a small muted line.
Slots
title, body, features[8..8]
Grid
title 1-7 · intro 8-12

The denser app-store block. Title row: h2 at step 6 in 1–7, muted line bottom-aligned in 8–12. Then eight white clay tiles in four columns (two on phones): a 1:1 clay icon object in a rounded frame, a bold title at step 1 and one muted small line. Tiles are 24 px apart.

Open alone, full size (desktop, tablet, phone; layout tree included)

Step path

list.claymorphism-step-path · list

Desktop, 1440 px
Phone, 390 px
Rule
A pill label and h2, then three or four steps as alternating rows: a surface clay card with a giant step number, title and line on one side, a 4:3 clay object on a surfaceAlt card on the other.
Slots
sectionLabel, title, steps[3..4]

A surfaceAlt pill label and h2 at step 6, then three or four steps, each a 12-column row that mirrors every second step: a white card in 1–7 with a giant step number (step 8, link colour), the title at step 3 and a muted line, and a surfaceAlt card in 8–12 holding a 4:3 clay object. Phone: card, then object, per step.

Open alone, full size (desktop, tablet, phone; layout tree included)

Scoreboard

stats.claymorphism-scoreboard · stats

Desktop, 1440 px
Phone, 390 px
Rule
One wide surfaceAlt clay board: h2 at step 5 and a line in 1–4, four white clay score pills in a 2×2 on 5–12 with numbers at step 8.
Slots
title, body, stats[4..4]
Grid
intro 1-4 · scores 5-12

One wide surfaceAlt clay board (padding 80 px): h2 at step 5 and a line in 1–4, and a 2×2 of white score pills in 5–12, each a number at step 8 (weight 700, tight, tabular), a bold label and a muted note.

Open alone, full size (desktop, tablet, phone; layout tree included)

Object wall

gallery.claymorphism-object-wall · gallery

Desktop, 1440 px
Phone, 390 px
Rule
A pill label and h2 in 1–7 with a secondary button bottom-right; six clay objects on surface clay cards in a three-column masonry, each with a bold caption and a muted year.
Slots
sectionLabel, title, cta, gallery[6..6]
Grid
title 1-7 · cta 10-12

A pill label and h2 at step 6 in 1–7, a secondary pill button bottom-right in 10–12. Six white clay cards in a three-column masonry (two on phones): a 4:5 clay object in a rounded frame (inner radius = card radius − padding), then a bold caption and a muted year on one row.

Open alone, full size (desktop, tablet, phone; layout tree included)

Speech bubbles

testimonial.claymorphism-speech-bubbles · testimonial

Desktop, 1440 px
Phone, 390 px
Rule
A big surface speech-bubble card in 1–8 (quote at step 4, a round accent avatar blob beside the name and role) and two smaller surfaceAlt bubbles stacked in 9–12.
Slots
quote, author, role, quotes[2..2]
Grid
main 1-8 · side 9-12

A big white speech-bubble card in 1–8 (padding 80 px): the quote at step 4 (weight 500) at the top, a round accent avatar dot beside the bold name and muted role at the bottom. Two surfaceAlt bubbles stacked in 9–12, each a quote at body size (weight 600) and an accent2 dot with the name.

Open alone, full size (desktop, tablet, phone; layout tree included)

Plan stack

pricing.claymorphism-plan-stack · pricing

Desktop, 1440 px
Phone, 390 px
Rule
h2 at step 6 and a line on one row; two surface plan cards in 1–8 (pill plan label, name and price at step 7 on top; line and primary pill button at the bottom) and an accent2 family/school card in 9–12 with a statement, a clay object and a secondary button.
Slots
title, body, plans[2..2], statement, image, cta
Grid
plans 1-8 · family 9-12

h2 at step 6 in 1–7 and a muted line in 8–12. Two white plan cards in 1–8: a surfaceAlt pill with the plan label, the plan name at step 3 and the price at step 7 pinned to the top; a muted line and a primary pill button pinned to the bottom. An accent2 family / school card in 9–12: a statement at step 2 (≤26 ch), a 4:3 clay object and a secondary pill button.

Open alone, full size (desktop, tablet, phone; layout tree included)

Bubble FAQ

faq.claymorphism-bubble-faq · faq

Desktop, 1440 px
Phone, 390 px
Rule
A surfaceAlt card in 1–4 with h2 at step 5, a line and a 1:1 clay object; four to six surface question bubbles stacked in 5–12, question bold at step 1 and the answer always visible.
Slots
title, body, image, faqs[4..6]
Grid
intro 1-4 · questions 5-12

A surfaceAlt card in 1–4: h2 at step 5, a line and a 1:1 clay object at the bottom. In 5–12, four to six white question bubbles stacked 16 px apart: question at step 1 (weight 700), answer in muted body text, all answers visible.

Open alone, full size (desktop, tablet, phone; layout tree included)

Candy slab

cta.claymorphism-candy-slab · cta

Desktop, 1440 px
Phone, 390 px
Rule
One accent clay slab: h2 at step 7 in 1–7, a line and an inline email form; a surface card with a 1:1 clay object in 9–12 and a blob sticker over its corner.
Slots
title, body, newsletter, image
Grid
copy 1-7 · object 9-12

One accent clay slab (radius 40 px, padding 96 × 80 px): h2 at step 7 (≤16 ch), a lead and an inline email form in 1–7; a white card holding a 1:1 clay object in 9–12 with an accent2 blob over its top-right corner.

Open alone, full size (desktop, tablet, phone; layout tree included)

Sticker row

logos.claymorphism-sticker-row · logos

Desktop, 1440 px
Phone, 390 px
Rule
A small muted label, then six client names as bold surface clay pills in a six-column grid (two per row on phones).
Slots
label, clients[6..6]

A small bold muted label, then six client names as white clay pills in a six-column grid, centred in each pill (two per row on phones).

Open alone, full size (desktop, tablet, phone; layout tree included)

Avatar pals

team.claymorphism-avatar-pals · team

Desktop, 1440 px
Phone, 390 px
Rule
h2 at step 6 with a ghost arrow link on one row; four to eight surface clay cards in four columns: a round clay avatar, bold name and muted role, centred in the card.
Slots
title, cta, team[4..8]

h2 at step 6 and a ghost arrow link on one row. Four to eight white clay cards in four columns (two on phones): a round 1:1 clay avatar, the name at step 1 (weight 700) and a muted role, all centred.

Open alone, full size (desktop, tablet, phone; layout tree included)

Lesson cards

blog.claymorphism-lesson-cards · blog

Desktop, 1440 px
Phone, 390 px
Rule
A surfaceAlt intro card in 1–5 over two rows (pill label, h2 at step 5, line, secondary button) beside four surface lesson cards in a 2×2 on 6–12, each a 16:9 clay object, a pill date and a bold title.
Slots
sectionLabel, title, body, cta, posts[4..4]
Grid
intro 1-5 · lessons 6-12

A surfaceAlt intro card in 1–5 over two rows (white pill label, h2 at step 5, line, secondary pill button) beside a 2×2 of white lesson cards in 6–12: a 16:9 clay object in a rounded frame, a muted date and a bold title at step 1.

Open alone, full size (desktop, tablet, phone; layout tree included)

Story split

content.claymorphism-story-split · content

Desktop, 1440 px
Phone, 390 px
Rule
A surfaceAlt clay card holding a 4:5 clay object in 1–5; in 7–12 a pill label, h2 at step 6, a lead, a body paragraph and a row of three stat pills.
Slots
image, sectionLabel, title, lead, body, stats[3..3]
Grid
object 1-5 · copy 7-12

A surfaceAlt card in 1–5 holding a 4:5 clay object; in 7–12 a white pill label, h2 at step 6, a lead, a muted body paragraph and three white stat chips in a row (stacked on phones).

Open alone, full size (desktop, tablet, phone; layout tree included)

Hello card

contact.claymorphism-hello-card · contact

Desktop, 1440 px
Phone, 390 px
Rule
A surface clay form card in 1–7 (h2 at step 6, a line, name / email / message form) beside an accent2 card in 8–12 with a 4:3 clay object, the email at step 2, phone and hours.
Slots
title, body, contact, image, email, phone, hours
Grid
form 1-7 · details 8-12

A white form card in 1–7 (padding 64 px): h2 at step 6, a muted line and the name / email / message form with pill inputs (the message field radius 24 px). An accent2 card in 8–12: a 4:3 clay object, the email at step 2, phone and hours.

Open alone, full size (desktop, tablet, phone; layout tree included)

Footers (2)

Big card

footer.claymorphism-big-card · footer

Desktop, 1440 px
Phone, 390 px
Rule
One surface clay card: wordmark, tagline and an inline newsletter form in 1–5, stacked links in 7–9, social links and the legal line in 10–12; an accent blob tucked top-right.
Slots
siteName, tagline, newsletter, pages, socials, legal
Grid
brand 1-5 · links 7-9 · legal 10-12

One white clay card (padding 80 × 64 px): wordmark, muted tagline and an inline newsletter form in 1–5, stacked links in 7–9, a bold social line and the muted legal line in 10–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Pill bar

footer.claymorphism-pill-bar · footer

Desktop, 1440 px
Phone, 390 px
Rule
One surfaceAlt clay pill bar: monogram, pill links and the legal line on one row, space between.
Slots
siteName, pages, legal

One surfaceAlt clay pill bar: monogram, pill links and the legal line on one row, space between; it wraps to stacked rows on phones.

Open alone, full size (desktop, tablet, phone; layout tree included)

Hero library heroes that suit Claymorphism

Interactive 3D objecthero.interactive-3d-object · interactiveA draggable 3D object fills 6–12 for the full hero height; eyebrow top-left; subhead + CTA mid-left in 1–4; the display headline sits bottom-left in 1–5, running up to the object's edge; a 'drag to rotate' hint bottom-right.Split, media righthero.split-media-right · splitCopy in columns 1–6, vertically centred; the image fills columns 7–12 at the full hero height. A hairline and a muted meta line close the copy column.Product with flanking specshero.product-floating-specs · productA square product shot in 4–9 is flanked by spec callouts: 2–3 feature labels in 1–3 and 2–3 numbers in 10–12, each with a top rule; the headline runs 1–8 underneath, price and CTA in 10–12.Product, centred shothero.product-centered-shot · productProduct launch layout on one axis: a short product-name headline, a wide 16:9 product shot that dominates the hero, a row of 3–4 specs divided by rules, then price and one CTA.Headline with stickershero.collage-sticker · collageA huge headline in 1–10 with stickers slapped on it: a tilted accent label overlapping its end (10–12), a star in 1–2 and a second tilted accent2 label in 9–11; subhead + CTA in 3–7.Form firsthero.form-first · collageThe signup form is the hero's action: headline, subhead and an inline email form with a reassurance line in 1–6; a left-ruled column in 8–12 lists 3–4 numbered things you get.

Signature looks that suit it

R3F floating object3d · about 210 KB JSWebGL hero scene3d · about 150 KB JSParallax layersscroll · about 45 KB JSMagnetic buttonscursor · about 28 KB JSPage transitionstransition · about 1 KB JSKinetic headlinekinetic-type · about 34 KB JS