# 颜色规则

选择品牌基础色、辅助色、完整渐变与推荐配色档位。

### 2.1 基础色、辅助色与渐变

| 基础色 | Token | HEX | 系列出现频率 |
| --- | --- | --- | --- |
| black | brand.color.black | #000000 | 4.53% |
| navy | brand.color.navy | #020B50 | 12.29% |
| blue | brand.color.blue | #336AFE | 49.11% |
| white | brand.color.white | #FFFFFF | 22.45% |
| orange | brand.color.orange | #FF730A | 11.61% |

频率取自基础颜色画板的色块面积，表示系列应用中的出现倾向，不是每张画面的像素配额。

| 辅助色 | HEX | 用途 |
| --- | --- | --- |
| mist | #ECEDFD | 从所选档位按需选用，不升级为主品牌色 |
| purple | #9F83F4 | 从所选档位按需选用，不升级为主品牌色 |
| electricBlue | #0019FF | 从所选档位按需选用，不升级为主品牌色 |
| paleYellow | #FBFFD0 | 可独立使用的营销辅助色，不升级为主品牌色 |
| yellow | #FFCE35 | 从所选档位按需选用，不升级为主品牌色 |
| peach | #FCA166 | 从所选档位按需选用，不升级为主品牌色 |

渐变按画板从左到右编号；编号本身不承担颜色语义，Figma 节点 ID 是来源锚点。

| 编号 | 来源分组 | 完整 CSS 配方 |
| --- | --- | --- |
| GD01 | dark | `linear-gradient(0deg, #FFFFFF 19.7115%, #336AFE 46.1538%, #020B50 82.6923%, #000000 100.0000%)` |
| GD02 | dark | `linear-gradient(180deg, #000000 0.0000%, #020B50 50.4808%, #0019FF 68.1767%, #ECEDFD 100.0000%)` |
| GD03 | dark | `linear-gradient(180deg, #000000 40.8654%, #0019FF 91.8269%, #ECEDFD 100.0000%)` |
| GD04 | dark | `linear-gradient(180deg, #2F93FF 0.0000%, #9F83F4 35.4646%, #0009DA 83.4700%, #000000 100.0000%)` |
| GD05 | dark | `linear-gradient(180deg, #2F93FF 0.0000%, #0009DA 24.5192%, #000000 100.0000%)` |
| GD06 | dark | `linear-gradient(180deg, #035AFF 0.0000%, #4485FC 48.5577%, #93B7FB 71.6346%, #FFFFFF 100.0000%)` |
| GD07 | dark | `linear-gradient(180deg, #1D96FF 0.0000%, #3DC8FF 14.6878%, #6FBEFF 46.6346%, #FFFFFF 100.0000%)` |
| GL01 | light | `linear-gradient(180deg, #FFFFFF 40.8654%, #336AFE 91.8269%, #ECEDFD 100.0000%)` |
| GL02 | light | `linear-gradient(0deg, #336AFE 0.0000%, #336AFE 17.3077%, #FFFFFF 80.2885%)` |
| GL03 | light | `linear-gradient(0deg, #2FB0FD 0.0000%, #FBFFD0 85.7014%, #FFCE35 100.0000%)` |
| GL04 | light | `linear-gradient(180deg, #FCA166 0.0000%, #F8DCCE 11.5385%, #2C7EF9 100.0000%)` |
| GL05 | light | `linear-gradient(180deg, #FF730A 0.0000%, #FFD13D 48.5577%, #F1FBD3 71.6346%, #FFFFFF 100.0000%)` |

GD06、GD07 虽在“深色”源画板，视觉实际为亮蓝到白；保留其来源分组，但不作为基础暗色档首选。可在明亮表达中明确选用。渐变保留原 stop、位置和方向，不重新平均分布。JSON 同时保留原浮点 RGBA 与 Figma 变换矩阵；HEX 是便于阅读的 8-bit RGB 显示值。

每次选一条完整配方；模板如需反向，应明确记录方向变体，不能悄悄反转全局原配方。

### 2.2 三档应用

| 档位 | 适用需求 | 配色与背景 | 避免 |
| --- | --- | --- | --- |
| 基础默认档 default-dark | 未指定目的的品牌表达、基础介绍 | 黑/深蓝托底，品牌蓝建立识别，白字；需要渐变时选 GD01–GD05，橙色少量强调 | 自动亮色化、为填满背景增加光效、多色竞争 |
| 营销档 marketing-light | 活动、传播、拉新、轻松明亮表达 | 白/雾白与品牌蓝优先；GL01–GL02 优先，暖色目的可选 GL03–GL05；按需使用一两种辅助色 | 一张图堆齐所有辅助色 |
| 数据档 data-dark | 分析、指标、图表、数据长图或 PPT | 黑/深蓝纯色背景；主要图形蓝色系，紫色 #9F83F4 少量点题；白字；平面表达 | 渐变填充图表、毛玻璃、发光、3D、彩虹分类色 |

数据档中，同类数据用同色；连续数值可以采用有序蓝色明度，但须记录派生规则。多个类别难以区分时，优先直接标注、线型、点型或分面，不无限增加相近蓝色。紫色用于一个有意义的对照/强调对象，不自动代表错误。必要的额外状态色先报告需求，不伪造品牌语义。

### 2.3 语义颜色

| 角色 | 基础默认档 | 营销档 | 数据档 |
| --- | --- | --- | --- |
| canvas | #000000 / #020B50，明确选一个 | #FFFFFF / #ECEDFD，明确选一个 | #000000 / #020B50，纯色 |
| text.primary | #FFFFFF | #000000 | #FFFFFF |
| text.secondary | 白 75%，对比不足恢复白 | 黑 65%，对比不足恢复黑 | 白 75%，必要标签用白 |
| surface.flat | #020B50 | #FFFFFF | #020B50 |
| accent | #336AFE，必要时 #FF730A | #336AFE，按方案选辅助色 | #336AFE；小面积 #9F83F4 |
| border.necessary（默认关闭） | 白 20% | 黑 12% | 白 20% |
| action / on-action | #336AFE / #FFFFFF | #336AFE / #FFFFFF | #336AFE / #FFFFFF，仅真实交互需要时 |

上述边框颜色仅供必要的信息边界或模板玻璃细边使用，不要求添加边框或分割线。

正文颜色看实际覆盖区域，不能只看整个渐变的档位名称。浅色模块必须切换对应文字色；禁止文字与背景同色。纯色文字对比检查初值为正文4.5:1、大字3:1，结合实际输出尺寸验收；渐变、图片和玻璃逐处看真实像素。透明度与通用控件映射为使用建议。

颜色 Token 只能装单一颜色；背景 Token 可以装完整渐变。CSS 引用使用 var(--token)，不把颜色填入字体属性。tokens.json 是应用配置；brand.tokens.json 提供可直接查询的品牌 Token。