Claymorphism

---
name: claymorphism
description: Apply the Claymorphism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Claymorphism, mentions clay UI, claymation UI, puffy 3D, or describes inflated triple-shadow surfaces, pastel lavender/peach/mint fills, huge 24–48px radii — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Claymorphism Design System

Puffy, toy-like interfaces that look sculpted from soft modeling clay: pastel fills, huge 24–48px radii, and a triple-shadow recipe — big colored outer drop plus light-top and dark-bottom inner shadows — that inflates every card into a squeezable 3D blob. Friendly, tactile, and unapologetically cute.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Claymorphism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (clay UI, claymation UI, puffy 3D, inflated UI, soft 3D pastel), or describes its traits: inflated triple-shadow surfaces; pastel lavender/peach/mint fills; huge 24–48px radii; colored shadows matching each surface; chunky navy typography; springy overshoot motion.

## Design tokens

### Color palette

- Pastel lavender page background: `#f3e8ff` (--color-bg)
- Peach clay card fill: `#ffe8d9` (--color-surface)
- Mint clay card fill: `#d9f2e6` (--color-surface-2)
- Deep navy ink — the anchor against all the pastel: `#1c398e` (--color-text)
- Secondary slate-violet copy: `#4b4d7a` (--color-text-muted)
- Primary violet for buttons and active states: `#5b48c2` (--color-accent)
- Playful pink for highlights and badges: `#ff8fab` (--color-accent-2)
- Optional soft 3–4px outline a shade off the fill: `#e2d4f7` (--color-border)

### Typography

- Display / headings: Montserrat (fallback: Avenir, Helvetica, sans-serif)
- Body: Poppins (fallback: Avenir, Helvetica, sans-serif)
- Type scale: 1.3 ratio, base 16px — computed steps: 16px / 21px / 27px / 35px / 46px / 59px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.15, letter-spacing -0.01em
- Body: line-height 1.4, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 50, 72, 96 — Generous everywhere — clay blobs need air; card padding runs ~50px and elements never touch, so each shape reads as its own object.
- Border radius: md 24px, lg 36px, xl 48px, blob 999px — Nothing below 24px; the rounder the clay, the more convincing the inflation.
- Border treatment: none — Optional 3–4px solid border in a slightly darker tone of the fill for a sticker-like outline; most surfaces rely on the shadow stack alone.

### Shadows

- clay: `0 35px 68px rgba(112,100,176,.30), inset 0 -8px 16px rgba(95,70,140,.22), inset 0 8px 16px rgba(255,255,255,.8)` — The canonical clay recipe for cards and panels
- clay-sm: `0 16px 32px rgba(112,100,176,.25), inset 0 -4px 8px rgba(95,70,140,.2), inset 0 4px 8px rgba(255,255,255,.75)` — Buttons, chips, and small controls
- clay-pressed: `0 8px 16px rgba(112,100,176,.2), inset 0 -2px 4px rgba(255,255,255,.6), inset 0 6px 12px rgba(95,70,140,.25)` — Active state — insets swap so the clay looks squeezed in

### Layout

- Max content width: 1200px
- Chunky, widely spaced blobs rather than a strict grid
- Sections separated by curved dividers or floating clay shapes
- Illustrations and 3D characters share the stage with UI chrome
- Asymmetric compositions with a few decorative blobs drifting behind

### Effects

- Outer shadows tinted to match each surface's hue, never neutral gray
- Floating decorative clay spheres and squiggles behind content
- Slow idle bob (4–6s) on hero illustrations

### Motion

- Easing: cubic-bezier(0.34, 1.56, 0.64, 1); durations 150ms / 300ms / 500ms
- Everything springs: hover scales to 1.03 with overshoot, press squashes to 0.97
- Cards bounce in on entry with slight rotation settle
- Pressed state swaps to clay-pressed insets so the material visibly deforms
- Respect prefers-reduced-motion by replacing springs with fades

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f3e8ff;
  --color-surface: #ffe8d9;
  --color-surface-2: #d9f2e6;
  --color-text: #1c398e;
  --color-text-muted: #4b4d7a;
  --color-accent: #5b48c2;
  --color-accent-2: #ff8fab;
  --color-border: #e2d4f7;
  --radius-md: 24px;
  --radius-lg: 36px;
  --radius-xl: 48px;
  --radius-blob: 999px;
  --shadow-clay: 0 35px 68px rgba(112,100,176,.30), inset 0 -8px 16px rgba(95,70,140,.22), inset 0 8px 16px rgba(255,255,255,.8);
  --shadow-clay-sm: 0 16px 32px rgba(112,100,176,.25), inset 0 -4px 8px rgba(95,70,140,.2), inset 0 4px 8px rgba(255,255,255,.75);
  --shadow-clay-pressed: 0 8px 16px rgba(112,100,176,.2), inset 0 -2px 4px rgba(255,255,255,.6), inset 0 6px 12px rgba(95,70,140,.25);
  --border-default: none;
  --font-display: Montserrat, Avenir, Helvetica, sans-serif;
  --font-body: Poppins, Avenir, Helvetica, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.4;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Poppins:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Floating clay pill bar detached from the top edge, 999px radius, clay-sm shadow; nav items are chip-shaped and squash on press
- **Hero:** Oversized 800-weight Montserrat headline in navy over lavender, flanked by floating 3D clay characters; CTA is a fat violet clay pill
- **Card:** Pastel fill (rotating peach/mint/lavender), 36px radius, full clay shadow stack, 50px padding, one emoji-scale illustration per card
- **Button (primary):** #5b48c2 fill, white 600-weight label, 999px pill, clay-sm shadow; springs on hover, squeezes on press
- **Button (secondary):** White clay pill with navy label and the same inset treatment at lower opacity
- **Form fields:** White fill, 24px radius, inset-only clay shadows so the field reads as pressed into the surface; focus adds a 3px violet outer ring

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The clay shadow stack itself: a large colored outer shadow (0 35px 68px), a dark inset at the bottom edge and a bright white inset at the top, making flat rectangles read as hand-squeezed clay pillows. Spend boldness here; keep everything else quiet.

## Do

- Tint every outer shadow with the surface's own hue — gray shadows kill the clay illusion instantly
- Keep radii at 24px minimum and pad interiors generously so shapes stay pillowy
- Anchor the pastels with one very dark ink (#1c398e) for all critical text
- Use springy overshoot easing so the material feels squeezable

## Don't

- No sharp corners, hairline borders, or flat design fragments mixed in
- Don't run pastel-on-pastel text — copy always sits in navy or on white
- Avoid using clay for dense data UIs; the chunky padding collapses at scale
- Don't stack more than two clay layers, or the inflation logic stops reading

## Accessibility notes

- Navy #1c398e on lavender #f3e8ff passes AA comfortably (~8.8:1), but pastel-on-pastel pairings (peach on lavender) are decorative only — never encode meaning in fill color alone
- Accent #5b48c2 on #f3e8ff measures ~5.7:1 — safe for labels, but the lighter pink accent-2 fails on pastels and must stay decorative
- The signature spring animations must be disabled under prefers-reduced-motion; overshoot is especially problematic for vestibular users

## Reference sites

- Hype4 Academy — claymorphism generator: https://hype4.academy/tools/claymorphism-generator
- Dribbble claymorphism tag: https://dribbble.com/tags/claymorphism
- Duolingo: https://www.duolingo.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip claymorphism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/claymorphism.json

Settings → Capabilities → Skills → Upload skill → claymorphism.zip