AirShelf/电商AI平台/DESIGN_SPEC_V2.md

# 流·Studio 设计规范 · V2.1

> **版本:** V2.1(2026-05-15)
> **风格代号:** Restraint(克制)· Firecrawl-aligned
> **适用范围:** 流·Studio 全产品(工作台 / 项目 / 商品库 / 流水线 / 资产库 / 编辑器 / 账户)
> **V2.1 更新:** 色彩系统全面对齐 Firecrawl 实测——**冷灰底色**(放弃米白)· **主橙 #FA5D19**(从 #E55B26 调亮)· **20 档 black-alpha**(从 11 档扩展)· **5 色 accent 多彩点**(新增)· accent-black 替代 ink。保留 V2 所有结构性决策(8 px 圆角、inside-border、装订线、mono 装饰)。
> **与 V2 关系:** V2.1 兼容 V2 的所有 token 命名(`--ink` `--bg` `--card` `--green` `--red` 等保留为 legacy 别名),代码层无需重写。

---

## 0. 变更速查

### V2 → V2.1(本次 · 色彩系统对齐 Firecrawl)

| # | 维度 | V2 | V2.1 |
| - | ---- | -- | ---- |
| C1 | 底色 | `#FAF9F5` 暖米白 | **`#f9f9f9` 冷灰**(`--background-base`) |
| C2 | 主橙 | `#E55B26` 砖红 | **`#FA5D19`** 更红更饱和 |
| C3 | 文字基色 | `--ink: #15140F` | **`--accent-black: #262626`**(更柔和)· `--ink` 作 legacy 别名 |
| C4 | Alpha 阶梯 | 11 档 `--ink-alpha-*` | **20 档 `--black-alpha-*`**(1/2/3/4/5/6/7/8/10/12/16/20/24/32/40/48/56/64/72/88) |
| C5 | Alpha base | 全部用 `rgba(0,0,0,...)` | **32% 起换 `rgba(38,38,38,...)`**(避免叠出"灰中带蓝") |
| C6 | 状态色 | `--green #3F6B3F` 深森林绿 / `--red #B33A2A` 暗砖红 | **`--accent-forest #42c366`** / **`--accent-crimson #eb3424`**(信号灯感) |
| C7 | Accent 多彩 | 仅橙+绿+红 | **新增 5 色** amethyst/bluetron/crimson/forest/honey(仅用于语义信号) |
| C8 | 边框 | `#EFEBE0` 暖色 | **`#ededed`** 冷灰(无色相) |
| C9 | Selection | 未定义 | **`background: var(--heat-20)` + `color: var(--heat)`**(Firecrawl 签名) |

### V1 → V2(上次 · 结构性变更,保留)

| # | 维度 | V1 | V2 | 决策类型 |
| - | ---- | -- | -- | -------- |
| Δ1 | 圆角 | 大容器 0 / 按钮 9 / pill 999 | **大容器 8 / 按钮 8 / pill 999 / dot 999** | **变更** |
| Δ2 | mono `[ STATUS ]` | 大量使用 | **保留**(品牌签名) | 保留 |
| Δ3 | 字体 | Inter | **Inter Tight + 字重 500 替代 450**(免费) | 变更(轻) |
| Δ4 | 边框 | 真 `border:1px` | **`::before` inside-border**(hover 不抖动) | 变更 |
| Δ5 | 主容器左右垂直边 | 无 | **加 `border-x` + 四角准星**(图纸装订线) | 新增 |
| Δ6 | 主 CTA 阴影 | 全场无 | **4 层橙色发光** | 变更(小幅) |

---

## 1. 设计哲学

**一句话:** 一台精密设备的工作面板。

**三条铁律:**
1. **克制大于装饰** — 留白 > 容器 > 内容,大量空气感。
2. **单色锚点** — 全场只有一种 accent(橙色),且只用于 CTA / 关键状态 / 强调单词。
3. **结构清晰可见** — 用 **1 px 边框 + 8 px 圆角 + 四角准星 + 容器纵向装订线 + mono `[ ]` 标签**暴露"图纸感",而非阴影/渐变隐藏结构。

**避免的"AI 味":**
- 渐变铺面 / 玻璃拟态 / 彩色阴影
- 多色 emoji 图标
- 圆角无差别(全部 8px / 16px 的 SaaS 模板感)
- 卡片浮在背景上的"贴纸感"
- 装饰盖过内容(场记板 / 霓虹 / 丝绒幕布)

**新增禁令:**
- ❌ **0 px 硬切角的卡片** —— V2 起所有结构性容器都用 8 px 圆角
- ❌ **变深 hue 的 hover 色** —— 橙色 hover 用 alpha 阶梯,不用更深的橙

---

## 2. 色彩系统(V2.1 · 对齐 Firecrawl)

### 2.1 表面 / 背景(冷灰 · 无色相)

| Token                  | Hex       | 用途                        |
| ---------------------- | --------- | --------------------------- |
| `--background-base`    | `#f9f9f9` | 页面底色 · 冷灰             |
| `--background-lighter` | `#fbfbfb` | 容器底色 / hover 浅底       |
| `--surface`            | `#ffffff` | 卡片 / 容器表面             |
| `--surface-raised`     | `#ffffff` | 浮层 / Modal 表面           |

> **Legacy 别名(V2 → V2.1):** `--bg = var(--background-base)` / `--bg-soft = var(--background-lighter)` / `--card = var(--surface)`。组件 CSS 不用改。

### 2.2 边框(冷灰 · 3 档差距极小)

| Token            | Hex       | 用途                  |
| ---------------- | --------- | --------------------- |
| `--border-faint` | `#ededed` | **默认 1 px 边框 ★ 80% 场景** |
| `--border-muted` | `#e8e8e8` | 略深                  |
| `--border-loud`  | `#e6e6e6` | 最深(强分隔)         |

> **设计意图:** 3 档之间只差 1–2 个色阶,**肉眼几乎看不出**。**用语义(faint/muted/loud)选择,不用视觉对比选择。** 这是 Firecrawl 的细节哲学。

### 2.3 Heat · 主橙(单 hue + 8 档 alpha)

| Token       | Value                   | 用途                          |
| ----------- | ----------------------- | ----------------------------- |
| `--heat`    | `#fa5d19`               | **主橙 100% · CTA / 链接 ★** |
| `--heat-90` | `rgba(250,93,25,.90)`   | hover(替代 V1 `#D04E1F`)    |
| `--heat-40` | `rgba(250,93,25,.40)`   | focus ring / 边框次级         |
| `--heat-20` | `rgba(250,93,25,.20)`   | pill 边框 / **selection 底色 ★** |
| `--heat-16` | `rgba(250,93,25,.16)`   | hover 软底                    |
| `--heat-12` | `rgba(250,93,25,.12)`   | tint 底(active nav / icon-box) |
| `--heat-8`  | `rgba(250,93,25,.08)`   |                                |
| `--heat-4`  | `rgba(250,93,25,.04)`   | 极弱底                        |

> **从 V2 `#E55B26` 调亮到 V2.1 `#FA5D19`** —— 更红更饱和,与 Firecrawl 100% 实测一致。**hover 永远不换 hue,只换 alpha。**

### 2.4 Accent · 5 色信号(新增)

> **作用:** 仅用于**语义信号**——代码高亮、图标色、状态色源。**禁止做大面积背景或装饰**。全场仍只有 1 个 accent(橙)。

| Token              | Hex       | 用途                          |
| ------------------ | --------- | ----------------------------- |
| `--accent-black`   | `#262626` | **主前景**(替代 V2 `--ink #15140F`,更柔和) |
| `--accent-white`   | `#ffffff` | 反色文字(在橙底 / 黑底上)   |
| `--accent-amethyst`| `#9061ff` | 紫 · 代码 property            |
| `--accent-bluetron`| `#2a6dfb` | 蓝 · info                     |
| `--accent-crimson` | `#eb3424` | 红 · **error / 失败 ★**       |
| `--accent-forest`  | `#42c366` | 绿 · **success / 成功 ★**     |
| `--accent-honey`   | `#ecb730` | 黄 · warning                  |

> **Legacy 别名:** `--ink = var(--accent-black)` / `--green = var(--accent-forest)` / `--red = var(--accent-crimson)`。

### 2.5 Black-Alpha 阶梯(20 档 · 核心工具尺)

> **替代 V2 的 11 档 ink-alpha**。这是日常用得最多的 token。0–24% 用 `rgba(0,0,0,...)`;**32% 起换 `rgba(38,38,38,...)`**(=`--accent-black` 作底),避免叠出"灰中带蓝"——Firecrawl 实测细节。

| Token              | Light 值               | Dark 值                | 典型用途                |
| ------------------ | ---------------------- | ---------------------- | ----------------------- |
| `--black-alpha-1`  | `rgba(0,0,0,.01)`      | `rgba(255,255,255,.01)`| 极弱底                  |
| `--black-alpha-2`  | `rgba(0,0,0,.02)`      | `rgba(255,255,255,.02)`|                         |
| `--black-alpha-3`  | `rgba(0,0,0,.03)`      | `rgba(255,255,255,.03)`|                         |
| `--black-alpha-4`  | `rgba(0,0,0,.04)`      | `rgba(255,255,255,.04)`| **hover bg ★**           |
| `--black-alpha-5`  | `rgba(0,0,0,.05)`      | `rgba(255,255,255,.05)`| tab 间分隔条             |
| `--black-alpha-6`  | `rgba(0,0,0,.06)`      | `rgba(255,255,255,.06)`|                         |
| `--black-alpha-7`  | `rgba(0,0,0,.07)`      | `rgba(255,255,255,.07)`| **active bg ★**          |
| `--black-alpha-8`  | `rgba(0,0,0,.08)`      | `rgba(255,255,255,.08)`|                         |
| `--black-alpha-10` | `rgba(0,0,0,.10)`      | `rgba(255,255,255,.10)`|                         |
| `--black-alpha-12` | `rgba(0,0,0,.12)`      | `rgba(255,255,255,.12)`| **inside-border ★**      |
| `--black-alpha-16` | `rgba(0,0,0,.16)`      | `rgba(255,255,255,.16)`|                         |
| `--black-alpha-20` | `rgba(0,0,0,.20)`      | `rgba(255,255,255,.20)`|                         |
| `--black-alpha-24` | `rgba(0,0,0,.24)`      | `rgba(255,255,255,.24)`| input hover 边框        |
| `--black-alpha-32` | `rgba(38,38,38,.32)`   | `rgba(255,255,255,.32)`| ← base 切换 → ↓         |
| `--black-alpha-40` | `rgba(38,38,38,.40)`   | `rgba(255,255,255,.40)`|                         |
| `--black-alpha-48` | `rgba(38,38,38,.48)`   | `rgba(255,255,255,.48)`| **占位字色 ★**           |
| `--black-alpha-56` | `rgba(38,38,38,.56)`   | `rgba(255,255,255,.56)`| **次级文字 / 未选中 Tab ★** |
| `--black-alpha-64` | `rgba(38,38,38,.64)`   | `rgba(255,255,255,.64)`| 描述文字                 |
| `--black-alpha-72` | `rgba(38,38,38,.72)`   | `rgba(255,255,255,.72)`| 强次级                   |
| `--black-alpha-88` | `rgba(38,38,38,.88)`   | `rgba(255,255,255,.88)`| 近主前景                 |

> **V2 → V2.1 兼容映射(legacy 别名,组件 CSS 不必改):**
> - `--ink-alpha-4` → `--black-alpha-4`
> - `--ink-alpha-7` → `--black-alpha-7`
> - `--ink-alpha-12` → `--black-alpha-12`
> - `--ink-alpha-24` → `--black-alpha-24`
> - `--ink-alpha-32` → `--black-alpha-32`
> - `--ink-alpha-48` → `--black-alpha-48`
> - `--ink-alpha-56` → `--black-alpha-56`
> - `--ink-alpha-64` → `--black-alpha-64`
> - `--ink-alpha-72` → `--black-alpha-72`
> - `--ink-alpha-88` → `--black-alpha-88`

### 2.6 状态色配套底/边

| 含义 | 主色                       | 配套底色(8% alpha)         | 配套边框(20% alpha)         |
| ---- | -------------------------- | --------------------------- | --------------------------- |
| 成功 | `--green` (`#42c366`)      | `rgba(66,195,102,.08)`       | `rgba(66,195,102,.20)`       |
| 失败 | `--red` (`#eb3424`)        | `rgba(235,52,36,.08)`        | `rgba(235,52,36,.20)`        |
| 信息 | `--heat` (`#fa5d19`)       | `--heat-12`                  | `--heat-20`                  |
| 警告 | `--accent-honey`(`#ecb730`)| `rgba(236,183,48,.08)`       | `rgba(236,183,48,.20)`       |

### 2.7 Selection · 文字选中色(Firecrawl 签名)

```css
::selection {
  background: var(--heat-20);
  color: var(--heat);
}
```

选中任何文字时,底色 20% 橙、文字 100% 橙。这是 Firecrawl 易被忽略但**整站感知到位**的细节。

---

## 3. 字体系统(V2.1 · 中英混排策略)

### 3.1 字体族 · Inter + 阿里巴巴普惠体

| 用途         | 字体声明                                                                                          |
| ------------ | ------------------------------------------------------------------------------------------------- |
| **正文 / UI**| `'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif`             |
| **纯英文场景** | `'Inter', system-ui, sans-serif`(`--font-inter`)· 用于"Ctrl K"等强制纯英文徽标            |
| **Mono 装饰** | `'JetBrains Mono', 'Geist Mono', ui-monospace, monospace`                                       |

**核心策略 · 浏览器字符级 fallthrough:**

```
Inter ────────→ 英文 / 数字 / 符号(命中)
   │
   ↓ (CJK 不命中,继续找)
Alibaba PuHuiTi ──→ 中文(命中)
   │
   ↓ (字体未加载到)
PingFang SC / Microsoft YaHei ──→ 系统中文兜底
```

浏览器对每个字符**逐个查找** font-family 链,Inter 不含 CJK 字形 → 中文字符自动跳到下一个候选。这是中英混排的标准做法,**不需要 JS、不会字重错位**。

**V2 → V2.1 → V2.1 变更轨迹:**
- V2: `Inter Tight` → 中文走系统 fallback → 字重错位
- V2.1 (前一版): 单一 `Alibaba PuHuiTi` → 英文用普惠体英文字形 → 英文略圆,缺乏 Inter 的"科技感"
- **V2.1 (本版)** : **Inter(英)+ Alibaba PuHuiTi(中)双字体协作** → 各自处理最擅长的语种

**为什么这个组合最优:**
- Inter:Vercel / Linear / Stripe 御用,**工程产品默认审美**。专门给屏幕 UI 优化,数字字形漂亮(同宽)。中文不擅长。
- Alibaba PuHuiTi:阿里出品,免费商用,**为中英混排专门设计的笔画粗细配比**(45/55/65/85 多档),中文笔画与 Inter 视觉重量贴近。专门给中文优化。
- 两者结合:**英文有 Inter 的锐利,中文有普惠体的清晰**,字重之间衔接自然。

**Inter 载入:**

```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

**Alibaba PuHuiTi 载入:**

```css
@font-face {
  font-family: 'Alibaba PuHuiTi';
  font-weight: 400;  /* 55 Regular */
  src: local('Alibaba PuHuiTi 3.0'),
       local('AlibabaPuHuiTi-3-55-Regular'),
       url('https://chinese-fonts-cdn.deno.dev/packages/alibaba_puhuiti/dist/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
}
/* 同写法处理 500 Medium / 600 SemiBold / 700 Bold */
```

> **优先级:** 本地安装(设计师机器一般装了)→ CDN 加载 → 系统中文兜底。**永远不会出现假字或方框。**

**特殊场景 · 强制纯英文用 `--font-inter`:**

某些场景必须确保用 Inter(比如 "Ctrl K" 这种快捷键徽标想要 Inter Bold 的紧凑感),直接用专属变量:

```css
.search-wrap .k {
  font-family: var(--font-inter);  /* 跳过 fallback 链,锁定 Inter */
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
```

Mono 字体保留 `JetBrains Mono`——用作装饰元素 `[ 200 OK ]` `// 05.14` `/v2`,**不参与中文**。

### 3.2 字号 / 字重 / 行高(V2.1 整体放大半档,行高提升)

| 角色             | 字号    | 字重 | 字距       | 行高 | 用途             |
| ---------------- | ------- | ---- | ---------- | ---- | ---------------- |
| H1 / Hero        | 36 px   | 500  | -0.024em   | 1.2  | 页面主标题(从 V2 的 32 上调) |
| 区块 H2          | 28 px   | 500  | -0.02em    | 1.25 | section-head 标题 |
| KPI 数值         | 32 px   | 500  | -0.02em    | 1.1  | 统计大数字       |
| 子区 H3          | 16 px   | 500  | -0.01em    | 1.4  | subsection 标题(从 15 上调) |
| 卡片标题         | 14 px   | 500  | normal     | 1.4  | 项目名 / 商品名(从 13.5 上调) |
| 正文 body        | 14 px   | 400  | normal     | **1.65** | 默认正文(行高从 1.5 上调) |
| 区块描述         | 14 px   | 400  | normal     | 1.75 | section-head 描述 |
| 子区 lead        | 13 px   | 400  | normal     | 1.8  | 子区下方说明     |
| Label(按钮/Tab)| 13 px   | 500  | normal     | 1.4  | 按钮文字 / Tab    |
| Pill 文字        | 11.5 px | 500  | normal     | 1.3  | 状态徽标         |
| Mono 标签        | 11–11.5 px | 400/500 | 0.04em | 1.5 | `[ STATUS ]`     |
| Mono 散点        | 8.5 px  | 400  | 0.04em     | 1    | 背景 ASCII 装饰  |

**字重档位仍仅 3 档:400 / 500 / 600**。普惠体 500(Medium 65)的中文笔画比 Inter 500 重一些,**整体不显单薄**,因此 600 几乎不需要。

**关键属性:**
- 数值类必须加 `font-variant-numeric: tabular-nums`
- 标题用 negative letter-spacing(-0.01 ~ -0.024em)
- 正文行高 **1.65–1.8**(V2 是 1.5–1.7),中文字间留呼吸

---

## 4. 圆角规则 · V2 统一 8 px

> **核心原则(V2 改写):统一 8 px / 状态徽标完全圆 / 极少数微元素降到 4–6 px**

| 元素类型                       | 圆角值     | 例子                            |
| ------------------------------ | ---------- | ------------------------------- |
| 所有结构性容器(大卡片 / 区块) | **8 px**   | `.stats` `.list-card` `.shortcut` `.tip` `.modal` |
| 所有按钮 / 输入框              | **8 px**   | `.btn` `.pill-btn` `.icon-btn` `.search` |
| nav 项                         | **8 px**   | `nav a`(V1 是 7,V2 统一)     |
| 缩略图 / 画面占位              | **8 px**   | `.thumb` `.ic`                  |
| 头像 / 小色块                  | **6 px**   | `.av` `.team .p`(可选 8)      |
| Mono 标签 / badge / kbd        | **4 px**   | `.kbd` `.badge`                 |
| 进度条段位                     | **2 px**   | `.prog span`                    |
| Pill 状态徽标 / dot            | **999 px** | `.pill` `.dot`(完全圆)        |

**为什么改:** Firecrawl 实测全站统一 8 px,工程感来自"准星 + 装订线 + mono 装饰",**不是硬切角**。0 圆角容器在小尺寸下会显得"卡顿、廉价",8 px 是同时兼顾"图纸感"和"成品感"的最佳值。

---

## 5. 边框 / 阴影 / 描边

### 5.1 边框策略 · V2 改为 inside-border

> **V2 改进:** 默认边框用 `::before` 伪元素绘制,而非真 `border`。原因:hover 时让 `::before` 透明度 → 0 不会触发布局抖动。

**通用工具类:**

```css
.inside-border {
  position: relative;
}
.inside-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-faint);
  border-radius: inherit;
  pointer-events: none;
  transition: opacity .2s ease, border-color .2s ease;
}
.inside-border:hover::before { opacity: 0; }
```

**层级:**
- 默认:`var(--border-faint)`
- 略深:`var(--border-muted)`(主分隔线)
- 最深:`var(--border-loud)`(强分隔,少用)
- **禁止 2px / 3px 实线**
- **虚线**仅用于 `.tip` 提示框:`1px dashed var(--border-faint)`

### 5.2 阴影 · V2 引入主 CTA 专属橙色发光

**默认无阴影**(V1 规则保留)。

**新增例外 · 主 CTA 4 层橙色阴影**(替代 V1 的"全场无"):

```css
.btn-primary {
  box-shadow:
    inset 0 -4px 8px rgba(250, 93, 25, 0.20),  /* 内阴影:底部暗一点 = 立体 */
    0 1px 1px rgba(250, 93, 25, 0.12),
    0 2px 4px rgba(250, 93, 25, 0.10),
    0 0.5px 0.5px rgba(250, 93, 25, 0.16);
}
.btn-primary:hover {
  box-shadow:
    inset 0 -4px 8px rgba(250, 93, 25, 0.20),
    0 1px 1px rgba(250, 93, 25, 0.16),
    0 4px 8px rgba(250, 93, 25, 0.20),         /* 更高更亮 */
    0 0.5px 0.5px rgba(250, 93, 25, 0.16);
}
```

**Toast 阴影**(V1 保留):`0 4px 20px rgba(21,20,15,0.06)`,白色调,不属于橙色发光体系。

### 5.3 容器四角"+"准星(签名元素 · V2 升级为 SVG)

V1 用字符 `+`(font-family JetBrains Mono);V2 升级为 SVG 路径,带圆弧内凹,质感更工程化:

```html
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" class="corner">
  <path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z" fill="var(--border-muted)"/>
</svg>
```

**位置:** 容器四角,中心精确落在边框交点上(用 `-translate-x-1/2 -translate-y-1/2`)。

**字符版本兼容:** 简单卡片(如 modal 内嵌)仍可用 `content: '+'` 字符版,但全屏主容器必须用 SVG。

---

## 6. 主内容容器 · 新增装订线规则(V2 新增章节)

> **核心签名:** 主工作区始终被两条 1 px 垂直边线包夹,配合四角准星,形成图纸装订线效果。

```html
<div class="workbench-container">
  <svg class="corner top-left">...</svg>
  <svg class="corner top-right">...</svg>
  <svg class="corner bottom-left">...</svg>
  <svg class="corner bottom-right">...</svg>
  <!-- content -->
</div>
```

```css
.workbench-container {
  max-width: 1480px;
  margin: 0 auto;
  border-left: 1px solid var(--border-faint);
  border-right: 1px solid var(--border-faint);
  position: relative;
  /* 上下边线不要,只左右 */
}
.workbench-container .corner {
  position: absolute;
  width: 22px; height: 21px;
}
.workbench-container .corner.top-left     { top: -10.5px; left: -11px; }
.workbench-container .corner.top-right    { top: -10.5px; right: -11px; }
.workbench-container .corner.bottom-left  { bottom: -10.5px; left: -11px; }
.workbench-container .corner.bottom-right { bottom: -10.5px; right: -11px; }
```

适用范围:工作台 / 项目列表页 / 商品库 / 流水线主区。**编辑器全屏画布、Modal 内不必加。**

---

## 7. 间距 / 栅格(V2.1 全局放大,Firecrawl-level 呼吸)

**基础栅格:** 4 px

**常用间距阶梯:** 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 40 / 48 / 64 / 80 / 104

> **V2 → V2.1 变更:** 全局垂直间距系统性放大 30%。原因:Alibaba PuHuiTi 中文笔画比 Inter 厚一档,**字体密度提升 → 必须用更大的留白补偿**,否则视觉拥挤。这就是为什么 Firecrawl 的间距看起来"奢侈"——它的字体也是出版级偏紧凑的 Suisse Intl,留白补偿到位。

**主区块布局:**
- 侧边栏宽度:`248 px`(无变)
- **主内容 padding:`72 px 80 px 120 px`**(从 V2 的 `48 56 56` 上调)
- 内容最大宽度:`1280 px`(从 1480 收窄,留更多自然边距)
- 区块间垂直:**`104 px`**(`section margin-bottom` · 从 80 上调)
- 子区间垂直:**`64 px`**(`subsection margin-bottom` · 从 48 上调)
- 子区标题底距:**`22 px`**(`h3 → 内容` · 从 16 上调)
- 卡片网格间距:`24 px`(主区) / `14 px`(子区)
- 卡片内 padding:
  - 大卡片 / stats: **`28 px 30 px`**(从 22 24 上调)
  - 列表行: **`20 px 24 px`**(从 14 18 上调)
  - 快捷入口: **`18 px 20 px`**(从 14 上调)
  - Modal 头/体: **`24 px 28 px`**(从 20 24 上调)
  - Hero / section-head: **`52 px 56 px`** / `padding-bottom: 28 px`

**最重要的一条:** 别再吝啬空气。**当不确定 padding 是 16 还是 24 时,选 24。** 当不确定 margin 是 48 还是 64 时,选 64。

**间距/字号配对原则:**
- 标题旁边的描述/副标:`mb 10–14 px`(紧凑组合)
- 标题下方的正文/列表:`mb 22–28 px`(分组组合)
- section 顶部 mono-tag → h2:`mb 14 px`
- h2 → section description:`mb 12 px`
- section-head 整体下方边线:`pb 28 px / mb 44 px`

---

## 8. 背景:制图纸网格(V1 保留)

### 8.1 三层叠加

```
图层 1(最上):主交叉点 "+" 准星 SVG  — 240×240 重复
图层 2(中间):子交叉点小圆点         — 60×60 重复
图层 3(最下):虚线网格                — 240×240 重复(stroke-dasharray: 1.5 4)
```

**配色:**
- "+" 准星:`#B8B3A4`(stroke 1 px)
- 小点:`#CFCABB`(r=0.9)
- 虚线:`#E2DED2`(stroke 1 px)

### 8.2 视觉聚焦遮罩

```css
mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);
```

### 8.3 装饰散点(Mono ASCII)

主区域 4 个固定位置撒 ASCII 散点。字号 8.5 px / 颜色 `--ink-alpha-12` / 透明度 0.8 / `pointer-events: none`。

### 8.4 边角 Mono 标签(品牌签名 · 保留)

主区域 4 个角各放一个 Mono 标签:
```
左上 [ 200 OK ]    右上 [ /v2 ]
左下 [ .MP4 · 9:16 ]    右下 [ STUDIO ]
```

字号 10.5 px / 颜色 `--ink-alpha-48` / 字距 0.06em。

> **作用:** 让页面看起来像「在某个开发环境 / 调试视图里」,而不是普通官网。Firecrawl **没有**这个元素,这是流·Studio 的独特品牌资产。

---

## 9. Icon 系统(V2 强化章节,直接对应用户优化诉求 ①)

### 9.1 通用规则

- **格式:** 一律 SVG inline,**禁止** `<img>` 引图标
- **库选择:** 推荐 Lucide(line icon,1.5–2 px stroke)或 Phosphor Regular
- **stroke width:** 统一 **1.5 px**(替代 V1 提到的 1.8)
- **stroke linecap / linejoin:** `round`
- **填充:** **不填充**(纯 line icon)
- **颜色:** 通过 `stroke="currentColor"`,继承父元素 `color`
- **emoji 禁用:** 任何场景都不允许彩色 emoji

### 9.2 尺寸阶梯

| 场景                | 尺寸    | 用途                          |
| ------------------- | ------- | ----------------------------- |
| Icon-S              | 14 px   | 内嵌 inline 文字旁            |
| Icon-M(默认)      | 16 px   | 按钮内 / Tab / list 行        |
| Icon-L              | 20 px   | 顶栏 / 快捷入口 / dropdown 触发器 |
| Icon-XL             | 24 px   | Modal 头部 / Toast / 空状态   |
| Icon-Hero           | 36 px   | 空状态插画 / 大占位           |

### 9.3 颜色规则

| 场景         | 颜色                  |
| ------------ | --------------------- |
| 默认         | `--ink-alpha-56`      |
| Hover        | `--ink`               |
| Active / 选中| `--heat`              |
| Disabled     | `--ink-alpha-12`      |
| 在主 CTA 内  | `#FFFFFF`             |

### 9.4 Icon-Box(快捷入口左侧的方块图标容器)

```css
.icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;             /* V1 是 0,V2 改 8 */
  background: var(--heat-12);
  display: grid;
  place-items: center;
}
.icon-box svg { width: 16px; stroke: var(--heat); }
```

---

## 10. 组件规范 · 含完整状态(V2 大幅扩充,对应用户诉求 ②③④)

### 10.1 按钮(3 种类型 × 5 种状态 × 3 种尺寸)

**类型:**

| 类型              | 背景             | 文字               | 边框/描边                          |
| ----------------- | ---------------- | ------------------ | ---------------------------------- |
| `.btn` 默认       | `--card` 白       | `--ink`            | inside-border `--ink-alpha-12`     |
| `.btn-primary` 主 | `--heat`          | `#FFFFFF`          | 无,靠橙色阴影分层                  |
| `.btn-ghost` 无框 | transparent       | `--ink-alpha-56`   | 无                                  |

**尺寸:**

| 尺寸   | 高度  | padding      | 字号    | icon 尺寸 |
| ------ | ----- | ------------ | ------- | --------- |
| `-sm`  | 28 px | `0 10 px`    | 12 px   | 14 px     |
| 默认   | 32 px | `0 14 px`    | 13 px   | 16 px     |
| `-lg`  | 40 px | `0 18 px`    | 14 px   | 16 px     |

**5 种状态(每种类型都要实现):**

| 状态     | `.btn` 默认                                | `.btn-primary` 主                              |
| -------- | ------------------------------------------ | ---------------------------------------------- |
| Default  | 白底 / inside-border `--ink-alpha-12`      | 橙底 + 4 层橙阴影                              |
| Hover    | 底色 `--ink-alpha-4` + 边框 opacity → 0    | 阴影第 3 层加亮(`0 4px 8px rgba(229,91,38,0.20)`) |
| Active(按下) | 底色 `--ink-alpha-7` + `scale(0.99)`      | `scale(0.995)` + 阴影 inset 加深               |
| Focused  | 外层 2 px `--heat-40` ring,offset 2 px    | 同左                                            |
| Disabled | 底 `--bg-soft` + 文字 `--ink-alpha-12` + `cursor: not-allowed` + 无 hover | 底 `--heat-40` + 文字 `#FFFFFF` + 阴影消失 + `cursor: not-allowed` |

**过渡:** 全场统一 `transition: background-color 200ms, opacity 200ms, transform 100ms, box-shadow 100ms ease`。

### 10.2 Pill(状态徽标)· 严格分级(对应用户诉求 ②)

> **V2 核心改进:Pill 分 3 级,同级别尺寸完全一致**

| 级别         | 高度  | padding      | 字号    | 圆角  | dot 尺寸 | 用途                  |
| ------------ | ----- | ------------ | ------- | ----- | -------- | --------------------- |
| **L1 大胶囊** | 28 px | `0 12 px`    | 13 px   | 999 px| 8 px     | 项目状态 / 列表行     |
| **L2 中胶囊** | 22 px | `0 10 px`    | 11.5 px | 999 px| 6 px     | **默认 / 通用**       |
| **L3 小胶囊** | 18 px | `0 8 px`     | 10.5 px | 999 px| 5 px     | KPI 卡角标 / Mono 标签 |

**色调(3 种,通用所有级别):**

| 状态 | 文字色          | 底色          | 边框(20% alpha)|
| ---- | --------------- | ------------- | ---------------- |
| info | `--heat`        | `--heat-12`   | `--heat-20`      |
| ok   | `--green`       | `--green-bg`(`#3F6B3F14`) | `--green-bd`(`#3F6B3F33`) |
| err  | `--red`         | `--red-bg`(`#B33A2A14`)   | `--red-bd`(`#B33A2A33`)    |

每个 pill 前置圆点(`.dot`,直径同上表,颜色继承文字色)。

**HTML 写法:**

```html
<span class="pill pill-l2 pill-info">
  <span class="dot"></span>
  生成中
</span>
```

### 10.3 输入框 / 搜索(V2.1 · 含 Firecrawl 式快捷键提示)

**尺寸:** 高 **36 px**(从 V2 的 32 上调,中文留白更舒展)/ padding `0 14 px` / 字号 14 px / 圆角 8 px

**状态:**

| 状态     | 边框                              | 底色                  |
| -------- | --------------------------------- | --------------------- |
| Default  | inside-border `--black-alpha-12`  | `--card`              |
| Hover    | inside-border `--black-alpha-24`  | `--card`              |
| Focused  | inside-border `--heat-40` + inset 1 px | `--card`         |
| Error    | inside-border `--red`             | `--red-bg`            |
| Disabled | inside-border `--black-alpha-12`  | **`--black-alpha-5`**(从 `--bg-soft` 改 · 冷灰底太接近白,看不出禁用) |

占位字色 `--black-alpha-48`,disabled 占位 `--black-alpha-24`。

**带图标 / 快捷键搜索框(参考 Firecrawl 实测):**

```
[🔍] [          搜索任意内容...          ] Ctrl K
 │                                          │
 │ 16px line icon, color: --black-alpha-56  │ mono · 11.5px · --black-alpha-48
 │ 左 14 px,**z-index: 2**(关键)          │ 右 14 px,**z-index: 2**
 │                                          │ 平铺文本(无边框盒),不用 kbd 样式
```

**关键坑(已修):**
1. **搜索 icon 看不见** —— `<input>` 的白色 bg 会盖住同级的 SVG icon。**SVG 必须加 `z-index: 2`** 才能抬到 input 之上。同理 Ctrl K 提示也要 z-index。
2. **快捷键不用 `⌘`** —— JetBrains Mono webfont 不带 U+2318 `⌘` 字形,会显示成方框。**Windows 用户体系用 "Ctrl K" 纯文本**;Mac 端要显示 ⌘ 时用 SVG command 图标(见 §9.4)。
3. **快捷键提示不要用 kbd 边框盒** —— Firecrawl 是平铺灰色 mono 文本,无任何 border / bg / radius。**显得克制,符合"克制大于装饰"。**

### 10.4 KPI 统计行(`.stats`)

- 1 行 4 格,共用一个 inside-border 容器,圆角 8 px,**无 gap**
- 列与列之间用 `border-right: 1px solid var(--border-faint)` 分隔(最后一列去掉)
- 容器四角加 SVG "+" 准星
- 每格结构:label + L3 pill → 大数字(30 px) → delta / progress

### 10.5 列表行(`.list-row`)

```
[缩略图 54×70] [标题 + meta] [进度条 5 段] [L2 pill] [按钮 -sm]
```

- grid 5 列:`54px 1fr auto auto auto`
- 行高 padding `14 px 18 px`
- 行间 1 px 分隔线(`--border-faint`),最后行去掉
- **整行 hover** → `--ink-alpha-4` 底色
- **整行 active**(键盘选中)→ `--ink-alpha-7` 底色
- **整行 disabled** → opacity 0.5 + `cursor: not-allowed`

### 10.6 进度条段位(流水线 5 阶段专用)· **V2.1 语义色重写**

5 个 `18×5 px` 小段,3 px 间距,**每段颜色映射真实业务状态**(替代 V2 的"全灰已完成"——那样像项目失败):

| 状态     | 颜色                  | 视觉处理                       |
| -------- | --------------------- | ------------------------------ |
| 未开始   | `--black-alpha-8`     | 极弱灰底 · 静态                |
| **已完成** | `--accent-forest`(`#42c366`)| **绿色 · 静态**(替代 V2 灰色) |
| **进行中** | `--heat`(`#fa5d19`)  | **橙色 + 1.4s 脉动**(opacity 1↔0.55 + scaleY 1↔0.7)· 区别于失败 |
| 失败     | `--accent-crimson`(`#eb3424`)| 红色 · 静态                |

圆角:每段 2 px。

**关键设计:**
- **绿/橙/红/灰** 四色一眼可辨:已完成的绿色让"5/5 全绿"=完美交付,**不会再有"全灰像失败了"的误读**
- **橙色脉动动画** 是区分"进行中"与"失败"的关键——红色永远静态,只有橙色会呼吸,潜意识上"动 = 在运行,静 = 出错"

```css
.prog span.now {
  background: var(--heat);
  animation: prog-pulse 1.4s ease-in-out infinite;
}
@keyframes prog-pulse {
  0%,100% { opacity: 1;    transform: scaleY(1); }
  50%     { opacity: .55;  transform: scaleY(.7); }
}
```

### 10.7 快捷入口卡(`.shortcut`)

- 白底 / inside-border / **8 px 圆角**(V1 是 0) / 14 px padding
- 左侧 32×32 橙色 tint 图标块(`--heat-12` 底 / 8 px 圆角 / 居中 16 px line icon)
- 右侧:标题(13 px 500)+ Mono 描述(11.5 px,`--ink-alpha-48`)
- **Default → Hover → Active 完整状态:**
  - Hover:底色 `--ink-alpha-4` / 标题 underline-from-orange 1 px(可选)
  - Active(点击瞬间):scale(0.99)
  - Focused(键盘):2 px `--heat-40` ring

### 10.8 提示框(`.tip`)

- 白底 / **1 px 虚线**边框(`dashed`)/ **8 px 圆角**
- 加粗标题独立一行 + 正文
- 内联代码用 `.mono` 类:橙色文字 + `--heat-12` 底 + 4 px 圆角

### 10.9 Toast

- 右下角 24 px 偏移 / 白底 / inside-border / **8 px 圆角**
- 唯一允许的"白阴影":`0 4px 20px rgba(21,20,15,0.06)`
- 进入动画:`translateX(420px → 0)`,缓动 `cubic-bezier(0.34, 1.56, 0.64, 1)`,300 ms
- 自动消失:2400 ms
- 内容结构:左侧 24×24 橙色 tint 图标(`--heat-12` 底)+ 右侧标题 + Mono 副文本(`[ 200 OK ]`)

### 10.10 弹窗(Modal)

- 居中,460–480 px 宽,白底,**8 px 圆角**(V1 是 0)
- 四角加 SVG "+" 准星
- 遮罩 `rgba(21,20,15,0.42)`,带 `backdrop-filter: blur(8px)`
- 进入动画:`scale(0.96 → 1)`,250 ms 弹性缓动
- 三段结构:
  - **Header:** 36 px 橙色 tint 图标 + 标题 + Mono 副标
  - **Body:** 13 px / `--ink-alpha-56` / 行高 1.7
  - **Footer:** 右对齐两个按钮(取消 + 主 CTA)
- ESC 关闭 / 点击遮罩关闭

### 10.11 Tab(双层)

**主 Tab:**
- 高 36 px / padding `0 14 px` / 字号 13 px / 字重 500
- 未选中:`--ink-alpha-56` 文字
- 选中:`--ink` 文字 + 底部 2 px `--heat` 横线(整个 tab 宽度)
- Hover(未选中态):`--ink-alpha-7` 底色

**副 Tab(过滤型):**
- 高 28 px / padding `0 10 px` / 字号 12 px
- 未选中:`--ink-alpha-56` + 灰度 icon
- 选中:`--ink` + 多色 icon(grayscale: 0)
- Tab 之间用 1 px 高 12 px 的 `--ink-alpha-7` 竖条分隔(可选)

### 10.12 Dropdown / Select

- 触发器:同输入框样式(高 32 / 圆角 8 / inside-border)
- 右侧 16 px chevron-down icon,色 `--ink-alpha-48`,展开时旋转 180°
- 弹层:白底 / 8 px 圆角 / `0 4px 20px rgba(21,20,15,0.06)` 阴影 / **唯一允许阴影场景之二**
- 选项:高 32 / padding `0 12 / hover `--ink-alpha-4` / 选中 `--heat-12` + 右侧 14 px checkmark `--heat`
- 分组分隔:1 px `--border-faint`

### 10.13 Checkbox / Radio / Switch(V2.1 · 全部用 SVG icon)

**通用原则:** 所有 indicator 都用真 SVG(via background-image data URI 或 inline `<svg>`),**禁止用 border-width / transform: rotate(45deg) 凑对勾**——那种 CSS hack 在缩放/字体渲染下会变形。

**Checkbox:**
- **容器:** 16×16 / 4 px 圆角 / inside-border `--black-alpha-24`(hover 时 → `--black-alpha-48`)
- **Checked:** `--heat` 底 · 居中 12×12 白色 SVG checkmark(`<path d="M20 6 9 17l-5-5"/>` · stroke 3 · linecap round)
- **Indeterminate:** `--heat` 底 · 居中 12×12 白色 SVG 横线(`<path d="M5 12h14"/>` · stroke 3)
- **Disabled:** 底 `--black-alpha-5` + 边 `--black-alpha-12` + icon 不渲染或半透明
- **实现方式:** `background-image: url("data:image/svg+xml,...")` · `background-size: 12px 12px` · `background-position: center` · 这样不需要 ::after 凑出 icon,SVG 是真实的

**Radio:**
- 16×16 圆 / inside-border `--black-alpha-24`
- Checked:内嵌 8×8 `--heat` 实心圆(纯几何形状,不算 icon,用 ::after 即可)
- Disabled:底 `--black-alpha-5`

**Switch:**
- 容器 28×16 / 999 px 圆角
- Off:底 `--black-alpha-12` / 圆球 `#FFFFFF` 12×12 + 1 px subtle shadow
- On:底 `--heat` / 圆球右移到 `left: 14px`
- 过渡:`background 200 ms`,圆球位移 `left 200 ms`

> **为什么不用字符 `✓` `✗` 这种 Unicode:** 不同系统、不同字体对这些字符的字形支持差异巨大(`⌘` 在 JetBrains Mono Web 字体里就是缺字形 → 显示成方框)。**SVG 是唯一可靠的解。**

---

## 11. 微观细节(品牌签名 · V1 保留)

### 11.1 标签全部包方括号
`[ 200 OK ]` `[ .MP4 · 9:16 ]` `[ /v2 ]` `[ /sidebar collapse ]`

### 11.2 时间戳像代码注释
`// 05.14 · 周五`

### 11.3 数值后缀
`¥327` 主体大字 + `.40` 小字次级(`<small>`)

### 11.4 强调单词上色
正文里 `<b style="color: var(--ink)">3 个项目</b>` —— 让具体数值/名词比周围文字更深一档(不是变橙)。**橙色只留给 CTA。**

### 11.5 ASCII 字符做装饰
`↑ 本月 +3` `↓ -1.2%`

### 11.6 链接式"更多"按钮
`[ ALL · 12 ] →` —— Mono 标签 + 箭头,色 `--ink-alpha-48`,hover 转橙。

### 11.7 缩略图不放图,放比例
`9:16` Mono 字符占位。

---

## 12. Don't List(绝对禁止)

- ❌ **0 px 卡片**(V1 → V2 反转)
- ❌ 渐变背景(只有 hero 区可考虑,但首选纯色)
- ❌ 玻璃拟态(`backdrop-filter` 只用于 modal 遮罩)
- ❌ 彩色 emoji 图标(用 SVG line icon,1.5 px stroke)
- ❌ 多个 accent 色(全场只有橙色)
- ❌ 大圆角容器(>12 px 直接判错)
- ❌ 灰色阴影 / 文字阴影(只允许橙色主 CTA 阴影 + Toast/Dropdown 白阴影)
- ❌ 鲜艳的状态色(避免荧光绿、电光蓝、霓虹粉)
- ❌ 居中对齐大段正文(全部左对齐)
- ❌ 把装饰当主角(场记板、丝绒、霓虹灯)
- ❌ 无意义的微动效(hover 旋转、缩放、彩虹流光)
- ❌ **hover 时换深 hue 的橙**(用 alpha)
- ❌ **真 `border` + hover 边框消失**(用 inside-border ::before)
- ❌ **同一行混用直角和圆角**(用户原话:"不要有些是直角,胶囊又是圆角")

---

## 13. Sass / CSS Token 速查表(V2.1)

```css
:root {
  /* ============================================================
     Color system V2.1 · Firecrawl-aligned
     ============================================================ */

  /* === 表面 / 背景(冷灰)=== */
  --background-base:    #f9f9f9;
  --background-lighter: #fbfbfb;
  --surface:            #ffffff;
  --surface-raised:     #ffffff;

  /* === 边框(冷灰 · 3 档)=== */
  --border-faint: #ededed;   /* 默认 1 px */
  --border-muted: #e8e8e8;
  --border-loud:  #e6e6e6;

  /* === Accent 多彩(5 色信号)=== */
  --accent-black:    #262626;
  --accent-white:    #ffffff;
  --accent-amethyst: #9061ff;
  --accent-bluetron: #2a6dfb;
  --accent-crimson:  #eb3424;
  --accent-forest:   #42c366;
  --accent-honey:    #ecb730;

  /* === Heat · 单 hue + 8 档 alpha === */
  --heat:    #fa5d19;
  --heat-90: rgba(250, 93, 25, .90);
  --heat-40: rgba(250, 93, 25, .40);
  --heat-20: rgba(250, 93, 25, .20);
  --heat-16: rgba(250, 93, 25, .16);
  --heat-12: rgba(250, 93, 25, .12);
  --heat-8:  rgba(250, 93, 25, .08);
  --heat-4:  rgba(250, 93, 25, .04);

  /* === Black-Alpha 阶梯(20 档 · 0–24 用 #000,32+ 用 #262626)=== */
  --black-alpha-1:  rgba(0, 0, 0, .01);
  --black-alpha-2:  rgba(0, 0, 0, .02);
  --black-alpha-3:  rgba(0, 0, 0, .03);
  --black-alpha-4:  rgba(0, 0, 0, .04);
  --black-alpha-5:  rgba(0, 0, 0, .05);
  --black-alpha-6:  rgba(0, 0, 0, .06);
  --black-alpha-7:  rgba(0, 0, 0, .07);
  --black-alpha-8:  rgba(0, 0, 0, .08);
  --black-alpha-10: rgba(0, 0, 0, .10);
  --black-alpha-12: rgba(0, 0, 0, .12);
  --black-alpha-16: rgba(0, 0, 0, .16);
  --black-alpha-20: rgba(0, 0, 0, .20);
  --black-alpha-24: rgba(0, 0, 0, .24);
  --black-alpha-32: rgba(38, 38, 38, .32);
  --black-alpha-40: rgba(38, 38, 38, .40);
  --black-alpha-48: rgba(38, 38, 38, .48);
  --black-alpha-56: rgba(38, 38, 38, .56);
  --black-alpha-64: rgba(38, 38, 38, .64);
  --black-alpha-72: rgba(38, 38, 38, .72);
  --black-alpha-88: rgba(38, 38, 38, .88);

  /* === Legacy aliases(V2 命名 → V2.1 token,组件 CSS 无需重写)=== */
  --bg:           var(--background-base);
  --bg-soft:      var(--background-lighter);
  --card:         var(--surface);
  --ink:          var(--accent-black);
  --green:        var(--accent-forest);
  --red:          var(--accent-crimson);
  --green-bg:     rgba(66, 195, 102, .08);
  --green-bd:     rgba(66, 195, 102, .20);
  --red-bg:       rgba(235, 52, 36, .08);
  --red-bd:       rgba(235, 52, 36, .20);
  --ink-alpha-4:  var(--black-alpha-4);
  --ink-alpha-7:  var(--black-alpha-7);
  --ink-alpha-12: var(--black-alpha-12);
  --ink-alpha-24: var(--black-alpha-24);
  --ink-alpha-32: var(--black-alpha-32);
  --ink-alpha-48: var(--black-alpha-48);
  --ink-alpha-56: var(--black-alpha-56);
  --ink-alpha-64: var(--black-alpha-64);
  --ink-alpha-72: var(--black-alpha-72);
  --ink-alpha-88: var(--black-alpha-88);

  /* === 圆角 === */
  --r-sm: 4px;
  --r-md: 8px;     /* 默认主圆角 */
  --r-pill: 999px;

  /* === 字体 === */
  --font-sans: 'Inter Tight', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', monospace;

  /* === 容器宽度 === */
  --container-max: 1480px;
  --sidebar-w: 248px;

  /* === 过渡 === */
  --t-fast: 100ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Selection · Firecrawl 签名细节 === */
::selection {
  background: var(--heat-20);
  color: var(--heat);
}

/* === Dark mode · 翻转底色 + black-alpha 改用 white-alpha === */
.dark {
  --background-base:    #0a0a0a;
  --background-lighter: #141414;
  --surface:            #171717;
  --surface-raised:     #1f1f1f;
  --border-faint: #2a2a2a;
  --border-muted: #333333;
  --border-loud:  #404040;
  --accent-black: #f5f5f5;
  --black-alpha-1:  rgba(255,255,255,.01);
  --black-alpha-2:  rgba(255,255,255,.02);
  --black-alpha-3:  rgba(255,255,255,.03);
  --black-alpha-4:  rgba(255,255,255,.04);
  --black-alpha-5:  rgba(255,255,255,.05);
  --black-alpha-6:  rgba(255,255,255,.06);
  --black-alpha-7:  rgba(255,255,255,.07);
  --black-alpha-8:  rgba(255,255,255,.08);
  --black-alpha-10: rgba(255,255,255,.10);
  --black-alpha-12: rgba(255,255,255,.12);
  --black-alpha-16: rgba(255,255,255,.16);
  --black-alpha-20: rgba(255,255,255,.20);
  --black-alpha-24: rgba(255,255,255,.24);
  --black-alpha-32: rgba(255,255,255,.32);
  --black-alpha-40: rgba(255,255,255,.40);
  --black-alpha-48: rgba(255,255,255,.48);
  --black-alpha-56: rgba(255,255,255,.56);
  --black-alpha-64: rgba(255,255,255,.64);
  --black-alpha-72: rgba(255,255,255,.72);
  --black-alpha-88: rgba(255,255,255,.88);
}
```

---

## 14. V1 → V2 迁移检查清单(给后续改代码用)

- [ ] 全局替换 `border-radius: 0` → `border-radius: 8px`(卡片 / stats / shortcut / modal / toast / thumb)
- [ ] 替换 V1 ink-2/3/4 token 为 ink-alpha-56/48/12
- [ ] 替换 `--orange-tint` `--orange-soft` 为 `--heat-12` `--heat-20`
- [ ] 主 CTA hover 移除 `#D04E1F`,改用 4 层橙阴影变化
- [ ] 所有 `.btn` `.input` 加 `inside-border` 类
- [ ] 主工作区容器加 `border-left + border-right` + 4 个 SVG 准星
- [ ] 字体 Inter → Inter Tight
- [ ] 所有 icon 转 SVG line icon,stroke 1.5
- [ ] Pill 按 L1/L2/L3 三级规范化高度/字号/圆点尺寸
- [ ] 每个交互组件补齐 hover / active / focused / disabled 状态

---

## 15. 参考与来源

- **视觉灵感(实测):** [Firecrawl Playground](https://www.firecrawl.dev/playground?endpoint=parse) · 详见 [firecrawl_playground_spec.md](_design_src/firecrawl_playground_spec.md)
- **结构灵感:** Linear / Stripe Dashboard
- **图纸感来源:** 印刷套版准星 + 老 Unix 终端
- **V1 文档:** [DESIGN_SPEC.md](DESIGN_SPEC.md)(保留作为历史)