设计规范
色彩与材质
白光、主光 Iris、六条光谱色带、状态色、色散与光谱条；光学玻璃五层、磨砂、遮罩、指光与层级。
全部色值已用脚本校验对比度。代码里以令牌引用，组件不写色值。
白光（中性）
| 令牌 | 亮色 | 暗色（暗室） | 用途 |
|---|---|---|---|
canvas | #f3f6fb | #0c0f14 | 台面：页面底、侧栏底 |
surface | #ffffff | #16191f | 玻璃板：卡片、列表、弹层 |
container | #edf0f6 | #1f232b | 输入框、分段底槽、次按钮、行悬停底 |
container-high | #e4e7ef | #282d36 | 容器的悬停 / 按下 |
separator | #e0e3ea | #2c3039 | 列表缩进分隔线（唯一允许的常驻线条） |
ink | #191e29 | #f2f3f7 | 标题、正文、数字 |
ink-2 | #515763 | #b1b6bf | 次要说明、次要列 |
ink-3 | #656a75 | #8e929b | 标签、时间戳、坐标轴；只放在 canvas / surface / container 上；container-high 上不用（4.4:1） |
主光（Iris）
| 令牌 | 亮色 | 暗色 | 用途 |
|---|---|---|---|
brand | #415ae0 | #6b89f9 | 主按钮、当前导航图标、链接、焦点环 |
brand-hover | #384ecf | #7d9bff | 主按钮悬停 |
brand-tint | #e6eeff | #1f2a53 | 选中：Chip、列表选中行、分段选中项的折射底 |
on-brand-tint | #3043bc | #bccfff | brand-tint 上的文字与图标 |
on-brand | #ffffff | #0c0f14 | 主按钮文字；也用于状态实色上的文字（计数红点等） |
暗色下白字放在 danger 实色上对比度不足，状态实色上的文字统一用 on-brand。
光谱（领域色）
按波长从长到短排列。每个领域三档：实色（图标、图表线）、-tint（图标块底、徽标底）、on-*-tint（tint 上的文字）。
| 色带 | 领域 | 色相 | 实色 亮 / 暗 | tint 亮 / 暗 | on-tint 亮 / 暗 | 用于 |
|---|---|---|---|---|---|---|
| 橙 | distribution 分发 | 50 | #c25600 / #e9884d | #ffeadc / #43210d | #883600 / #ffc09c | 社媒分发、平台账号 |
| 琥珀 | billing 账单 | 80 | #aa6b00 / #d29922 | #fdeed6 / #3b2700 | #774700 / #f0cb8d | 订阅、订单、返佣 |
| 绿 | cluster 站群 | 155 | #00944d / #4ebe7d | #dff8e6 / #0c341e | #006630 / #a1e3b7 | 站群站点、域名 |
| 青 | search 搜索 | 205 | #0092a7 / #00bdce | #d6f8fb / #003339 | #006474 / #85e2ed | SEO、GSC、关键字、站点 |
| 蓝 | content 内容 | 250 | #0d7dd4 / #59aaf8 | #dff3ff / #112d48 | #005496 / #a4d6ff | 文章、栏目、媒体、采集、审核 |
| 紫 | ai AI / GEO | 300 | #8a5fc9 / #b28fef | #f3ebff / #302445 | #5f3d8e / #dac4ff | AI 生成、GEO 推荐、MCP |
- 展示顺序（图例、光谱条、模块列表）：按波长 distribution → billing → cluster → search → content → ai。
- 图表系列顺序（为了相邻系列可分辨）：content → ai → search → distribution → cluster → billing。
- 亮色下 search、cluster 实色在 surface 上只有 3.7–3.9:1：领域实色只用于图标、图表与 ≥ 24px 的大字；文字一律用
on-*-tint。
状态色
| 状态 | 实色 亮 / 暗 | tint 亮 / 暗 | on-tint 亮 / 暗 |
|---|---|---|---|
success | #0e8c41 / #62c37a | #e2f9e6 / #0f3118 | #005e26 / #aae5b5 |
warning | #bc7400 / #e19b34 | #ffefd9 / #3b2300 | #7a4400 / #f9cb92 |
danger | #bc4945 / #f7857d | #ffe9e6 / #421c19 | #822b2a / #ffbeb6 |
info | #007dc2 / #47b5fa | #def6ff / #042c43 | #005387 / #9dddff |
状态徽标 = tint 底 + on-tint 文字 + 图标，不加边框。
色散（Dispersion）
--dispersion: linear-gradient(90deg, distribution, billing, cluster, search, content, ai)
色散是 Prism 唯一的渐变，只用在三处：
| 位置 | 形式 |
|---|---|
| AI 生成内容 | 卡片顶边 2px 色散边（类名 .dispersion-edge，左右各缩进 16px） |
| 品牌标识与官网 Hero | 棱镜标识内的光谱、Hero 的折射插图 |
| 成功确认 | 一次光扫（色散色，600ms，只播一次） |
其余地方不出现渐变；图表面积图的纵向淡出（顶部 24% → 底部 0）不算色散。
光谱条（Spectrum bar）
一份内容在各渠道的分布，用分段横条表示：高 8、段间 2px 缝、两端圆角 full、各段按展示顺序排列、宽度与数值成比例，下方图例为小圆点 + 名称 + 占比。这是本语言独有的数据图形，用于分发触达构成、来源占比、AI 引用来源、配额构成。类名 .spectrum，子元素 i 设 --w（权重）与 data-tone。
用色规则
- 品牌色面积 ≤ 10%：通常只有一个主按钮、当前导航项和焦点环。
- 领域色只在“识别”位置：卡片标题旁的图标块、图表、分类徽标、光谱条。不用领域色填充大面积背景。
- 同一屏的领域色 ≤ 4 种（数据总览除外，它本身是全部领域的汇总）。
- 状态色只表达状态，不做强调色。
- 选中用
brand-tint；当前位置用“被照亮的板”（surface +elev-1），两者不混用。 - 暗色不是反相：表面逐级变亮（surface → container），品牌色与领域色提亮一档。
对比度（WCAG 2.1）
| 前景 | 背景 | 亮色 | 暗色 | 要求 |
|---|---|---|---|---|
ink | canvas | 15.40 | 17.31 | 4.5 |
ink-2 | surface | 7.26 | 8.64 | 4.5 |
ink-3 | canvas | 5.01 | 6.16 | 4.5 |
ink-3 | container | 4.75 | 5.05 | 4.5 |
ink-3 | container-high | 4.38 | 4.43 | 不允许 |
ink-2 | container-high | 5.87 | 6.79 | 4.5 |
on-brand | brand | 5.58 | 6.01 | 4.5 |
on-brand | brand-hover | 6.65 | 7.32 | 4.5 |
on-brand-tint | brand-tint | 6.79 | 8.92 | 4.5 |
brand（链接） | surface | 5.58 | 5.51 | 4.5 |
on-content-tint | content-tint | 6.79 | 9.14 | 4.5 |
on-search-tint | search-tint | 6.07 | 9.20 | 4.5 |
on-ai-tint | ai-tint | 7.13 | 9.10 | 4.5 |
on-distribution-tint | distribution-tint | 7.01 | 9.08 | 4.5 |
on-cluster-tint | cluster-tint | 6.36 | 9.30 | 4.5 |
on-billing-tint | billing-tint | 6.84 | 9.23 | 4.5 |
| 领域实色（图标块） | 对应 tint | 3.29–3.98 | 5.51–5.98 | 3（图标） |
search / cluster（图标） | surface | 3.70 / 3.93 | 7.69 / 7.53 | 3（图标） |
on-success-tint | success-tint | 7.20 | 9.90 | 4.5 |
on-warning-tint | warning-tint | 7.01 | 9.80 | 4.5 |
on-danger-tint | danger-tint | 7.75 | 9.42 | 4.5 |
on-info-tint | info-tint | 7.24 | 9.83 | 4.5 |
on-brand | danger（计数红点） | 5.03 | 7.87 | 4.5 |
on-inverse | inverse（吐司、提示） | 15.40 | 17.31 | 4.5 |
光学玻璃的五层
光源在上方偏左，阴影向下。每一层 = 表面色 + 投影 + 顶边高光。
| 层 | 名称 | 表面 | 投影（亮色） | 高光 | 用途 |
|---|---|---|---|---|---|
| 0 | 台面 Table | canvas | 无 | 无 | 页面底、侧栏 |
| 1 | 平板 Slab | surface | elev-1：0 1px 2px rgb(16 24 40/.04), 0 2px 6px rgb(16 24 40/.05) | inset 0 1px 0 var(--edge) | 卡片、列表卡、侧栏当前项 |
| 2 | 抬起 Raised | surface | elev-2：0 2px 4px rgb(16 24 40/.05), 0 8px 20px -4px rgb(16 24 40/.10) | 同上 | 悬停卡片、粘性栏、分段选中滑块 |
| 3 | 浮起 Float | surface | elev-3：0 4px 8px -2px rgb(16 24 40/.08), 0 16px 32px -8px rgb(16 24 40/.16) | 同上 + inset 0 0 0 1px var(--hairline) | 菜单、下拉、弹出框、拖起的行 |
| 4 | 覆盖 Overlay | surface | elev-4：0 8px 16px -4px rgb(16 24 40/.10), 0 32px 64px -12px rgb(16 24 40/.28) | 同 3 | 对话框、抽屉、底部弹层 |
--edge：亮rgb(255 255 255 / .7)、暗rgb(255 255 255 / .06)。顶边受光的 1px 高光，替代描边。--hairline：亮rgb(25 30 41 / .06)、暗rgb(255 255 255 / .07)。只给浮在内容上方的 3、4 层，防止与下层内容粘连。- 暗色：投影不透明度 ×2；层越高表面越亮（4 层可用
container）。 - 卡片内不再套带投影的卡片；需要再分组时用
container底的内嵌区或分组列表。
磨砂玻璃（Frosted）
--glass（surface 72%）+ backdrop-filter: blur(20px) saturate(180%)。
| 用在 | 出现时机 |
|---|---|
| 顶栏 | 页面未滚动时完全透明，与台面融为一体；滚动 > 4px 后出现磨砂底与 elev-1 |
| 手机底部操作栏 | 常驻 |
| 批量操作栏、保存栏、浮动工具条 | 出现时 |
遮罩
--scrim: oklch(0.18 0.02 265 / 0.40) + backdrop-filter: blur(4px)。两套主题相同，暗色下不会变浅。
指光（Specular）
可点卡片（类名 .lift）在 @media (hover: hover) 下，悬停时出现跟随指针的柔光：radial-gradient(280px circle at 指针位置, var(--specular), transparent 60%)。--specular 亮 rgb(255 255 255/.55)、暗 rgb(255 255 255/.05)；淡入 150ms。只用于可点击的卡片，不用于表格行、按钮；减弱动效时关闭。
层级（z-index）
| 令牌 | 值 | 用途 |
|---|---|---|
z-sticky | 1020 | 顶栏、粘性表头、保存栏 |
z-drawer | 1030 | 抽屉、手机导航 |
z-dialog | 1040 | 对话框 |
z-popover | 1045 | 菜单、下拉、弹出框（含对话框内的下拉） |
z-toast | 1050 | 吐司 |
z-tooltip | 1060 | 提示 |