设计系统中的色彩通过结构化的色板和色彩系统进行管理，这对于保持品牌数字产品间的视觉一致性至关重要。该系统通常基于设计标记（Design Tokens），特别是颜色标记（Color Tokens）构建，它们将颜色标准化，确保在各种组件和界面中统一应用。每个颜色标记都被赋予一个语义化名称，例如“text-primary”、“background-secondary”或“error”，以明确其在 UI 中的用途和用法。这种语义化命名有助于设计人员和开发人员快速理解并执行色彩系统，从而优化设计流程，并确保每种颜色都能发挥其应有的作用，无论是为了引导注意力、提示操作还是传达情感。
什么是颜色标记？
设计系统中的颜色标记是分配给颜色的特定值，用于定义产品的视觉特征。这些标记作为可复用的颜色变量，确保了平台各个组件和界面间的一致性。通过使用颜色标记，设计系统可以轻松更新和维护配色方案，确保对颜色标记的任何修改都能自动反映在整个产品中。这种方法提高了设计流程的效率和可扩展性，使团队能够系统且一致地管理配色方案。
核心概念解析
颜色设计标记就像城市里的红绿灯。想象一下，城市中所有的红绿灯对“停止”、“通行”和“减速”都使用相同的颜色。这种一致性帮助驾驶员无论身处哪个路口，都能立即明白该怎么做。
同样，颜色设计标记也为颜色赋予了特定的名称和含义，例如用于重要按钮的“button-primary-hover”或用于警告消息背景的“bg-error”。正如红绿灯在各地使用相同的颜色来保障驾驶安全，颜色设计标记确保了产品的所有部分都能一致地使用正确的颜色。这不仅让用户更容易理解界面，还确保了体验的连贯性，正如统一的红绿灯让驾驶变得更简单、更安全一样。
如何使用设计系统中的色彩？
以 GitHub 的设计系统为例，它利用颜色标记来管理所有产品线的调色板。Primer 定义了诸如 `bg-default`（默认背景色）、`text-primary`（主文本色）和 `border-muted`（细微边框色）等颜色标记。这些标记有助于确保颜色在 GitHub 平台上的各个部分——从网站到移动应用——都能保持一致。如果 GitHub 决定调整某种主色的色值以提升可访问性或进行品牌升级，他们只需更新对应的颜色标记即可。这一变更将自动传播到所有使用该标记的 UI 元素，从而确保整个平台都能实现顺畅且一致的更新。
