Material Design 3 的「动态色彩」，在网页上到底怎么落地

很多人第一次看 Material Design 3，会觉得它只是「圆角更大、颜色更柔和」。其实核心变化只有一个：颜色从固定色板变成了按语义分配的角色（role）。

角色，而不是颜色

旧的材料设计会告诉你「主色用 #6750A4」。MD3 说的是「主色是 primary，它在亮色主题下应该足够深以保证对比度，在暗色主题下应该足够浅」。

这句话听起来啰嗦，但落地时差别巨大：

:root {
  --primary: hsl(var(--accent-h) 42% 43%);
  --primary-soft: hsl(var(--accent-h) 42% 94%);
  --on-primary: #ffffff;
}

[data-theme='dark'] {
  --primary: hsl(var(--accent-h) 58% 72%);
  --primary-soft: hsl(var(--accent-h) 26% 22%);
  --on-primary: #17131f;
}

只要换掉 --accent-h 这一个数字，整套配色就换了。我做了五个预设：鸢尾紫 265、深海蓝 212、苔原绿 158、山茶红 344、琥珀橙 32。

圆角是有梯度的

MD3 的圆角不是随便定的，它有一套从 4dp 到 28dp 的梯度，而且越大的容器用越大的圆角。

元素	圆角
输入框	4–8px
卡片	12–16px
面板	24–28px
弹窗	28–36px

这条规律看起来无关紧要，但它解决了「为什么我的界面看起来不协调」——因为所有东西都用了同一个 8px 圆角，视觉上就没有层次。

阴影要跟着主题变

亮色主题下，阴影是「灰色半透明」；暗色主题下，阴影得变成「纯黑 + 更高不透明度」，否则完全看不见。

--shadow-2: 0 4px 12px rgba(28, 20, 48, 0.07);

[data-theme='dark'] {
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.35),
              0 12px 32px rgba(0, 0, 0, 0.28);
}

暗色下我还多加了一层，因为单层阴影在深色背景上太弱，卡片会「飘」不起来。

越界的地方

MD3 原版是给移动端准备的，桌面端直接套会有两个问题：

• 触控目标 48dp 太大，鼠标环境下按钮会显得笨重，我缩到 38px。
• 动效时长 200–300ms 在桌面上偏慢，尤其是 hover 反馈，我压到 180ms 左右。

规范是起点，不是终点。

好的设计系统不是让你少做决定，而是让你把决定做在正确的地方。