从 0 到 1 搭建色彩体系的完整步骤👇
📌 第一步：确定品牌主色
选一个代表品牌气质的颜色。科技感用蓝、活力用橙、健康用绿… 确定后生成 50-900 共 10 个色阶（可以用 Tailwind 的色阶逻辑或 Figma 插件生成）
📌 第二步：搭建中性色板
灰色系列也需要 50-900 色阶 建议灰色带一点品牌色倾向（冷灰偏蓝/暖灰偏橙），让整个界面色调统一
📌 第三步：定义功能色
Success 成功 → 绿色系 Warning 警告 → 橙色/黄色系 Error 错误 → 红色系 Info 信息 → 蓝色系 每种功能色也要有深中浅 3 个色阶（文字色/背景色/边框色）
📌 第四步：语义化命名
别直接用 blue-500，而是用 color-primary、color-bg-secondary、color-text-tertiary 这种命名。改颜色不用全局搜索替换
📌 第五步：适配深色模式
每个语义化颜色都要有一个深色模式的映射值 浅色的 color-bg-primary: white → 深色的 color-bg-primary: 1C1C1E
📌 第六步：无障碍检查
文字和背景的对比度 → AA 标准至少 4.5:1（正文）/ 3:1（大标题） 用 Figma 的 Stark 插件或在线工具 WebAIM Contrast Checker 检查
这套流程走下来，你的色彩体系既完整又灵活🌈
