黏土拟态Claymorphism
厚圆角、内阴影加外投影，让元素像软陶一样鼓起来；配色以粉彩为主，动效带回弹。亲和力极高，但占空间、难承载高密度信息。
典型场景儿童教育 · 消费级 App · 品牌活动
编号09
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
厚圆角、内阴影加外投影，让元素像软陶一样鼓起来；配色以粉彩为主，动效带回弹。亲和力极高，但占空间、难承载高密度信息。
关键词
Soft 3Dchunkyplayfultoy-likebubblythick borders (3-4px)double shadowsrounded (16-24px)
别名
Claymorphism (for patients)
效果与动效
Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions
设计系统变量
--border-radius20px--border-width3-4px--shadow-innerinset -2px -2px 8px--shadow-outer4px 4px 8px--color-palettepastels--animationbounce配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG
辅色 / Secondary
Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle
强调色在页面底色上的对比度约 3.7:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Educational apps
- children's apps
- SaaS platforms
- creative tools
- fun-focused
- onboarding
- casual games
避开 / Do Not Use For
- Formal corporate
- professional services
- data-critical
- serious/medical
- legal apps
- finance
框架兼容
tailwindcss-in-js
能力矩阵
浅色模式支持
深色模式有条件支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Border-radius 16-24px,
- Thick borders 3-4px,
- Double shadows (inner+outer),
- Pastel colors used,
- Soft bounce animations,
- Playful interactions
CSS / 技术关键词
border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)
下辖变体：黏土拟态（移动）。
AI 提示词
Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.