外观
设计令牌
ui/styles/app.css 定义的 CSS 自定义属性全表。三个站的 app.css 都 @import 它； 首页 apps/home/index.html 内联了同源的一份并额外定义了地貌灰阶。
品牌口径（什么时候能用橙、标志怎么画）见 brand-identity.md。
色值前的小色块是
npm run swatches生成的图片（docs/assets/swatch/<hex>.svg）—— Markdown 没有颜色，GitHub 那个反引号色块只在 issue / PR 里生效，.md里不渲染。 改了色值跑一次脚本回填，别手改图。
1. 中性表面 —— 零色相灰
取自 Cloudflare Radar 的生产设计系统（代号 Kumo），无任何蓝调或暖调。
| 令牌 | light | dark | 用途 |
|---|---|---|---|
--bg |  #fafafa |  #0a0a0a | 页面底 |
--bg-elev |  #ffffff |  #121212 | 卡片 |
--bg-elev-2 |  #f2f2f2 |  #1d1d1d | 内嵌区 |
--border |  #e8e8e8 |  #333333 | 默认边框 |
--border-strong |  #d9d9d9 |  #4a4a4a | 强调边框 |
--text | #1d1d1d | #f2f2f2 | 正文 |
--text-dim |  #595959 |  #a6a6a6 | 次级 |
--text-faint |  #797979 |  #737373 | 三级 |
两个容易踩的点：
- 暗色下卡片（
#121212）亮于页面（ #0a0a0a）。这是 Radar 暗色的招牌观感，反过来 会立刻失真。 --border在暗色取的是 Kumo 的 line 32% 而非 hairline 26.9%。用 hairline 当默认 边框会让每张暗色卡片都欠边。
2. 品牌色
| 令牌 | light | dark | 用途 |
|---|---|---|---|
--accent 燃素橙 |  #f6821f | #f6821f | 品牌 / 强调，主按钮 |
--accent-hover |  #e3710f |  #ff922e | 悬停 |
--accent-2 燃素金 |  #fbad41 | #fbad41 | 只与橙成对，永不单独使用 |
--accent-soft |  #fdf0e3 |  #2a1f12 | 焦点环、软底 |
--link |  #0051c3 |  #82b6ff | 超链接 |
链接恒蓝，橙不承担链接语义。 橙 = 品牌 / 强调（按钮、开关、激活导航）， 蓝 = 可点。
3. 状态色
| 令牌 | light | dark |
|---|---|---|
--ok |  #0a7d5a |  #3fb950 |
--warn |  #9a6700 |  #d29922 |
--bad |  #c5292e |  #f85149 |
--down |  #b01218 |  #f0484d |
--unknown | #737373 |  #999999 |
徽章底色：--ok-bg / --warn-bg / --bad-bg / --neutral-bg。 --down-fill 是实心徽章的填充，比文字令牌更深，保证白字在两个主题下都过对比度。
4. 图表调色板
分成语义与数量两套，混用是常见错误。
语义色（只给状态类图：健康、RPKI、churn）
--c-ok --c-warn --c-bad --c-down --c-unknown --c-accent
数量序列（流量、路由数、份额） —— 按 Kumo 分类顺序 蓝 → 青 → 橙，这样橙在图表里 依然读作「品牌 / 强调」，绿红保留给状态：
| 令牌 | light | dark |
|---|---|---|
--c-data-1 |  #0045a6 |  #4693ff |
--c-data-2 |  #30b6da |  #73cee6 |
--c-data-3 | #f6821f | #f6821f |
--c-data-4 |  #bcbf02 |  #d0d444 |
--c-data-5 |  #9564bf |  #b18ae0 |
--c-data-other |  #003681 | #82b6ff |
--c-data-other 是 ShareBar 的「其他」段。
--on-c-* 是画在对应色块上的文字色（地图聚簇计数点等）。
网格与轴：定义成文字色的 alpha，因此自动适配主题，不需要分别给亮暗值。
| 令牌 | 值 | 对应 Radar |
|---|---|---|
--c-grid | color-mix(text 10%) | chart-line |
--c-grid-dash | color-mix(text 15%) | chart-dashed-line |
--c-axis-label | color-mix(text 65%) | chart-label |
这套「黑/白随主题、只调 alpha」的做法是 Radar 干净观感的来源，值得原样保留。
5. 排版
根字号 16px，与 Radar 生产一致。
曾把
font-size设成 14px，结果每个按 Radar 校准过的 rem 都渲染成 87.5% （卡片 padding 21px vs 24、标题 17.5px vs 20），整套 UI 读起来像被均匀缩小的克隆版。 密度改为逐角色用--fs-*调。
| 令牌 | 值 | 角色 |
|---|---|---|
--fs-micro | 0.6875rem (11px) | chip / 标记，字号下限 |
--fs-caption | 0.75rem (12px) | 图例、标签、元信息、as-of |
--fs-sm | 0.875rem (14px) | 表格、控件、小正文 |
--fs-stat-sm | 1.25rem | 统计值 |
--fs-stat-lg | 1.5rem | 主角统计值 |
字体：--sans = Inter Variable（@fontsource-variable/inter，自托管）， --mono = 系统等宽栈。数据一律用 mono + tabular-nums。
6. 形状与层次
| 令牌 | 值 |
|---|---|
--radius-lg / --radius / --radius-sm | 8px / 6px / 4px |
--shadow | 卡片级微阴影 |
--shadow-lg | 浮层（tooltip / dropdown / modal） |
--ring | 焦点环 |
表面是 flat、border-driven 的：阴影只留给浮层，平面卡片靠边框区分。
--syn-str / --syn-num 是 JSON 查看器的语法色，不属于状态调色板，不要拿来 表示健康度。
7. 首页专有令牌
apps/home/index.html 是自包含单页，令牌内联，值与本表同源，另有一组只有它用的 台地灰阶：
| 令牌 | light | dark |
|---|---|---|
--mesa-far |  #ececec |  #161616 |
--mesa-mid |  #dedede |  #1f1f1f |
--mesa-near |  #cccccc |  #2a2a2a |
台地剪影是「远山淡影」的灰阶层次，不是彩色插画。
8. 图表工艺参数
这些不是 CSS 令牌，而是从 Radar 生产构建里读出的实现参数，ui/charts/ 的组件按此 校准。
折线图
| 项 | 值 |
|---|---|
| 主线宽 | 2.5–3px |
| 次线宽 | 2px |
| 上期对比线 | 同色，dash [4,4]，1.5–1.8px |
| y 轴 domain | [0, 'max'] |
| 轴标签字号 | --fs-micro |
对比线的图例 swatch 是虚线形、灰色，且可点击开关。
比例条（ShareBar）
| 项 | 值 |
|---|---|
| 默认高 | 30px |
| 段间隙 | 2px |
| 圆角 | 2px |
| 最小占比 | 0.1%，更小的段折进「其他」（用 --c-data-other） |
| 最大类别数 | 20 |
| 悬停 | 非悬停段 opacity → 0.75；悬停段 scaleY(1.11) 弹性放大，cubic-bezier(0.175,0.885,0.32,1.275)，尊重 prefers-reduced-motion |
| 段内文字 | 仅在实测文字宽度 < 段宽时渲染；标签 11px 粗体、数值 10px、60% 透明，深浅底自动选黑/白字 |
条上方图例与条 hover 双向联动；tooltip 带色点 + 标签 + 值 + 百分比。
9. 来源
第 1–6 节的取值于 2026-07-02 从 radar.cloudflare.com 的生产构建（Vite chunk）中 直接提取，非截图目测。Radar 完整色阶（10 级，深 → 浅）留档如下，需要新色时从这里取， 不要自行调色：
blue: #001c43 #002b67 #003681 #0045a6 #0051c3 #086fff #4693ff #82b6ff #b9d6ff #ecf4ff
cyan: #061b20 #0b333e #0d3e4b #115061 #156074 #1e89a5 #30b6da #73cee6 #ace2f0 #e9f7fb
gray: #1d1d1d #313131 #3d3d3d #4a4a4a #595959 #797979 #999999 #b6b6b6 #d9d9d9 #f2f2f2分类序列（categorical，按顺序取）：
#0045a6 #73cee6 #f6821f #bcbf02 #22a121 #e574c3 #9564bf #d8241f #8d5649 #ffe43eRadar 的蓝色主按钮不跟——主按钮在本项目是燃素橙。