色彩

暖土色域，单一强调色，四档文字灰阶。所有取值都过 WCAG AA，并由 npm run check:colors 实测拦截回归。

背景与文字

Token	亮色	暗色	用途
`--color-bg-warm`	#F2F0EB	#1A1816	暖白·系统底色
`--color-bg-base`	#FAFAF8	#201E1B	内页背景
`--color-bg-pure`	#FFFFFF	#242220	正文区
`--color-bg-subtle`	#F0EDE7	#2A2724	代码块 / 引用 / 标签底
`--color-text-heading`	#2C2B29	#F0EBE3	标题
`--color-text-primary`	#3A3837	#E8E3DC	正文·暖炭色·非纯黑
`--color-text-secondary`	#55524E	#B5AFA6	辅助正文
`--color-text-functional`	#706D68	#8A857D	日期 / 元数据 / 占位符

为什么文字只有四档

AA 底线把可用明度压在 L* 23.7–46.2 之间，这段距离容不下更多可辨层级。原先有六个文字 token，其中相邻两档只差 ΔL* 1.2——四个名字渲染成两个层级。现在四档，相邻 ΔL* ≥ 11，每一档都真的看得出来。能表达的层级数是被对比度底线决定的，不是被命名决定的。

强调色

砖红 #8B3525。阅读轨的静态内容页 ≤ 2 处；数据录入提交与反馈收束按第三层，适用于两条轨道；应用轨其余强调按页面任务与契约判定。语义色不计入该预算。

文心 · 万形 · 品牌标记 · --color-accent

悬停链接时变为强调色 · --color-link-hover

应用轨的工具提交：；直接推进当前任务的导航也可占用这一处，普通跳转仍用线框或文字。

查看代码 · Source

<p>文心 · 万形 <span class="wx-seal" aria-hidden="true"></span> · 品牌标记 · <code>--color-accent</code></p>
<p><a href="#accent">悬停链接时变为强调色</a> · <code>--color-link-hover</code></p>
<p>应用轨的工具提交：<button class="wx-btn wx-btn--primary" type="button">提交查询</button>；直接推进当前任务的导航也可占用这一处，普通跳转仍用线框或文字。</p>

语义色

语义色是第一层底线要求的信息通道，不是装饰。它们不计入 accent 预算，也不属于"高饱和装饰色"禁令的范围——但必须与文字说明同时出现。

危险 · #5C1F2F

牛血红，对暖白 10.90:1。

警告 · #7D5E12

赭黄，5.30:1。

成功 · #4F6B3A

苔绿，5.27:1。

这三个值不是凭感觉选的，是在暖土色域内解一个约束问题：全部 ≥4.5:1，彼此两两可区分（最小 ΔE = 28），且不与正文色混淆。danger 之所以是深牛血红而非常见的亮红—— 亮红属于被禁的高饱和色，而在暖土色域内，能与砖红 accent 拉开距离的方向只有"更深、更冷"。

暗色模式

不是纯黑反相，而是同一张羊皮纸被调暗。同时支持系统偏好与手动切换：

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { … } }
[data-theme="dark"] { … }

右上角的开关可以实时验证——本站每一页都跟随它。

定制路径

kit/tokens/core.css 是默认值的唯一真源；使用者应在自己的覆盖文件中改变量，不 fork 组件 CSS。每次换色都运行 npm run check:colors，它会测亮/暗对比度和语义色 ΔE。

想改什么	覆盖什么	影响与边界
点睛色	`--color-accent`、`--color-accent-hover`、`--color-focus`	链接悬停、品牌印记、焦点与一项合乎提交或反馈边界的主操作；应用轨可将该主操作用于直接任务推进。阅读轨静态内容仍至多两处。
字族	`--font-display`、`--font-body`、`--font-ui`、`--font-mono`	分别影响标题、正文、界面与代码；保留 CJK fallback，避免只换拉丁字体造成中文回退失控。
信息密度	根元素加 `data-density="dense"`	启用 `kit/tokens/dense.css` 的间距预设；只压缩间距，不压触控目标或文字等级。

/* app-theme.css：在 kit/index.css 之后引入 */
:root {
  --color-accent: #7A4030;
  --color-accent-hover: #914B38;
  --color-focus: #7A4030;
  --font-ui: "Source Han Sans SC", system-ui, sans-serif;
}

Token 交换

npm run build:tokens 从同一真源生成 JSON、SCSS、TypeScript 及 kit/tokens/generated/tokens.dtcg.json。后者采用 W3C Design Tokens Community Group 格式；默认值在 $value，暗色覆盖在明确命名的 org.wenxin.mode extension，以免把两个模式伪装成两个互不相关的 token。

色彩禁令

渐变色背景——任何形式，双轨都禁
高饱和蓝 / 绿 / 紫 / 橙作为装饰或强调（语义色不在此列）
仅用颜色区分状态——色盲用户无法感知
把强调色复用为错误色——一个语义变量只有一个用途
边框色当文字色用——--color-border-* 不得排日期、版权、面包屑