# arc.net · 设计系统迁移规范

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

## 0. 风格基调

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

---

## 1. Design Tokens

### 1.1 颜色

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

| Token | Hex | 出现次数 | 用法建议 |
|---|---|---|---|
| `--bg` | `#FFFFFF` | 23 | 主页面背景 |
| `--bg-soft` | `#FFFCEC` | 52 | 次级表面 / 卡片底 |
| `--ink` | `#000000` | 51 | 正文 / 标题 |
| `--ink-soft` | `#2702C2` | 6 | 次级文字 |
| `--muted` | `#696969` | 9 | metadata / 占位 |
| `--accent` | `#FFFADD` | 20 | 唯一强调色（hover / 信号） |

### 1.2 字体

- **Display 字体**: `Marlin Soft SQ"`（类别推断：**humanist-sans**）
- **Body 字体**: `Marlin`（类别：**humanist-sans**）

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

- `Marlin` · normal · weight 800 · loaded
- `Marlin Soft Basic` · normal · weight 400 · unloaded
- `Marlin Soft Basic` · italic · weight 400 · unloaded
- `Inter` · normal · weight 400 · unloaded
- `Inter` · normal · weight 500 · loaded
- `Inter` · normal · weight 600 · loaded
- `Inter` · normal · weight 700 · loaded
- `InterVariable` · normal · weight 100 900 · loaded
- `Sohne Breit` · normal · weight 400 · unloaded
- `Sohne Breit` · normal · weight 700 · unloaded

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

| Size | 出现次数 | 推断角色 |
|---|---|---|
| 45.51px | 3 | display |
| 40px | 4 | h1 |
| 28px | 6 | h2 |
| 24px | 5 | h3 |
| 17px | 10 | body |
| 16px | 183 | small |
| 14px | 24 | caption |
| 12px | 43 | micro |

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

**Font weights:** `700` × 112, `400` × 105, `600` × 43, `500` × 20

**Line heights:** `25.5px` × 10, `29px` × 9, `28.8px` × 5, `39px` × 4, `30px` × 4

**Letter spacings:** `0.4px` × 36, `-0.28px` × 15, `-0.14px` × 9, `-1.4px` × 6, `-1.6px` × 4

### 1.5 间距

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

- `24px 24px 24px 24px` × 16
- `0px 32px 0px 32px` × 6
- `8px 10px 8px 10px` × 5
- `3px 0px 0px 0px` × 5
- `0px 24px 0px 24px` × 4

Gap（flex/grid 间距）：

- `12px` × 19
- `16px` × 8
- `8px` × 8
- `6px` × 5
- `24px` × 5

### 1.6 圆角

- `8px` × 9
- `10px` × 3

### 1.7 阴影

- `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px` × 3

### 1.8 动效 transition

- `all` × 270
- `transform 0.15s, background 0.15s` × 5
- `transform 0.15s, box-shadow 0.15s ease-out` × 3

---

## 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）

---

## 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)

---

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

```css
:root {
  --bg: #FFFFFF;
  --bg-soft: #FFFCEC;
  --ink: #000000;
  --ink-soft: #2702C2;
  --muted: #696969;
  --accent: #FFFADD;

  --font-display: "Marlin Soft SQ", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-body: Marlin, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  --fs-display: 45.51px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 24px;
  --fs-body: 17px;
  --fs-small: 16px;
  --fs-caption: 14px;
}
```


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

```css
  --fontSizes-20: 20px;
  --space-16: 16px;
  --colors-primary7: rgb(207, 56, 40);
  --colors-focusOutline: #96C4FF;
  --colors-highContrast: #000;
  --colors-students-light_grey-hover: rgb(215, 214, 196);
  --colors-primary6: rgb(250, 69, 49);
  --colors-brandOffwhite: #FFFCEC;
  --colors-secondary4: rgb(0, 130, 121);
  --colors-secondary2: rgb(0, 201, 195);
  --colors-brandDeepBlue: #2404AA;
  --colors-lowContrast: #FFF;
  --lineHeights-20: 20px;
  --colors-students-light_green: rgb(211, 224, 129);
  --space-72: 72px;
  --space-4: 4px;
  --space-40: 40px;
  --colors-primary4: rgb(252, 130, 121);
  --fonts-body: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --space-8: 8px;
```

---

## 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` （8940 KB）
- `02_desktop_hero.png` （1033 KB）
- `03_desktop_section_00.png` （1033 KB）
- `03_desktop_section_01.png` （2668 KB）
- `03_desktop_section_02.png` （2474 KB）
- `03_desktop_section_03.png` （992 KB）
- `03_desktop_section_04.png` （1283 KB）
- `03_desktop_section_05.png` （1040 KB）
- `03_desktop_section_06.png` （580 KB）
- `03_desktop_section_07.png` （1033 KB）
- `04_mobile_full.png` （5278 KB）
- `05_mobile_hero.png` （1233 KB）
- `dom.html` （195 KB）
- `elements.json` （313 KB）
- `fonts.json` （5 KB）
- `requests.json` （9 KB）
- `summary.json` （19 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 的样式不计
