什么是设计 Token？

把颜色分配到语义角色——primary、surface、text、border、success、warning、danger——导出为 CSS 变量或 Figma 变量。

为什么用 Token 而非裸 HEX 值？

Token 把含义和具体值解耦，换肤或主题只需改一次 Token，而不必编辑每处硬编码颜色。

为相同的 Token 名定义第二套值；切换主题时替换值，而组件始终引用同一批 Token。

把当前颜色分配成产品可用的语义变量

语义变量

选择一个变量查看用途和色值

界面预览

检查语义色板在按钮、卡片、文本和状态提示里的层级

语义色彩Token工具，将颜色分配到primary、surface、text、border、success等角色，生成CSS Variables和Figma变量配置文件。颜色到角色的映射关系确定后，会同时生成 CSS Variables 和 Figma 变量两种格式，设计和开发能共用同一套命名。

适合团队想让设计稿和代码用统一的颜色命名规范时，避免"设计说的 primary 到代码里变成了 blue-500"这类沟通损耗。

什么是设计 Token？ 把颜色分配到语义角色——primary、surface、text、border、success、warning、danger——导出为 CSS 变量或 Figma 变量。
为什么用 Token 而非裸 HEX 值？ Token 把含义和具体值解耦，换肤或主题只需改一次 Token，而不必编辑每处硬编码颜色。
Token 怎么支持暗色模式？ 为相同的 Token 名定义第二套值；切换主题时替换值，而组件始终引用同一批 Token。