AirShelf/v1/DESIGN_SPEC.md

# 流·Studio 设计规范

> **风格代号:** Restraint(克制)· Firecrawl-inspired
> **适用范围:** 流·Studio 全产品(工作台 / 项目 / 商品库 / 流水线 / 资产库 / 编辑器 / 账户)
> **最后更新:** 2026-05-14

---

## 1. 设计哲学

**一句话:** 不是 SaaS,不是工具站,而是「一台精密设备的工作面板」。

**三条铁律:**

1. **克制大于装饰** — 留白 > 容器 > 内容,大量空气感,绝不堆砌
2. **单色锚点** — 全场只有一种 accent(橙色),且只用于 CTA / 关键状态 / 强调单词
3. **结构清晰可见** — 用 1px 边框、网格背景、"+" 准星、mono 标签暴露"图纸感",而不是用阴影/渐变去隐藏结构

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

---

## 2. 色彩系统

### 2.1 中性色(主体 95%)

| Token         | Hex       | 用途                            |
| ------------- | --------- | ------------------------------- |
| `--bg`        | `#FAF9F5` | 页面底色 · 米白(暖调,不是纯白) |
| `--bg-soft`   | `#F4F2EC` | hover 态底色 / mono 标签背景    |
| `--card`      | `#FFFFFF` | 卡片 / 容器底色                 |
| `--border`    | `#E9E5DB` | 主分隔线 · 1px 实线             |
| `--border-soft` | `#EFEBE0` | 次级边框 / 缩略图边框          |

### 2.2 文字层级(4 层)

| Token      | Hex       | 权重 / 用途                   |
| ---------- | --------- | ----------------------------- |
| `--ink`    | `#15140F` | 一级 · 标题 / 数值 / 主文本   |
| `--ink-2`  | `#5A584F` | 二级 · 描述 / 次要按钮文字    |
| `--ink-3`  | `#9C988C` | 三级 · 标签 / 辅助说明 / 占位 |
| `--ink-4`  | `#C8C4B8` | 四级 · ASCII 散点 / 极弱装饰  |

### 2.3 主题色(只用于关键点)

| Token             | Hex       | 用途                              |
| ----------------- | --------- | --------------------------------- |
| `--orange`        | `#E55B26` | **唯一 accent** · 主 CTA / active 态 / 关键单词强调 |
| `--orange-soft`   | `#FAE8DC` | 主色边框软化 / pill 边框           |
| `--orange-tint`   | `#FFF4ED` | 主色背景软化 / active nav 底色     |

### 2.4 状态色(仅状态使用,克制)

| 含义     | Token      | Hex       | 配套底色   | 配套边框 |
| -------- | ---------- | --------- | ---------- | -------- |
| 成功     | `--green`  | `#3F6B3F` | `#EAF2EA`  | `#D5E5D5` |
| 失败/告警 | `--red`   | `#B33A2A` | `#FBEBE7`  | `#F2D6CE` |

> **注:** 没有蓝、紫、黄、青等「企业 dashboard 五彩斑斓色」。状态用色仅在 pill / 进度条段位上出现,绝不用作大面积背景。

---

## 3. 字体系统

### 3.1 字体族

| 用途       | 字体                              |
| ---------- | --------------------------------- |
| 正文 / UI  | `Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif` |
| Mono 装饰  | `'JetBrains Mono', monospace`     |

> Mono 字体不是用来写代码的,是用来做**装饰元素**:`[ 200 OK ]` 标签、时间戳 `// 05.14`、小注释 `/v2`、deltas `↑ 本月 +3` 等。

### 3.2 字号 / 字重 / 行高

| 角色          | 字号    | 字重 | 字距       | 用途             |
| ------------- | ------- | ---- | ---------- | ---------------- |
| H1 欢迎语     | 26 px   | 600  | -0.018em   | 页面主标题       |
| 数值 (KPI)    | 30 px   | 600  | -0.02em    | 统计大数字       |
| H2 区块标题   | 15 px   | 600  | -0.01em    | "最近项目""快捷入口" |
| 卡片标题      | 13.5 px | 600  | normal     | 项目名 / 商品名  |
| 正文 / nav    | 13.5 px | 500  | normal     | 默认             |
| 按钮          | 13 px   | 500/600 | normal  | btn / pill-btn   |
| 描述次级      | 12.5 px | 400  | normal     | meta / 描述行    |
| Pill 文字     | 11.5 px | 500  | normal     | 状态徽标         |
| Mono 标签     | 10.5–11.5 px | 400/500 | 0.04em (letter-spacing) | `[ STATUS ]` |
| Mono 散点     | 8.5 px  | 400  | 0.04em     | 背景 ASCII 装饰  |

**行高:** 默认 `1.5`,标题 `1.2`,提示文本 `1.6–1.7`。

**关键属性:** 数值类必须加 `font-variant-numeric: tabular-nums`,保证等宽对齐。

---

## 4. 圆角规则(最关键的一条)

> **核心原则:结构性容器 = 0 圆角 · 交互元素 = 适度圆角 · 状态徽标 = 完全圆**

| 元素类型             | 圆角值     | 例子                            |
| -------------------- | ---------- | ------------------------------- |
| 大卡片 / 区块容器    | **0 px**   | `.stats` `.list-card` `.shortcut` `.tip` `.modal` |
| 缩略图 / 画面占位    | **0 px**   | `.thumb` `.ic`                  |
| 按钮 / 输入框 / icon-btn | **9 px** | `.btn` `.pill-btn` `.icon-btn` `.search` |
| nav 项               | **7 px**   | `nav a`                         |
| 头像 / 小色块        | **6 px**   | `.av` `.team .p`                |
| Mono 标签 / badge    | **3–4 px** | `.kbd` `.badge`                 |
| Pill 状态徽标 / dot  | **999 px** | `.pill` `.dot`                  |
| 进度条段位           | **2–3 px** | `.prog span` `.bar`             |

**为什么这样定:** 大容器走硬边像「图纸框」,有工程感;按钮走中圆角保留可点击的友好感;状态徽标走全圆形成强对比,视觉跳脱出来。

---

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

### 5.1 边框

- **统一规格:** `1px solid var(--border)`
- 次级:`1px solid var(--border-soft)`
- **不允许 2px / 3px 实线**(粗边破坏轻盈感)
- 虚线仅用于 `.tip` 提示框:`1px dashed var(--border)`

### 5.2 阴影

- **默认无阴影**(关键!)
- 唯一例外:Toast 浮层 `box-shadow: 0 4px 20px rgba(21,20,15,0.06)`
- 弹窗用半透明遮罩 `rgba(21,20,15,0.42)` 拉开层级,**不靠 shadow**

### 5.3 容器四角"+" 注册标(签名元素)

所有重要区块容器的四角放 `+` 字符,模拟印刷套版准星:

```css
.stats::before,.stats::after { content:'+'; position:absolute; color:var(--ink-3); font-family:'JetBrains Mono',monospace; font-size:13px; }
.stats::before { top:-8px; left:-8px }
.stats::after { bottom:-8px; right:-8px }
/* 另外两角用额外 .corner-tr / .corner-bl span 补齐 */
```

---

## 6. 间距 / 栅格

**基础栅格:** 4 px

**常用间距:** 4 / 6 / 8 / 12 / 14 / 16 / 18 / 22 / 24 / 36 / 48 / 56

**主区块布局:**
- 侧边栏宽度:`248px`
- 主内容 padding:`48px 56px 56px`
- 内容最大宽度:`1480px`
- 区块之间垂直间距:`36px`(welcome → stats → grid2)
- 卡片网格间距:`24px`(主区) / `12px`(子区)
- 卡片内 padding:`22px 24px`(stats) / `14px 18px`(列表行) / `14px`(快捷入口)

---

## 7. 背景:制图纸网格

### 7.1 三层叠加

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

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

### 7.2 视觉聚焦遮罩

整个网格背景用径向遮罩,中心实、四周淡:

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

效果:网格在屏幕中心隐约可见,边缘消失,不抢内容。

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

主区域 4 个固定位置撒 ASCII 散点,模拟手稿污点 / 颗粒感:

```
  · ·  +
 ·  +XX+
  +XXXX·
   +X·
```

字号 8.5px / 颜色 `--ink-4` / 透明度 0.8 / `pointer-events:none`。

### 7.4 边角 Mono 标签

主区域 4 个角各放一个 Mono 标签,样例:

```
左上 [ 200 OK ]    右上 [ /v2 ]
左下 [ .MP4 · 9:16 ]    右下 [ STUDIO ]
```

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

> **作用:** 让页面看起来像「在某个开发环境 / 调试视图里」,而不是普通官网。这是区分 AI 味和高级感的关键。

---

## 8. 组件规范

### 8.1 按钮

**3 种且仅 3 种:**

| 类型      | 背景       | 文字       | 边框       | 圆角 | 字重 |
| --------- | ---------- | ---------- | ---------- | ---- | ---- |
| `.btn` 默认 | `--card` 白 | `--ink`   | `--border`  | 9px  | 500  |
| `.btn-primary` 主 CTA | `--orange` | 白 | `--orange` | 9px | 600 |
| `.btn-sm` 小按钮 | 同上,padding `5px 11px` / fontsize 12px | | | | |

Hover:默认 → `--bg-soft`;主按钮 → `#D04E1F`(橙色加深一档)。

### 8.2 Pill(状态徽标)

```
[ ● 状态文字 ]    完全圆角 / 1px 边框 / 11.5px 字号 / 4px 10px padding
```

| 状态 | 文字色      | 底色      | 边框        |
| ---- | ----------- | --------- | ----------- |
| info | `--orange`  | `--orange-tint` | `--orange-soft` |
| ok   | `--green`   | `#EAF2EA` | `#D5E5D5`   |
| err  | `--red`     | `#FBEBE7` | `#F2D6CE`   |

每个 pill 前置 6px 圆点(`.dot`,颜色继承文字色)。

### 8.3 输入框 / 搜索

- 背景白 / 1px 边框 / 9px 圆角 / 9px 12px padding
- 占位字色 `--ink-3`
- 聚焦态可选橙色边框,但克制使用
- 右侧带 mono `⌘K` 提示徽标

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

- 1 行 4 格,共用一个 1px 边框容器,无 gap
- 列与列之间用 `border-right: 1px` 分隔(最后一列去掉)
- 容器四角加 "+" 注册标
- 每格结构:label + badge → 大数字(30px) → delta / progress

### 8.5 列表(`.recent`)

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

- grid 5 列:`54px 1fr auto auto auto`
- 行高 padding `14px 18px`
- 行间 1px 分隔线,最后行去掉
- 整行 hover → `--bg-soft`

### 8.6 进度条段位(流水线 5 阶段专用)

5 个 `18×5px` 小段,3px 间距,每段独立颜色:

| 状态 | 颜色          |
| ---- | ------------- |
| 未开始 | `--bg-soft`  |
| 已完成 | `--ink-2`    |
| 当前  | `--orange`   |
| 失败  | `--red`      |

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

- 白底 / 1px 边框 / 0 圆角 / 14px padding
- 左侧 30×30 橙色 tint 图标块(0 圆角)
- 右侧:标题(13px 600)+ Mono 描述(11.5px,`--ink-3`)
- Hover → `--bg-soft`

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

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

### 8.9 Toast

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

### 8.10 弹窗(Modal)

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

---

## 9. 微观细节(决定"高级感"的)

### 9.1 标签全部包方括号

不要写 `200 OK`,要写 `[ 200 OK ]`(方括号 + 单空格)。
不要写 `MP4 9:16`,要写 `[ .MP4 · 9:16 ]`(中点分隔)。
路径用 `/v2`、`/sidebar collapse` 这种伪命令。

### 9.2 注释样式时间

`// 05.14 · 周五` —— 双斜杠开头,模拟代码注释。

### 9.3 数值后缀

`¥327` 主体大字 + `.40` 小字次级(`<small>`),让数字主体更突出。

### 9.4 强调单词上色

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

### 9.5 ASCII 字符做装饰

进度箭头:`↑ 本月 +3` `↓ -1.2%` 用 Unicode 箭头。
中文标点 + 英文单位混排:`本月 +3` `较上月 +33%` 中间用半角空格分隔。

### 9.6 链接式"更多"按钮

"查看全部"不要写成按钮,写成 `[ ALL · 12 ] →`(Mono 标签 + 箭头),颜色 `--ink-3`,hover 橙色。

### 9.7 缩略图不放图,放比例

`9:16` 这种 Mono 字符占位,模拟「未渲染图片的草稿状态」,呼应工程感。

---

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

- ❌ 渐变背景(只有 hero 区可考虑,但首选纯色)
- ❌ 玻璃拟态(`backdrop-filter` 只用于 modal 遮罩,不用于卡片)
- ❌ 彩色 emoji 图标(用 SVG line icon,1.8px stroke)
- ❌ 多个 accent 色(全场只有橙色一个 accent)
- ❌ 大圆角容器(>=10px 的卡片直接判错)
- ❌ 投影 / 内阴影 / 文字阴影
- ❌ 鲜艳的状态色(避免荧光绿、电光蓝、霓虹粉这类)
- ❌ 居中对齐大段正文(全部左对齐)
- ❌ 把装饰当主角(场记板、丝绒、霓虹灯都不要)
- ❌ 无意义的微动效(hover 旋转、缩放、彩虹流光等)

---

## 11. Sass / CSS Token 速查

```css
:root{
  /* 中性 */
  --bg:#FAF9F5; --bg-soft:#F4F2EC; --card:#FFFFFF;
  --border:#E9E5DB; --border-soft:#EFEBE0;

  /* 文字 4 层 */
  --ink:#15140F; --ink-2:#5A584F; --ink-3:#9C988C; --ink-4:#C8C4B8;

  /* 主色 */
  --orange:#E55B26; --orange-soft:#FAE8DC; --orange-tint:#FFF4ED;
  --orange-hover:#D04E1F;

  /* 状态 */
  --green:#3F6B3F; --green-bg:#EAF2EA; --green-bd:#D5E5D5;
  --red:#B33A2A; --red-bg:#FBEBE7; --red-bd:#F2D6CE;
}
```

---

## 12. 参考与来源

- **视觉灵感:** [Firecrawl](https://www.firecrawl.dev/)(克制 / 单橙 accent / mono 装饰)
- **结构灵感:** Linear / Stripe Dashboard(信息密度 / 1px 分层)
- **图纸感来源:** 印刷套版准星 + 老 Unix 终端
- **当前实现:** [demo.html](demo.html) · [restraint-2.html](_design_src/untitled/project/directions/v3/restraint-2.html)