用途
color-system 用于把已经确定的设计方向转化为一套真正可落地的生产级调色板。它不把颜色系统看作一张包含若干十六进制色值的静态色板，而视为一套数学上自洽、以令牌为载体的软件架构，负责管理对比度、海拔表面梯度、感知明度分布、语义状态绑定，以及亮色与暗色模式之间的双向切换，并尽量避免逐屏手动覆盖。
主要能力
三层令牌架构
- 第一层：全局原始值（Global Primitives），如 blue-500、slate-900。组件中不应直接消费原始值。
- 第二层：语义词令牌（Semantic Tokens），表达系统用途，如 surface-canvas、action-primary。
- 第三层：组件令牌（Component Tokens），作用域内的覆盖，如 button-primary-bg。
感知色彩空间与色阶生成
资料指出 HSL 在数学上存在缺陷：纯黄与纯蓝的感知亮度差异很大，难以在跨色相时保持一致明度。因此推荐使用 OKLCH（oklch(L C H)），其中 L 为感知明度（0%–100%），C 为彩度（约 0–0.37），H 为色相角（0°–360°）。生成 50 到 950 的连续色阶时，固定色相与彩度，让明度从 95% 数学递进到 10%。
海拔梯度与暗色模式表面一致性
亮色模式下海拔由投影表达；暗色模式下投影不可见，改由表面明度阶梯表达：
- surface-base（0dp）：oklch(14% 0.02 260)
- surface-raised（1dp）：oklch(18% 0.02 260)
- surface-overlay（4dp）：oklch(22% 0.02 260)
- surface-modal（8dp）：oklch(26% 0.02 260)
暗色模式不使用纯黑 #000000，原因是 OLED 屏幕上的像素拖影以及与纯白文字的强烈对比压力；应使用深石板色或深蓝色调（L 约 12%–15%）。
语义状态映射与自动对比度门禁
- 悬停：在 OKLCH 中调整明度 ±5%。
- 按下/激活：调整明度 ±10%。
- 禁用：彩度锁定为 0（灰度），不透明度设为 40%。
- 对比度校验：自动断言每个文本语义词令牌相对其所属表面令牌达到 ≥4.5:1 的 WCAG 对比度。
使用方式
技能以 tokens.css 形式交付颜色令牌定义：在 :root 中定义全局原始色阶与亮色模式下的语义词映射，在 [data-theme="dark"] 中覆盖为暗色模式映射（如表面、文本、边框令牌反转，主操作色保持一致）。
资料给出的工作示例：将 stylelint-color-contrast 集成进前端测试套件；当 PR 试图把次要文本设为 #FFFFFF 背景上的 #888888（对比度 3.5:1，不满足 WCAG AA）时，CI 自动失败构建，开发者将令牌调整为 #6B7280（4.6:1），从而保持无障碍合规。
适用场景
- 构建语义色令牌体系。
- 设计亮色与暗色双模式主题。
- 统一组件库的配色与交互状态。
- 在 CI 中自动校验颜色可访问性。
限制与反模式
资料明确列出的反模式包括：在组件中硬编码十六进制色值；暗色模式只反转文字而保留刺眼的亮色背景容器；把 #000000 设为全局背景导致移动端滚动时文字拖影。资料未提供该技能的具体安装命令、运行方式、依赖工具清单或收费信息。