颜色系统与色阶
从单种子构建 50-500-900 色阶、语义角色、对比安全配对。
设计令牌进阶
为什么
临时 hex 值造成对比失败并使暗色模式不可能。从一种子生成的色阶给你 10 个感知均匀、对比测试、可反转暗色的明度。
Tokens Studio（原 Figma Tokens）有 50 万以上安装量，W3C 设计令牌格式模块即将成为候选推荐。令牌从单一来源实现暗色模式、多品牌主题和平台一致性。
何时使用
在第一屏设计前构建颜色系统。若 Figma 已有 20+ hex 值，立即审计并合并为色阶。
如何做
1. 选种子 — 每角色一色相（primary、neutral、success、warning、danger）
2. 生成色阶 — 用 Radix Colors 或 Tailwind 调色板生成器生成 50→950 步
3. 分配语义角色 — action.primary = blue.600、text.muted = gray.500、surface = gray.50
4. 验证对比 — 每文本/背景配对须达 4.5:1（正常）或 3:1（大）
5. 暗色模式 — 反转：surface = gray.900、text = gray.100、action.primary = blue.500
6. 令牌化 — 输出为 --color-{role}-{step}，组件中绝不原始 hex
7. 文档 — 展示色阶、语义映射、对比矩阵
示例
// color-tokens.ts — 生成的色阶 + 语义角色
export const color = {
blue: { 50: "#eff6ff", 500: "#3b82f6", 600: "#2563eb", 900: "#1e3a8a" },
gray: { 50: "#f9fafb", 100: "#f3f4f6", 500: "#6b7280", 900: "#111827" },
red: { 500: "#ef4444", 600: "#dc2626" },
} as const;
export const semantic = {
light: { action: color.blue[600], text: color.gray[900], surface: color.gray[50] },
dark: { action: color.blue[500], text: color.gray[100], surface: color.gray[900] },
} as const;
// 对比检查 — 文本在背景上
// gray.900 (#111827) 在 gray.50 (#f9fafb) = 15.3:1 ✓（需 4.5:1）
// blue.600 (#2563eb) 在白 = 4.6:1 ✓（临界 — 正文用 blue.700）
常见问题
- ⚠手选明度非感知均匀 — 500 看起来比 400 浅
- ⚠跳过语义角色 — 组件直接用 blue.600，暗色模式崩溃
- ⚠无对比矩阵 — '我觉得行' 发布 3.2:1 配对，未过 WCAG
最佳实践
- ✓从种子生成色阶 — Radix Colors 或 tailwindcss-colors，绝不手选 10 明度
- ✓始终经语义令牌 — 组件仅引用 var(--color-action-primary)
- ✓CI 自动对比检查 — stylelint + 自定义规则在 < 4.5:1 配对时失败