Warp

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

## 概览
Warp 是一个 "agentic development environment"，本质是包裹 AI agent 的 terminal application；它的 marketing site 也映射了产品姿态：整页是一条连续 dark band，比 pure black 更暖（`{colors.canvas}` `#2b2622` 带有品牌 oklch warmth value 中的 brown-beige 气息），copy 几乎全部使用 Inter。页面读起来更像开发者的 reading-mode editor，而不是典型 marketing surface。

Decoration 非常克制。Hero 开头使用两张 terminal screenshot（分别对应两个主要 product mode：agent + terminal）。Partner-logo strip（Anthropic / OpenAI / Google / Stanford）位于 hero 下方，放在略暖的 tile surface 上。随后是一个带 portrait photograph 的 testimonial card、press-coverage list，最后用 Mac / Linux / Windows download tile 收尾。这里没有 gradient、没有 atmospheric backdrop，也没有 illustration system。

Type 是第二个决定性声音。Hero display 使用 64 px Inter weight 400，并带 `-1.6px` tracking；作为 hero 来说很克制，刻意保持安静。品牌用 DM Mono 作为 code block 的 monospace face，并偶尔用 Instrument Serif italic 处理 editorial moment。Body text 是 16 px Inter、line-height 1.5，可读性很高。

**Key Characteristics:**
- 单一 primary "color"：其实是 off-white `{colors.primary}` (`#f7f5f0`)，同时作为 canvas 上的 text 和 button-primary fill。没有 chromatic brand accent。
- Warm dark canvas（`{colors.canvas}` `#2b2622`）是唯一 page surface。品牌的定义性 tone 是 brown-warmth，而不是 pure black。
- Button radius 极紧：3 / 4 px（品牌 `{rounded.md}` 4 px base 的 1 / 2×）；品牌从不为 CTA 使用宽松 pill shape。只有 icon container 使用 `{rounded.full}`。
- Inter sans + DM Mono mono 是标准组合。Instrument Serif 作为第三套 editorial face，偶尔用于 italic。
- Terminal-mockup imagery 是品牌唯一稳定的 decorative system；没有 gradient，没有 atmospheric overlay。
- 每个 neutral 都带 subtle warm tint；即使 body text 和 divider 也带一点 warmth，而不是 neutral gray。

## Colors

### Brand & Accent
- **Off White Primary** (`{colors.primary}` — `#f7f5f0`): 品牌的 "primary" 是 warm off-white。用作 button-primary fill、canvas 上的 default text，以及 wordmark color。没有 chromatic brand accent；off-white 本身就是品牌的辨识 tone。

### Surface
- **Canvas** (`{colors.canvas}` — `#2b2622`): Warm dark page background。由 `oklch(22.0% 0.004 84.6)` 解析而来。比 pure black 略 brown，比 neutral gray 略暖；warmth 就是品牌 identity。
- **Canvas Soft** (`{colors.canvas-soft}` — `#383330`): 更浅的 warm-dark fill，用于 card、mockup chrome 和 partner-logo tile。
- **Hairline** (`{colors.hairline}` — `#3f3a36`): Dark surface 上的 1 px solid divider。

### Text
- **Ink** (`{colors.ink}` — `#f7f5f0`): Canvas 上的 default text；与 primary 使用同一个 off-white，刻意统一。
- **Body Strong** (`{colors.body-strong}` — `#dad2c1`): Mid-emphasis body text。
- **Body** (`{colors.body}` — `#c9c0ad`): Secondary body text，用于 caption、supporting copy、press-coverage row。
- **Mute** (`{colors.mute}` — `#aea69c`): 最低优先级文本，用于 timestamp、fine print、footer secondary line。由 `oklch(71.5% 0.008 84.6)` 解析而来。

### Semantic Colors
品牌在 marketing page 中没有暴露独立的 error / warning / success palette。Validation cue 来自统一的 off-white system；in-product semantic color 存在于真正的 terminal application 中。

## Typography

### Font Family
系统由三套字体分层：
1. **Inter** 用于所有 display、body、button、link 和 label role。工作字重是 400 / 500。搭配品牌的 "Inter Fallback" custom face，作为 metric-compatible system fallback。
2. **DM Mono** 用于 terminal mockup、command snippet 和 code block。只使用 weight 400。以 `--font-dm-mono` 加载。
3. **Instrument Serif** 用于偶发的 editorial italic moment；在 marketing surface 上很少见，但作为第三套字体记录，用于 emphasised tagline-style phrase。**Abel** 也作为 headline emphasis 的第四 fallback 加载。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 400 | 70.4px | -1.6px | Hero headline（"Warp is the agentic development environment"）。 |
| `{typography.display-lg}` | 48px | 400 | 52.8px | -1.2px | Section headline。 |
| `{typography.display-md}` | 32px | 500 | 40px | -0.8px | Sub-section display。 |
| `{typography.display-sm}` | 24px | 500 | 32px | -0.4px | Card title 和 lead emphasis。 |
| `{typography.display-serif}` | 48px | 400 | 52px | -0.5px | Instrument Serif italic editorial moment。 |
| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraph。 |
| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body。 |
| `{typography.body-md-strong}` | 16px | 500 | 24px | 0 | Bold inline body。 |
| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body。 |
| `{typography.body-sm-strong}` | 14px | 500 | 20px | 0 | Nav link / button label。 |
| `{typography.caption}` | 12px | 400 | 16px | 0 | Caption、fine print。 |
| `{typography.code}` | 13px | 400 | 18px | 0 | Terminal mockup body。 |
| `{typography.code-md}` | 14px | 400 | 20px | 0 | Inline command snippet。 |
| `{typography.button-md}` | 14px | 500 | 20px | 0 | Button label。 |

### Principles
- **Hero display 使用 weight 400**；品牌读起来是 quietly confident，而不是 billboard。
- **Negative tracking 是声音的一部分。** 64 px hero 使用 `-1.6 px`，并随 display level 逐级缩小。
- **Inter 负责叙事，DM Mono 负责技术内容。** 两者角色严格分离。

### Font Substitutes
三套字体都是开放或可免费加载的：
- **Inter**：可直接从 Google Fonts 或 Vercel-hosted CDN 加载。
- **DM Mono**：Google Fonts 上的 open-source 字体。
- **Instrument Serif**：Google Fonts 上的 open-source 字体。

## Layout

### Spacing System
- **Base unit**: 4 px（button padding 偶尔使用 10 px 和 6 px）。
- **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 10 px · `{spacing.lg}` 16 px · `{spacing.xl}` 24 px · `{spacing.2xl}` 32 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px · `{spacing.5xl}` 96 px。
- **Section padding**: hero / content band 在 desktop 上使用 `{spacing.5xl}` 96 px。
- **Card interior**: card 使用 `{spacing.xl}` 24 px。

### Grid & Container
- Marketing content 居中在约 1200 px width。
- Hero: desktop 为 2-column（两张 terminal screenshot 分列），mobile 堆叠。
- Partner logo: 5-up wrapping flex row。
- Download tile: desktop 为 3-up（Mac / Linux / Windows），mobile 为 1-up。

### Responsive Strategy

#### Breakpoints

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

#### Touch Targets
Button 渲染高度约 36 px（8 px vertical padding + 20 px line-height）。Mobile 通过额外 padding 扩大 touch area，以满足 WCAG 44 × 44 px 下限。

#### Collapsing Strategy
- Nav: desktop 为 full link row + Sign in / Download right cluster；mobile 为 hamburger。
- Hero terminal-mockup split: mobile 上垂直堆叠。
- Press / job row: full-width single column；所有宽度下保持可读。

#### Image Behavior
- **Terminal mockup**: 渲染为 dark card，内部是真实 terminal UI（warm canvas + colored syntax）。Aspect ratio 约 3:2。
- **Partner logo**: dark tile card 上的 monochrome SVG。
- **Testimonial portrait**: `{rounded.md}` card chrome 内的 1:1 square crop。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Level 0 — Flat | 无 shadow，无 border。 | Hero band 默认。 |
| Level 1 — Hairline | `{colors.canvas-soft}` 上的 1 px solid `{colors.hairline}` border。 | Default card chrome。 |
| Level 2 — Inset Card | Canvas background 上的 canvas-soft fill，并带 1 px hairline。 | Mockup card、download tile、testimonial card。 |

品牌使用 surface-contrast 和 hairline border 表达 elevation；marketing surface 中不出现 soft drop-shadow。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed band。 |
| `{rounded.xxs}` | 1px | 最紧的 in-text indicator。 |
| `{rounded.xs}` | 2px | Inline very-small chip。 |
| `{rounded.sm}` | 3px | Default button radius，极紧。 |
| `{rounded.md}` | 4px | Card chrome（品牌的 `--radius` base）。 |
| `{rounded.lg}` | 6px | 略大的 card。 |
| `{rounded.pill}` | 9999px | Icon container、status pill。 |

### Photography Geometry
- Terminal mockup: 位于 `{rounded.md}` card chrome 内，约 3:2。
- Partner logo: tile card 内统一 24 px 高的 monochrome SVG。
- Testimonial portrait: `{rounded.md}` 内的 1:1 square。

## Components

### Buttons

**`button-primary`** — the off-white CTA on dark canvas.
- Background `{colors.primary}` (off-white)、text `{colors.on-primary}` (warm dark)、label `{typography.button-md}`、padding `{spacing.sm} {spacing.lg}`、shape `{rounded.sm}` 3 px。非常 tight。

**`button-secondary-ghost`** — the ghost-style secondary used for nav and tertiary actions.
- Background `{colors.canvas}`、text `{colors.ink}`、无 border，使用相同 typography / shape。

**`button-icon-circular`** — the circular icon container.
- Background `{colors.canvas}`、ink icon、shape `{rounded.full}`。用于 nav control（search、theme）。

### Cards & Containers

**`card-content`** — the default content card on canvas-soft.
- Background `{colors.canvas-soft}`、text `{colors.ink}`、1 px solid `{colors.hairline}`、padding `{spacing.xl}`、shape `{rounded.md}`。

**`card-mockup`** — the terminal-screenshot mockup card.
- Chrome 与 `card-content` 相同；内部出现文本时，body 使用 `{typography.code}` (DM Mono)。

**`download-tile`** — the Mac / Linux / Windows download tile.
- Background `{colors.canvas-soft}`、text `{colors.ink}`、hairline border、padding `{spacing.xl}`、shape `{rounded.md}`。承载 platform icon + label + download CTA。

**`partner-logo-tile`** — the canvas-soft tile hosting a partner logo.
- Background `{colors.canvas-soft}`，内部放置 monochrome logo SVG，padding `{spacing.lg}`、shape `{rounded.md}`。

**`testimonial-card`** — the single quote-style card with a portrait.
- Background `{colors.canvas-soft}`、text `{colors.ink}`、padding `{spacing.xl}`、shape `{rounded.md}`。Portrait 为 1:1，body 使用 `{typography.body-md}`。

**`press-row`** — the press-coverage list item.
- Background `{colors.canvas}`（无额外 fill，直接位于 canvas band 上）、1 px solid bottom border `{colors.hairline}`、body 使用 `{typography.body-md}`、padding `{spacing.lg}` 0。

**`job-row`** — the "Join our team" list item (single row per open role).
- Background `{colors.canvas}`、1 px solid bottom border、body 使用 `{typography.body-md-strong}`、padding `{spacing.lg}` 0。

### Inputs & Forms

**`text-input`** — the dark-canvas text input.
- Background `{colors.canvas-soft}`、text `{colors.ink}`、1 px solid `{colors.hairline}`、body 使用 `{typography.body-sm}`、padding `{spacing.sm} {spacing.md}`、shape `{rounded.sm}`。

### Navigation

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

**`nav-link`** — link items in nav.
- Background `{colors.canvas}`、text `{colors.ink}`、body 使用 `{typography.body-sm-strong}`、padding `{spacing.xs} {spacing.md}`、shape `{rounded.sm}`。

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

### Signature Components

**`hero-band`** — the dark hero band hosting the 64-px Inter headline.
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.5xl} {spacing.xl}`。Headline 使用 `{typography.display-xl}`（64 px / 400 / `-1.6 px`）。下方是 2-column terminal-mockup split。

**`content-band`** — the standard content band.
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.5xl} {spacing.xl}`。Section headline 使用 `{typography.display-md}`。

### Examples (illustrative)

> 自动派生的 kit-mirror demonstration surface（`scripts/derive-examples-block.mjs`）。每个 `ex-*` 条目引用 brand-native primitive，使下游消费者（`/preview-design`、`/generate-kit`）能一致地重新套用这 10 个 surface。`TO_FILL` marker 表示缺失 primitive，需要在 LLM judgment pass 中解决。

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.
- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).
- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).
- Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.
- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.
- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with 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}` off-white 留给 primary CTA pill 和 default text。这里没有 chromatic accent。
- Button radius 使用 tight 的 `{rounded.sm}` 3 px 或 `{rounded.md}` 4 px。品牌从不为 CTA 使用宽松 pill。
- Hero headline 使用 Inter weight 400，并搭配 `-1.6 px` tracking。品牌读起来是 quietly confident。
- 将 Inter（sentence-case）与 DM Mono（code block、terminal mockup）配对使用。
- 保持 warm-dark canvas tone；pure black 会破坏品牌 identity。

### Don't
- 不要引入 chromatic brand accent。Off-white-on-warm-dark 就是品牌声音。
- 不要用 heavy weight（700+）渲染 hero headline。品牌 display 刻意保持轻。
- 不要使用宽松 pill CTA。品牌 button radius 是 3-4 px，几乎接近矩形。
- 不要用 neutral gray 或 pure black 替换 warm dark canvas。Warmth 就是品牌。
- 不要在 card 上加 soft drop-shadow。Hairline + surface contrast 承担 elevation。