标准答案
- spacing token 应该形成有限尺度，例如 4、8、12、16、24，而不是每个组件随意写值。
- color token 要区分基础色、语义色和组件状态色，例如 primary、danger、text-muted、border-default。
- radius token 要覆盖小控件、卡片、弹窗等常见圆角层级。
- shadow token 要按层级表达浮起关系，例如 card、dropdown、modal。
- token 最好通过 CSS 变量或构建产物输出，支持主题切换、品牌覆盖和文档说明。
题目解析
这题考的是设计系统意识。token 不是把所有颜色起个变量名，而是形成可维护的语义层。
组件不应该直接依赖某个具体绿色或阴影值，而应该依赖语义 token。
代码示例
语义 token 比裸色值更适合组件库长期维护。
CSS
:root {
--space-4: 16px;
--color-primary: #35ad72;
--radius-card: 8px;
--shadow-card: 0 8px 24px rgba(0, 0, 0, .08);
}常见误区
- 把 token 做成颜色变量清单，没有语义层和组件层。
- 间距尺度过多，设计和开发仍然随意取值。
- 只考虑亮色主题，没有为暗色、品牌定制和无障碍对比度留空间。