粘土风Claymorphism

核心特征

• 奶油、粉蓝、淡黄等低饱和粉彩，整体明亮甜美
• 卡片与按钮圆角很大，常见 28–32px
• 外投影加左上白色内高光与右下深色内阴影
• 元素像充气的粘土，边缘鼓起而不是平贴
• 标题字重很粗，圆润无衬线字体最搭

色板与字体

英文

Nunito（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

真实项目可换成 Quicksand、Baloo 2 或 SF Pro Rounded，圆润的字形与鼓起的形体呼应。

起源与代表作

年代：2021–2022 年流行

粘土风延续了 2020 年前后 3D 插画和新拟态的流行：设计师想保留新拟态的体积感，又不想要它那种灰蒙蒙的低对比。2021 年起，Dribbble 与 Behance 上陆续出现粉彩配色、圆胖形体、带内外多重阴影的界面稿，业界把这类做法称为 Claymorphism。它常与 3D 吉祥物、圆润图标一起出现在儿童教育、健康与社交类产品里。

AI 设计提示词 · Prompt

粘土风（Claymorphism）风格界面：页面背景为奶油米 #F4EDE4，卡片使用草莓粉 #FFE0E8、天空蓝 #C7E9FF、奶黄 #FFF0C2 等粉彩色，圆角 28px，内边距 20px。每个卡片叠三层阴影制造充气感：外投影 12px 12px 24px rgba(120,90,70,0.22)，左上内高光 inset 8px 8px 14px rgba(255,255,255,0.9)，右下内阴影 inset -8px -8px 14px rgba(150,100,110,0.22)。按钮用葡萄紫 #6D4AE8 白字，圆角 28px，同样叠内外阴影，字重 700。标题使用 Nunito 800，颜色莓果褐 #3B2F3F，次要文字 #5E4E61。图标放在圆形粉彩块里。整体圆胖、甜美，不使用细描边与锐利直角。正文与背景对比度不低于 4.5:1，按钮文字不要低于 14px。

A Claymorphism interface: cream page background #F4EDE4, cards in pastel strawberry pink #FFE0E8, sky blue #C7E9FF and butter yellow #FFF0C2 with a 28px corner radius and 20px padding. Every card stacks three shadows for an inflated look: an outer shadow 12px 12px 24px rgba(120,90,70,0.22), a top-left inner highlight inset 8px 8px 14px rgba(255,255,255,0.9) and a bottom-right inner shadow inset -8px -8px 14px rgba(150,100,110,0.22). Buttons are grape purple #6D4AE8 with white text, a 28px radius, the same inner and outer shadows and weight 700. Headings use Nunito 800 in berry brown #3B2F3F; secondary text is #5E4E61. Icons sit in round pastel blobs. The overall look is plump and sweet, with no hairline borders or sharp corners. Keep body text contrast at least 4.5:1 and button labels at 14px or larger.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #f4ede4;
  --ds-surface: #ffe0e8;
  --ds-text: #3b2f3f;
  --ds-accent: #6d4ae8;
  --ds-radius: 28px;
  --ds-shadow-out: 12px 12px 24px rgba(120, 90, 70, 0.22);
  --ds-shadow-light: inset 8px 8px 14px rgba(255, 255, 255, 0.9);
  --ds-shadow-dark: inset -8px -8px 14px rgba(150, 100, 110, 0.22);
}

适合与不适合

和相近风格的区别

• 新拟态：粘土风使用粉彩色块并叠加内高光与内阴影，形体鼓起、色彩甜美；新拟态是同色底板加双向外阴影，颜色克制、对比度更低。
• 玻璃拟态：粘土风是不透明的实心粉彩体块，靠内外阴影做出厚度；玻璃拟态是半透明面板，靠背景模糊与细亮边表达层次。

常见踩坑

• 多层内外阴影叠在每个元素上会让页面显得臃肿，大面积使用时只给卡片、按钮等关键元素加，容器本身保持平面
• 粉彩底色上的浅色文字对比度很容易不足，正文请用深色并按 4.5:1 检查，按钮文字不要用低饱和的浅色
• 圆角过大再叠阴影会让点击区域边界显得模糊，可点元素的实际热区至少保持 44px 高
• 内阴影与大模糊半径的外阴影在低端设备上滚动时有重绘开销，长列表里避免给每一项都叠三层阴影

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题