Claymorphism vs Neumorphism
クレイモーフィズム / ニューモーフィズム
Both sit in UI Expression, so the question is not what they belong to but how they behave. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
Claymorphism
Makes digital components soft and playable with rounded, clay-like volume.
Neumorphism
Makes background and controls one material, showing relief through soft shadow alone.
| Claymorphism | Neumorphism | |
|---|---|---|
| Era | 2020s | late 2010s– |
| Family | UI Expression | UI Expression |
| Kind | Style | Style |
| Cues | Inflated forms / Inner highlights / Soft shadows / Pastels | Same-color surfaces / Two-direction shadows / Rounded parts / Low contrast |
| Best used for | Making education, wellness and onboarding friendly · 3D icons with character | Concept screens with few interactions · A soft, quiet product impression |
| Type | A rounded sans-serif | A concise sans-serif |
| Composition | One large dimensional object and a short caption | Big margins, few controls |
| Material | Tonal lights and darks, rounded corners, a soft contact shadow | Pale ground, one light and one dark shadow, rounded corners |
| Caution | Don't leave control states to shadows alone. Reserve the volume for the hero. | Contrast failure comes easily. Mark key actions and states with color and outline too. |