claymorphismlisted

# Claymorphism Claymorphism turns flat UI into something you almost want to squish. Surfaces look molded from soft pastel clay—rounded corners, puffy edges, and a pairing of inner highlights with outer drop shadows that make every element feel raised and touchable. It's warm, friendly, and unmistakably playful, perfect for products that want to feel approachable rather than corporate. Reach for it on consumer apps, onboarding, and anything where delight and tactility beat density. ## Design principles - Everything is rounded: large radii (20–28px) on cards, buttons, inputs, and icons—no sharp corners anywhere. - Dual-shadow depth: each surface combines a soft outer drop shadow with an inner light highlight to read as puffy clay. - Pastel and soft: low-to-mid saturation colors on a tinted, airy background keep the mood gentle. - Chunky and touch-first: generous padding and large hit targets make it feel made for fingers. - Playful but legible: rounded type and bright accents stay readable, never sacrificing clarity for cuteness. - Pressed vs. raised: interactive states swap between raised (default) and inset (active) to mimic physical pressing. ## Color The background is a soft lilac wash (`#F0EEFB`) so white-ish surfaces (`#FBFAFF`) read as gently raised clay. Text is a deep plum (`#2E2A45`) with a muted secondary (`#8A82A8`). The hero accent is a friendly violet `#7C5CFC`, used for primary buttons, active toggles, and key icons. Supporting accents are candy pink `#FF8FB1`