Brand Color System · v1.1
3+1 品牌色彩系统 v1.1
三色主导 · 一色背景 · 跨通道对齐（Web / Office / 印刷 / 邮件）
3+1 品牌色彩系统 v1.1
本规范的地位
- 受众：Web 前端工程师、UI/UX 设计师、主题维护者、印刷物料设计师
- 范围：公司官网、文档站、客户端 UI、宣传物料、Office 模板、社交媒体、印刷品
- 权威来源：本规范与
AlgoDepartment/06_docs/XIYIN-DESIGN-SPEC.mdv1.3 对齐，是其子集 + 工程落地指南 - 版本约束：任何非 v1.1 指定色值的使用都视为违规，PR 会被打回
给 MD 文档作者
如果您不是 Web/设计人员，只是写文档 —— 您不需要阅读本文件。
所有文档内的颜色表达由主题自动处理，您只需要按 md-writing-spec.md 正确使用预设 class（如 xyL0~xyL5）即可。
1. 总纲 · 3+1 系统
一张图说明全部配色角色：
graph LR
Yin["🟡 主色<br/>音·玫瑰金<br/>#D4A574"] --> Use1[边框/竖条/按钮/链接]
Xi["🟣 辅色<br/>曦·紫霞<br/>#9D4EDD"] --> Use2[流程连线/L5节点]
Sheng["🔵 点缀<br/>声·极光青<br/>#5DDECF"] --> Use3[Admonition/成功态/函数名]
Night["⚫ 背景<br/>夜蓝<br/>#0B1C2E"] --> Use4[Hero/代码块/Mermaid]
class Yin xyL3
class Xi xyL5
class Sheng xyL1
class Night xyEnd
class Use1,Use2,Use3,Use4 xyL2核心理念：
- 三色主导：玫瑰金、曦紫、极光青三色共同构成品牌识别
- 一色背景：夜蓝是所有深色场景的底色（Hero / 代码 / Mermaid 画布）
- 禁止第 5 色：除赤陶
#B87A6F（仅用于错误态）外，不得引入新的强饱和色
2. 完整色板（权威 HEX / HSL / OKLCH）
2.1 主色 · 音玫瑰金（Yin · Rose Gold）
| 变体 | HEX | HSL | OKLCH | CSS 变量 | 用途 |
|---|---|---|---|---|---|
| Light | #E8C9A0 |
hsl(33, 57%, 77%) |
oklch(83.9% 0.055 76) |
--yin-color-light |
高亮文字、Tab 文字悬停 |
| Base | #D4A574 |
hsl(32, 50%, 64%) |
oklch(74.5% 0.083 73) |
--yin-color ⭐ |
边框、左竖条、按钮、链接悬停 |
| Deep | #A87E4C |
hsl(32, 40%, 48%) |
oklch(58.2% 0.087 72) |
--yin-color-deep |
强调文字、按钮按下态 |
2.2 辅色 · 曦紫霞（Xi · Purple）
| 变体 | HEX | HSL | OKLCH | CSS 变量 | 用途 |
|---|---|---|---|---|---|
| Light | #C77DFF |
hsl(278, 100%, 74%) |
oklch(72.3% 0.239 309) |
--xi-color-light |
代码关键字、L4 浅紫节点 |
| Base | #9D4EDD |
hsl(275, 69%, 58%) |
oklch(57.0% 0.232 306) |
--xi-color ⭐ |
流程图连线、L5 云端节点 |
| Deep | #6A1FA3 |
hsl(275, 68%, 38%) |
oklch(39.9% 0.187 306) |
--xi-color-deep |
强调标题、印刷暗紫 |
2.3 点缀 · 声极光青（Sheng · Aurora Cyan）
| 变体 | HEX | HSL | OKLCH | CSS 变量 | 用途 |
|---|---|---|---|---|---|
| Light | #8FEDE0 |
hsl(171, 69%, 74%) |
oklch(87.9% 0.098 181) |
--sheng-color-light |
暗色模式 Admonition 标题 |
| Base | #5DDECF |
hsl(170, 62%, 62%) |
oklch(80.3% 0.115 181) |
--sheng-color ⭐ |
Admonition 左竖条、代码字符串、L1 节点 |
| Deep | #2E8D7E |
hsl(170, 51%, 37%) |
oklch(55.1% 0.093 180) |
--sheng-color-deep |
Admonition 标题文字、L0 节点 |
2.4 背景 · 夜蓝堆栈（Night Stack）
| 变体 | HEX | 用途 |
|---|---|---|
| Abyss | #050812 |
Footer 最深、印刷封底 |
| Deep | #0B1C2E ⭐ |
Hero 主体底、代码块底、Mermaid 画布底 |
| Mid | #14283F |
深色表头渐变、Hero 底部渐变终点 |
| Soft | #1E3A52 |
暗色卡片 hover 态 |
2.5 辅助色（珍珠系 + 纸张系）
| 角色 | HEX | CSS 变量 | 用途 |
|---|---|---|---|
| 珍珠白 | #F0F4F8 |
--pearl |
深色底上的正文、代码块裸文本 |
| 珍珠暗 | #B8C5D1 |
--pearl-dim |
深色底上的次要文字 |
| 珍珠哑 | #7A8A9B |
--pearl-mute |
深色底上的元信息、footer 文字 |
| 米纸 | #FBFAF6 |
--paper |
浅色模式主背景 |
| 米纸暖 | #F5F2EA |
--paper-warm |
浅色表格交替行 |
| 线条色 | #E8E4DA |
--line |
浅色卡片边框 |
2.6 语义状态色（仅 UI 状态）
| 角色 | HEX | CSS 变量 | 用途 |
|---|---|---|---|
| 成功 | #5DA88E |
--status-done |
状态徽章（Done） |
| 进行中 | #C9A33F |
--status-wip |
状态徽章（WIP） |
| 计划 | #7A8A9B |
--status-plan |
状态徽章（Plan） |
| 归档 | #A89B8A |
--status-archived |
状态徽章（Archived） |
| 错误 | #B87A6F ⚠️ |
--status-error |
仅此处破例 使用非 3+1 色（语义不可替代） |
3. Mermaid 图层级色（L0-L5）
主题已预置 10 个 classDef，作者写 MD 只用 class X xyLn，无需写 hex。Web/设计师需要知道的对应关系：
| Class | 产品层 | 节点描边 | 节点填充 | 典型产品 |
|---|---|---|---|---|
xyL0 |
L0 芯片 | #2E8D7E 深极光青 |
#D8F0EA |
XiDSP / XiCore |
xyL1 |
L1 硬件 | #5DDECF 极光青 |
#E8F4F1 |
XiAmp / XiBox |
xyL2 |
L2 测试调音 | #E8C9A0 香槟金 |
#FBF4E8 |
XiTune / XiTest / XiMic |
xyL3 |
L3 算法 | #D4A574 玫瑰金 |
#F5F2EA |
XiAlgo |
xyL4 |
L4 工具 | #C77DFF 浅紫 |
#FAE8F0 |
XiStudio / XiForge |
xyL5 |
L5 云端 | #9D4EDD 曦紫 |
#F0E6FA |
XiMind |
语义 class：
| Class | HEX（描边 / 填充 / 文字） | 用途 |
|---|---|---|
xySuccess |
#5DDECF / #E8F4F1 / #2E8D7E |
✅ 成功/通过/终态 |
xyWarn |
#D4A574 / #FBF4E8 / #A87E4C |
⚠️ 警告/判断菱形 |
xyError |
#B87A6F / #F7E6E2 / #8B5A4A |
❌ 错误/阻断/异常出口 |
xyEnd |
#9D4EDD / #14283F / #F0F4F8 |
🔚 终止/输出/归档 |
全局规则：
- 节点间连线颜色由
xiyin-mermaid.js的lineColor全局设为曦紫#9D4EDD - 画布背景由 CSS 设为
linear-gradient(180deg, #0B1C2E, #14283F) - 文字颜色由 CSS 强制为珍珠白
#F0F4F8
4. Admonition · 统一极光青
v1.1 起废弃"八色 Admonition"，所有类型（note/info/tip/success/warning/danger/example/abstract/quote/failure/bug/question）统一使用极光青 #5DDECF 左竖条 + 图标。
| 部位 | 颜色 | 说明 |
|---|---|---|
| 左竖条 (border-left) | #5DDECF 极光青 |
4px 宽 |
| 标题底色 | rgba(93, 222, 207, 0.08) 8% 透明 |
浅色模式 |
| 标题文字 | #2E8D7E 深极光青 |
浅色模式 |
| 标题底色（暗） | rgba(93, 222, 207, 0.12) 12% 透明 |
暗色模式 |
| 标题文字（暗） | #8FEDE0 浅极光青 |
暗色模式 |
| 图标方块 | #5DDECF |
Material 默认 icon 填充 |
区分 8 种 Admonition 的方式：仅通过 Material 自带的 icon（铅笔/书/信息/火焰等） + 文字 label 区分，颜色不再区分。
5. 代码语法高亮 · Pygments 映射
夜蓝底 #0B1C2E 上的 C/Python/JS 等代码 token 映射表：
| Token 类型 | Pygments class | HEX | 用途示例 |
|---|---|---|---|
| 兜底裸文本 | .highlight pre/code |
#F0F4F8 珍珠白 |
任何未被特定 class 覆盖的字符 |
| 关键字 | .k .kc .kd .kn .kp .kr .kt |
#C77DFF 浅紫 + font-weight 500 |
int / void / return / if / def / class |
| 函数/类名/Builtin | .nf .fm .nc .nb .bp .nn |
#FFD89E 香槟金 + font-weight 600 |
printf / malloc / main / class Foo |
| 字符串 | .s .s1 .s2 .sb .sc .sd .se .sh .si .sx .sr .ss .dl |
#5DDECF 极光青 |
"hello" / 'world' |
| 数字 | .m .mb .mf .mh .mi .mo .il |
#D4A574 玫瑰金 |
42 / 3.14 |
| 注释 | .c .c1 .cm .cp .cpf .cs .ch |
#8A99A8 灰 + italic |
// 注释 / # comment |
| 变量 | .n .na .nv .nx .nl .no .py .vc .vg .vi .vm |
#F0F4F8 珍珠白 |
普通标识符 |
| 装饰器/标签 | .nd .ni .ne .nt |
#C77DFF 浅紫 |
@decorator / XML 标签 |
| 操作符/标点 | .o .p .ow |
#B8C5D1 珍珠暗 |
+ - * / / , ; |
| 错误 | .err |
#B87A6F 赤陶 + 虚线下划线 |
语法错误标红 |
| 高亮行 | .hll |
rgba(212, 165, 116, 0.15) + 左竖条 |
hl_lines="2 4" |
关键对比度：香槟金 #FFD89E 与夜蓝 #0B1C2E 的 WCAG 对比度 ≈12.8:1（AAA 级），确保函数名永远可见。
6. CSS 变量完整清单
所有变量定义在 docs/assets/stylesheets/xiyin-brand.css，由 MkDocs 主题自动加载。Web 部门直接复制本清单到产品前端即可：
:root {
/* 三色主导 · Trinity */
--yin-color: #D4A574; --yin-color-light: #E8C9A0; --yin-color-deep: #A87E4C;
--xi-color: #9D4EDD; --xi-color-light: #C77DFF; --xi-color-deep: #6A1FA3;
--sheng-color: #5DDECF; --sheng-color-light: #8FEDE0; --sheng-color-deep: #2E8D7E;
/* 背景 · Night Stack */
--night-abyss: #050812; --night-deep: #0B1C2E; --night-mid: #14283F; --night-soft: #1E3A52;
/* 辅助 · Pearl & Paper */
--pearl: #F0F4F8; --pearl-dim: #B8C5D1; --pearl-mute: #7A8A9B;
--paper: #FBFAF6; --paper-warm: #F5F2EA; --line: #E8E4DA;
/* 语义状态 */
--status-done: #5DA88E;
--status-wip: #C9A33F;
--status-plan: #7A8A9B;
--status-archived: #A89B8A;
--status-error: #B87A6F;
/* 核心渐变 */
--gradient-trinity:
linear-gradient(90deg, #9D4EDD, #D4A574, #5DDECF);
--gradient-hero:
linear-gradient(180deg, #050812 0%, #0B1C2E 50%, #14283F 100%);
--gradient-brand-name:
linear-gradient(180deg, #F0F4F8 0%, #E8C9A0 45%, #D4A574 80%, #A87E4C 100%);
/* 字体 */
--font-serif-cn: 'Noto Serif SC', 'Source Han Serif SC', serif;
--font-sans-cn: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
--font-serif-en: 'Cormorant Garamond', 'Noto Serif SC', serif;
--font-sans-mixed: 'XiyinLatin', 'Inter', 'PingFang SC', sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
}
7. Tailwind CSS 配置片段
如果 Web 部门使用 Tailwind，将以下片段合并进 tailwind.config.js：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// Trinity · 三色主导
yin: {
DEFAULT: '#D4A574',
light: '#E8C9A0',
deep: '#A87E4C',
},
xi: {
DEFAULT: '#9D4EDD',
light: '#C77DFF',
deep: '#6A1FA3',
},
sheng: {
DEFAULT: '#5DDECF',
light: '#8FEDE0',
deep: '#2E8D7E',
},
// Night Stack · 背景
night: {
abyss: '#050812',
deep: '#0B1C2E',
mid: '#14283F',
soft: '#1E3A52',
},
pearl: {
DEFAULT: '#F0F4F8',
dim: '#B8C5D1',
mute: '#7A8A9B',
},
paper: {
DEFAULT: '#FBFAF6',
warm: '#F5F2EA',
line: '#E8E4DA',
},
// 语义状态
status: {
done: '#5DA88E',
wip: '#C9A33F',
plan: '#7A8A9B',
archived: '#A89B8A',
error: '#B87A6F',
},
},
backgroundImage: {
'gradient-trinity':
'linear-gradient(90deg, #9D4EDD, #D4A574, #5DDECF)',
'gradient-hero':
'linear-gradient(180deg, #050812 0%, #0B1C2E 50%, #14283F 100%)',
'gradient-brand-name':
'linear-gradient(180deg, #F0F4F8 0%, #E8C9A0 45%, #D4A574 80%, #A87E4C 100%)',
},
fontFamily: {
'serif-cn': ['Noto Serif SC', 'Source Han Serif SC', 'serif'],
'sans-cn': ['Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'sans-serif'],
'serif-en': ['Cormorant Garamond', 'Noto Serif SC', 'serif'],
'sans-mixed': ['XiyinLatin', 'Inter', 'PingFang SC', 'sans-serif'],
'mono': ['JetBrains Mono', 'Consolas', 'Menlo', 'monospace'],
},
},
},
}
用法示例：
<button class="bg-yin hover:bg-yin-deep text-white px-6 py-2 rounded">
了解 XiStudio
</button>
<div class="bg-night-deep text-pearl border-l-4 border-yin p-6">
<code class="text-sheng">printf</code>("hello");
</div>
8. 完整场景对照表
| 场景 | 主色 🟡 | 辅色 🟣 | 点缀 🔵 | 背景 ⚫ | 备注 |
|---|---|---|---|---|---|
| Hero 品牌名渐变 | ✓ | ✓ | 金属渐变大字 | ||
| 表格外框 + 左竖条 | ✓ | ⚫/珍珠 | 玫瑰金左 3px | ||
| Tab 选中底线 | ✓ | 玫瑰金 2px | |||
| 代码块左竖条 | ✓ | ✓ | 玫瑰金 3px + 夜蓝底 | ||
| 代码关键字 | 🟣 浅紫 | ✓ | #C77DFF |
||
| 代码函数名 | 香槟金 | ✓ | #FFD89E（与 3+1 近亲） |
||
| 代码字符串 | ✓ | ✓ | 极光青 | ||
| 代码数字 | ✓ | ✓ | 玫瑰金 | ||
| Mermaid 连线 | ✓ | ✓ | 曦紫 | ||
| Mermaid L0/L1 节点 | ✓ | 浅底 | 青色系 | ||
| Mermaid L2/L3 节点 | ✓ | 浅底 | 金色系 | ||
| Mermaid L4/L5 节点 | ✓ | 浅底 | 紫色系 | ||
| Admonition 左竖条 | ✓ | 珍珠 | 所有类型统一 | ||
| 链接悬停 | ✓ | 玫瑰金 | |||
| 按钮默认 | ✓ | 玫瑰金填充 | |||
| 按钮主要（CTA） | ✓ | ✓ | ✓ | 三色渐变 | |
| 成功徽章 ✅ | ✓ | 极光青 | |||
| 警告徽章 ⚠️ | ✓ | 玫瑰金 | |||
| 错误徽章 🔴 | 赤陶 #B87A6F | 唯一破例 |
9. 禁令（v1.1 强制）
9.1 通用禁令
- ❌ 禁止引入第 5 种强饱和色（除赤陶错误态）
- ❌ 禁止手写 hex 色值（必须引用 CSS 变量或 Tailwind class）
- ❌ 禁止在 Mermaid 里写
fill:#xxx/stroke:#xxx（用 xyLn class 代替） - ❌ 禁止给 Admonition 指定自定义颜色（统一极光青）
9.2 对 Web 部门的特别禁令
- ❌ 禁止修改三色 HEX 值（任何改动需经品牌委员会审议并升级本规范版本）
- ❌ 禁止扩展色系明暗度（如自造
--yin-color-ultra-light）—— 如需中间色请用透明度rgba(212,165,116,0.4) - ❌ 禁止用第三方色卡库（如 Material Design 的 blue-500、Tailwind 默认 red-600）覆盖本色系
- ✅ 允许：基于本色系做灰度/饱和度微调（仅限非品牌关键位置，如 tooltip 阴影等）
9.3 印刷 / 物料对齐（见 XIYIN-DESIGN-SPEC v1.3）
- 印刷品需使用 CMYK 转换值（由设计师从本规范的 HEX 推导，Adobe InDesign 色板已预配置）
- 邮件签名 / PPT 模板 → 使用
#前缀 HEX 即可 - 社交媒体头图 → 沿用本规范的
--gradient-trinity渐变
10. 验收与维护
10.1 色彩合规检查清单（CR 审查）
- 所有 CSS / Tailwind 颜色引用均来自本规范变量或 class
- 无手写 hex（
#[0-9a-f]{3,6}）在组件 CSS 中（可用 grep 检查） - 新组件/页面通过本规范的场景对照表（§8）验证
- 暗色模式下所有文字对比度 ≥ WCAG AA（4.5:1）
- 色盲模拟（Protanopia/Deuteranopia）下信息传达不丢失
10.2 版本管理
- 本规范采用 语义化版本（semver）
- v1.x 的 变更：
- Minor（1.1 → 1.2）：扩展场景映射、新增 class、优化 Tailwind 片段
- Major（1.x → 2.0）：三色 HEX 调整、品牌重塑 —— 需品牌委员会批准
- 任何变更同步更新：
xiyin-brand.cssCSS 变量定义xiyin-mermaid.jsclassDef 预设- 本文件 §2/§3 色板表
- md-writing-spec.md §9.2 Mermaid 模板
- XIYIN-DESIGN-SPEC v1.3 权威源
附录 A · 文件与变量快速索引
| 实现位置 | 职责 |
|---|---|
docs/assets/stylesheets/xiyin-brand.css |
CSS 变量总定义 · 浅色/深色两套调色板 |
docs/assets/stylesheets/xiyin-extra.css |
组件皮肤（Hero / 表格 / Tab / 标题卡 / 引用块） |
docs/assets/stylesheets/xiyin-patch.css |
主题补丁 · Admonition 统一 + Pygments 映射 + 代码块去双框 |
docs/assets/javascripts/xiyin-mermaid.js |
Mermaid L0-L5 classDef 自动注入 |
附录 B · 参考
- 权威上游：
AlgoDepartment/06_docs/XIYIN-DESIGN-SPEC.mdv1.3（1220 行完整视觉规范） - 作者向格式规范：md-writing-spec.md
- UI 设计规范（XiStudio IDE 产品）：
AlgoDepartment/06_docs/曦音-UI设计规范.md
附录 C · 版本历史
| 版本 | 日期 | 要点 |
|---|---|---|
| v1.1 | 2026-05-05 | 从 md-style-guide.md §18 拆分独立成文；新增 Tailwind 配置片段、CSS 变量完整清单、印刷 CMYK 对齐指引、10 条禁令、色盲验证规则 |
brand-color-system.md · Web & Design · v1.1 · 2026-05-05 · Xisound AlgoDepartment