A gradient is its worst stop
White on the specified button gradient is 5.70 at the dark end and 2.72 at the light end — safe on half the button and invisible on the other half. Flat fills here use the dark end.
Design preset
Objects made of clay, not of paper
A fixed light above and to the left, deep occlusion beneath each object and a highlight along its upper ridge. Buttons bulge out and squish when pressed; inputs are pressed into the surface. The shadows are tinted with the object's own colour, because a grey shadow here is neumorphism — the thing this style defines itself against.
2.72:1White on the gradient's light end
5.70:1White on its dark end
4Shadow layers
5.58:1The spec's muted grey — correct
Three rules
Never four pixels
The specification forbids a small radius outright, and it is right: 20px on buttons, 32 on cards, 48 and up on containers. One 4px corner and the material turns back into a generic rounded rectangle.
Shadows take the object's hue
A violet button drops a violet shadow. Swap it for grey and the page stops being clay and becomes soft-UI, which is a different and much colder style.
The physics
Convex bulges. Concave presses.
This panel is concave — it is pressed into the surface, with the shadow on its top edge and the light caught along its bottom lip. The buttons below are convex and do the opposite. Press one and it scales to 95% and inverts its own shadow, which is the entire feedback mechanism of the style.
Three tiers
Placeholder figures — not an offer
Frequently asked
Is this a mock-up or the real thing?
A specimen, hand-built to the preset's specification so the style can be seen whole
rather than as a thumbnail. The preset itself is a set of WordPress Theme Settings, and a
generated site carries the palette, Nunito over DM Sans, the 20px button radius and the
convex clay shadow with its squish. The four-layer stack on cards, the gradient orbs and the
blurred background blobs are markup, so a section that wants them still asks for them.
Why is the button a flat colour rather than the gradient?
Because white on the gradient's light end measures 2.72 to one. The gradient is not the
problem — the assumption that one text colour works along its whole length is. A flat fill at
the dark end carries white at 5.70 and loses nothing that mattered.
How is this different from neumorphism?
Colour. Neumorphism extrudes everything from one grey surface with grey shadows;
claymorphism gives each object its own hue and tints the shadow to match, so objects look
like separate pieces of material sitting on a surface rather than bulges in it.
Build a site in this preset.
Describe the business and your own AI agent builds it on WordPress with Unyson+ — real page-builder pages, with this design system applied site-wide.