样式与 CSS · 设计系统
设计令牌
Design Token
也叫：Design Tokens、设计变量、设计 Token
把颜色、字号、间距、圆角、阴影等设计决定抽成有名字的变量，让设计稿和各端代码共用同一套规范。
详细解释
设计令牌是设计系统里最小的规范单位：每个设计决定都有名字和值，比如 color.primary = #2563eb、space.4 = 16px、radius.md = 8px。设计稿和各端代码都引用它，改一次就能同步。
令牌通常分两层：基础令牌 描述「有什么」，如 blue-600、gray-100；语义令牌 描述「用在哪」，如 color.text.primary、color.bg.danger。组件只引用语义令牌，换主题时改语义令牌的指向即可。
和 CSS 变量的区别：设计令牌是与技术无关的规范，可以存成 JSON，再生成 CSS 变量、Tailwind 主题配置或移动端代码；CSS 变量只是它在网页上的一种落地形式。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
style-design-token- DOM 选择器
- 没有 DOM 线索，这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29