jdsadminllc Claymorphism
Mission
Make digital interfaces feel physical and playful — like pressing into soft clay — through layered inner and outer shadows that create puffy, extruded 3D elements.
Brand
🎨 Colors
#f0f4ff— Background (soft pastel blue)#a8d8ea— Primary clay blue#ffb3ba— Accent clay pink#bae1ff— Secondary clay blue#ffffba— Highlight yellow#e8dff5— Soft purple clay
🔤 Typography
- Headings: Fredoka (Google Fonts)
- Body: Nunito (Google Fonts)
- Scale: xs 0.75rem, sm 0.875rem, base 1rem, lg 1.125rem, xl 1.375rem, 2xl 1.75rem, 3xl 2.25rem
📐 Spacing
- Grid: 12-column, 24px gutters
- Section padding: 4rem vertical, 2rem horizontal
- Card gaps: 1.5rem
🧩 Components
- Buttons: Puffy — 16px border-radius, solid clay fill,
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.1), press animation reduces inner shadow - Cards: Large 20-24px border-radius, clay fill,
box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), 0 8px 24px rgba(0,0,0,0.08), 24px internal padding - Nav: Soft pill-shaped container with clay shadow, centered or floating, pastel background
- Hero: Playful — large Fredoka headline, soft gradient or solid pastel background, puffily animated illustration
- Footer: Rounded clay block, soft shadows, simple links, pastel tone
♿ Accessibility
- Minimum contrast ratio 4.5:1 for body text against pastel backgrounds
- Focus states: 3px colored outline with 2px offset, using the primary clay color
- Reduced motion: Disable all shadow animations and press effects, use static shadows only
- Minimum font size 0.75rem (12px) for body, 0.875rem recommended
✍️ Writing Tone
- Voice: Playful, friendly, encouraging — like a children's book narrator
- Labels: Rounded, friendly language, emoji welcome but not required
- Short sentences, upbeat endings
Do / Don't
✅ Do
- Use both inner and outer shadows on every major element
- Keep the color palette soft and pastel — nothing harsh or saturated
- Add a subtle press/tap animation (reduce inner shadow on active)
- Use generous border-radius (16px minimum for interactive elements)
- Layer multiple clay elements with varying shadow depths for visual hierarchy
❌ Don't
- Use sharp corners — border-radius below 12px breaks the puffy illusion
- Add dark, heavy shadows — keep them light and soft (max 15% opacity)
- Use neon or highly saturated colors — they clash with the pastel palette
- Apply claymorphism to text directly — only to containers
- Overdo it — not every element needs to be clay; let some surfaces stay flat
Quality Gates
- All interactive elements have both inner and outer shadows
- No border-radius below 12px on any component
- Shadow colors use rgba with ≤ 15% black opacity
- Body text passes 4.5:1 contrast against its background
- Press animations respect prefers-reduced-motion
- Color palette contains only pastels — no saturated or neon values