# UI-DESIGNER 官网 · UI 设计规范

> **本文件是 AI 写样式的唯一事实来源。** 写任何 UI 代码前先读第 2/3/4 节，并把第 12 节的 CSS 变量先落到项目里。
> 文件中凡标 【推断】 的值为参考规范未明确、由工具推得的默认值，可改；凡标 【待补】 的表示参考规范没有、需你拍板。

## 0. 元信息

| 项 | 值 |
|---|---|
| 项目 | UI-DESIGNER 官网 |
| 技术栈 | HTML + CSS + 原生 JavaScript（静态站） |
| 规范来源 | preset：`figma`（Figma） |
| 模式 | 亮色 |
| 生成日期 | 2026-09-09 |
| 状态 | draft — 预览确认后改为 confirmed |

## 1. 设计原则

> 冲突时按本节顺序裁决：排在前面的优先。

1. Monochrome system core: `#000000` (black) and `#ffffff` (white) carry every CTA, every body line, every footer link.
2. Oversized pastel **color-block sections** (`#dceeb1`, `#c5b0f4`, `#f4ecd6`, `#c8e6cd`, `#efd4d4`, `#f3c9b6`, `#1f1d3d`) define the narrative rhythm of every long-form page.
3. Pill is the only button shape：`50px` for text CTAs, `9999px` for icon buttons. No square buttons anywhere.
4. `figmaSans` variable typeface used at unusually fine weight increments (320, 330, 340, 450, 480, 540)：the type system reads as a single voice that flexes rather than a multi-weight family.
5. Tight negative letter-spacing on display sizes (-1.72px at 86px, -0.96px at 64px) creates a confident editorial cadence.

> 以上由 `figma` 的 Key Characteristics 提炼，可改写。

## 2. 色彩系统

### 2.1 语义色板

| token | 值 | 与画布对比度 | 色相 | 用途 |
|---|---|---|---|---|
| `--color-canvas` | `#ffffff` | 1.00:1 | neutral | 页面底色 |
| `--color-surface-1` | `#f7f7f5` | 1.07:1 | neutral | 卡片/面板（默认抬升） |
| `--color-surface-2` | `#ebebeb` | 1.19:1 | neutral | 【推断】 悬浮态、选中卡片 |
| `--color-surface-3` | `#e0e0e0` | 1.32:1 | neutral | 【推断】 下拉/弹层（最高层级） |
| `--color-ink` | `#000000` | 21.00:1 | neutral | 标题与正文 |
| `--color-ink-muted` | `#4c4c4c` | 8.59:1 | neutral | 【推断】 次级说明文字 |
| `--color-ink-subtle` | `#858585` | 3.69:1 | neutral | 【推断】 占位符、页脚、辅助信息 |
| `--color-hairline` | `#e6e6e6` | 1.25:1 | neutral | 1px 分隔线与描边 |
| `--color-hairline-soft` | `#f1f1f1` | 1.13:1 | neutral | 极浅分隔线（表格行、tab 默认态描边），取自 figma `--hairline-soft` |
| `--color-primary` | `#000000` | 21.00:1 | neutral | **主 CTA、焦点环、关键链接——除此以外不得使用**；禁止用作区块背景、卡片填充、装饰色块 |
| `--color-primary-hover` | `#242424` | 15.52:1 | neutral | 【推断】 主 CTA hover / active |
| `--color-on-primary` | `#ffffff` | 1.00:1 | neutral | 主 CTA 上的文字与图标 |
| `--color-inverse-canvas` | `#000000` | 21.00:1 | neutral | 反色块背景（强调条、逆色 CTA） |
| `--color-inverse-ink` | `#ffffff` | 1.00:1 | neutral | 反色块上的文字 |
| `--color-success` | `#1ea64a` | 3.18:1 | green | 成功态 |
| `--color-warning` | `#9a6700` | 4.87:1 | orange | 【推断】 警告态 |
| `--color-danger` | `#cf222e` | 5.36:1 | red | 【推断】 错误/危险态 |

### 2.1b 招牌彩色故事区块（figma color-block）

figma 的招牌是「黑白编辑式骨架 + 超大柔和色块」的节奏。以下色块用于 story 区块（`color-block-section`），取自 figma 原文 Components 章节，来源 `references/design-systems/figma/DESIGN.md`。

**形态校正（以 `references/design-systems/figma/preview.html` 源码为准）**：色块不是全宽 band，而是
**soft 灰底（`--color-surface-1` = figma `--surface-soft` #f7f7f5）section 内的圆角卡网格**：

```css
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
.block      { border-radius: 24px; padding: 48px; min-height: 220px;
              display: flex; flex-direction: column; justify-content: space-between; }
/* eyebrow 11px mono / 标题 26px·600·ls -0.26px·lh 1.35 / 正文 16px / 底部 pill 按钮 */
```

| token | 值 | 用途 |
|---|---|---|
| `--color-block-lime` | `#dceeb1` | systems / FAQ / 联系表单 story |
| `--color-block-lilac` | `#c5b0f4` | 设计页 hero / 发布说明 promo |
| `--color-block-cream` | `#f4ecd6` | FigJam hero 条 / 模板网格 |
| `--color-block-mint` | `#c8e6cd` | FigJam 柔和区 |
| `--color-block-pink` | `#efd4d4` | FigJam 柔和区 |
| `--color-block-coral` | `#f3c9b6` | 「Ship products」故事块 |
| `--color-block-navy` | `#1f1d3d` | 深靛故事块（唯一出现在页脚之上的暗色块） |
| `--color-accent-magenta` | `#ff3d8b` | 单一促销 CTA 粉，每页最多一处，非区块色 |

> 规则：色块成组出现在**同一个 `.story-grid` 网格**内，网格所在 section 用 soft 灰底；网格之间回到白画布（≥ `--space-section`）；禁止给色块加投影；单视口内同时可见的色块网格不超过一个。

### 2.2 明暗模式

当前采用 **亮色** 画布（`#ffffff`）。

层级策略：亮色靠**极浅投影 + 1px 描边**表达层级，不要叠加深色阴影。

### 2.3 对比度承诺

| 组合 | 实测 | 要求 | 结论 |
|---|---|---|---|
| `ink` on `canvas` | 21.00:1 | 4.5:1 | 通过 |
| `ink-muted` on `canvas` | 8.59:1 | 4.5:1 | 通过 |
| `ink-subtle` on `canvas` | 3.69:1 | 3.0:1 | 通过 |
| `on-primary` on `primary` | 21.00:1 | 4.5:1 | 通过 |
| `primary` on `canvas` | 21.00:1 | 3.0:1 | 通过 |

## 3. 字体系统

### 3.1 字族与加载

| token | 参考规范原字体 | 本项目采用 | CSS font-family | 说明 |
|---|---|---|---|---|
| `--font-display` | figmaSans | figmaSans | "figmaSans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif | 原文即此字体 |
| `--font-body` | figmaSans | figmaSans | "figmaSans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif | 原文即此字体 |
| `--font-mono` | figmaMono | JetBrains Mono | "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace | 【推断】 替换 |

### 3.2 字阶

| token | 字号 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
| `--text-display` | 86px | 340 | 1.00 | -1.72px | 首屏最大标题，一屏只用一次 |
| `--text-h1` | 26px | 540 | 1.35 | -0.26px | 页面主标题 |
| `--text-h2` | 26px | 340 | 1.35 | -0.26px | 区块标题 |
| `--text-h3` | 24px | 700 | 1.45 | 0 | 卡片标题 / 小标题 |
| `--text-body-lg` | 20px | 330 | 1.40 | -0.14px | 导语、大段正文 |
| `--text-button` | 20px | 480 | 1.40 | -0.10px | 按钮文字 |
| `--text-body` | 18px | 320 | 1.45 | -0.26px | 默认正文 |
| `--text-eyebrow` | 18px | 400 | 1.30 | 0.54px | 区块小标签 |
| `--text-body-sm` | 16px | 330 | 1.45 | -0.14px | 卡片正文、侧栏 |
| `--text-caption` | 12px | 400 | 1.00 | 0.60px | 辅助说明、页脚 |

### 3.3 排印规则

- **Weight, not size, carries hierarchy on body copy.** A 20px paragraph at weight 330 sits next to a 20px link at weight 480 — the eye reads emphasis without scale change.
- **Negative letter-spacing scales with size.** Display-xl pulls -1.72px; subhead pulls only -0.26px. Body copy stays near-zero. The result is editorial-feeling display type without sacrificing readability at body size.
- **Mono is taxonomy, not body.** figmaMono is reserved for eyebrows and captions — never used to set a paragraph.
- **Tight line-heights on display, generous on body.** Display sizes run 1.00–1.10; body runs 1.40–1.45. The contrast reinforces that headlines are graphics and body copy is for reading.

## 4. 尺度系统

### 4.1 间距刻度

| token | 值 |
|---|---|
| `--space-hair` | 1px |
| `--space-xxs` | 4px |
| `--space-xs` | 8px |
| `--space-sm` | 12px |
| `--space-md` | 16px |
| `--space-lg` | 24px |
| `--space-xl` | 32px |
| `--space-xxl` | 48px |
| `--space-section` | 96px |

语义别名（AI 优先用这三个）：

| token | 值 | 用途 |
|---|---|---|
| `--space-gap` | 12px | 组件内元素间距 |
| `--space-pad` | 24px | 卡片内边距 |
| `--space-section` | 96px | 页面区块之间的垂直节奏 |

### 4.2 圆角刻度

| token | 值 |
|---|---|
| `--radius-xs` | 2px |
| `--radius-sm` | 6px |
| `--radius-md` | 8px |
| `--radius-lg` | 24px |
| `--radius-xl` | 32px |
| `--radius-pill` | 50px |
| `--radius-full` | 9999px |

语义别名：

| token | 值 | 用途 |
|---|---|---|
| `--radius-control` | 8px | 按钮、输入框、下拉 |
| `--radius-card` | 24px | 卡片、面板、弹层 |
| `--radius-pill` | 9999px | 标签、开关、分段控件 |

### 4.3 阴影与层级

| 层级 | 写法 |
|---|---|
| level-1 | box-shadow: 0 1px 2px rgba(16,24,40,.06); border: 1px solid var(--color-hairline); |
| level-2 | box-shadow: 0 4px 12px rgba(16,24,40,.08); border: 1px solid var(--color-hairline); |
| level-3 | box-shadow: 0 12px 32px rgba(16,24,40,.12); border: 1px solid var(--color-hairline); |
| focus | outline: 2px solid var(--color-primary); outline-offset: 2px; |

> 【推断】 由画布明暗推导：亮色用浅投影 + 描边。

### 4.4 描边

| token | 值 | 用途 |
|---|---|---|
| `--border-hairline` | 1px solid var(--color-hairline) | 卡片、分隔线、输入框默认描边 |
| `--border-strong` | 1px solid var(--color-ink-subtle) | hover 态描边、需要强调的边界 |
| `--border-focus` | 2px solid var(--color-primary) | focus-visible 焦点环 |

### 4.5 动效

| token | 值 | 用途 |
|---|---|---|
| `--duration-fast` | 120ms | hover、颜色过渡 |
| `--duration-base` | 200ms | 展开/收起、位移 |
| `--duration-slow` | 320ms | 弹层、页面级转场 |
| `--ease` | cubic-bezier(0.4, 0, 0.2, 1) | 统一缓动曲线 |

> 【推断】 参考规范未给出动效时长，采用 120/200/320ms 通用档位。

## 5. 布局与栅格

**Spacing System**
- **Base unit**: 8px.
- **Tokens (front matter)**: `1px` · `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px` · `96px`.
- Section interior padding: `48px` on color-block sections.
- Card interior padding: `24px` on pricing cards and template tiles.
- Form input padding: `12px` vertical · 14px horizontal.
- Button padding: `8px` vertical · `24px` horizontal for pill buttons (the asymmetric `8px 18px 10px` extracted on `button-secondary` nudges the type optically inside the pill).
- Universal rhythm constant: `96px` — the vertical gap between major content sections holds across home, pricing, and FigJam pages.
**Grid & Container**
- Max content width sits around 1280px (one of the explicit breakpoints), with side gutters that scale from `48px` on desktop down to `24px` on mobile.
- Three- and four-column grids on the desktop pricing comparison and FigJam template galleries.
- Color-block sections break the column grid — they span content width with full bleed inside the rounded `24px` corners, then place a single editorial column of headline + body inside.
**Whitespace Philosophy**
White space is used to make the color blocks feel deliberate. Between every colored panel and the next, the page returns to white canvas with `96px` of breathing room. Inside a color block, the type itself is given generous side margins (often more than 1/4 of the block's width on each side) so the panel reads as a poster, not a wall of copy.

## 6. 组件规格

> 每个组件的 DOM 结构固定；调视觉只改 token 值，不改结构。状态必须实现齐全。

通用口径：控件圆角 `8px`（--radius-control）、卡片圆角 `24px`（--radius-card）、按钮字号 `20px`、卡片内边距 24px、元素间距 `12px`。

### 6.1 Button

结构：`<button class="btn btn--primary">文字</button>`（图标为可选 `<span class="btn__icon">`）

| 变体 | 背景 | 文字 | 描边 | 圆角 | 内距 |
|---|---|---|---|---|---|
| primary | `var(--color-primary)` | `var(--color-on-primary)` | 无 | 8px | 8px 16px |
| secondary | `var(--color-surface-1)` | `var(--color-ink)` | hairline | 8px | 8px 16px |
| ghost | transparent | `var(--color-ink-muted)` | 无 | 8px | 8px 16px |
| danger | `var(--color-danger)` | #ffffff | 无 | 8px | 8px 16px |

状态（每个变体都必须实现）：

| 状态 | 规则 |
|---|---|
| hover | primary 换成 `--color-primary-hover`；secondary/ghost 换成 surface-2 |
| active | primary 再压暗 8%；其余降到 surface-1 |
| focus-visible | `outline: 2px solid var(--color-primary); outline-offset: 2px`——**禁止去掉** |
| disabled | 背景 surface-1，文字 ink-subtle，`cursor: not-allowed`，去掉 hover |
| loading | 文字换成 spinner，宽度保持不变，禁用点击 |

### 6.2 Card

结构：`<div class="card"><div class="card__head">…</div><div class="card__body">…</div></div>`

| 属性 | 值 |
|---|---|
| 背景 | `var(--color-surface-1)` |
| 描边 | `1px solid var(--color-hairline)` |
| 圆角 | 24px |
| 内距 | 24px |
| 标题 | `--text-h3` / `var(--color-ink)` |
| 正文 | `--text-body` / `var(--color-ink-muted)` |
| hover | 背景升到 surface-2，描边保持 hairline（暗色禁止加投影） |
| 可选态 | 选中时描边换成 `--color-primary`，不加粗、不变形 |

### 6.3 Input

结构：`<label class="field"><span class="field__label">…</span><input class="field__input"></label>`

| 状态 | 背景 | 文字 | 描边 |
|---|---|---|---|
| rest | `var(--color-surface-1)` | `var(--color-ink)` | hairline |
| placeholder | — | `var(--color-ink-subtle)` | — |
| focus | surface-1 | ink | `2px solid var(--color-primary)` |
| error | surface-1 | ink | `1px solid var(--color-danger)` |
| disabled | canvas | ink-subtle | hairline |

高度 ≥ 44px（触屏），内距 `10px 12px`，圆角 `8px`，label 用 `--text-caption`。

### 6.4 Badge / Tag

| 类型 | 背景 | 文字 | 圆角 | 内距 |
|---|---|---|---|---|
| neutral | `var(--color-surface-2)` | `var(--color-ink-muted)` | 9999px | 2px 8px |
| success | success 15% 透明 | `var(--color-success)` | 9999px | 2px 8px |
| warning | warning 15% 透明 | `var(--color-warning)` | 9999px | 2px 8px |
| danger | danger 15% 透明 | `var(--color-danger)` | 9999px | 2px 8px |

字号 `--text-caption`，字重 500。语义色只做 15% 底 + 原色文字，不用实心块。

### 6.5 Nav / Shell

| 元素 | 规格 |
|---|---|
| 顶栏 | 高 56–64px，背景 canvas，底部 1px hairline，滚动时可加毛玻璃 |
| 导航项 | `--text-body-sm`，默认 ink-muted，hover/current 为 ink，current 可加 2px primary 下划线 |
| 侧边栏 | 宽 240px，背景 canvas，右hairline；选中项背景 surface-2 + ink |
| 页脚 | 背景 canvas，上hairline，文字 ink-subtle，字号 caption，内距 64px 32px |
| 弹层/Modal | 遮罩 color-mix(in srgb, var(--color-canvas) 70%, #000)；面板 surface-3 + level-3 阴影，圆角 card |

### 6.6 参考规范自带的组件（原文取值）

| 组件 | 背景 | 文字 | 圆角 | 内距/高度 |
|---|---|---|---|---|
| `button-primary` | #000000 | #ffffff | 50px | 10px 20px |
| `button-primary-pressed` | #000000 | #ffffff | 50px | — |
| `button-secondary` | #ffffff | #000000 | 50px | 8px 18px 10px |
| `button-tertiary-text` | #ffffff | #000000 | 9999px | 8px 12px |
| `button-icon-circular` | #f7f7f5 | #000000 | 9999px | — |
| `button-icon-circular-inverse` | #ffffff | #ffffff | 9999px | — |
| `button-magenta-promo` | #ff3d8b | #ffffff | 50px | 10px 18px |
| `pricing-tab-default` | #ffffff | #000000 | 50px | 8px 18px |
| `pricing-tab-selected` | #000000 | #ffffff | 50px | 8px 18px |
| `text-input` | #ffffff | #000000 | 8px | 12px 14px |
| `text-input-focused` | #ffffff | #000000 | 8px | 12px 14px |
| `pricing-card` | #ffffff | #000000 | 24px | 24px |
| `pricing-card-feature-row` | #ffffff | #000000 | 2px | — |
| `color-block-section` | #dceeb1 | #000000 | 24px | 48px |
| `color-block-section-lilac` | #c5b0f4 | #000000 | 24px | 48px |
| `color-block-section-navy` | #1f1d3d | #ffffff | 24px | 48px |
| `promo-banner-lilac` | #c5b0f4 | #000000 | 8px | 16px 24px |
| `template-card` | #f7f7f5 | #000000 | 8px | 16px |
| `feature-illustration-tile` | #f7f7f5 | #000000 | 8px | 24px |
| `top-nav` | #ffffff | #000000 | 2px | 56px |
| `marquee-strip` | #000000 | #ffffff | 2px | 36px |
| `comparison-checkmark` | #ffffff | #1ea64a | 9999px | — |
| `footer` | #ffffff | #000000 | 2px | 64px 32px |

> 完整语义见 `references/design-systems/figma/DESIGN.md` 的 Components 章节。

## 7. 图标与图像

- Image frames use `8px` — generous enough to feel friendly, conservative enough to read as editorial.
- Template thumbnails on the home grid sit in `8px` tiles with `16px` interior padding around the embedded preview.
- FigJam pastel sticky-note component thumbnails preserve a small `6px` corner that mimics actual sticky paper.
- No avatar circles appear in marketing surfaces — Figma's marketing avoids personification.

## 8. 响应式

**Breakpoints**
| Name | Width | Key Changes |
|---|---|---|
| 4k | 1920px | Max content width holds at 1280px; gutters expand |
| Desktop-XL | 1440px | Default desktop layout |
| Desktop | 1400px | Comparison table column widths normalize |
| Desktop-S | 1280px | Pricing 4-up tier grid maintained |
| Tablet | 960px | Pricing collapses 4-up → 2-up; nav becomes hamburger |
| Mobile-L | 768px | Color-block sections become full-bleed (no rounded corners on edges) |
| Mobile | 560px | Display-xl reduces from 86px to ~48px; pill CTAs go full-width |
| Mobile-XS | 559px | Two-column footer collapses to single column |
**Touch Targets**
- Pill buttons (`button-primary`, `button-secondary`) maintain a minimum 44px tap height across all viewports — achieved by combining `20px` line-height with the documented vertical padding.
- Circular icon buttons (`button-icon-circular`) are 40px on desktop and grow to 44px on touch viewports.
- Form input minimum tap target on `/contact/` is 48px high.
**Collapsing Strategy**
- **Nav**: desktop horizontal nav with two right-anchored pills collapses to a hamburger overlay below 960px. The two pills (`Contact sales`, `Get started for free`) stay visible on the bar above 560px and stack in the overlay below.
- **Pricing tier grid**: 4-up → 2-up at 960px → 1-up below 768px. The pill toggle stays horizontal and scrolls horizontally if needed below 560px.
- **Color-block sections**: above 768px the section keeps `48px` of canvas around it so the rounded corners read; below 768px the corners are removed and the block bleeds to viewport edge for a poster effect.
- **Comparison table**: below 960px the matrix collapses into per-tier accordions to avoid horizontal scroll.
**Image Behavior**
- Product UI mocks inside color blocks scale proportionally and never crop. Below 768px they shrink rather than reflow.
- Template thumbnails in the home grid use lazy loading and animate in on scroll.
- Sticky-note style FigJam thumbnails maintain their slight off-axis rotation across breakpoints — the rotation is a brand signal, not a desktop-only flourish.

## 9. 可访问性

- 正文对比度 ≥ 4.5:1，大字（≥24px 或 ≥19px 粗体）≥ 3:1。当前画布 `#ffffff`，正文 `#000000` 实测 21.00:1。
- 所有交互元素必须有可见 focus-visible 焦点环，禁止 `outline: none`。
- 颜色不是唯一信息载体：状态必须同时有文字或图标。
- 表单控件必须有关联 `<label>`；错误提示用 `--color-danger` + 文案。
- 动效尊重 `prefers-reduced-motion: reduce`，关闭位移动画，仅保留颜色过渡。
- 语义化标签优先：`button` / `nav` / `main` / `h1–h3` 按层级使用，不要跳级。

## 10. Do's & Don'ts

### Do

- Reserve `#000000` for genuine primary CTAs and selected states (e.g., `pricing-tab-selected`). Don't use it as a decorative accent.
- When introducing a story section, choose **one** color block from the `{colors.block-*}` family and let it span full content width with `24px` corners and `48px` interior padding.
- Keep type in `figmaSans` at variable weights — pick from 320, 330, 340, 480, 540, 700 to express hierarchy. Avoid intermediate weights outside this set.
- Use `figmaMono` only for eyebrows and captions, always uppercase, with the documented positive letter-spacing.
- Compose every CTA as a pill (`50px`) and every icon button as a circle (`9999px`).
- Allow the page to **return to white canvas** between every two color blocks so each block reads as deliberate.
- Pair `button-primary` and `button-secondary` whenever a section needs both a primary action and a sales / secondary action — the black-and-white pair is the brand signature.

### Don't

- Don't introduce mid-gray text. Body hierarchy comes from `figmaSans` weight, not from opacity.
- Don't add drop shadows to color-block sections — the color is the depth device.
- Don't introduce new accent colors outside the documented `{colors.block-*}` palette and `#ff3d8b`. Adding, e.g., a saturated brand orange would break the system.
- Don't combine more than one color block visible inside a single viewport — Figma's pacing always lets the white canvas separate them.
- Don't square off CTAs. Square buttons read as a different brand.
- Don't put `figmaMono` in body copy — it's a taxonomy tool, not a reading typeface.
- Don't replace the `pricing-tab-selected` black fill with a colored tab; the brand pattern is "selected = primary surface".

## 11. AI 开发契约（硬规则）

1. **先读后写**：写第一条样式前已读完第 2/3/4 节，第 12 节的 CSS 变量已落地。
2. **零硬编码**：颜色、字号、字重、行高、圆角、间距、阴影、时长一律用 `var(--token)`。
3. **先加 token 再用值**：需要本文件没有的值时，先在第 2/3/4 节新增 token 并写清用途，再在代码里引用。
4. **状态齐全**：交互组件必须实现 rest / hover / active / focus-visible / disabled，异步组件额外实现 loading。
5. **强调色稀缺**：`--color-primary` 只给主 CTA、焦点环、关键链接；其余靠中性色与表面层级区分。
6. **刻度内取值**：圆角与间距只允许取第 4 节的刻度值，禁止 13px、7px 这类自由值。
7. **先补规格后实现**：本文件第 6 节没有的组件，先补规格再写代码。
8. **结构不可改**：第 6 节给定的 DOM 结构不允许顺手重构，视觉问题一律通过改 token 解决。
9. **交付前自查**：每个页面/组件完成后，照第 10 节逐条过一遍。
10. **改了规范要回写**：实现中若发现 token 不合理，先改本文件再改代码，保持二者一致。

## 12. CSS 变量（可直接复制）

```css
:root {

  /* ---- 色彩 ---- */
  --color-canvas: #ffffff;
  --color-surface-1: #f7f7f5;
  --color-surface-2: #ebebeb;
  --color-surface-3: #e0e0e0;
  --color-ink: #000000;
  --color-ink-muted: #4c4c4c;
  --color-ink-subtle: #858585;
  --color-hairline: #e6e6e6;
  --color-hairline-soft: #f1f1f1;
  --color-primary: #000000;
  --color-primary-hover: #242424;
  --color-on-primary: #ffffff;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #ffffff;
  --color-success: #1ea64a;
  --color-warning: #9a6700;
  --color-danger: #cf222e;

  /* ---- figma 招牌彩色故事区块 ---- */
  --color-block-lime: #dceeb1;
  --color-block-lilac: #c5b0f4;
  --color-block-cream: #f4ecd6;
  --color-block-mint: #c8e6cd;
  --color-block-pink: #efd4d4;
  --color-block-coral: #f3c9b6;
  --color-block-navy: #1f1d3d;
  --color-accent-magenta: #ff3d8b;

  /* ---- 字体与字阶 ---- */
  --font-display: "figmaSans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "figmaSans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display-size: 86px;
  --text-display-weight: 340;
  --text-display-lh: 1.00;
  --text-display-ls: -1.72px;
  --text-h1-size: 26px;
  --text-h1-weight: 540;
  --text-h1-lh: 1.35;
  --text-h1-ls: -0.26px;
  --text-h2-size: 26px;
  --text-h2-weight: 340;
  --text-h2-lh: 1.35;
  --text-h2-ls: -0.26px;
  --text-h3-size: 24px;
  --text-h3-weight: 700;
  --text-h3-lh: 1.45;
  --text-h3-ls: 0;
  --text-body-lg-size: 20px;
  --text-body-lg-weight: 330;
  --text-body-lg-lh: 1.40;
  --text-body-lg-ls: -0.14px;
  --text-button-size: 20px;
  --text-button-weight: 480;
  --text-button-lh: 1.40;
  --text-button-ls: -0.10px;
  --text-body-size: 18px;
  --text-body-weight: 320;
  --text-body-lh: 1.45;
  --text-body-ls: -0.26px;
  --text-eyebrow-size: 18px;
  --text-eyebrow-weight: 400;
  --text-eyebrow-lh: 1.30;
  --text-eyebrow-ls: 0.54px;
  --text-body-sm-size: 16px;
  --text-body-sm-weight: 330;
  --text-body-sm-lh: 1.45;
  --text-body-sm-ls: -0.14px;
  --text-caption-size: 12px;
  --text-caption-weight: 400;
  --text-caption-lh: 1.00;
  --text-caption-ls: 0.60px;

  /* ---- 间距与圆角 ---- */
  --space-hair: 1px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;
  --space-gap: 12px;
  --space-pad: 24px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 50px;
  --radius-full: 9999px;
  --radius-control: 8px;
  --radius-card: 24px;

  /* ---- 描边 / 层级 / 动效 ---- */
  --border-hairline: 1px solid var(--color-hairline);
  --border-hairline-soft: 1px solid var(--color-hairline-soft);
  --border-strong: 1px solid var(--color-ink-subtle);
  --border-focus: 2px solid var(--color-primary);
  --shadow-1: 0 1px 2px rgba(16,24,40,.06);
  --shadow-2: 0 4px 12px rgba(16,24,40,.08);
  --shadow-3: 0 12px 32px rgba(16,24,40,.12);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
```

## 13. 来源与变更

| slug | 名称 | 分类 | 贡献的维度 |
|---|---|---|---|
| `figma` | Figma | Design & Creative Tools | 全套 |

参考规范原文位于 UI-DESIGNER skill 的 `references/design-systems/<slug>/`，需要更细的组件描述时读原文 `DESIGN.md`，需要观感确认时打开 `preview.html`。

### 变更记录

| 日期 | 变更 | 原因 |
|---|---|---|
| 2026-09-09 | 初版生成 | 由 UI-DESIGNER 从内置规范生成 |