状态: LOCKED。改任何 token 值或新增视觉档位, 必须先改本文档再改代码。 依据: 2026-07-03 全量样式审计（110 处硬编码 hex、472 处 Tailwind 任意值、12 种近黑背景并存、6 个 accent 色系混战）。
Dark Ops Console（暗色作业控制台）: 单主题纯暗色、高信息密度、telemetry 电传风格。 冷 zinc 灰阶 + 单一 primary 蓝 + 5 系语义色。克制的 2px 控件圆角, 三级阴影, 无装饰性渐变（画布底渐变除外）。
一句话判断标准: 像 SpaceX 任务控制台, 不像 SaaS 营销页。
| 我要写… | 用这个 |
|---|---|
| 页面底 / 面板 / 悬浮背景 | bg-ops-black / bg-ops-panel / bg-ops-raised |
| 描边 | border-ops-line; inline 场合 var(--oc-line) |
| 灰字 | 正文 text-zinc-100 / 次要 text-zinc-400 / 弱化 text-zinc-500 |
| 交互 / 选中 / 链接 | 文字 text-primary-400, 面 bg-primary-600 |
| 成功 / 警告 / 危险 / 信息 / agent | 终态: text-signal-success/warning/danger/info/agent（T3a 落地即用）; 迁移期 emerald/amber/red/sky/violet 仍合法 |
| 图表 / xyflow / SVG 里的色常量 | signal hex: #35b779 #d99a3d #e15b64 #4fb7d6 #9b7bf3 |
| 小字 | text-2xs(11px) / text-3xs(10px), 禁 text-[Npx] |
| 圆角 | 控件 rounded-xs(2px) / 面板 rounded-md / 弹层 rounded-lg |
| 阴影 | shadow-panel / shadow-overlay / shadow-drag |
| 数据 / 代码字体 | font-mono |
| 缺 ui 原语 (Tabs/Popover/…) | npx shadcn@latest add <x> 拉源码进 components/ui/, 再按本规范 token 化, 禁手搓（前置 T0 配置修复） |
| 海拔 | Token | 值 | Tailwind 类 | 用途 |
|---|---|---|---|---|
| 0 页面底 | --oc-bg / --color-ops-black |
#050708 |
bg-ops-black |
body、画布底 |
| 1 面板 | --oc-surface / --color-ops-panel |
#0a0d10 |
bg-ops-panel |
卡片、侧栏、面板 |
| 2 悬浮 | --oc-surface-raised / --color-ops-raised |
#101418 |
bg-ops-raised |
hover、弹层、raised 卡 |
禁止: 任何手写近黑 hex（#050505/#060608/#0a0a0a/#0b0c0e 等 12 种审计变体全部违规）。
inline style / SVG 用 var(--oc-bg) / var(--oc-surface) / var(--oc-surface-raised)。
只用 zinc。禁 slate / gray / neutral / stone。
描边: --oc-line（默认）/ --oc-line-strong（hover）/ --oc-line-hot（active, primary 色相）。
唯一 primary 蓝 #2f7df6（--color-primary-500, 类 text-primary-400、bg-primary-600 等, 有 50/100/300/400/500/600/700 档）。
选中、focus、active、链接、拖拽 placeholder 一律 primary。禁 Tailwind 内置 blue-*。
focus ring 统一 #4f9bff（primary-400, 已在 :focus-visible 全局定义）。
| 语义 | Tailwind 系 | signal token |
|---|---|---|
| 成功 / running healthy | emerald |
--color-signal-green #35b779 |
| 警告 / degraded | amber |
--color-signal-amber #d99a3d |
| 危险 / error / 破坏性操作 | red |
--color-signal-red #e15b64 |
| 信息 / 中性提示 | sky |
--color-signal-cyan #4fb7d6 |
| Agent / 特殊实体 | violet |
--color-signal-violet #9b7bf3 |
| 高亮 / 稀缺强调（仅点缀） | — | --color-signal-gold #d6a84f |
禁: green yellow cyan purple indigo fuchsia rose blue 直用。
迁移映射: green→emerald, yellow→amber, cyan→sky, purple/indigo/fuchsia→violet, rose→red, blue→primary, slate→zinc。
单轨化决议 (2026-07-03 DX review, D9/D14): 终态 = 角色名 signal 语义 token 类唯一真相源: signal-success / signal-warning / signal-danger / signal-info / signal-agent / signal-highlight（shadcn 语义变量风格, 结构参照 next-shadcn-dashboard-starter; agent 零查表——写"警告色"而非记"降级=琥珀"）。hex 值沿用现有 signal 色板不变。Tailwind 内置 5 系 (emerald/amber/red/sky/violet) 为过渡期合法写法, 待 T3b 迁移完成后转禁。前置: T3a 先在 @theme 落角色名变量（含 foreground 配对评估）; Tailwind v4 透明度修饰符 (/12 等) 对 token 原生可用。本节状态 = 迁移目标, 非 locked; 其余章节维持 locked。
| 用途 | 类 / 变量 |
|---|---|
| UI 正文 | 默认（--font-ui, Geist + 思源黑体族） |
| 数据 / 代码 / 数字列 | font-mono（= --font-code, tabular-nums 已全局开） |
| 大写小标签（KPI 标题等） | font-telemetry + telemetry-label utility |
font-code 与 font-mono 等价, 新代码统一写 font-mono。组件层禁自定义 font-family。
字号阶梯（密集 UI 扩展了两档 micro）:
| 类 | 值 | 用途 |
|---|---|---|
text-3xs |
10px | 画布节点元数据、最小注记 |
text-2xs |
11px | 密集表格、状态标签、面板小字 |
text-xs |
12px | 次要正文、表格默认 |
text-sm |
14px | 正文默认 |
text-base+ |
— | 标题按 Tailwind 默认 |
禁 text-[Npx] 任意值。遗留 text-[9px] 暂豁免（待逐步升 10px）, 新代码禁用。
| 类 | 值 | 用途 |
|---|---|---|
rounded-xs |
2px | 控件: button / input / badge / select（本系统签名圆角） |
rounded-sm |
4px | chip、小卡、行内块 |
rounded-md |
6px | 面板、卡片、画布节点 |
rounded-lg |
8px | 弹窗、大型弹层 |
rounded-full |
— | pill、状态点、头像 |
禁 rounded-[...] 任意值（rounded-[2px] → rounded-xs）。rounded-xl 及以上不属于本风格。
| 类 | 用途 |
|---|---|
shadow-panel |
画布内面板 chrome（controls / minimap / palette） |
shadow-overlay |
弹窗、popover、menu |
shadow-drag |
拖拽 / resize 进行中的元素 |
禁手写 shadow-[...rgba...]。特效光晕（如碰撞红圈）属动画反馈, 豁免。
4px 网格（p-1=4 起步）。密集区允许 0.5 半档（gap-1.5 / px-2.5）——这是有意的高密度设计, 不是违规。禁 p-[Npx] 任意值。
| 变量 | 用途 |
|---|---|
--oc-ease cubic-bezier(0.2,0.8,0.2,1) |
标准过渡（hover/border/bg, 120–160ms） |
--oc-ease-emphasized |
强调位移（面板进出, 200–300ms） |
时长档: 120 / 160 / 200 / 300ms。--m3-* 变量与 m3-sheet-in / m3-level-in 为遗留动画专用, 新代码不引入新的 M3 依赖。prefers-reduced-motion 已全局处理。
- 物理反馈 token:
--motion-duration-press70ms、--motion-duration-response180ms、--motion-duration-spatial320ms，以及--motion-ease-force-in/spatial/settle。 - Button / Card / Switch / Toggle / Tabs / Slider 必须消费上述共享 token；页面内不得另建平行动效曲线。
- SSGOI 只控制
AppShell内的 routed content；Sidebar、Header、Command Palette 必须保持边界外并持续挂载。 - Next/React View Transition 只用于 SSGOI 边界外的显式局部共享元素；同一 DOM 不得被两套系统共同控制。可用
NEXT_PUBLIC_ENABLE_VIEW_TRANSITIONS=false构建级关闭。 - App Router 的
loading.tsx/error.tsx是体验基础层的一部分，导航等待期间 Shell 保持可交互，错误态必须提供恢复动作。 - Reduced Motion 下所有 transition/animation 收敛为 0.01ms、单次执行，并关闭平滑滚动。
data-skin 的 spacex / nvidia / binance 为实验遗留。默认皮肤是唯一验收基准, 新代码不得只在某 skin 下调样式。
- 新 UI 先用
components/ui/*（原语）与components/opencli/*（面板体系: OperatorCard / MetricTile / PanelHeader / WorkbenchPanel）; 不够用先扩组件, 不允许页面内手搓平行实现。 - 画布类页面（PlanCanvas / Network / Topology / node-kit 节点渲染）同样受本规范约束, 无画布豁免。
telemetry-*/operator-*utility 是画布面板的官方皮肤, 保留并优先使用。- Radix 状态选择器
data-[state=...]不算任意值, 正常使用。 - 文字角色优先使用
type-headline-*/type-title-*/type-body-*/type-label-*; 遥测与数据使用font-data, 代码使用font-code。这些角色集中定义于app/globals.css。
- grep 该 token 全仓使用面（类名 +
var(--…)双形态）, 记下受影响页面。 @theme/:root与本文档在同一 commit 内改。- 预览过一遍受影响页面（重点: 画布类 + 最大表格页）。git 历史即变更记录, 不另设 changelog。
- T0 (P1) 修 shadcn 配置:
components.jsonbaseColor slate→neutral, 去除对不存在的 tailwind.config.js 的引用, 适配 TW4 CSS-first; 附 add 后 token 化改造步骤（codex #6, D16） - T1 (P1) token 扫描闸门: Node 扫描脚本固化本次审计 grep 模式（
text-[Npx]/rounded-[…]/近黑 hex/禁用色系, 覆盖 JSX+CSS+inline+图表常量）, 报错含改法, allowlist 豁免 index.css 既有 utility, frontend 现无 lint 基建, 含 bootstrap: 建npm run lint接 CI; ESLint 后补做 IDE 波浪线（D7/D13, codex #1/#2/#8） - T2 (P1) 入口链接: 仓根 CLAUDE.md 指向本文档（已落）; README 前端节补链接（D6）
- T3a (P1) @theme 落角色名 signal 变量:
--color-signal-{success,warning,danger,info,agent,highlight}, 让速查表终态 API 立即可用（D14） - T3b (P2) 语义色单轨迁移: Tailwind 5 系 →
signal-*角色类 ~500 处; 同时评估--oc-*/ops-*/ shadcn 变量三系合并（codex #7） - T4 (P2) snippet 库: 标准面板/卡片/弹窗/表格/状态徽章 JSX 模板附录, 砍 TTHW 主力（codex #9, D15 折中）
- T5 (P3)
text-[9px]遗留 26 处清理升text-3xs（D16） - T6 (P3) agent 验收演习: 给 agent 3 个典型 UI 任务, 测零额外提示能否走对 token/组件路径, 记录 miss = TTHW 实测闭环（codex #10, D16）
硬编码 hex 110 / rgb() 25 / 任意值 472（text 216、tracking 51、尺寸 65、bg 29、rounded 12、shadow 5）; zinc 846 vs slate 9; accent: amber 165 / red 136 / emerald 123 / sky 97 / violet 46 + 散装 blue/green/purple/indigo/yellow/cyan ~70。清洗后此表应趋近全绿。