# linear.app · 设计系统迁移规范

> 来源：https://linear.app
> 抓取日期：2026-05-28
> 可见元素分析样本：2404 个

## 0. 风格基调

> ⚠️ 这一节需要人工 / AI vision 看图填写。
> 关键词（5 个）：__待补__
> 类比：__待补__
> 一句话定位：__待补__

---

## 1. Design Tokens

### 1.1 颜色

按出现频次自动分配语义角色（**真实 computed style 数据**）：

| Token | Hex | 出现次数 | 用法建议 |
|---|---|---|---|
| `--bg` | `#F7F8F8` | 1370 | 主页面背景 |
| `--bg-soft` | `#62666D` | 367 | 次级表面 / 卡片底 |
| `--ink` | `#08090A` | 8 | 正文 / 标题 |
| `--muted` | `#62666D` | 367 | metadata / 占位 |

### 1.2 字体

- **Display 字体**: `Inter Variable"`（类别推断：**humanist-sans**）
- **Body 字体**: `Berkeley Mono"`（类别：**mono**）

实际加载的字体文件（来自 `document.fonts`）：

- `Inter Variable` · normal · weight 100 900 · loaded
- `Inter Variable` · italic · weight 100 900 · unloaded
- `Berkeley Mono` · normal · weight 100 900 · loaded

### 1.3 字号阶（按 px 降序 + 出现频次）

| Size | 出现次数 | 推断角色 |
|---|---|---|
| 18px | 16 | display |
| 16px | 1363 | h1 |
| 15px | 93 | h2 |
| 14px | 272 | h3 |
| 13.3333px | 206 | body |
| 13px | 199 | small |
| 12px | 168 | caption |
| 10px | 60 | micro |

### 1.4 字重 / 行高 / 字距

**Font weights:** `400` × 2164, `510` × 218, `590` × 18, `300` × 4

**Line heights:** `24px` × 1697, `16.8px` × 142, `19.5px` × 123, `15px` × 60, `21px` × 23

**Letter spacings:** `-0.13px` × 115, `-0.165px` × 108, `-0.182px` × 18, `-0.15px` × 16, `-0.12px` × 10

### 1.5 间距

Padding（shorthand top right bottom left, top 5）：

- `0px 32px 0px 24px` × 36
- `0px 32px 0px 32px` × 29
- `8px 8px 8px 8px` × 22
- `0px 8px 0px 2px` × 15
- `0px 6px 0px 6px` × 14

Gap（flex/grid 间距）：

- `8px` × 91
- `12px` × 36
- `4px` × 24
- `3px` × 16
- `2px` × 13

### 1.6 圆角

- `6px` × 43
- `2px` × 42
- `50%` × 38
- `4px` × 26
- `9999px` × 16

### 1.7 阴影

- `rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px` × 31
- `rgba(0, 0, 0, 0.4) 0px 2px 4px 0px` × 16
- `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset` × 6
- `rgb(35, 37, 42) 0px 0px 0px 1px inset` × 5
- `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px` × 3

### 1.8 动效 transition

- `all` × 2202
- `fill 0.15s` × 71
- `color 0.1s` × 34
- `filter 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94)` × 24

---

## 2. 布局 Layout

> 完整布局推断需要看 hero / sections 截图配合元素 rect 数据。
> 自动产物里 `elements.json` 含每个元素的 `{x, y, w, h}`，可继续分析容器宽度、栏数、断点。

页面骨架（按视觉滚动顺序）：

1. `03_desktop_section_00.png` （y=0px）
2. `03_desktop_section_01.png` （y=810px）
3. `03_desktop_section_02.png` （y=1620px）
4. `03_desktop_section_03.png` （y=2430px）
5. `03_desktop_section_04.png` （y=3240px）
6. `03_desktop_section_05.png` （y=4050px）
7. `03_desktop_section_06.png` （y=4860px）
8. `03_desktop_section_07.png` （y=5670px）
9. `03_desktop_section_08.png` （y=6480px）
10. `03_desktop_section_09.png` （y=7290px）
11. `03_desktop_section_10.png` （y=8100px）
12. `03_desktop_section_11.png` （y=8910px）
13. `03_desktop_section_12.png` （y=9720px）
14. `03_desktop_section_13.png` （y=10530px）

---

## 3. 组件规范 Components

> 自动数据无法推断「组件契约」——需要人工/AI 看截图归纳。
> 建议从 hero 截图 + sections 截图开始，识别 button / card / chip / nav / hero 五大件，分别给完整 CSS。

- **Button**：__待补__（看 hero 截图里的 CTA）
- **Card**：__待补__（看 section 截图里的内容卡）
- **Nav**：__待补__（看 hero 顶部）
- **Hero**：__待补__（首屏 02_desktop_hero.png）
- **Input**：__待补__（如有 form）

---

## 4. 页面结构

Section 顺序（从 03_desktop_section_*.png 看）：

1. ![](./03_desktop_section_00.png)
2. ![](./03_desktop_section_01.png)
3. ![](./03_desktop_section_02.png)
4. ![](./03_desktop_section_03.png)
5. ![](./03_desktop_section_04.png)
6. ![](./03_desktop_section_05.png)
7. ![](./03_desktop_section_06.png)
8. ![](./03_desktop_section_07.png)
9. ![](./03_desktop_section_08.png)
10. ![](./03_desktop_section_09.png)
11. ![](./03_desktop_section_10.png)
12. ![](./03_desktop_section_11.png)
13. ![](./03_desktop_section_12.png)
14. ![](./03_desktop_section_13.png)

---

## 5. CSS Variables（可直接粘进 `:root`）

```css
:root {
  --bg: #F7F8F8;
  --bg-soft: #62666D;
  --ink: #08090A;
  --muted: #62666D;

  --font-display: "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-body: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-body: 16px;
  --fs-small: 14px;
  --fs-h3: 13.3333px;
  --fs-h2: 13px;
  --fs-h1: 12px;
  --fs-display: 15px;
}
```


该站原 :root 自带的 CSS 变量（供对照）：

```css
  --btn-overlay-shadow-hover: none;
  --x1cxqmhc: ;
  --x15hezws: transparent;
  --zoom-in: default;
  --font-variations: "opsz" auto;
  --x1wu6xkv: 12px;
  --xd1bcc1: ;
  --title-1-line-height: 1.4;
  --text-micro-size: 0.75rem;
  --font-size-title1: 2.25rem;
  --sx-1ijrdvx: #ff8849;
  --sx-1uv3w6h: #2c2d32;
  --title-3-letter-spacing: -0.012em;
  --editor-block-menu-size: 20px;
  --xn768d: 100%;
  --speed-highlightFadeOut: 0.15s;
  --xkthb5v: ;
  --diff-view-editor-font-size: ;
  --sx-138kmyo: #424449;
  --xaxo4ug: ;
```

---

## 6. 落地清单（用这份规范做新项目时）

- [ ] 把 §5 的 CSS variables 整段贴进 `:root`
- [ ] 字体：去加载 `--font-display` 和 `--font-body`（或换成同类别的开放字体）
- [ ] 间距阶按 §1.5 的高频值定 spacing token
- [ ] §1.6 圆角原则严守：如果原站 `borderRadius` top-N 全是 0/2px，新站不要加大圆角
- [ ] §1.7 阴影原则严守：如果原站无 `boxShadow`，新站靠 hairline border 而非 elevation
- [ ] §0 / §3 的语义部分（气质、组件）人工或 AI vision 补齐

---

## 7. 产物清单

- `01_desktop_full.png` （2871 KB）
- `02_desktop_hero.png` （337 KB）
- `03_desktop_section_00.png` （336 KB）
- `03_desktop_section_01.png` （621 KB）
- `03_desktop_section_02.png` （216 KB）
- `03_desktop_section_03.png` （512 KB）
- `03_desktop_section_04.png` （199 KB）
- `03_desktop_section_05.png` （239 KB）
- `03_desktop_section_06.png` （303 KB）
- `03_desktop_section_07.png` （187 KB）
- `03_desktop_section_08.png` （321 KB）
- `03_desktop_section_09.png` （370 KB）
- `03_desktop_section_10.png` （148 KB）
- `03_desktop_section_11.png` （221 KB）
- `03_desktop_section_12.png` （179 KB）
- `03_desktop_section_13.png` （200 KB）
- `04_mobile_full.png` （2903 KB）
- `05_mobile_hero.png` （408 KB）
- `DESIGN_SPEC.md` （8 KB）
- `dom.html` （195 KB）
- `elements.json` （2706 KB）
- `fonts.json` （0 KB）
- `requests.json` （25 KB）
- `sites-entry.json` （2 KB）
- `summary.json` （47 KB）

---

## 8. 已知限制

- **静态快照**：hover / active / focus 状态需要二次脚本对每个 button/a 做 `.hover()` 后再抓 styles 求差
- **JS 动效**：CSS `transition` 抓到，但 JS / Framer Motion / Three.js 动画无法反推关键帧
- **装饰素材**：手绘 SVG / 品牌图标只是引用 URL，没抠出来（也有版权风险）
- **响应式断点**：当前只跑了 1440 和 390 两个 viewport，中间断点需要补跑
- **字体推断**：类别（serif/sans/mono）准，但具体品牌（Inter vs Söhne）需要人工核对
- **数据样本偏置**：只统计可见元素，hidden / display:none 的样式不计
