# press.stripe.com · 设计系统迁移规范

> 来源：https://press.stripe.com
> 抓取日期：2026-05-28
> 可见元素分析样本：216 个

## 0. 风格基调

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

---

## 1. Design Tokens

### 1.1 颜色

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

| Token | Hex | 出现次数 | 用法建议 |
|---|---|---|---|
| `--bg` | `#FFFFFF` | 85 | 主页面背景 |
| `--bg-soft` | `#D0D1D4` | 5 | 次级表面 / 卡片底 |
| `--ink` | `#000000` | 36 | 正文 / 标题 |
| `--ink-soft` | `#201819` | 4 | 次级文字 |
| `--muted` | `#504F4F` | 5 | metadata / 占位 |
| `--accent` | `#DFC78E` | 5 | 唯一强调色（hover / 信号） |

### 1.2 字体

- **Display 字体**: `Ivar Headline`（类别推断：**transitional-serif**）
- **Body 字体**: `Ivar Text"`（类别：**transitional-serif**）

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

- `Ivar Display` · normal · weight 700 · loaded
- `Ivar Display` · italic · weight 400 · loaded
- `Ivar Display` · normal · weight 500 · unloaded
- `Ivar Display` · italic · weight 500 · loaded
- `Ivar Headline` · normal · weight 500 · loaded
- `Ivar Headline` · normal · weight 600 · loaded
- `Ivar Headline` · italic · weight 600 · loaded
- `Ivar Text` · italic · weight 400 · loaded
- `Ivar Text` · normal · weight 500 · loaded
- `Ivar Text` · italic · weight 500 · loaded

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

| Size | 出现次数 | 推断角色 |
|---|---|---|
| 25px | 3 | display |
| 21px | 2 | h1 |
| 17px | 72 | h2 |
| 16px | 120 | h3 |
| 15px | 8 | body |
| 14px | 9 | small |

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

**Font weights:** `600` × 100, `400` × 63, `500` × 53

**Line heights:** `16px` × 58, `24px` × 38, `19.6px` × 9, `21px` × 2, `37.5px` × 2

**Letter spacings:** `0.32px` × 172

### 1.5 间距

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

- `0px 103.6px 0px 103.6px` × 19
- `5px 0px 5px 0px` × 19
- `24.4px 24.4px 24.4px 24.4px` × 2

Gap（flex/grid 间距）：


### 1.6 圆角

- `2px` × 2

### 1.7 阴影

**零阴影** —— 不靠 elevation 建层级（纯 hairline border / 留白）

### 1.8 动效 transition

- `all` × 150
- `opacity 0.2s` × 22
- `transform 0.2s` × 19
- `opacity 0.5s` × 2

---

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

---

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

---

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

```css
:root {
  --bg: #FFFFFF;
  --bg-soft: #D0D1D4;
  --ink: #000000;
  --ink-soft: #201819;
  --muted: #504F4F;
  --accent: #DFC78E;

  --font-display: "Ivar Headline";
  --font-body: "Ivar Text", Georgia;

  --fs-body: 16px;
  --fs-small: 17px;
  --fs-h3: 14px;
  --fs-h2: 15px;
  --fs-h1: 25px;
  --fs-display: 21px;
}
```


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

```css
  --textColor: ;
  --vh: 1vh;
  --scrollbarWidth: 0px;
  --screenHeight: 100%;
  --bodyMargin: calc(10px + 1vw);
  --windowWidth: calc(100vw - 0px);
```

---

## 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` （1895 KB）
- `02_desktop_hero.png` （1538 KB）
- `03_desktop_section_00.png` （1538 KB）
- `03_desktop_section_01.png` （2228 KB）
- `03_desktop_section_02.png` （2489 KB）
- `03_desktop_section_03.png` （2523 KB）
- `03_desktop_section_04.png` （2277 KB）
- `03_desktop_section_05.png` （1378 KB）
- `03_desktop_section_06.png` （1704 KB）
- `03_desktop_section_07.png` （252 KB）
- `03_desktop_section_08.png` （207 KB）
- `04_mobile_full.png` （2948 KB）
- `05_mobile_hero.png` （2008 KB）
- `DESIGN_SPEC.md` （6 KB）
- `dom.html` （196 KB）
- `elements.json` （222 KB）
- `fonts.json` （1 KB）
- `requests.json` （29 KB）
- `sites-entry.json` （2 KB）
- `summary.json` （14 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 的样式不计
