v2.2 相对 v2.1 的变更：深色链接改 #A9C4E8（9.27:1）｜ forced-colors 保留图标通道 ｜ 补具体 CMYK 打样起点 ｜
焦点环改名 ring-inner / ring-outer ｜ 数据色序定为 4 色 ｜ 深色描边 #5E82B5 ｜ 蒙版两档 ｜ 暗色 danger #E07A6D。
主色阶 · 黛蓝（213° 色相轴）
#143467 禁止作为深色主题下的实心按钮底色（对 #0B1E3D 仅 1.35:1，边界消失）。深色主按钮用金底深字。
强调色 · 赭金（转化专用）
浅色 CTA 用 #9A6226（白字 5.06:1，留 12% 余量）；#A26B28 降为大面积色块/图表专用，不承载小字。深色 CTA 用 #D3A968 金底 + #0B1E3D 深字（7.61:1）。
辅助色 · 青瓷
中性阶 · 黛灰（注入青调，禁用纯灰 #808080）
表单描边：浅色 #7A8CA6（白底 3.43:1）、深色 #5E82B5（对 #0B1E3D 4.21:1）；装饰线才用 #CBD3DE / #2A4A75。
语义色 · 浅色 / 深色两套（必配图标 ✓ ! ✕ i）
✓ 翠青 · success
#22706B · 白底 5.84
深色值 #5FB5AC（6.86）
! 琥珀棕 · warning
#8A5A17 · 白底 5.91
深色值 #C98A2E（5.65）
✕ 朱砂 · danger
#9F382C · 白底 6.83
深色值 #E07A6D（5.66）
i 玄青 · info
#2A4A75 · 白底 7.36
深色值 #A9C4E8（9.27）
成功色偏移翠青，与朱砂在红绿色盲下拉开距离。颜色只是第三通道，图标才是主通道。
数据可视化固定色序（4 色 · 超过 3 条线必加线型）
context 用 #7A8CA6 灰。明度单调递增、冷暖交替；涨跌不用红绿，改红蓝 + ▲▼。
图片蒙版 Scrim（禁止纯黑蒙版）
scrim-light 0.32 — 仅压 ≥18px 大字/标签，合成后白字 4.1:1，禁止压正文
scrim 0.55 — H1 + CTA 正文，合成后白字 5.57:1 ✓
焦点双环（v2.2 命名）
:focus-visible {
outline: 2px solid #FFFFFF; /* ring-inner */
outline-offset: 2px;
box-shadow: 0 0 0 4px #143467; /* ring-outer */
}
金底演示（点击我）
金底：白环跳出，深蓝环形成层次
组件落地 · 真实渲染
浅色主题 HERO
NEXLINK · NL 系列
高精度运动控制 · 工业互联
CTA 用 #9A6226，白字对比 5.06:1（留 12% 余量）
深色主题 · 注意按钮
设备实时状态
主轴 4820 rpm · 轴承 68.4℃
深色主按钮用金底深字（7.61:1），#143467 不再做实心按钮
对比度实测（WCAG 2.2）
| 前景 | 背景 | 对比 | 用途 |
|---|
#FFFFFF | #143467 | 12.23 AAA | 浅色实心块 |
#FFFFFF | #9A6226 | 5.06 AA | 浅色 CTA |
#0B1E3D | #D3A968 | 7.61 AAA | 深色 CTA |
#0B1E3D | #FFFFFF | 16.57 AAA | 正文 |
#A9C4E8 | #0B1E3D | 9.27 AAA | 深色链接 |
#22706B | #E8F2F1 | 5.10 AA | 成功标签文字 |
#8A5A17 | #FAF1E3 | 5.28 AA | 警告标签文字 |
#9F382C | #F8EDEC | 5.95 AA | 错误标签文字 |
#5E82B5 | #0B1E3D | 4.21 ✓ | 深色表单描边 |
#7A8CA6 | #FFFFFF | 3.43 ✓ | 浅色表单描边 |
#E07A6D | #0B1E3D | 5.66 AA | 深色错误色 |
#5FB5AC | #0B1E3D | 6.86 AAA | 深色成功色 |
#C98A2E | #0B1E3D | 5.65 AA | 深色警告色 |
#7189A9 | #FFFFFF | 3.59 大字 | 焦点环、图标（小字禁用） |
#8DB5C5 | #FFFFFF | 2.20 禁 | 仅图表填充 |
印刷 / 物料（CMYK 打样起点，必须上机签样）
| 角色 | HEX | CMYK 起点 | 物料注意 |
|---|
| 黛蓝 · 品牌 | #143467 | C:100 M:85 Y:25 K:15 | 大面印刷易偏灰紫，必须专色打样；丝印与喷绘分别签样 |
| 赭金 · 强调 | #9A6226 | C:25 M:60 Y:100 K:15 | 展会背板可提亮至 #A26B28，远距离识别更佳 |
| 青瓷 · 辅助 | #3A7CA6 | C:72 M:38 Y:22 K:2 | 画册图表用；与黛蓝并置拉开 30% 明度 |
| 沉渊 · 正文 | #0B1E3D | C:100 M:85 Y:40 K:45 | 正文勿用四色黑，防止套印不准 |
金色优先哑金烫印（Pantone 872 C），四色模拟必发灰。
高对比模式回退（forced-colors）
@media (forced-colors: active) {
:root { --brand: ButtonText; --accent: ButtonText;
--surface: ButtonFace; --border: ButtonText; }
.btn, .input, .card { border: 1px solid ButtonText; }
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
.status-icon { forced-color-adjust: none; } /* 保留图标通道 */
}
配色比例与品牌双极
网页端克制，VI 侧（画册/展会/铭牌）让赭金承担更高识别权重。#143467（亮场景）与 #061226（暗场景）构成品牌双极。