设计令牌
Design Token
中级通用设计令牌（Design Token）是给颜色、间距、字号等界面样式值起的可复用名称。它解决同一种视觉规则散落在各处、修改时容易遗漏的问题：例如让网站和 App 的主要按钮都使用同一个「品牌主色」令牌。
你可能会说：「网站好多页面都用了同一种蓝色，能不能让我改一处就一起更新？」
读之前建议先了解
动手看看旅行产品的品牌主色
brand.primary · #2563eb
网页预览
城市周末指南挑一条路线，去发现熟悉城市的新角落。
查看精选路线
收藏路线
App 预览
附近好去处
为你找到 12 个目的地
开始探索
品牌主色令牌
切换「品牌主色」，看看网页和 App 的按钮、描边怎样一起换色；也可以悬停按钮，试试它们的真实反馈。
要点设计令牌怎样帮我们统一界面？
- 1
用名称表达样式的用途
你可以把「品牌主色」定义为一个令牌，再让按钮、链接等地方引用它。这样讨论改色时，我们说的是同一种用途，而不是在多个文件里寻找相同的颜色值。
- 2
把重复的取值集中管理
令牌也能表示间距、字号、圆角等取值。比如后台里的卡片都引用「卡片圆角」，想调整卡片的外观时，改令牌比逐个修改组件更容易核对，也更不容易漏掉。
- 3
让不同主题替换同一用途
做深色模式时，「页面背景」在浅色和深色主题里可以对应不同颜色，页面仍引用同一个名称。因为用途没有变，所以组件不必为每个主题分别写一套颜色选择逻辑。
容易混淆的地方
设计令牌是对视觉取值的命名和组织方式，CSS 变量则是网页中存放、引用这些值的一种实现手段：令牌可以用 CSS 变量落地，但两者不是一回事。它也不是按钮、卡片那样的组件；组件负责组成界面，令牌提供组件可共用的样式取值。
什么时候用
适合用
- 你的网站有多个页面和组件，常用颜色、间距需要保持一致，还会随品牌调整。
- 你正在做深色模式，想让同一类界面元素在不同主题下使用对应的颜色。
- 设计稿和前端代码由不同人维护，你们需要用一致的名称讨论常见样式取值。
不适合用
- 只是做一次性的活动海报，没有要复用的界面样式，直接在设计文件里设置取值更省事。
- 问题是按钮点击后没有反应，设计令牌管不了交互逻辑；先检查事件处理和组件状态。
- 想规定用户从登录页到结算页怎么走，先画用户流程；令牌解决的是样式取值，不是操作路径。
练一练选一个答案，看看解释
你维护的网站要增加深色模式，十几个页面都用了相同的背景色和文字色。怎样改，后续最容易保持一致？
让 AI 帮你做复制给 AI Agent 直接用
请检查这个网站现有的颜色、间距和圆角用法，把跨页面重复且用途明确的取值整理为设计令牌。让相关组件引用令牌，并为背景、文字等需要切换的令牌配置浅色和深色取值；保留少数确实只在单处使用的取值。