Design for AIClaymorphism: UI design prompt
Palette, type rules and a pasteable prompt for claymorphism. Also called clay UI, 3D clay, inflated UI, puffy UI. 2021-2023 (named by Michal Malewicz, 2021).
Traits
- puffy, inflated shapes that look moulded from soft clay
- two inset shadows (light top-left, darker bottom-right) plus a big outer drop shadow
- very large radius (24-40px), often fully rounded corners on small elements
- pastel and candy colours with a slightly darker shade of the same hue for the shadow
- 3D-looking illustrations and blobby icons match the surfaces
- friendly, toy-like, lots of white space
- light backgrounds, never dark mode
Palette
#f4f1fb page, #ffffff card, #a78bfa primary clay, #7c3aed primary shadow tint, #fbcfe8 secondary clay, #1f1235 text
Type
Fredoka or Baloo 2 for headings (round, chunky), Nunito for body; headings 700 at 32-48px, body 500 at 16-17px
Do
- pair every clay colour with a 20% darker shade for its bottom-right inset shadow
- keep outer shadows in the element's own hue (not grey) so it looks moulded, not floating
- use big radius everywhere, including images and input fields
Don't
- do not use sharp corners or thin borders anywhere; it breaks the material
- do not use on dark backgrounds; clay reads as wet plastic there
- do not mix with flat icons; use rounded, filled icons
Known for it: Duolingo-adjacent product illustrations, Kids and edtech apps, Play-to-earn game landing pages 2022
CSS seed
:root {
--bg: #f4f1fb;
--fg: #1f1235;
--accent: #a78bfa;
--accent-dark: #7c3aed;
--radius: 32px;
--shadow: inset -8px -8px 16px rgba(124,58,237,0.35),inset 8px 8px 16px rgba(255,255,255,0.6),12px 20px 40px rgba(124,58,237,0.25);
--font: 'Fredoka',sans-serif
}
Prompt
Build the site in claymorphism style. Page background #f4f1fb, text #1f1235. Cards are white with border-radius 32px and box-shadow: inset -8px -8px 16px rgba(31,18,53,0.08), inset 8px 8px 16px rgba(255,255,255,0.9), 12px 20px 40px rgba(31,18,53,0.12). Primary buttons are #a78bfa with box-shadow: inset -6px -6px 12px #7c3aed, inset 6px 6px 12px #c4b5fd, 8px 12px 24px rgba(124,58,237,0.3), radius 999px, white text 700. Secondary clay colour #fbcfe8 with shadow #f472b6. No borders, no sharp corners; images and inputs get radius 24px. Fonts: Fredoka 700 for headings at 48/36/24px, Nunito 500 for body at 17px, line-height 1.6. Spacing generous (40px section padding on mobile, 96px on desktop). Hover: translateY(-3px) and shadow grows, 200ms ease-out; active: inset shadows swap sides.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in claymorphism style. Page background #f4f1fb, text #1f1235. Cards are white with border-radius 32px and box-shadow: inset -8px -8px 16px rgba(31,18,53,0.08), inset 8px 8px 16px rgba(255,255,255,0.9), 12px 20px 40px rgba(31,18,53,0.12). Primary buttons are #a78bfa with box-shadow: inset -6px -6px 12px #7c3aed, inset 6px 6px 12px #c4b5fd, 8px 12px 24px rgba(124,58,237,0.3), radius 999px, white text 700. Secondary clay colour #fbcfe8 with shadow #f472b6. No borders, no sharp corners; images and inputs get radius 24px. Fonts: Fredoka 700 for headings at 48/36/24px, Nunito 500 for body at 17px, line-height 1.6. Spacing generous (40px section padding on mobile, 96px on desktop). Hover: translateY(-3px) and shadow grows, 200ms ease-out; active: inset shadows swap sides.
## Tokens
:root { --bg:#f4f1fb; --fg:#1f1235; --accent:#a78bfa; --accent-dark:#7c3aed; --radius:32px; --shadow:inset -8px -8px 16px rgba(124,58,237,0.35),inset 8px 8px 16px rgba(255,255,255,0.6),12px 20px 40px rgba(124,58,237,0.25); --font:'Fredoka',sans-serif }
Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.