# 设计系统 v0.2 — 对齐 Antigravity

> 依据：对 `参考图片/87013897-…png`（Antigravity 原图）逐区域放大 + 像素采样，取代 v0.1 的「冷白 + 环境光」方案。
> 变量全在 `design-prototype/src/tokens.css`，命名贴 DSH 的 `--dsw-alias-*` 语义，验收后可直接映射成插件的 `theme.overrideTokens()`。

---

## 1. 从参考图实测到的关键数据

| 项 | 参考图实测 | 本原型 |
| --- | --- | --- |
| 侧栏宽 | 256 / 1402 ≈ 18.3% | 264 @1440 |
| 输入容器 | 754 宽 × 82 高，水平居中 | 774 × 83 |
| 列表行高 | ≈28px | 30px |
| 模型菜单 | 252 宽，行 38，锚在输入框下缘 +8 | 252 宽，行 34，+6 |
| 顶栏 | 两行（OS 标题栏 32 + 工具行 38） | 单行 46（Web 无 OS 栏） |
| 空态 | **主区几乎全空**：只有面包屑 + 输入容器 | 同 |
| 画布 | 上 `#B0E2FB` → 中 `#D3F0FE` → 右 `#EAECF8` | 见 §2 |
| 侧栏底 | 半透明白，无描边、无阴影 | 同（0.16 白 + 22px 模糊） |

一句话：**它不是「浅色后台」，而是一整块蓝色玻璃，所有控件都漂在上面。**

## 2. 画布（L0）：玻璃必须有「可折射的东西」

v0.2 的教训：**纯渐变色 —— 模糊之后还是纯渐变**，所以面板看起来就是一块色块。v0.3 在画布上铺了四类「有结构的光」：

| 层 | 内容 | 作用 |
| --- | --- | --- |
| 基础渐变 | `linear-gradient(168deg, #97d7f8 → #a9ddfa → #bbe5fc → #cbeafd → #dceffd → #e5eef9)` | 定基调 |
| 色团 ×3 | 冰蓝 `#57D2F7`（左上）、淡紫 `#A892F5`（右下）、薄荷 `#86E6D8`（左下，低透明度） | 模糊后产生**色相变化**，玻璃才有「染了背景色」的证据 |
| 光带 ×3 | 1200–1340px 长、54–108px 高的斜向白色渐变，`blur(34px)` | 压在面板正后方，玻璃里会出现一条柔和亮带 —— 这是最像「折射」的一招 |
| 斜向高光 | 一道 116° 的白色扫光（`mix-blend-mode: screen`，0.22） | 整块玻璃的表面反光 |
| 颗粒 | fractalNoise，3.5% | 防色带，同时给模糊提供高频细节 |

色团以 26–33s 的 `translate3d + scale` 缓慢漂移（`alternate` 往复），面板后的光才会“活”。`prefers-reduced-motion` 下全部停掉。

## 3. 文字（在蓝底上实测对比度）

参考图的字偏淡（侧栏 nav `#3D738E`、菜单 `#4E6C7B`、占位符 `#7E9EAD`，多数不达 AA）。规范 §2.2 明确要求**不要把可读性问题一起复制**，所以统一压深：

| 变量 | 值 | on `#BFE6FC` | on `#DCF2FE` | 用途 |
| --- | --- | --- | --- | --- |
| `--text-primary` | `#0F2E3E` | 10.8:1 | 12.3:1 | 正文、会话名、菜单项 |
| `--text-secondary` | `#2F5468` | 6.2:1 | 7.0:1 | 导航、次级信息、占位符 |
| `--text-tertiary` | `#3C6379` | 4.9:1 | 5.6:1 | 分组标题、元信息、时间 |
| `--accent` | `#0E5C7D` | 5.6:1 | 6.4:1 | 图标强调、链接、选中标记 |
| `--accent-fill` | `#14708F` | — | — | 发送按钮实心底（白字 3.9:1） |
| `--success-dot` | `#17A67C` | 装饰 | | 连接状态点 |

## 4. 玻璃配方（6 个部件，缺一个就像塑料）

macOS 27 那种质感不是单一属性调出来的，是六件事叠起来的：

| # | 部件 | 做法 | 为什么必须 |
| --- | --- | --- | --- |
| 1 | **底色** | 半透明白渐变，白度只给 14%–36% | 纯白 = 塑料片；白度越低越像玻璃，但要用边缘和阴影补回形体 |
| 2 | **backdrop-filter** | `blur(34–40px) saturate(1.25–1.35) brightness(1.02)` | 提饱和是关键：真实玻璃会让透过来的颜色更艳 |
| 3 | **定向边缘高光** | `inset 1px 1px 0 rgba(255,255,255,.85–.95)` + `inset -1px -1px 0 rgba(255,255,255,.35–.45)` | 左上亮、右下暗 = 有光源、有厚度；均匀描边是塑料感来源 |
| 4 | **内部磨砂颗粒** | `::after` 铺 fractalNoise，6%，`mix-blend-mode: overlay` | 只给画布加噪点没用，颗粒必须在玻璃**里面** |
| 5 | **液面反光** | `::before` 铺 145° 白渐变（.42 → 0，占前 38%） | 玻璃表面那层“斜着擦过”的高光 |
| 6 | **投影** | 大面板 `0 16px 40px -20px rgba(16,55,84,.42)`，浮层再叠一层 | 把面板从背景上抬起来，否则永远像贴纸 |

实测取值：

| 元素 | 白度 | 模糊 / 饱和 | 高光 / 阴影 |
| --- | --- | --- | --- |
| 侧栏 | 26% → 14% → 20% | 40px / 1.25 | 左上 `1px` 白 85%，右侧内投影，外投影 `1px 0 18px -6px` |
| 输入容器 | 36% → 20% → 28% | 34px / 1.35 | 四向内高光 + 底部内阴影（厚度）+ 双层投影 |
| 浮层 | 80% → 62% | 40px / 1.9 | 更实的白（保证文字可读）+ 最深投影 |

- 只有浮层允许高不透明度；大面板一律半透。
- 不支持 `backdrop-filter` 时走 `@supports not`，用 `.72–.95` 实色白兜底（可读性优先）。

> **还差的一步（需要你决定）**：macOS 的控制中心是压在一张**照片**上的，模糊有真实细节可平均；我们的背景仍是「抽象光场」。要做到 1:1，得垫一张真实背景图（可以生成，但单张约 5–10 积分）。现在这套是纯 CSS 能达到的上限。

## 5. 形状 / 间距 / 排版（紧凑型）

| 项 | 值 |
| --- | --- |
| 圆角 | 输入容器 16、菜单 12、行/胶囊 7–8、气泡 12、状态 999 |
| 行高 | 30（列表）、34（菜单项）、26（状态胶囊） |
| 间距 | 4 / 8 / 12 / 16 / 20 / 24 / 32 |
| 字号 | UI 13、正文 14、元信息 11.5、分组标题 11.5、菜单档位 12.5 |
| 字体 | 系统栈（`-apple-system / Inter / PingFang SC / …`），不引入商业字体 |
| 等宽 | `ui-monospace / SF Mono / JetBrains Mono`，代码 12.4px / 1.7 |

## 6. 组件规格

### 6.1 顶栏（46px，透明）

左：鲸鱼标 → 折叠面板 → 后退 → 前进 → 搜索（28×28 图标钮，hover 出白色薄底）。
右：状态胶囊（`本地 · 已连接`，绿点 + 毛玻璃）+ 账号圆标 + 更多。
手机（≤620）：折叠钮换成抽屉钮，状态胶囊隐藏。

### 6.2 侧栏（L1）

- **唯一实心元素**：`新会话` 纯白胶囊（30px 高、圆角 8、1px 投影）。这是参考图里建立视觉锚点的关键。
- 分组标题 11.5px、低对比、hover 时右侧浮现搜索钮。
- 会话行：无图标、无边框，右对齐时间（`5m / 2d`），进行中的带 5px 圆点。
- 选中态：`rgba(255,255,255,.42)` 白底 + 字重 500，**不用蓝色块**。
- 折叠成 52px 轨道：补回 `+`、文件夹、时钟图标（仅保留最近 3 条会话），hover 出玻璃气泡 + 快捷键。

### 6.3 输入容器（L2）

- 圆角 16、双行结构：**输入行**（15/16 px 内边距，min-height 38）+ **控件行**（`+`、模型、发送）。
- **模型选择是纯文字 + 箭头**（参考图如此），没有胶囊底色；hover/展开才出现薄白底。
- 焦点：背景提亮到 `.46`、边框转纯白、外圈 `0 0 0 3px rgba(255,255,255,.32)`——柔光而非蓝色霓虹。
- 发送：空输入时是半透明白圆 + 40% 透明箭头；有输入才变实心 `--accent-fill`。
- 提示行在卡片外：`演示原型 · Mock 数据`，菜单展开时淡出。

### 6.4 模型菜单（L3）

- 以输入容器为定位基准，从卡片下缘垂下；撞到下边界自动向上并收紧高度。
- 行结构：**名称 + 档位（标准/快速/深度）+ 徽标（New / 思考）+ 右侧勾或子菜单箭头**——完全对齐参考图，没有倍率列。
- 键盘：`↑↓ Home End` 移动、`Enter` 选中并关闭、`Esc`/`Tab` 关闭。

### 6.5 对话页

参考图没有对话态，这部分按 DSH 的信息结构补：

- 顶部一条面包屑 `工作区 / 会话标题`（12.5px、低对比），**与输入框左边缘严格对齐**（实测 `465 == 465`）。
- 用户消息：右对齐白玻璃气泡（`.46` + 白边）；助手消息：整宽排版，正文 14/1.75。
- 代码块 / 工具卡：半透明白纸面（`.4` / `.34`），不压暗对话。
- 列表列宽 = 输入框宽（774），保证视觉轴线一致。

## 7. 映射到 DSH token 的建议

| 本原型 | `--dsw-alias-*` |
| --- | --- |
| 画布渐变 + 噪点 | 无对应项，需自建固定层（这是插件必须自带的部分） |
| `--text-primary/secondary/tertiary` | `label-primary` / `label-secondary` / `label-tertiary` |
| `--accent` / `--accent-fill` | `brand-primary` / `button-primary-fill` |
| `--glass-sidebar` | `bg-layer-1` |
| `--glass-composer` | `bg-layer-2` / `bg-overlay` |
| `--glass-menu` | `bg-layer-3` |
| `--success-dot` / `--danger` | `state-success` / `state-error` |

107 个 token 全表：[`reference/theme-tokens.md`](./reference/theme-tokens.md)。

## 8. 已知取舍

1. **对比度不照抄**：参考图整体偏淡，本原型全部压到 AA 以上——这是与参考图最明显的「刻意的不同」。
2. **顶栏合并成一行**：Antigravity 是桌面程序（OS 标题栏 + 工具行）；Web 里合成 46px 单行更合理。
3. **侧栏保留 DSH 功能名**：按你的决定，不采用 Automations / Customizations 这类参考图里的命名。
4. **暗色未做**：tokens 已按成对扩展预留（`--glass-*`、`--text-*` 都可成对给值）。
5. **不做能力卡片**：空态就是「面包屑 + 输入框」，与参考图一致。