## 2. Token

### 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。

### 2.4 字体与字重

中文使用方正兰亭可变黑；拉丁文字、阿拉伯数字和数字单位组合使用 MiSans。MiSans 用于拉丁文字与数字，品牌中文使用方正兰亭可变黑。中文标点随中文字体，英文标点随英文片段；日期、价格、百分比等连续数字表达整体使用 MiSans。

| 语义档位 | 方正兰亭 wght | MiSans wght |
| --- | --- | --- |
| Light | 250 | 250 |
| Regular | 340 | 330 |
| Medium | 400 | 380 |
| Demibold | 480 | 450 |
| Bold | 630 | 630 |

字重按下列语义档位使用。按语义档位配对，禁止浏览器合成加粗；混排时拆分文本片段分别使用字体及其真实字重。

字体清单 font-manifest.json 是给 Agent 看的装载说明，记录文件名、字体家族、字重轴、校验值、来源及可分发状态；用户不需要手动管理每台电脑。

**没有预装字体时：** Agent 在生成环境获取获准字体文件 → 校验版本 → 为当前渲染进程加载 → 验证中文字形和英文数字 → 测量排版 → 导出。网页可在获授权范围内使用 @font-face，Canvas 需等待字体加载完成；本地合成脚本显式注册字体，不依赖系统回退。

公开 MCP 提供装载说明与官方来源链接，不能仅返回一个字体名就宣称字体已安装。MiSans 从官方来源取得并遵守相应协议和版权说明；方正字体使用获准文件，按授权范围加载。

无法加载字体时必须报告缺项；可给出明确标记的预览，不得将回退字体结果标记为品牌验收通过。

### 2.5 字号层级

提供 12 档可选字号刻度。单位 CSS px，适用于屏幕版式起稿，不是全局强制字号，不直接套到海报或 PPT。

| 样式 | 字号 px | 字重档位 | 中文行高 | 英文行高 |
| --- | --- | --- | --- | --- |
| display | 96 | Demibold | 1.2 | 1.04 |
| heading-lg | 80 | Bold | 1.2 | 1.05 |
| heading | 56 | Bold | 1.2 | 1.07 |
| display-light | 44 | Regular | 1.2 | 1.1 |
| heading-sm | 40 | Demibold | 1.2 | 1.2 |
| body-lg | 28 | Demibold | 1.4 | 1.2 |
| lead | 24 | Demibold | 1.4 | 1.25 |
| body | 21 | Regular | 1.5 | 1.4 |
| body-compact | 20 | Regular | 1.5 | 1.4 |
| supporting | 18 | Regular | 1.5 | 1.4 |
| caption | 16 | Regular | 1.5 | 1.4 |
| label | 14 | Medium | 1.4 | 1.3 |

中文默认字距 0；英文以 0 起步，特殊展示微调需模板声明。数值与文字的光学大小仍需按具体样张校准。中文行高应保证字形完整，不发生裁切。海报使用第 4 节的画布字号，PPT 使用母版的 pt 单位。

间距刻度：2、4、8、16、24、32、48、64、96。圆角刻度：0、4、8、12、16、999。它们供模板选用，不覆盖已有专用坐标；屏幕组件默认卡片 16、按钮 8、标签 999。

### 2.6 Logo 母版与应用

浅色背景使用全彩黑字 Logo；深色背景使用全彩白字 Logo；背景与全彩 Logo 缺乏辨识差距、或背景复杂时用反白 Logo。反白也需清晰可辨，必要时调整局部构图或背景，不能加未经定义的描边来补救。

非长图分支的大多数画布（网页页头与内置模板的明确例外优先）：仅左上角；Logo 完整组合高度 = H/30；左边距 = 上边距 = H/60；四周净空至少 H/60，禁止侵入文字和装饰。Logo 保持母版宽高比，不单独缩放图形或文字。目前不追加最小尺寸。

例如：540×960 → 高 32、边距 16；540×540 → 高 18、边距 9；960×540 → 高 18、边距 9。公式为尺寸依据；按实际画布高度计算。

母版来源节点：全彩黑字 108:6716、全彩白字 108:6717、反白 108:6726，对应批准的 Logo 母版。

内置海报方案 1 使用压板内已有署名位置与尺寸，明确作为例外，不再叠加左上角 Logo。网页按导航/页头规范；长图按活动页面模板处理，不套用整张长图高度 H/30 或 H/60，也不另造最小尺寸。