Claymorphism vs Illustration
Both are soft, both are warm, and both avoid the straight line. One gets there with shadow; the other gets there with geometry.
Short answer: Claymorphism rounds everything to a pill or a 26px card and lifts it with a paired shadow. Illustration keeps the corners but makes every one of them different — a radius like 240px 20px 220px 18px, so each block reads as a cut-out rather than a component.
What actually separates them
Clay is a shadow style. Cards sit at 26px radius, buttons are 999px pills, and depth comes from two outer shadows — one cool grey offset down-right, one pure white offset up-left. Hovering lifts the card 2px and grows both. Nothing is insett; everything rests on the surface.
Illustration is a geometry style. The radii are deliberately unequal per corner, blocks carry a 2px outline in a soft tint (2px solid #a9d8bf, or #f0dcc0), and the whole page tilts by a single degree. There is no drop shadow at all — the hand-drawn impression comes from asymmetry, not from light.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Claymorphism | Illustration Focused |
|---|---|---|
| Corner treatment | 26px cards, 999px pills — uniform | ● Unequal per corner, e.g. 240px / 20px / 220px / 18px |
| Depth | ● Two outer shadows, light and dark | None — no drop shadow anywhere |
| Outline | None; shadow defines the edge | ● 2px solid in a soft tint |
| Tilt | None | ● rotate(-1deg) on the brand mark |
| Palette | Blue, mint, pink, cream pastels | Warm sand, sage, terracotta |
| Motion | ● Hover lifts 2px, shadow grows | None; the drawing is static |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Claymorphism | Illustration Focused |
|---|---|---|
| Card | border-radius: 26px; box-shadow: 6px 6px 14px rgba(140,160,200,.5), -5px -5px 12px #fff |
border-radius: 240px 20px 220px 18px / 18px 200px 20px 230px; border: 2px solid #f0dcc0 |
| Pill | border-radius: 999px |
border-radius: 120px 18px 110px 16px / 16px 110px 18px 120px |
| Shadow | paired, outer, offset 6px |
none |
| Tilt | none |
transform: rotate(-1deg) |
When each one wins
Claymorphism wins when
- The interface has real controls and the softness should not remove the sense of a button being pressable
- The audience is consumer or education, where pastel and lift read as friendly rather than childish
- You need a system — one radius, two shadows — that a team can apply consistently
Illustration Focused wins when
- The page is a story or a small brand site with few components and a lot of personality
- You want warmth without pastel, which the sand-and-sage palette gives you
- Every block is unique anyway, so a per-corner radius costs nothing
Steering a model to one or the other
Both prompts should say "no straight lines", which is why models produce similar output. The split is shadow: ask for a paired outer shadow with a 6px offset and you get clay; say explicitly that there is no shadow at all and the softness comes from unequal corner radii plus a 2px tinted outline, and you get illustration. A model given "soft rounded cards" will add a drop shadow by default and land on clay every time.