# www.apple.com · 设计系统迁移规范

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

## 0. 风格基调

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

---

## 1. Design Tokens

### 1.1 颜色

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

| Token | Hex | 出现次数 | 用法建议 |
|---|---|---|---|
| `--bg` | `#F5F5F7` | 33 | 主页面背景 |
| `--bg-soft` | `#E8E8ED` | 224 | 次级表面 / 卡片底 |
| `--ink` | `#000000` | 22 | 正文 / 标题 |
| `--ink-soft` | `#1D1D1F` | 466 | 次级文字 |
| `--accent` | `#2997FF` | 149 | 唯一强调色（hover / 信号） |

### 1.2 字体

- **Display 字体**: `SF Pro Text"`（类别推断：**humanist-sans**）
- **Body 字体**: `SF Pro Text"`（类别：**humanist-sans**）

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

- `Apple Legacy Chevron` · normal · weight 100 · unloaded
- `Apple Icons 100` · normal · weight normal · unloaded
- `Apple Legacy Chevron` · normal · weight 200 · unloaded
- `Apple Icons 200` · normal · weight normal · unloaded
- `Apple Legacy Chevron` · normal · weight 300 · unloaded
- `Apple Icons 300` · normal · weight normal · unloaded
- `Apple Legacy Chevron` · normal · weight 400 · unloaded
- `Apple Icons 400` · normal · weight normal · unloaded
- `Apple Legacy Chevron` · normal · weight 500 · unloaded
- `Apple Icons 500` · normal · weight normal · unloaded

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

| Size | 出现次数 | 推断角色 |
|---|---|---|
| 56px | 4 | display |
| 44px | 22 | h1 |
| 40px | 15 | h2 |
| 24px | 141 | h3 |
| 21px | 23 | body |
| 17px | 488 | small |
| 14px | 27 | caption |
| 12px | 640 | micro |

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

**Font weights:** `400` × 887, `600` × 471, `700` × 6

**Line heights:** `16.0005px` × 588, `25px` × 489, `28px` × 140, `12px` × 52, `44px` × 37

**Letter spacings:** `-0.12px` × 662, `-0.374px` × 431, `0.216px` × 141, `-0.224px` × 27, `0.231px` × 23

### 1.5 间距

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

- `7px 11px 7px 11px` × 123
- `9px 11px 7px 11px` × 70
- `9.6px 0px 0px 0px` × 30
- `0px 44px 0px 0px` × 20
- `8px 15px 8px 15px` × 16

Gap（flex/grid 间距）：

- `normal 0px` × 5
- `normal 17px` × 3
- `12px` × 2

### 1.6 圆角

- `980px` × 31
- `5px` × 5
- `8px` × 3

### 1.7 阴影

- `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` × 3

### 1.8 动效 transition

- `all` × 880
- `color 0.32s cubic-bezier(0.4, 0, 0.6, 1)` × 207
- `opacity 0.24s, transform 0.24s` × 98
- `opacity 0.22s, transform 0.22s` × 23

---

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

---

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

---

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

```css
:root {
  --bg: #F5F5F7;
  --bg-soft: #E8E8ED;
  --ink: #000000;
  --ink-soft: #1D1D1F;
  --accent: #2997FF;

  --font-display: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-display: 56px;
  --fs-h1: 44px;
  --fs-h2: 40px;
  --fs-h3: 24px;
  --fs-body: 21px;
  --fs-small: 17px;
  --fs-caption: 14px;
}
```


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

```css
  --r-localnav-text-zoom-factor: 1;
  --r-localnav-viewport-small-min-width: 320px;
  --r-globalnav-background-opened: #fafafc;
  --hero-content-height: 692px;
  --sk-productred: rgb(175, 30, 45);
  --sk-footnote-reduced-offset-top: -.86em;
  --sk-enviro-green: rgb(0, 217, 89);
  --sk-body-text-color: rgb(29, 29, 31);
  --sk-body-font-stack: text;
  --sk-fill-secondary: rgb(250, 250, 252);
  --sk-fill-tertiary: rgb(245, 245, 247);
  --r-localnav-viewport-medium-min-width: 834px;
  --globalnav-height: 44px;
  --sk-fill-orange-secondary: rgb(255, 249, 244);
  --sk-link-disabled-opacity: 0.42;
  --media-gallery-dotnav-gap: 12px;
  --sk-footnote-font-size: 0.6em;
  --sk-fill-gray-secondary: rgb(134, 134, 139);
  --sk-fill-red: rgb(227, 0, 0);
  --sk-fill-green-secondary: rgb(245, 255, 246);
```

---

## 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` （8381 KB）
- `02_desktop_hero.png` （2039 KB）
- `03_desktop_section_00.png` （2039 KB）
- `03_desktop_section_01.png` （258 KB）
- `03_desktop_section_02.png` （1668 KB）
- `03_desktop_section_03.png` （1971 KB）
- `03_desktop_section_04.png` （1432 KB）
- `03_desktop_section_05.png` （5174 KB）
- `03_desktop_section_06.png` （847 KB）
- `03_desktop_section_07.png` （941 KB）
- `03_desktop_section_08.png` （929 KB）
- `03_desktop_section_09.png` （949 KB）
- `03_desktop_section_10.png` （937 KB）
- `03_desktop_section_11.png` （738 KB）
- `03_desktop_section_12.png` （550 KB）
- `04_mobile_full.png` （11227 KB）
- `05_mobile_hero.png` （804 KB）
- `DESIGN_SPEC.md` （8 KB）
- `dom.html` （195 KB）
- `elements.json` （1585 KB）
- `fonts.json` （12 KB）
- `requests.json` （14 KB）
- `sites-entry.json` （2 KB）
- `summary.json` （30 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 的样式不计
