winson-color-spec-builder

> 色彩规范不是好看的色卡，是整个设计系统的"视觉语法"。
> 好的色彩规范 = 结构纪律 + 语义清晰 + 零装饰冗余。
> Fusion 融合风格 = 结构纪律(Iron) × 数据权威(McKinsey) × 极简克制(Restraint)

一、核心哲学

1.1 唯一铁律

> 好的色彩规范是"半成品"——设计用它搭建界面，开发用它写CSS，两者说的是同一种颜色语言。
>
> 更进一步的铁律：色彩规范必须同时满足"视觉纪律"与"语义可维护性"与"数据可读性"。

色彩规范文档不是设计师的自嗨笔记。它必须同时满足三个角色的需求：
- 设计师能按规则组合配色而不需反复商量
- 开发者能直接对应到 CSS Variable / Design Token
- 产品经理能理解颜色语义（红是什么？绿是什么？）
- 决策者能在数据密集界面中快速识别关键指标

检验标准：给一个不懂配色的人看这份规范，他能否拼出一致的页面。

1.2 四个底层认知

1.3 色彩规范构建六阶段公式

品牌色锚定义 ──→ 色板梯度扩展 ──→ 语义Token设计 ──→ 应用规则定义
     ↓                                                        ↓
  字体配套规范 ←────────────────────────── 暗色/多主题适配 ←── 组件色彩映射
     ↓
  规范文档化交付

二、Fusion 融合设计哲学

2.0 Fusion 融合定位

本技能采用 Fusion 融合风格，融合三种设计哲学的核心精华：

Fusion 的核心公式：
> 结构纪律 × 数据权威 × 极简克制 = 专业判断力的视觉化
>
> 不追求美观，追求可信赖感。每个视觉决策都要回答：这有助于用户做判断吗？

2.1 三层配色递进架构

根据内容复杂度选择配色层级：

核心原则：
- 一份规范只用一个配色层级，不要中途换层级
- 颜色用于标注重点 > 区隔 > 页面平衡 > 企业风格 > 个人喜好
- 选择什么颜色不重要，在哪里使用颜色才重要
- 主色亮度必须确保可辨识度：品牌色不是"越深越有质感"，而是"深到有权威，亮到可辨识"

2.2 视觉纪律规范（Fusion 融合设计系统）

2.3 配色决策五问

当思考用什么颜色时，必须依次回答：

1. 本资料的整体用色规范是什么？（三层配色的哪一层？）
2. 这部分内容属于什么层级？（基础 / 主题 / 强调）
3. 这一页/这个组件的重点内容如何突出？
4. 这个内容与之前页面的哪个层级一致？
5. 这个内容的强调方式与之前哪个页面的内容应该对应一致？

新增第六问（Fusion 特有）：
6. 增加这个颜色是否有助于用户做更好的判断？还是仅仅是装饰？

三、完整执行流程

Phase 1：品牌色锚定义（Brand Anchor）

Step 1.1：提取核心品牌色

从品牌 Logo、VI 手册或业务定位中提取 1-3 个核心色值。

操作指令：
1. 找品牌最核心的颜色（通常是 Logo 主色）
2. 识别第二辅助色（如有）
3. 识别强调/点缀色（CTA 用色）

输出示例：

主色：海军蓝 #1A3A5C（品牌信任感 + 足够辨识度）
强调色：深红 #C8102E（关键操作、预警）
功能色：绿色 #1B7340（正向、成功）

Fusion 注意事项：
- 品牌主色不宜过深（如 #0D1B2A 接近纯黑），应保持足够辨识度
- 推荐 HSL 明度范围：L=25%~40%，确保在深浅背景下都可辨认
- 过深的品牌色会削弱衬线数字的可读性

检验标准：核心色不超过 3 个，超出说明品牌定位不够聚焦。

Step 1.2：定义色值属性

对每个核心色，明确：
- HEX（设计交付标准）
- RGB（开发用）
- HSL（调色参考，优于 HSB——更贴合 CSS 生态）
- 使用场景（一句话描述）

模板：

- name: 海军蓝（主色）
  hex: "#1A3A5C"
  rgb: (26, 58, 92)
  hsl: (211°, 56%, 23%)
  usage: 主色调、导航栏背景、统计栏、重要按钮、标题文字

检验标准：每个核心色都有明确的 "usage" 字段，不允许 "用于强调" 这种模糊描述。

Phase 2：色板梯度扩展（Palette Gradation）

Step 2.1：建立色阶系统

每个核心色扩展为 3-6 阶梯度（明度变化），通常结构为：

深色（Dark）      → 用于标题、重要文字
主色（Base）      → 品牌主色调
浅色（Light）     → 交互悬停态、次要元素
极浅色（Pale）    → 极浅背景、分割线

实战公式：

输出示例（基于海军蓝 #1A3A5C）：

--navy-dark: #0F2740;     /* 深色变体：Hero区域、深色背景 */
--navy: #1A3A5C;           /* 基准值：主色调、按钮、标题文字 */
--navy-mid: #234B6E;       /* 中间色：统计栏、次要品牌背景 */
--navy-light: #2E6491;     /* 浅色变体：链接、交互元素、hover态 */

Fusion 注意事项：
- 色阶跨度不宜过大，保持色相一致性
- Dark 变体与 Base 之间要有足够差距（至少 15% 明度差）
- Light 变体用于交互态，需保证在白背景下仍有辨识度

检验标准：每个核心色至少扩展 3 阶，且有明确的用途说明。

Step 2.2：补充中性色阶

中性色（灰、灰蓝、银灰）是使用频率最高的色系，需要建立 8 阶梯度（Fusion 标准比 Iron 更完整）：

命名规范（Fusion 风格——材质/自然意象命名）：

--slate: #2C3E50;     /* 板岩-次要元素、深色背景 */
--steel: #4A5E72;     /* 钢色-辅助文字 */
--silver: #8899AA;    /* 银灰-标签/提示 */
--ice: #B0BEC5;       /* 冰色-禁用态、装饰线 */
--mist: #D6DCE4;      /* 薄雾-主边框 */
--snow: #F0F2F5;      /* 雪色-表格悬停/卡片 */
--cloud: #F7F8FA;     /* 云色-内容区域背景 */
--bone: #FAFBFC;      /* 骨色-页面主背景 */

Fusion 注意事项：
- 中性色带有微弱的蓝色调（blue-gray），而非纯灰，以配合海军蓝主色
- --slate 与 --navy-light 之间需保持色相一致
- 从 --slate 到 --bone 构成完整的明度梯度，中间无断层

检验标准：中性色覆盖从主文字（最深）到纯白背景（最浅）的完整梯度，且每个层级都有指定用途。

Phase 3：语义Token设计（Semantic Tokenization）

Step 3.1：定义Token分层

Token 必须分三层，这是决定规范可维护性的关键。

核心原则：
- Primitive 层不改名只改值（品牌升级时只动这里）
- Semantic 层不改值改名（业务需求变化时调整映射）
- Component 层直接引用 Semantic，不直接引用 Primitive
- 禁止跨层引用：Component 不能引用 Primitive

Step 3.2：语义类别定义

按以下四类语义定义 Token：

A. 品牌色语义

--color-brand: var(--navy);              /* 品牌主色 */
--color-brand-hover: var(--navy-light);  /* 品牌悬停 */
--color-brand-soft: var(--mist);         /* 品牌浅色背景 */
--color-brand-on-dark: var(--silver);     /* 暗色背景上的品牌替代色 */

B. 文字色语义

--color-text-primary: #1A2B3C;       /* 主文字 */
--color-text-secondary: #4A5E72;     /* 次要文字 */
--color-text-tertiary: #8899AA;      /* 辅助文字 */
--color-text-on-brand: #FFFFFF;     /* 品牌色背景上的文字 */
--color-text-on-dark: #E8EDF2;      /* 深色背景上的文字 */

C. 功能色语义

--color-success: #1B7340;            /* 成功/正向 */
--color-success-bg: #EDF7F0;         /* 成功背景 */
--color-success-dark: #4ADE80;       /* 暗色模式成功 */
--color-error: #C8102E;              /* 错误/负向 */
--color-error-bg: #FDF0F0;           /* 错误背景 */
--color-error-dark: #F87171;          /* 暗色模式错误 */
--color-warning: #B8860B;            /* 警告 */
--color-warning-bg: #FDF6E3;         /* 警告背景 */
--color-warning-dark: #FCD34D;       /* 暗色模式警告 */
--color-disabled: #8899AA;           /* 禁用 */
--color-disabled-bg: #F0F2F5;        /* 禁用背景 */

D. 结构层语义

--color-surface: #FFFFFF;            /* 主背景（表面） */
--color-surface-secondary: #F7F8FA;  /* 次要背景 */
--color-border: #D6DCE4;             /* 主边框 */
--color-border-light: #E8ECF0;       /* 浅边框 */

Fusion 新增：

E. 数据色语义（McKinsey 数据场景特有）

--color-data-positive: var(--success);    /* 正向数据 */
--color-data-negative: var(--error);      /* 负向数据 */
--color-data-neutral: var(--silver);      /* 持平数据 */
--color-data-highlight: var(--accent);    /* 需关注数据 */

检验标准：每个 Token 的命名能让人一眼看出它的用途（"这是什么颜色" → "这个颜色做什么用"）。

Phase 4：应用规则定义（Application Rules）

Step 4.1：背景色体系

列出所有背景色层级，明确嵌套规则：

/* 层级0：最外层 */
--bg-primary: #FAFBFC;          /* 页面主背景（bone） */
--bg-secondary: #F7F8FA;       /* 中性背景-内容区域（cloud） */
--bg-tertiary: #F0F2F5;         /* 雪色-卡片/表格悬停（snow） */
--bg-subtle: #E8ECF0;           /* 薄雾-分割区域 */

/* 层级1：品牌背景 */
--bg-brand: var(--navy);         /* 统计栏、导航等品牌背景 */
--bg-brand-dark: var(--navy-dark); /* Hero区域、深色背景 */
--bg-brand-mid: var(--navy-mid);   /* 次级品牌背景 */
--bg-brand-light: var(--mist);   /* 品牌浅背景 */

/* 层级2：状态背景（功能色） */
--bg-success: #EDF7F0;           /* 成功态背景 */
--bg-warning: #FDF6E3;           /* 警告态背景 */
--bg-error: #FDF0F0;             /* 错误态背景 */

嵌套规则：同一页面内背景色层级相差不超过 2 级（如白背景上不能直接放薄雾，中间需要中性背景过渡）。

Step 4.2：文字色规则

为每个背景色定义其上文字的颜色：

秘笈：对比度检查
- 主文字与背景的对比度必须 >= 4.5:1（WCAG AA 标准）
- 大标题（>=18px Bold）可放宽至 >= 3:1
- 数据指标（衬线数字）对比度必须 >= 4.5:1

Step 4.3：边框色规则（Fusion 核心：边框优于阴影）

Fusion 边框原则：
- 默认用边框，不用阴影。阴影只在极少数场景（如浮动 tooltip）以最轻量形式出现
- 阴影公式（仅在必要时）：box-shadow: 1px 1px 0 var(--border)（极轻量实色偏移）
- 卡片 hover 态：边框加深，而非阴影扩大
- 统计栏/Hero 区域：纯色填充背景，无阴影

特殊规则：强调边框（如卡片左侧 3px border）触发 hover 时边框色从 var(--navy) 变为 var(--accent)。

Phase 5：组件色彩映射（Component Mapping）

Step 5.1：建立映射表

将所有 UI 组件逐一映射到语义 Token：

Fusion 组件原则：
- 阴影列几乎全是"无"——这是 Fusion 与 Iron 的最大区别
- 表格数字用衬线体，增强数据可读性（McKinsey 风格）
- Tag/Label 用等宽体，体现技术精确感
- 所有 hover 态优先改变边框色，而非添加阴影

检验标准：每个组件都明确写出 背景、文字、边框（或标注"无"）、阴影（默认"无"）、以及交互态（hover/focus/active）。

Step 5.2：状态色映射

Fusion 注意事项：状态标签使用透明背景 + 彩色边框，而非填充色背景，保持克制感。

Phase 6：字体配套规范（Typography Pairing）

Step 6.1：字体栈定义（Fusion 融合字体系统）

/* Fusion 融合字体栈 */
--font-display: 'Playfair Display', 'Noto Serif SC', Georgia, serif;  /* 标题/数值强调 */
--font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 正文/通用 */
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;  /* 代码/标签/元数据 */

Fusion 字体使用规则：
- 所有标题（中英文）：Playfair Display / Noto Serif SC（衬线体，增强权威感）
- 数值/数据：Noto Serif SC / Playfair Display（衬线体，McKinsey 数据权威感）
- 正文内容：Noto Sans SC（无衬线体，阅读舒适）
- 标签/徽章/代码：JetBrains Mono（等宽体，技术精确感）
- 辅助说明/标注：Noto Sans SC（无衬线体，weight 300-400，弱化存在）

Step 6.2：字号字重映射

Fusion 排版原则：
- 字重对比是核心驱动力（700 vs 400），颜色是辅助
- 字号梯度紧凑（36 → 22 → 18 → 13.5 → 12 → 11 → 10），体现高信息密度
- Hero 标题字距更宽（0.12em），其余标题适当收窄
- Section Label 使用 uppercase + tertiary color，作为页面导航锚点

Phase 7：暗色/多主题适配（Theme Adaptation）

Step 7.1：暗色主题Token覆盖

暗色主题不是"反色"，而是重新映射语义：

/* 暗色主题：只改 Semantic 层，不改 Primitive 层 */
[data-theme="dark"] {
  /* 表面与背景 */
  --color-surface: #1B2838;
  --color-surface-secondary: #243B50;

  /* 文字反转 */
  --color-text-primary: #E8EDF2;
  --color-text-secondary: #8899AA;
  --color-text-tertiary: #5A7088;

  /* 边框适配 */
  --color-border: #2C4A62;
  --color-border-light: #243B50;

  /* 品牌色悬停态提亮 */
  --color-brand-hover: #3D7AB5;
  --color-brand-on-dark: #8899AA;

  /* 功能色适配（暗色模式下需更亮以保证辨识度） */
  --color-success-actual: #4ADE80;
  --color-error-actual: #F87171;
  --color-warning-actual: #FCD34D;
}

核心原则：
- 不改 --navy, --silver 等 Primitive 值
- 只重新定义 Semantic Token 的映射
- 组件层代码无需改动
- 功能色在暗色模式下必须提亮，否则在深色背景上失去语义
- 主背景使用海军蓝深色变体（#1B2838），而非纯黑

Step 7.2：多主题适配清单

• [ ] 每个 Semantic Token 在各主题下都有定义
• [ ] 背景与文字的对比度 >= 4.5:1
• [ ] 品牌色在不同背景下仍具有辨识度
• [ ] 功能色在暗色模式下已提亮（--success → #4ADE80 等）
• [ ] 图片和图标不依赖主题色（独立处理）
• [ ] 边框色已适配（暗色模式用 rgba(255,255,255,0.08) 体系）

Phase 8：规范文档化交付（Documentation & Delivery）

Step 8.1：文档结构

规范文档必须包含以下章节，按顺序排列：

1. 设计哲学与视觉纪律（Fusion 融合原则）
2. 基础色板（CSS Variables 完整列表）
3. 核心色系（每个色系的梯度表 + 用途说明）
4. 语义Token映射（Primitive → Semantic → Component 映射链路）
5. 文字色规范（各层级 + 背景色对比度规则）
6. 背景色体系（层级 + 嵌套规则）
7. 边框色规范（Fusion 核心：边框优先）
8. 强调与状态色（功能色完整表 + 暗色模式适配值）
9. 字体规范（字体栈、字号字重映射、字距规则、对齐原则）
10. 组件色彩映射（组件 → Token 映射表，含阴影列）
11. 暗色/多主题适配（Semantic 覆盖规则）
12. 设计原则总结（7条 Fusion 核心原则）

Step 8.2：交付格式

Fusion 推荐交付方式：优先交付 HTML 可视化参考页（如本技能的 Fusion Style Demo），让团队直观感受规范效果，而非纯文字文档。

Step 8.3：质量校验清单

完成规范后逐项检查：

• [ ] 核心品牌色 <= 3 个
• [ ] 每个核心色扩展 >= 3 阶梯度
• [ ] 中性色覆盖完整明度区间（8阶，含 --bone 到 --slate）
• [ ] Token 三层结构完整（Primitive → Semantic → Component）
• [ ] 每个 Token 有明确的用途说明
• [ ] 背景色定义了嵌套规则
• [ ] 文字色在每个背景色上都有指定值
• [ ] 主文字与背景对比度 >= 4.5:1
• [ ] 所有 UI 组件都有色彩映射（含阴影列，默认"无"）
• [ ] 交互态（hover/focus/active）已定义
• [ ] 功能色语义统一且完整（成功/错误/警告/禁用/信息）
• [ ] 暗色主题功能色已提亮
• [ ] Fusion 视觉纪律检查：零圆角、边框优于阴影、裁决式字距、左对齐、衬线数字
• [ ] 配色决策六问已回答（含第六问"是否有助于判断"）
• [ ] 给一个不懂配色的人能拼出一致的页面（终极检验）

四、常见陷阱与避坑指南

五、场景适配指南

六、质量检验清单

• [ ] 触发识别准确：用户的输入确实适合用色彩规范技能处理？
• [ ] 品牌色锚提取到位：能清晰识别 1-3 个核心色？
• [ ] 品牌色明度合理：L=25%~40%，不至过深失去辨识度？
• [ ] 色板梯度完整：每个核心色 >= 3 阶，中性色 >= 8 阶？
• [ ] Token 体系完整：Primitive → Semantic → Component 三层都在？
• [ ] 应用规则完整：背景、文字、边框都有明确的定义？
• [ ] 边框优先原则：组件映射中阴影列默认"无"？
• [ ] 组件映射完整：所有主要 UI 组件都有色彩归属？
• [ ] 字体规范配套：字体栈、字号、字重、行高、字距、对齐都有定义？
• [ ] 多主题适配完成：暗色/深色模式 Token 已定义（含功能色提亮）？
• [ ] 文档格式规范：文件命名、结构完整？
• [ ] Fusion 视觉纪律：零圆角、边框优于阴影、裁决式字距、左对齐、衬线数字已融入？
• [ ] 配色决策六问已回答？
• [ ] 终极检验：给一个不懂配色的人能拼出一致的页面？

七、执行原则

1. 从品牌出发，不凭空造色：色彩规范的根在品牌定位，不要为了"好看"随意加色。
2. 三层Token不可妥协：Primitive → Semantic → Component 少一层都活不久。
3. 语义先于色值：先定义"这是什么角色"再决定"它是什么颜色"。
4. 对比度是硬红线：美观让位于可读性，这是无障碍底线。
5. 组件映射是落地关键：规范只写在文档里不被引用等于没写。
6. 边框优于阴影：1px solid 边框定义边界，阴影是最后手段。
7. 数据密度服务于判断：每增加一个视觉元素，都要回答"这有助于用户做判断吗"。
8. 衬线数字即权威：关键数值必须使用衬线字体，这是 McKinsey 式数据展示的标志性特征。
9. 左对齐即专业：除 Hero Banner 外，所有内容左对齐。居中对齐稀释权威感。
10. 留白服务于层级：留白不是空白，是信息层级的呼吸空间。
11. 命名即文档：一个好的 Token 命名，不需要注释就能看懂它的用途。
12. 迭代不止一次交付：规范永远在路上，接受新场景的挑战。