# lusion.co · 设计系统迁移规范

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

## 0. 风格基调

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

---

## 1. Design Tokens

### 1.1 颜色

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

| Token | Hex | 出现次数 | 用法建议 |
|---|---|---|---|
| `--bg` | `#FFFFFF` | 71 | 主页面背景 |
| `--bg-soft` | `#F0F1FA` | 6 | 次级表面 / 卡片底 |
| `--ink` | `#000000` | 1181 | 正文 / 标题 |
| `--ink-soft` | `#0016EC` | 4 | 次级文字 |
| `--accent` | `#1A2FFB` | 6 | 唯一强调色（hover / 信号） |

### 1.2 字体

- **Display 字体**: `Aeonik`（类别推断：**humanist-sans**）
- **Body 字体**: `Aeonik`（类别：**humanist-sans**）

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

- `Aeonik` · normal · weight 400 · loaded
- `Aeonik` · normal · weight 500 · loaded
- `Aeonik` · italic · weight 400 · loaded
- `IBMPlexMono` · normal · weight 400 · loaded
- `IBMPlexMono` · normal · weight 500 · loaded
- `LusionMono` · normal · weight 400 · loaded

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

| Size | 出现次数 | 推断角色 |
|---|---|---|
| 144px | 73 | display |
| 115.2px | 29 | h1 |
| 108px | 27 | h2 |
| 43.2px | 691 | h3 |
| 21.6px | 39 | body |
| 18px | 58 | small |
| 16px | 95 | caption |
| 14.4px | 141 | micro |

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

**Font weights:** `400` × 1232, `500` × 32

**Line heights:** `49.68px` × 691, `16.56px` × 116, `18.4px` × 82, `144px` × 73, `30.24px` × 39

**Letter spacings:** `-2.304px` × 16, `-1.152px` × 13, `-2.88px` × 9

### 1.5 间距

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

- `50px 72px 50px 72px` × 7
- `411.828px 0px 0px 0px` × 5
- `411.844px 0px 0px 0px` × 5
- `16px 26px 16px 26px` × 4
- `0px 15.75px 0px 22.75px` × 2

Gap（flex/grid 间距）：

- `normal 28.8px` × 12
- `8.75px` × 2
- `14.4px` × 2

### 1.6 圆角

- `15px` × 10
- `100px` × 7
- `100%` × 6
- `87.5px` × 3
- `10px` × 3

### 1.7 阴影

- `rgba(0, 0, 0, 0.04) 0px 6px 10px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px` × 3

### 1.8 动效 transition

- `all` × 1207
- `color 0.4s, transform 0.4s cubic-bezier(0.4, 0, 0.1, 1)` × 8
- `transform 0.4s cubic-bezier(0.35, 0, 0, 1)` × 8
- `transform 0.3s cubic-bezier(0.4, 0, 0.1, 1)` × 6

---

## 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. 组件规范 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)

---

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

```css
:root {
  --bg: #FFFFFF;
  --bg-soft: #F0F1FA;
  --ink: #000000;
  --ink-soft: #0016EC;
  --accent: #1A2FFB;

  --font-display: Aeonik;

  --fs-display: 144px;
  --fs-h1: 115.2px;
  --fs-h2: 108px;
  --fs-h3: 43.2px;
  --fs-body: 21.6px;
  --fs-small: 18px;
  --fs-caption: 16px;
}
```


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

```css
  --color-grey-blue: #2b2e3a;
  --color-white: #fff;
  --vh: 9px;
  --header-color: #0016ec;
  --color-project-details-logo-color: #f0f;
  --base-padding-y: clamp(30px, 4vw, 50px);
  --color-error: #e90000;
  --project-details-btn-bg-hover: #000;
  --project-details-bg: #000;
  --global-border-radius: 20px;
  --project-details-highlight: #000;
  --color-red: #ff4c41;
  --color-off-white: #f0f1fa;
  --project-details-btn-bg: #000;
  --cross-size: clamp(.875rem, 1vw, 2rem);
  --grid-space: calc((100% - 11 * 2vw) / 12);
  --color-black: #000000;
  --header-size: clamp(1rem, 1vw, 2rem);
  --project-details-icon-bg: #000;
  --color-green: #c1ff00;
```

---

## 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` （1940 KB）
- `02_desktop_hero.png` （2082 KB）
- `03_desktop_section_00.png` （2045 KB）
- `03_desktop_section_01.png` （2034 KB）
- `04_mobile_full.png` （933 KB）
- `05_mobile_hero.png` （922 KB）
- `dom.html` （105 KB）
- `elements.json` （1189 KB）
- `fonts.json` （1 KB）
- `requests.json` （13 KB）
- `summary.json` （12 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 的样式不计
