← Back
Best viewed on a desktop. Please switch to a larger device.

Clay
Morph
ism

Soft, inflated, three-dimensional UI elements that look like they were sculpted from clay. Thick, colourful shadows give every component physical depth - a playful rebellion against flat design.

3D
Shadow Depth
2021
Emerged
Puffy
Signature Form
// Clay Shadow System
Offset + Inset Shadows
Directional offset + inner highlight + bottom depth
// Inflated Forms
Puffy Rounded Shapes
High border-radius · soft edges · maximum friendliness
// Pastel Palette
Saturated Pastels
Vivid but soft - never harsh or neon
Colour

Clay Pastel Palette

Saturated pastels with enough brightness to suggest depth when paired with matching coloured shadows.

Clay Purple
#B388FF
Primary UI
Clay Pink
#FF80AB
Accent, CTA
Clay Blue
#80D8FF
Info states
Clay Green
#CCFF90
Success
Clay Yellow
#FFE57F
Warning
Clay Coral
#FF8A65
Error, danger
Clay Teal
#80CBC4
Secondary
Shadows

Clay Shadow Anatomy

The clay look is created by layering three distinct shadows: an offset drop, a blur glow, and an inner highlight.

Offset Only
6px 6px 0px
rgba(140,80,200,.22)
Blur Glow Only
0 16px 40px
rgba(140,80,200,.18)
Inner Highlight
inset top light
+ inset bottom depth
All Three Combined
offset + glow +
inner highlight
Type

Type Scale

Nunito - round, friendly, geometric. Heavy weights for headlines, lighter for body. No sharp corners, anywhere.

Display Claymorphism! 56px · Nunito 900
Round terminals
H1 Puffy, Playful, Physical 36px · Nunito 900
H2 / Card Title Section Heading Style 22px · Nunito 800
Label / Tag CATEGORY TAG · STATUS LABEL 12px · Nunito 800 · Caps
Body Body text in Nunito Sans Regular - approachable, clear, and consistent with the rounded aesthetic of the surrounding components without being too heavy. 15px · Nunito Sans 400
1.75 line-height
Components

UI Components

Buttons & Chips

Chips / Tags
Design UI Kit New Done ✓ Draft

Form Fields

Progress Bars
Design 72%
Development 55%
Launch 30%

Toggles

Navigation

Navigation Patterns

Floating Navbar
Segmented Tabs
Tab content - transitions feel like clay objects sliding into place.
Cards

Card Patterns

🎨
Design System
Clay Components

Puffy, inflated UI elements that look like they were pressed from colourful modelling clay.

New →
🌸
Motion
Bouncy Transitions

Spring-based animations that feel physical and playful - like clay objects bouncing into place.

Motion →
🌊
Accessibility
Friendly by Design

High contrast text on pastel backgrounds, generous touch targets, and clear visual feedback.

A11y →
Layout

Full Application Layout

🏠 Dashboard
📊 Analytics
👥 Team
📁 Projects
🔔 Alerts
⚙️ Settings

Dashboard 👋

👥
12,481
Users
↑ 12%
💰
$48.2k
Revenue
↑ 8%
🚀
99.8%
Uptime
All good
⭐
4.9
Rating
↑ 0.2

Weekly Activity

Principles

Core Principles

01 · Form

Inflate Everything

High border-radius on every element - 16px minimum, ideally 24px–50px. Rounded forms suggest softness and approachability. No sharp corners allowed.

02 · Shadow

The Clay Stack

Three layers: a hard offset drop shadow, a soft diffuse glow, and an inset inner highlight. Together they simulate the raised, tactile quality of sculpted clay.

03 · Colour

Saturated Pastels

Vivid pastels - never washed out, never harsh. The palette sits between muted and neon: bright enough to signal energy, soft enough to feel safe and playful.

04 · Motion

Bounce & Spring

Claymorphic motion uses spring physics rather than linear easing. Elements overshoot slightly and settle - like a clay ball landing on a surface.