TrueGrowth/docs/UI_COLOR_SYSTEM.md

UI 配色规范

目标

统一全局 UI 配色，优先使用品牌橙 token，减少素材库等高频界面里的重黑、重灰和孤立蓝色状态。

Token 使用边界

• 全局组件的背景、文字、边框、hover、selected、active、disabled、focus、overlay 必须优先使用共享 token。
• 品牌强调、主操作、选中态、重点描边优先使用品牌橙 token。
• 只有现有 token 无法表达语义时，才允许新增 token；新增前必须说明使用场景、对比度和替代方案。
• 业务局部颜色不得直接硬编码扩散到组件层；先判断是否应抽象为共享 token。

默认状态规范

• hover：使用轻量背景、轻量描边或轻微阴影 token，反馈要柔和，不使用大面积黑灰压暗。
• selected：使用品牌橙 token 的描边、角标或指示条，必须比 hover 更明确；不要用整图白色/黑色蒙层压住素材内容。
• focus：使用共享 focus token，键盘可见，和品牌色协调。
• overlay：仅在需要承载文字、操作或遮罩语义时使用，默认保持轻量透明度。
• primary action：同一操作区默认只保留一个品牌主色按钮，其余操作使用 outline/text/danger 等语义层级。

禁止项

• 禁止新增重黑遮罩作为默认 hover 或选中反馈。
• 禁止新增整图白色蒙层作为素材选中反馈。
• 禁止新增黑色主按钮；主操作默认使用品牌主色 token。
• 禁止在同一操作区堆叠多个品牌橙主按钮。
• 禁止新增孤立蓝色 focus；focus 必须走共享 token。
• 禁止为了单个组件临时写一套黑灰状态色。

AI 编程约束

AI 修改 UI 时必须先找现有 token，再考虑新增 token。涉及素材库、主按钮、hover、selected、focus、overlay 的改动，默认按本规范执行。

落地经验

• 素材库的颜色改造不是单纯换一组样式，而是把状态语义收拢到共享 token。
• 选中反馈优先用边框、浅底和角标，不再用整图白色/黑色蒙层压住内容。
• 多选操作收敛到右侧详情栏后，同一区域只保留一个品牌主按钮，入口更清晰。
• 详细的架构变更和实现经验见 素材库配色与多选架构经验。