HiHuo08 · 色彩系统与配色方案
适用：新建视觉系统、增加主题或修复低对比界面。颜色先表达层级与状态，再表达品牌气质。
COL-01 · 先命名语义，再选择色值
| token | 作用 | 不应混用 |
|---|---|---|
| bg / surface | 页面与内容表面 | 不能假定所有表面都为白色 |
| text / muted | 主文字与次要文字 | muted 仍应可读，不能等同禁用 |
| border | 控件或区域边界 | 装饰分隔线与必要识别边界可以分开 |
| primary / on-primary | 主操作背景与其文字 | 品牌色上不一定适合白字 |
| accent | 轻量强调表面 | 不自动承担错误或成功含义 |
| success / warning / danger | 业务状态 | 品牌蓝、绿、红不能取代状态语义 |
| focus | 键盘位置 | 不能只用细微阴影表示 |
状态除了颜色，还要有文字、图形或结构差异。图表的分类色、连续色阶、发散色阶属于另外的任务，不能直接把按钮配色当数据色板。
COL-02 · 8 组配色起点
以下为本系列的示例方案。浅色模式的主按钮文字为白色；深色模式文字为 #0F172A。完整的页面、文字、边框与明暗 token 见 palettes.json，演示页可以切换并查看实际对比度。
| ID | 气质与适用方向 | 浅色主操作 | 深色主操作 |
|---|---|---|---|
| ink | 石墨中性；编辑、管理与专业工具 | #334155 | #CBD5E1 |
| blue | 清晰理性；信息与协作 | #1D4ED8 | #93C5FD |
| forest | 沉稳自然；学习、生活与服务 | #166534 | #86EFAC |
| plum | 鲜明创作；内容与创意工具 | #6D28D9 | #C4B5FD |
| clay | 温暖质感；文化、手作与编辑 | #9A3412 | #FDBA74 |
| teal | 冷静清爽；工作空间与数据工具 | #115E59 | #5EEAD4 |
| rose | 亲近表达；社区、个人与生活方式 | #9F1239 | #FDA4AF |
| amber | 温暖醒目；知识与服务 | #854D0E | #FDE68A |
这些用途是审美方向，不是色彩心理的普遍结论。医疗、金融等产品仍应按内容、品牌、目标人群与行业要求验证，不能仅凭“绿色安全”做选择。
COL-03 · 验证具体颜色对
规范：WCAG 2.2 AA 普通文字最低对比度为 4.5:1；大号文字为 3:1，大号按规范定义为至少 18pt，或至少 14pt 粗体。标志、非活动控件等有例外。见 1.4.3 Contrast Minimum。
用于识别控件、状态和理解图形的必要视觉信息，一般需与相邻颜色达到 3:1，亦有条款例外。装饰线不等同必要控件边界。见 1.4.11 Non-text Contrast。
本系列验证 text/surface、text/bg、muted/surface、muted/bg、on-primary/primary 至少 4.5:1，以及 border/surface、border/bg、primary/surface 至少 3:1。这只证明给定的不透明色对；不代表整个页面、全部组件或整套 WCAG 已通过。
渐变、照片背景、透明度、混合模式、悬停态与焦点态需要另外验证。不能把一个颜色独立标成“无障碍颜色”。
COL-04 · 深色模式重新分配层级
深色模式重新选择表面、文字、边界、主操作和状态色，避免把浅色界面整体反相。阴影在深色中可能无效，可以靠表面与边界区分层级。图片、Logo、图表也要检查。
建议提供“跟随系统 / 浅色 / 深色”，保存用户明确选择；首次渲染避免主题闪动。嵌入式演示可以明确只控制演示区域，不改变整个站点。
COL-05 · 配色与风格分别选择
同一组 forest 可以用于严谨表格，也可以用于温暖编辑风格。决定颜色之后，仍需选字体、间距、圆角、边界、图片语言和动效策略。见风格选型。
代码入口与检查
使用 tokens.css 的 .ui-kit 作用域；用 data-palette 选择配色，用 data-mode 选择明暗。不要把示例 token 无差别覆盖到已有项目的根样式。
本仓库可运行 node scripts/verify-ui-ux.mjs 重新计算色对并检查数据与 CSS 是否一致。自定义状态、透明背景、图片上文字和真实设备显示效果仍需单独检查。