语义化颜色命名的核心原则是用途优先而非外观，如primary表示主按钮用色而非蓝色，设计变更时自动适配；命名按品牌、交互、状态、表面、文本等抽象层级划分，避免blue-500等外观描述，确保可维护性与无障碍适配。
语义化颜色命名的核心原则是「用途优先，而非外观」
在 CSS 设计系统中，primary、success、border-light 这类名字不是描述“蓝色”或“#007bff”，而是表达“这个色值用在主按钮、高亮操作、可点击状态”。一旦设计规范调整主色从蓝变紫，所有使用 primary 的地方自动适配，无需全局搜索替换十六进制值。
常见语义层级与命名结构
颜色变量通常按抽象程度分层，避免直接暴露物理属性：
-
color-brand-primary：品牌主色（如 logo 色），属于基础层，极少变动 -
color-interactive-primary：交互主色（按钮默认态、链接），基于品牌色微调对比度/可访问性 -
color-state-hover、color-state-disabled：明确绑定交互状态，不写成color-primary-hover -
color-surface-card、color-surface-modal：表面层级色，强调容器背景角色，而非“浅灰” -
color-text-emphasis、color-text-secondary：文本语义，对应视觉层级，不叫color-text-dark（暗可能指深灰，也可能指黑）
为什么不能用 blue-500 或 gray-200 命名？
这类命名来自工具链（如 Tailwind），适合原子化开发，但在设计系统中会引发三类问题：
- 当设计稿要求“所有卡片背景统一改为略暖的浅灰”，你得改
gray-50、gray-100、surface-light三个变量，且无法保证它们实际用途一致 - 无障碍对比度调整时，
text-primary可能需从#2563eb改为#1d4ed8，但blue-600这个名无法体现它承担的是“主要文本”职责 - 开发者看到
bg-blue-100会下意识认为“这是装饰色”，不敢把它用于错误提示背景——语义断裂导致误用
CSS 自定义属性中的典型定义方式
语义变量最终落地为 CSS 自定义属性，关键点在于：只暴露语义名，隐藏具体值；值由设计系统维护者统一调控。
立即学习“前端免费学习笔记（深入）”；
:root {
/* 基础品牌色（少动）*/
--color-brand-primary: #3b82f6;
/ 交互色（含可访问性校验）/
--color-interactive-primary: var(--color-brand-primary);
--color-interactive-primary-hover: #2563eb;
--color-interactive-primary-active: #1d4ed8;
/ 文本色（按信息层级）/
--color-text-emphasis: #1e293b;
--color-text-secondary: #64748b;
--color-text-disabled: #94a3b8;
/ 表面色（按组件角色）/
--color-surface-card: #ffffff;
--color-surface-inset: #f1f5f9;
}
使用时只写 color: var(--color-text-emphasis)，不关心它是否等于 #1e293b。真正容易被忽略的是：语义变量之间不应存在硬编码依赖关系（比如 --color-interactive-primary 不该用 lighten(var(--color-brand-primary), 10%)），因为 LCH/HSL 调色在不同色域下表现不稳定，必须由设计师人工校准后赋值。
