# Claymorphism > Chunky pastel shapes that look squeezed from modelling clay: huge radii, a bright inner highlight and a soft coloured shadow underneath. - Nickname: Puffy clay - Also called: Clay UI, Clay 3D, Plasticine UI - Category: Soft & Dimensional - Moods: Playful, Friendly, Dreamy - Industries: Education, Kids & Family, Startup & Tech, Gaming, Fitness & Wellness - Style page: https://uilingo.dev/styles/claymorphism/ Claymorphism makes every card and button look like a soft, inflated piece of plasticine. Each surface gets a pastel fill, very large rounded corners (24–44px), two inner shadows — a white highlight top-left and a darker tint bottom-right — and a blurred, colour-tinted drop shadow that lifts it off a light lilac page. Type is chunky and rounded, icons sit in glossy clay balls, and the overall feel is playful, tactile and friendly — perfect for learning, kids and casual consumer apps. ## Best for - Learning and course apps for students and kids - Onboarding and empty-state illustrations - Casual games, habit trackers and rewards - Friendly consumer landing pages ## Avoid for - Serious finance, legal or government products - Dense data dashboards - Luxury or minimal brands ## Do - Use radii of 22–44px and keep shapes plump, never sharp - Stack two inner shadows (white highlight top-left, tinted shade bottom-right) plus one coloured outer shadow - Rotate 6 pastel fills across cards: lilac #E9E0FF, mint #D3F5E8, peach #FFE2D2, sky #DAEDFF, butter #FFF1BF, pink #FFE0EC - Make presses squish: translateY(2px) scale(.97) and a shorter outer shadow ## Don't - Don’t use thin outlines or hairline borders - Don’t use grey or black drop shadows — tint them with the primary colour - Don’t pair it with thin or condensed type - Don’t put multi-line body text on saturated fills; keep paragraphs on pale pastels ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Claymorphism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Chunky pastel shapes that look squeezed from modelling clay: huge radii, a bright inner highlight and a soft coloured shadow underneath. Design keywords: puffy clay cards, pastel fills, huge rounded corners, inner highlight + inner shade, coloured soft drop shadow, chunky rounded type, clay ball icons, squishy press. ## Visual language Every card, button and icon looks like a soft, inflated piece of modelling clay sitting on a pale lilac table. Shapes are plump with huge rounded corners, filled with candy pastels (lilac, mint, peach, sky, butter, pink), lit by a bright inner highlight on the top-left and shaded by a darker inner tint on the bottom-right, then lifted by a blurred purple-tinted shadow. Icons live inside glossy clay balls, type is chunky and rounded, and presses squish. It feels playful, tactile and encouraging — a learning app for students. ## Signature details (must be visible) - Surface recipe: inset -6px -8px 16px rgba(70,40,160,.12), inset 6px 8px 16px rgba(255,255,255,.9), 0 18px 30px -12px rgba(109,74,232,.32) - Radii 16/22/32/44px; buttons and chips are full pills; no decorative borders or outlines — the only strokes are state rings: 2px #6D4AE8 on focus/selected (radio cards, inputs) and 2px #C9344A on error - Declared extras (every other colour comes from the tokens): pastel card fills --cl-lilac #E9E0FF, --cl-mint #D3F5E8, --cl-peach #FFE2D2, --cl-sky #DAEDFF, --cl-butter #FFF1BF, --cl-pink #FFE0EC on a #F6F0FF page with soft pastel blobs behind; clay-ball colours purple #6D4AE8, pink #F2689C, green #22A883, butter-yellow #FFC65C (glow rgba(230,160,40,.6)), light mint #6FD9B9, lilac #B7A2FF (CTA sphere) and pink #FF9EC4; field #FBF8FF; disabled #E7E2F3 with #8C86A6 text; badge text on butter #6A4500 - Clay balls (54px circles; icon balls rotate #6D4AE8 / #F2689C / #22A883): background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 12%, transparent 34%), ; box-shadow: inset -4px -5px 10px rgba(0,0,0,.16), inset 4px 5px 10px rgba(255,255,255,.4), 0 8px 14px -6px . Only one gradient — no darker stop to compute - Primary colour #6D4AE8 used as solid clay: inset -4px -5px 10px rgba(0,0,0,.16), inset 4px 5px 10px rgba(255,255,255,.4), plus a purple glow 0 12px 20px -8px rgba(109,74,232,.55) - Token roles: secondary pink #FF9EC4 = the pink clay button and the pink clay balls (step 1, hero stat tile); accent mint #3FC29E = switch ON track only (check ticks use success #1E8455); border #E4D9FF = divider and table-row lines only - Fields, tracks and wells are pressed into the clay: inset 3px 4px 8px rgba(70,40,160,.16), inset -3px -4px 8px rgba(255,255,255,.9) - Bouncy motion: 260ms cubic-bezier(.34,1.56,.64,1); press = translateY(2px) scale(.97) with a shorter outer shadow - Fredoka headings + Lexend body; Thai headings Mitr 500–600. Body font-weight 400; add :lang(th) body copy { font-weight: 300 } (Mitr 300 is loaded; Lexend has no 300 so Latin falls back to 400) ## Design tokens — use these exact values Colours (light mode): - background #F6F0FF - surface #FFFFFF - surface-2 #EFE6FF - text #2B2257 - text-muted #57507F - primary #6D4AE8 (text on it #FFFFFF) - secondary #FF9EC4 (text on it #2B2257) - accent #3FC29E - border #E4D9FF - success #1E8455 · warning #9E5A00 · danger #C9344A - chart series #6D4AE8, #FF7FAE, #3FC29E, #FFB547, #5AB3FF Radius: sm 16px, md 22px, lg 32px, xl 44px, pill 999px Border width: 0px Shadows: sm `inset -3px -4px 8px rgba(70,40,160,0.12), inset 3px 4px 8px rgba(255,255,255,0.9), 0 8px 14px -6px rgba(109,74,232,0.28)`, md `inset -6px -8px 16px rgba(70,40,160,0.12), inset 6px 8px 16px rgba(255,255,255,0.9), 0 18px 30px -12px rgba(109,74,232,0.32)`, lg `inset -10px -12px 24px rgba(70,40,160,0.14), inset 10px 12px 24px rgba(255,255,255,0.9), 0 30px 50px -18px rgba(109,74,232,0.4)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 260ms cubic-bezier(.34,1.56,.64,1) ## Typography (Latin + Thai) - Headings: Fredoka 500/600/700 with Thai fallback Mitr 500/600 - Body: Lexend 400/500/600 with Thai fallback Mitr 300/400/500 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lexend:wght@400;500;600&family=Mitr:wght@300;400;500;600&display=swap - CSS stacks: heading `"Fredoka", "Mitr", system-ui, sans-serif`; body `"Lexend", "Mitr", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 5.8vw, 4.6rem), heading weight 600, heading tracking -0.01em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Mitr is a chunky, rounded loopless Thai that has the same soft, inflated stroke ends as Fredoka and stays readable at body sizes next to Lexend. ## Components - Primary button: 48–58px tall purple clay pill, Fredoka 600; hover lifts 2px and scales 1.02; press = translateY(2px) scale(.97) and a shorter glow; focus-visible = 0 0 0 4px rgba(109,74,232,.35) on top of the clay shadow; disabled = background #E7E2F3, text #8C86A6, box-shadow inset 3px 4px 8px rgba(70,40,160,.16), inset -3px -4px 8px rgba(255,255,255,.9) - Secondary button: white clay pill with purple text and the soft surface shadow - Cards: pastel clay slabs, 32px radius, 28px padding; hover lifts 4px with a tiny -0.6deg tilt; the highlighted plan is solid purple clay with short white headings, price in white Fredoka and a one-line caption; its 3–4 line feature list is white Lexend text with butter #FFF1BF check icons (single-line items are allowed on purple); the badge is #FFF1BF with #6A4500 text - Inputs: 52px tall, field #FBF8FF, pressed-in inner shadow, 2px transparent border that turns #6D4AE8 on focus with a 5px soft purple halo, and #C9344A on error - Checkbox/radio: pressed-in 26px wells that pop into purple clay when checked; switch is a pressed lilac track turning mint with a glossy white clay thumb - Tabs and segmented controls: a pressed-in lilac track; the active tab is a solid purple clay pill - Badges: tinted pastel pills with a tiny inner bevel; status uses mint/butter/pink fills - Steps: 64px clay squares, radius 22px, rotated -6deg / 5deg / -3deg, fills pink #FF9EC4 / butter #FFC65C / mint #6FD9B9 with dark #2B2257 Fredoka numbers - Logos: a row of muted Fredoka 600 wordmarks with small hexagon glyphs, no cards; keep all six on one line on desktop (or a 3×2 grid when narrower) - Charts: 4.5px round-capped lines, bars as rounded clay sticks with inner shading, heatmap cells as little clay tiles, funnel steps as pills - FAQ = white clay accordion rows (radius 22px, shadow-sm); the open row turns --cl-lilac #E9E0FF with a purple + / − clay ball. Footer = plain #F6F0FF with muted links, no slab - Mobile tab bar: floating white clay capsule; the active icon rises 4px into a glossy purple clay square ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: a bento grid where the headline is the largest tile and stats/features fill the others. Navigation: bar style. Sections in order: hero → logos → features → steps → testimonials → pricing → faq → cta. Feature section as grid. Use a bento hero: one big lilac clay slab holds the headline and buttons, two pastel stat tiles carry big purple numbers and a decorative clay ball each, and a purple clay feature tile carries two floating spheres, #FFC65C (150px) and #6FD9B9 (70px) — this tile is the hero's product visual, so don't add a separate mock. The stat-tile balls are #FF9EC4 (a circle) and #FFC65C (a rotated rounded square). Navigation is a white clay bar inset 16px from the viewport edges with a 44px radius (it reads as a floating pill). A logos row of muted wordmarks follows. Features sit in a 3×2 grid (2 columns below 900px) of rotating pastel cards with coloured clay-ball icons, steps use tilted clay number blocks, testimonials rotate sky/butter/mint, and the CTA is a pale pink --cl-pink #FFE0EC clay slab (radius 44px, shadow-lg) with a lilac #B7A2FF sphere peeking from the top-left corner, a #FFC65C sphere from the bottom edge, and a purple clay button. Dashboards use a floating white clay sidebar, pastel KPI tiles and chunky, rounded charts. ## Content Use realistic product copy (fictional brand) suited to: Learning and course apps for students and kids. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use radii of 22–44px and keep shapes plump, never sharp - Stack two inner shadows (white highlight top-left, tinted shade bottom-right) plus one coloured outer shadow - Rotate 6 pastel fills across cards: lilac #E9E0FF, mint #D3F5E8, peach #FFE2D2, sky #DAEDFF, butter #FFF1BF, pink #FFE0EC - Make presses squish: translateY(2px) scale(.97) and a shorter outer shadow ## Don't - Don’t use thin outlines or hairline borders - Don’t use grey or black drop shadows — tint them with the primary colour - Don’t pair it with thin or condensed type - Don’t put multi-line body text on saturated fills; keep paragraphs on pale pastels - Monochrome surfaces matching the background — that is Neumorphism - Decorative borders, outlines or sharp corners under 16px (state rings on focus, selection and error are the only strokes) - Grey or black drop shadows; always tint shadows with the primary or the element colour - Cute faces, sparkles and sticker outlines everywhere — that drifts into Kawaii - Thin, condensed or serif type; keep type chunky and rounded - Long paragraphs on saturated clay. Short white headings, one-line captions and single-line list items on the purple tiles and highlighted plan are fine; body text of 2+ lines stays on pastel or white ## Stack notes One self-contained HTML file with a