Zapier

---
version: alpha
name: "Zapier"
description: "Zapier 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Zapier 是最早一批“connect your apps”的 workflow automation platform；如今的 marketing surface 读起来成熟而自信。品牌将 warm-cream canvas `{colors.canvas}` (`#fffefb`) 与 deep coffee-ink `{colors.ink}` (`#201515`) 搭配，并使用单一 saturated orange `{colors.primary}` (`#ff4f00`) CTA。Neutral 中的温度感，也就是略带 cream 而不是 pure white，是品牌最明确的 temperature signal。

Type 承载第二层声音。专有 `Degular Display` 字体家族以 weight 500 承担 hero display。品牌将 `Inter` 用于其它一切：sub-display、body、button、eyebrow。双字体配对读起来像“品牌在响亮时刻使用自己的字体，其它地方使用可靠工作马”；克制、不炫技。

Card 全部使用 `{rounded.md}` 12 px。Button 也共享同样的 12 px radius；不是 pill，也不是 square。品牌有意站在 friendly-rounded 与 technical-square 之间的中间位置。

**Key Characteristics:**
- 单一 primary CTA color `{colors.primary}` (`#ff4f00`)：saturated orange。这是品牌 conversion signature。
- Warm-cream canvas `{colors.canvas}` (`#fffefb`)；不是 pure white。温度就是 brand voice。
- Deep coffee ink `{colors.ink}` (`#201515`)；不是 pure black。温暖感延续到文本。
- Hero-scale 使用专有 Degular Display，其它一切使用 Inter。双字体系统。
- Button 和 card 使用 `{rounded.md}` 12 px；这是品牌 middle-radius signature。
- Muted cream / coffee neutral ladder：`{colors.canvas-soft}` (`#f8f4f0`)、`{colors.mute}` (`#c5c0b1`)、`{colors.body-mid}` (`#939084`)、`{colors.body}` (`#605d52`)；每个 neutral 都带温暖感，没有 cool grey。

## Colors

### Brand & Accent
- **Zapier Orange** (`{colors.primary}` — `#ff4f00`): 单一 brand accent。用于每个 primary CTA pill、每个 conversion target。Saturated orange 就是品牌。

### Surface
- **Canvas** (`{colors.canvas}` — `#fffefb`): Warm off-white page background。
- **Canvas Soft** (`{colors.canvas-soft}` — `#f8f4f0`): Cream-tinted soft surface，用于 card / inset region。

### Text
- **Ink** (`{colors.ink}` — `#201515`): Deep coffee；用于所有 heading 和 primary text。
- **Ink Soft** (`{colors.ink-soft}` — `#2f2a26`): 带 brown warmth 的 near-black。
- **Ink Mid** (`{colors.ink-mid}` — `#36342e`): Mid-emphasis text。
- **Body** (`{colors.body}` — `#605d52`): 默认 body text color。
- **Body Mid** (`{colors.body-mid}` — `#939084`): Secondary body / metadata。
- **Mute** (`{colors.mute}` — `#c5c0b1`): 最低优先级文本；fine print、low-emphasis caption。

### Semantic Colors
品牌在 marketing page 上不暴露独立 semantic palette。Status / validation cue 借用 ink + orange hierarchy。

## Typography

### Font Family
系统由两套字体建立层级：
1. **Degular Display** — 专有 geometric display sans，用于 weight 500 的 hero headline。这是品牌 typographic signature。
2. **Inter** — 用于 sub-display、body、link、button 和 eyebrow。可用字重为 400 / 500 / 600 / 700。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 56px | 500 | 56px | 0 | Hero headline（Degular Display）。 |
| `{typography.display-lg}` | 48px | 500 | 48px | 0 | Sub-hero display（Degular Display）。 |
| `{typography.display-md}` | 32px | 500 | 36px | 1px | Section display（Degular Display，positive tracking）。 |
| `{typography.display-sub-lg}` | 48px | 500 | 49.92px | 0 | Inter 渲染的 sub-display。 |
| `{typography.display-sub-md}` | 32px | 400 | 40px | 0 | Inter sub-display。 |
| `{typography.display-sub-sm}` | 24px | 600 | 30px | -0.6px | Card title（Inter，semibold）。 |
| `{typography.display-xs}` | 20px | 700 | 25px | -0.5px | Inline display micro-heading。 |
| `{typography.body-lg}` | 20px | 400 | 30px | -0.2px | Lead paragraph。 |
| `{typography.body-md}` | 18px | 400 | 27px | 0 | Default body。 |
| `{typography.body-md-strong}` | 18px | 600 | 27px | 0 | Bolded inline body。 |
| `{typography.body-sm}` | 16px | 400 | 24px | 0 | Secondary body。 |
| `{typography.body-sm-strong}` | 16px | 600 | 24px | 0 | Bold caption。 |
| `{typography.caption}` | 14px | 400 | 21px | 0 | Fine print。 |
| `{typography.eyebrow-uppercase}` | 14px | 500 | 14px | 1px | UPPERCASE eyebrow（Degular Display，positive tracking）。 |
| `{typography.button-md}` | 18px | 600 | 27px | 0 | Primary button label。 |
| `{typography.button-sm}` | 14.4px | 700 | 14.4px | 0.144px | Small button label。 |

### Principles
- **Hero 使用 Degular Display 500，其它全部使用 Inter。** 角色严格分离。
- **Degular eyebrow 使用 positive tracking**；14 px 时 `1 px` 是品牌 signature label style。
- **Sentence-case headline。** 品牌从不把 display size 全部 uppercase。

### Font Substitutes
Degular Display 是专有字体。开源替代：
- **Display** — Hero scale 下 *Inter* weight 500 最接近。*Mona Sans* weight 500 是更柔和的替代。
- **Sub-display + body** — *Inter* 是品牌实际使用的第二字体。

## Layout

### Spacing System
- **Base unit**: 4 px。
- **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 24 px · `{spacing.2xl}` 32 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px。
- **Section padding**: Band 使用 `{spacing.4xl}` 64 px top/bottom。
- **Card interior**: Card 使用 `{spacing.xl}` 24 px。

### Grid & Container
- Marketing container 约 1280 px 宽，居中并带 gutter。
- Hero：desktop 为 split（headline 在左，illustration 在右）；mobile 堆叠。
- Pricing tier grid：desktop 为 3 / 4-up。

### Responsive Strategy

#### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Hero 堆叠；grid 1-up；hamburger nav。 |
| Tablet | 768–1023px | 2-up grid。 |
| Desktop | ≥ 1024px | 完整 grid；hero split。 |

#### Touch Targets
Button 渲染高度约 48 px（12 vertical padding + 27 line）。满足 WCAG AAA。

#### Image Behavior
品牌使用 zaps / workflow 的 illustrative SVG，以及放在 `{rounded.md}` framed card 中的 product screenshot。摄影很少见。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Level 0 — Flat | 无 shadow、无 border。 | Hero 默认。 |
| Level 1 — Hairline | 1 px solid `{colors.ink}` border。 | Pricing-tier card chrome、outline button。 |
| Level 2 — Soft Card | `{colors.canvas}` page 上的 `{colors.canvas-soft}` cream fill。 | 默认 content card；surface contrast 承担 elevation。 |

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed band。 |
| `{rounded.sm}` | 6px | Inline pill、form input。 |
| `{rounded.md}` | 12px | 品牌规范 button + card radius。 |
| `{rounded.pill}` | 9999px | Status pill、badge。 |
| `{rounded.full}` | 9999px | Circular icon container。 |

## Components

### Buttons

**`button-primary`** — orange CTA。
- Background `{colors.primary}`、text `{colors.on-primary}`（warm white）、label `{typography.button-md}`、padding `{spacing.md} {spacing.xl}`、shape `{rounded.md}` 12 px。

**`button-secondary`** — dark coffee-ink CTA。
- Background `{colors.ink}`、text `{colors.on-primary}`，同样 typography / padding / shape。

**`button-tertiary`** — outline CTA。
- Background `{colors.canvas}`、text `{colors.ink}`、1 px solid `{colors.ink}` border，同样 typography / padding / shape。

**`button-text`** — card / nav 内部使用的 text-only CTA。
- Background `{colors.canvas}`、text `{colors.ink}`、body 使用 `{typography.button-sm}`、padding `{spacing.sm} {spacing.lg}`、shape `{rounded.md}`。

### Cards & Containers

**`card-content`** — 默认 cream content card。
- Background `{colors.canvas-soft}`、text `{colors.ink}`、padding `{spacing.xl}`、shape `{rounded.md}`。

**`card-feature-cream`** — cream feature card。
- Chrome 与 `card-content` 相同。承载 headline + body + illustration。

**`card-feature-dark`** — polarity-flipped dark coffee card。
- Background `{colors.ink}`、text `{colors.on-primary}`、padding `{spacing.xl}`、shape `{rounded.md}`。

**`pricing-card`** — 默认 pricing tier card。
- Background `{colors.canvas}`、text `{colors.ink}`、1 px solid `{colors.ink}` border、padding `{spacing.xl}`、shape `{rounded.md}`。

**`pricing-card-featured`** — polarity-flipped featured pricing tier。
- Background `{colors.ink}`、text `{colors.on-primary}`，同样 shape / padding。

### Inputs & Forms

**`text-input`** — 规范 text input。
- Background `{colors.canvas}`、text `{colors.ink}`、1 px solid `{colors.ink}` border、body 使用 `{typography.body-md}`、padding `{spacing.md} {spacing.lg}`、shape `{rounded.sm}` 6 px。

### Navigation

**`nav-bar`** — sticky top nav。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.md} {spacing.xl}`。

**`nav-link`** — nav 内部的 link item。
- Text `{colors.ink}`，使用 `{typography.body-sm}`。

**`footer`** — dark coffee footer。
- Background `{colors.ink}`、text `{colors.canvas-soft}`、padding `{spacing.3xl} {spacing.xl}`。Body 使用 `{typography.body-sm}`。

### Signature Components

**`hero-band`** — cream hero band。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.4xl} {spacing.xl}`。Headline 使用 `{typography.display-xl}`（Degular Display 56 px / 500）。

**`hero-band-dark`** — polarity-flipped dark coffee hero。
- Background `{colors.ink}`、text `{colors.on-primary}`，相同 scale。

**`content-band-cream`** — hero 后方的 cream content band。
- Background `{colors.canvas-soft}`、text `{colors.ink}`、padding `{spacing.4xl} {spacing.xl}`。Section headline 使用 `{typography.display-lg}`。

**`content-band-light`** — white content band。
- Background `{colors.canvas}`、text `{colors.ink}`，相同 padding / scale。

**`eyebrow-uppercase`** — section headline 上方的小型 UPPERCASE Degular eyebrow。
- Text `{colors.ink}`，使用 `{typography.eyebrow-uppercase}`（14 px / 500 / `1 px` tracking）。

**`badge-pill`** — 用于 metadata / tag 的 inline pill。
- Background `{colors.canvas-soft}`、text `{colors.ink}`、body 使用 `{typography.body-sm}`、padding `{spacing.xs} {spacing.md}`、shape `{rounded.pill}`。

### Examples (illustrative)

> 自动派生的 kit-mirror demonstration surfaces（`scripts/derive-examples-block.mjs`）。每个 `ex-*` 条目都引用 brand-native primitive，让下游消费者（`/preview-design`、`/generate-kit`）可以一致地重新换肤同一组 10 个 surface。`TO_FILL` 标记表示缺失 primitive，需要在 LLM judgment pass 中解决。

**`ex-pricing-tier`** — 默认 Pricing tier card。复用 feature-card chrome，并使用品牌 canvas-soft surface。
- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier；polarity-flipped surface（light mode 中 dark fill + light text，dark mode 中 light fill + dark text）。
- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card；为 SaaS / B2B vertical 重新设定用途（不是字面意义上的 product gallery）。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary；为 SaaS / B2B 重新设定用途（每个 add-on 一行，不是字面意义上的 cart）。
- Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — App Shell 示例中的 sidebar nav row。Active state 使用 brand primary 作为 indicator。
- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — 默认 data-table th + td chrome。Header 使用 mono-caps eyebrow typography；body 使用 body-sm。
- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card。复用 feature-card chrome，内部使用 text-input primitive。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface；与 feature-card 使用相同 chrome，并带 elevated shadow。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame。
- Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface；feature-card shape + medium shadow。
- Properties: `backgroundColor`, `rounded`, `padding`, `typography`

## Do's and Don'ts

### Do
- 将 `{colors.primary}` Zapier orange 保留给每个 primary CTA。Saturated orange 就是 conversion signature。
- 保持 canvas 温暖：`{colors.canvas}` `#fffefb` cream，而不是 pure white。温度就是 brand voice。
- Hero headline 使用 `{typography.display-xl}` Degular Display weight 500。Sentence-case，不 uppercase。
- 将 Degular Display（hero、eyebrow）与 Inter（其它一切）配对。两套字体，两个角色。
- Button + card 使用 `{rounded.md}` 12 px。中等 radius 是品牌 signature。
- 在 cream background 上将 orange CTA 与 ink-dark text 配对；这三个 token 的节奏就是品牌完整 conversion story。

### Don't
- 不要用 pure white 替换 cream canvas。温暖感就是品牌。
- 不要使用 pure black ink。`#201515` 的 coffee-warmth 延续到每个文本色。
- 不要把 CTA 渲染为 pill。品牌 button 是 12 px rounded rectangle。
- 不要引入第二个 chromatic accent。Orange + cream + coffee 就是完整 palette。
- 不要用冷感 geometric sans（例如 generic Helvetica）替代 Degular Display；品牌 display face 有替代字体捕捉不到的温暖比例。