C · 3 / 26

C — Claymorphism

Soft, inflated, made to be pressed.

The style

Modelled, not drawn.

Around the end of 2021 the designer Michał Malewicz, of the Hype4 studio, gave a name to a look that was spreading through interfaces: claymorphism. It came from the soft 3D illustrations then everywhere on Dribbble and product sites, rounded figures rendered matte as if modelled in clay, and asked what buttons and cards would look like made the same way.

The recipe is short. A rounded shape in a light, sweet colour; a large radius; a soft shadow beneath, so it floats; and two inner shadows, a highlight along one edge and a shade along the other, so the surface seems to swell. Nothing is outlined. Everything looks squeezable.

It is a near relative of neumorphism, and an easier one to read. Neumorphic controls are pressed out of the page in the page’s own colour, so their edges dissolve. Clay objects float above the page in colours of their own. The style suits playful work, such as onboarding, games and products for children, and it needs dark text to stay readable on its pastels.

In use

A learning app, made of clay.

A children’s lessons app at full density: a streak, today’s goal, lessons and a reward chest. Press Go to finish the lesson, then open the chest.

Hi, Ari!Ready for some shapes?

5 day streakFinish a lesson to keep it

Monday, done
Tuesday, done
Wednesday, done
Thursday, done
Friday, done
Saturday, today
Sunday

Today’s goal30 / 50 stars

Lessons

Count to 20Done · 10 stars
Shapes all aroundPart 4 of 5
Mixing coloursFinish Shapes all around to open

Reward chest20 more stars to open it.

Everything you can press is a lumpThe Go button, the chest, every lesson that is open.
Done is mint, now is rose, later is a dipA colour and a word for every state, so neither works alone.
Words stay dark and flatInk on every pastel, 8.3:1 or more. The clay is the surface, not the type.
It gives when touchedPress Go: the bar fills on a spring. Open the chest: the stickers bounce out.

The kit

Every part, every state.

The parts that app is built from, in every state. The rows of states hold still for comparison; everything else works, and squishes.

Button

Disabled fades to 45% and stops giving

At rest it floats on an 11px drop. Hover squashes it to 1.07 × 0.92; a press takes the drop away and deepens the shade.

Text field

A grown-up’s email

A field is a dip; text stays ink on white

Select

Reading level

The chosen one turns lilac and gets a tick

Switch, checkbox, radio

Sounds

Music

Read the questions aloudBig buttons

Pace

GentleSteadySpeedy

Slider

Lesson length10 min

Volume60%

The thumb is a ball of clay in a dip

Progress

Shapes pack60%

68%This week

The number says it; the clay repeats it

Fetching your stickers…

Segments and tabs

12 done, 3 to go this week.

Chosen: a colour and a lift, never colour alone

List rows

Who’s learning?AriAge 6 · ShapesBoAge 8 · FractionsCassAge 5 · Letters

Rows 64 high, 12 apart; chosen turns lilac

Card and loading

Shapes all around5 parts · 10 minutes

Parts: 5
Stars: 50
Age: 4–7

Loading: soft dips, a glow rolling over

Toast

Sticker saved

Lands with a bounce; read out politely

Modal

The highest float on screen; the page behind blurs

Steps

Done: Pick
2Warm up
3Play
4Reward

Done is mint, now is rose, later is a dip

Badges and avatars

New
3 stars
Ages 4–7
Locked

2

Ari, learning now
Bo, learning now
Cass, away

Counts in white on grape, 8.1:1

Signature

Play with the clay.

The style is about give: things that stretch, swell and spring back. Pull the blob, blow up the button until it pops, and model a face from the same few lumps.

Tokens

The system, in numbers.

Seven pastels and four inks, one shadow recipe at four depths, five radii, a spacing scale and one spring. Copy them as custom properties.

Palette

--cream · #fdf6efThe page the clay sits on
--rose · #ffd6e0Primary clay, now and next
--sky · #c9f0ffSwitches on, calm things
--butter · #fff3b0Rewards and streaks
--lilac · #d8c8ffChosen, filled, the main action
--mint · #c8f2d8Done
--peach · #ffdcc2Warm cards
--ink · #3b2d42All text, 8.3:1 or more
--ink-2 · #5f4e66Labels and notes, 4.9:1 or more
--grape · #5b36b0State in words, 5.2:1 or more
--danger · #b3261eErrors, 6.1:1 on cream

Typefaces · Fredoka, Nunito

Squeeze gently.Fredoka Semibold 600
Squeeze gently.Fredoka Regular 400
Squeeze gently.Nunito Regular 400

Depth

Dip--d inset, 0.6
Small--d 0.5
Object--d 1
Floating--d 1.4

One recipe: a drop below, a shade inside the lower right, a highlight inside the upper left, all mixed from the surface’s own colour.

Squash, on one spring

Rest1 × 1
Hover1.07 × 0.92
Press1.14 × 0.84

Radius

16
20
24
32
Pill

Spacing

4
8
12
16
24
32
40

:root {
  --cream: #fdf6ef;
  --rose: #ffd6e0;
  --sky: #c9f0ff;
  --butter: #fff3b0;
  --lilac: #d8c8ff;
  --mint: #c8f2d8;
  --peach: #ffdcc2;
  --ink: #3b2d42;
  --ink-2: #5f4e66;
  --grape: #5b36b0;
  --danger: #b3261e;
  --clay-shade: #6b4a5c;

  /* Clay: a drop below, a shade inside lower right, a highlight inside
     upper left. --c is the surface; --d scales the depth (0.5 small,
     1 object, 1.4 floating); --p (0–1) presses it. */
  --clay-dark: color-mix(in oklab, var(--c), var(--clay-shade) 42%);
  --clay:
    0 calc(var(--d) * 18px * (1 - var(--p))) calc(var(--d) * 34px)
      calc(var(--d) * -10px) color-mix(in oklab, var(--clay-dark), transparent 45%),
    inset calc(var(--d) * -9px) calc(var(--d) * -11px)
      calc(var(--d) * (18px + var(--p) * 10px))
      color-mix(in oklab, var(--clay-dark), transparent calc(70% - var(--p) * 25%)),
    inset calc(var(--d) * 9px) calc(var(--d) * 11px) calc(var(--d) * 18px)
      rgb(255 255 255 / 0.78);

  --radius-chip: 16px;
  --radius-control: 20px;
  --radius-card: 32px;
  --radius-pill: 999px;

  /* Squash and stretch. */
  --squash-hover: 1.07 0.92;
  --squash-press: 1.14 0.84;
  --spring: linear(0, 0.209, 0.641, 1.052, 1.297, 1.342, 1.242, 1.088, 0.955,
    0.887, 0.886, 0.928, 0.982, 1.023, 1.041, 1.03, 1.011, 0.995, 0.986,
    0.988, 0.998, 1.004, 1);
}

Do

One light: a highlight inside the top left, a shade inside the bottom right, a soft drop below.
Round everything and outline nothing. Each object gets its own soft colour.
Let things give when touched: squash on press, spring back on release.
Keep text dark and flat on the pastels. The clay is the surface, not the words.

Don’t

White text on pastel
1.3:1 on rose. Text needs 4.5:1; this page’s ink is 9.7:1.
An outline round the clay
A hard edge flattens the swell. The shading is the edge.
Two lights
One lump lit from the top left, one from the bottom right. The page stops being one table of clay.

In the wild

Where the style shows up outside this page.

A Grand Day Out
Nick Park, Aardman · 1989Real clay, where the look comes from: soft mass, round edges, a thumbprint left in.
Memoji
Apple · 2018Faces as soft 3D toys: no outlines, light from above, everything rounded.
Fluent Emoji
Microsoft · 2021A whole emoji set in matte, puffy 3D with a gentle inner shadow.
Claymorphism in user interfaces
Michał Malewicz · 2021The article that named it for screens: an outer shadow, two inner ones, large radii.

C — Claymorphism

Modelled, not drawn.

A learning app, made of clay.

Lessons

Every part, every state.

Button

Text field

Select

Switch, checkbox, radio

Slider

Progress

Segments and tabs

List rows

Card and loading

Toast

Modal

Steps

Badges and avatars

Play with the clay.

Stretch

Inflate

Model a face

The system, in numbers.

Do

Don’t

White text on pastel

An outline round the clay

Two lights

In the wild

A Grand Day Out

Memoji

Fluent Emoji

Claymorphism in user interfaces