Claymorphism
黏土风
Aliases:黏土风黏土拟物软糖质感设计膨胀立体卡片3D黏土按钮橡皮泥风格Clay 3DPuffy UI
What is it
A visual language that molds controls from soft clay: generous radii on pastel grounds, with a double shadow — an inner concave plus an outer inflated drop — so elements feel like air-puffed clay: round, plump, squishable. A tactile middle ground between neumorphism and 3D cartoon.
Design spec
Typography
Rounded sans
Color
Lavender base #EDF0FF, white cards, violet #6C7BFF
Border
Borderless with 22px+ radius
Shadow
Outer + inset shadows create the clay feel
Spacing
Puffy spacing, elements float apart
Motion
180–240ms soft elastic press transitions; honour prefers-reduced-motion
States
Hover lifts and deepens the outer shadow; focus shows a visible violet ring; active becomes an inset press; disabled flattens and desaturates; error uses a coral inset
Style in action
The same page, ready to useGive it a squeeze opens the clay cabin. Pick a color, squeeze repeatedly and update counter and character together, then save to the cabin. Home, Cabin, Shop and the bear entry reveal content without real purchases.
Full-page preview · interact directly
What to look for
- 01Use Claymates’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the Claymates task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ When to use
- Kids, education and casual games that want approachable tactility
- Relaxed social and consumer brands signaling cuteness and ease
- Mobile touch interactions that want tactile feedback
✕ When not to use
- Professional, fintech and enterprise contexts — clay reads unserious
- Dense dashboards where inflated shadows eat space and focus
- Heavy dark-mode usage where pastel inflation is hard to sustain
Variants
Soft Clay
软黏土
Classic pastel with the inflated double shadow
Candy Clay
糖果黏土
Saturated jelly tones close to game UI
Dark Clay
深色黏土
Matte clay on dark grey, inflation kept
Implementation
border-radius: 20pxbox-shadow: inset 0 -6px 12pxbox-shadow: 0 12px 24pxpastelInflation formula = big radii (20–32px) plus three shadows: a large blurred same-hue drop (e.g. 0 14px 28px at 35% of the base color), an inner bottom press (inset 0 -8px 16px), and an inner top light (inset 0 3px 6px white). Tinted shadows must stay in-family — never grey. On press, shrink the drop and deepen the inner shadow to feel squeezed. Dark clay uses deep grey with a darker same-hue drop.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Build a complete Claymates page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. Keep Claymates’ lavender ground, white 22px-radius cards, violet actions and dimensional device panel. Reuse token drop/inset shadows rather than replacing every button with a new 18px clay recipe. The cabin’s .gs-blob retains irregular soft contours, upper/lower inset shadows and a tinted drop; squeezing triggers only the existing .35s deformation. Reuse current preview.tokens: background #EDF0FF; foreground #3A3F5C; accent #6C7BFF / #fff; card #FFFFFF; border rgba(108,123,255,.18); radius 22px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow 0 14px 28px rgba(108,123,255,.22), inset 0 -6px 12px rgba(108,123,255,.10). Use generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows. Full-page operations: Give it a squeeze opens the clay cabin. Pick a color, squeeze repeatedly and update counter and character together, then save to the cabin. Home, Cabin, Shop and the bear entry reveal content without real purchases. Share one renderer between static covers, the detail experience and /style-scenes/claymorphism/ (English /en/style-scenes/claymorphism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesSimilarA loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffectsA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsAffects