Cursor

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

## 概览
Cursor 的 marketing site 读起来像一个安静自信的 developer brand：它相信 editorial calm，而不是 IDE-darkness。Base canvas 是 **warm cream**（`{colors.canvas}` — #f7f7f4），承载用于 body 和 display 的 warm near-black ink（`{colors.ink}` — #26251e）。唯一 brand voltage 是 **Cursor Orange**（`{colors.primary}` — #f54e00），只留给 primary CTA 和 wordmark，使用非常克制。

Type 使用 **CursorGothic** 作为唯一 sans family。Display 位于 weight 400，并带 negative letter-spacing；这是 magazine-editorial voice，而不是 tech-bombastic。JetBrains Mono 承担每个 code surface（而且 code surface 大约占页面一半）。

品牌最强的视觉 signature 是 **AI-timeline pill palette**：五个 pastel pill（peach `{colors.timeline-thinking}`、mint `{colors.timeline-grep}`、blue `{colors.timeline-read}`、lavender `{colors.timeline-edit}`、gold `{colors.timeline-done}`），用于在 in-product timeline visualization 中标记 AI-action stage。它们只用于 product UI，绝不作为 system action color。

**Key Characteristics:**
- Warm cream canvas，不是 white。Ink 是 warm (#26251e)，不是 pure black。
- 单一 CTA color：`{colors.primary}`（Cursor Orange #f54e00），使用克制。
- Display weight 保持 400，绝不 bold。Magazine voice。
- AI timeline pastel：5 个专用 token，用于 in-product agent action stage。
- Compact 8px CTA radius，体现 developer dialect。
- Hairline-only depth；无 drop shadow。
- 80px section rhythm。

## Colors

### Brand & Accent
- **Cursor Orange** (`{colors.primary}` — #f54e00): Primary CTA pill、wordmark、hero accent。使用克制。
- **Cursor Orange Active** (`{colors.primary-active}` — #d04200): Press state。

### Surface
- **Canvas** (`{colors.canvas}` — #f7f7f4): Warm cream page floor。
- **Canvas Soft** (`{colors.canvas-soft}` — #fafaf7): Mockup 内 IDE-pane background。
- **Surface Card** (`{colors.surface-card}` — #ffffff): Pure white card surface，与 cream canvas 形成轻微 contrast。
- **Surface Strong** (`{colors.surface-strong}` — #e6e5e0): Badge、tag pill。

### Hairlines
- **Hairline** (`{colors.hairline}` — #e6e5e0): 1px divider.
- **Hairline Soft** (`{colors.hairline-soft}` — #efeee8): 更浅的 divider。
- **Hairline Strong** (`{colors.hairline-strong}` — #cfcdc4): 更强的 panel outline。

### Text
- **Ink** (`{colors.ink}` — #26251e): Display、body emphasis。Warm near-black。
- **Body** (`{colors.body}` — #5a5852): Default running-text。
- **Body Strong** (`{colors.body-strong}` — #26251e): 与 ink 相同。
- **Muted** (`{colors.muted}` — #807d72): Sub-title。
- **Muted Soft** (`{colors.muted-soft}` — #a09c92): Disabled text。
- **On Primary** (`{colors.on-primary}` — #ffffff): Cursor Orange 上的 white text。

### Timeline (AI-action signature)
- **Thinking** (`{colors.timeline-thinking}` — #dfa88f): Peach，只用于 in-product agent timeline。
- **Grep** (`{colors.timeline-grep}` — #9fc9a2): Mint。
- **Read** (`{colors.timeline-read}` — #9fbbe0): Pastel blue。
- **Edit** (`{colors.timeline-edit}` — #c0a8dd): Lavender。
- **Done** (`{colors.timeline-done}` — #c08532): Warm gold。

### Semantic Colors
- **Success** (`{colors.semantic-success}` — #1f8a65): Confirmation indicator。
- **Error** (`{colors.semantic-error}` — #cf2d56): Validation error。

## Typography

### Font Family
**CursorGothic** 是授权 display + body family。Fallback: `system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif`。Code surface 切换到 **JetBrains Mono**。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-mega}` | 72px | 400 | 1.1 | -2.16px | Homepage hero h1 |
| `{typography.display-lg}` | 36px | 400 | 1.2 | -0.72px | Section head |
| `{typography.display-md}` | 26px | 400 | 1.25 | -0.325px | Sub-section head |
| `{typography.display-sm}` | 22px | 400 | 1.3 | -0.11px | Card group title |
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component title |
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | List label |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |
| `{typography.body-tracked}` | 16px | 400 | 1.5 | 0.08px | Tracked editorial body |
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |
| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo caption |
| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section label、timeline pill label |
| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code block：JetBrains Mono |
| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA pill label |
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |

### Principles
- **Display weight 保持 400。** Magazine voice，绝不 bold。
- **Negative letter-spacing 只用于 display。** Tracking 范围为 -0.11px 到 -2.16px。
- **每个 code surface 都使用 JetBrains Mono。**

### Font Substitutes
CursorGothic 是授权字体。Open-source substitute：weight 400 的 **Inter**，搭配 letter-spacing -1.5%。如果需要更 editorial 的感觉，可使用 **GT Sectra**。

## Layout

### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
- **Section padding:** 80px。

### Grid & Container
- Max content width: 约 1200px。
- Editorial body: 12-column grid。
- Feature card grid: split 在 desktop 为 2-up，benefit 为 3-up。
- Footer: desktop 为 5-column。

### Whitespace Philosophy
宽松的 editorial pacing，更接近 print magazine，而不是 tech site。Cream canvas 有充足 breathing room；band 内 card 距离较近（16-24px gap）。

## Elevation & Depth

系统使用 **hairline-only depth**。没有 drop shadow，也没有 elevation tier。Card 通过 1px hairline 和轻微的 white-on-cream contrast 浮在 canvas 上。

| Level | Treatment | 用途 |
|---|---|---|
| Flat (canvas) | `{colors.canvas}` (#f7f7f4) | Body band、footer |
| Card | `{colors.surface-card}` (#ffffff) | Content card |
| Hairline border | 1px `{colors.hairline}` | Card outline、divider |
| IDE pane | `{colors.canvas-soft}` (#fafaf7) | IDE mockup card 内部 |

### Decorative Depth
- **IDE-mockup card** 是唯一 "elevated" element。Cream canvas 上的 white card 通过内部 pane structure 模拟真实 Cursor editor。
- **Timeline pastel pill** 在不增加 surface elevation 的情况下提供 chromatic depth。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | Reserved |
| `{rounded.xs}` | 4px | Inline tag |
| `{rounded.sm}` | 6px | Compact row |
| `{rounded.md}` | 8px | CTA button、form input |
| `{rounded.lg}` | 12px | Card、IDE pane |
| `{rounded.xl}` | 16px | Larger feature card（少见） |
| `{rounded.pill}` | 9999px | Timeline pill、badge |
| `{rounded.full}` | 9999px | Avatar（少见） |

## Components

### Top Navigation

**`top-nav`** — Background `{colors.canvas}`、text `{colors.ink}`、height 64px。Layout：Cursor wordmark 在左，primary horizontal menu（Pricing / Features / Enterprise / Blog / Forum / Careers）居中，Sign In + Download primary CTA 在右。导航本身保持轻量，不使用深色 IDE chrome。

### Buttons

**`button-primary`** — Signature Cursor Orange CTA。Background `{colors.primary}`、text `{colors.on-primary}`、type `{typography.button}` (14px / 500)、padding 10px × 18px、height 40px、rounded `{rounded.md}` (8px)。它是页面中最强的 action signal，数量必须少。

**`button-primary-active`** — Press state。Background `{colors.primary-active}`。

**`button-secondary`** — Cream canvas 上的 white card pill。Background `{colors.surface-card}`、text `{colors.ink}`、1px `{colors.hairline-strong}` border。它承担次级动作，视觉上退到 primary CTA 后面。

**`button-tertiary-text`** — Inline ink text link。

**`button-download`** — 更大的 ink-canvas CTA。Background `{colors.ink}`、text `{colors.canvas}`、padding 12px × 20px、height 44px。用于 "Download for macOS" 这类 CTA。

### Hero & IDE Mockups

**`hero-band`** — Background `{colors.canvas}`，full-width display headline 使用 `{typography.display-mega}`（72px / 400 / -2.16px），subhead 使用 `{typography.body-md}`，包含两个 CTA（`button-download` + `button-tertiary-text`），hero copy 下方放置居中的 IDE-mockup card。整体节奏像编辑型软件发布页，先给清晰主张，再展示真实产品界面。

**`ide-mockup-card`** — 包含 multi-pane IDE mockup（sidebar + main editor + chat panel + terminal）的 white card。Background `{colors.surface-card}`、rounded `{rounded.lg}` (12px)、1px `{colors.hairline}` border、无 padding（pane edge-to-edge 填满 card）。这是品牌主要 product proof，不应替换成抽象插画。

**`ide-pane`** — Mockup 内的单个 IDE pane。Background `{colors.canvas-soft}`，text `{colors.body}` 使用 `{typography.code}`（JetBrains Mono 13px），rounded `{rounded.md}` (8px)，padding 16px。

### Cards

**`feature-card`** — Background `{colors.surface-card}`、text `{colors.ink}`、type `{typography.title-md}`、rounded `{rounded.lg}`、padding 24px。1px `{colors.hairline}` border。

**`comparison-card`** — Side-by-side "Cursor vs other tools" card。使用相同 surface 和 rounding；内部 split 为 2 columns。对比内容需要保持冷静、表格化，避免营销式夸张。

**`testimonial-card`** — Quote card。Background `{colors.surface-card}`、text `{colors.body}`、rounded `{rounded.lg}`、padding 24px。用于承载短引用，保持正文语气，不做大面积品牌色填充。

### AI Timeline (signature)

**`timeline-pill-thinking`** — Peach pill。Background `{colors.timeline-thinking}`、text `{colors.ink}`、type `{typography.caption-uppercase}`（11px / 600 / 0.88px tracking，uppercase）、rounded `{rounded.pill}`、padding 4px × 10px。标记 product timeline 中的 "Thinking" stage。

**`timeline-pill-grep`** — Mint pill。同样 shape，background `{colors.timeline-grep}`。标记 "Grepping" stage。

**`timeline-pill-read`** — Pastel-blue pill。Background `{colors.timeline-read}`。标记 "Reading" stage。

**`timeline-pill-edit`** — Lavender pill。Background `{colors.timeline-edit}`。标记 "Editing" stage。

**`timeline-pill-done`** — Gold pill。Background `{colors.timeline-done}`、text `{colors.on-primary}` white。标记 "Done" stage。

### Code

**`code-block`** — Inline code block。Background `{colors.surface-card}`，text `{colors.ink}` 使用 `{typography.code}`，rounded `{rounded.lg}`、padding 20px、1px `{colors.hairline}` border。

### Pricing

**`pricing-tier-card`** — Background `{colors.surface-card}`、rounded `{rounded.lg}`、padding 32px、1px `{colors.hairline}` border。用于清晰展示方案层级，保持 card 的 white-on-cream contrast。

**`pricing-tier-featured`** — Featured tier 反相为 ink。Background `{colors.ink}`、text `{colors.canvas}`。Shape 相同，通过 dark inversion 表示 "highlighted"，不使用 colored ribbon。

### Forms & Tags

**`text-input`** — Background `{colors.surface-card}`、text `{colors.ink}`、rounded `{rounded.md}` (8px)、padding 12px × 16px、height 44px。

**`badge-pill`** — Small uppercase pill。Background `{colors.surface-strong}`、text `{colors.ink}`、type `{typography.caption-uppercase}`、rounded `{rounded.pill}`、padding 4px × 10px。

### CTA / Footer

**`cta-band`** — Pre-footer "Try Cursor now" band。Background `{colors.canvas}`，centered display headline 使用 `{typography.display-lg}`，只放一个 Cursor Orange CTA。Vertical padding 96px。

**`footer`** — Closing footer。Background `{colors.canvas}`、text `{colors.body}`。5-column link list。64×48px padding。

**`footer-link`** — Background transparent、text `{colors.body}`、type `{typography.body-sm}`。

## Do's and Don'ts

### Do
- 将 `{colors.primary}`（Cursor Orange）保留给 primary CTA 和 brand wordmark。
- Display weight 保持 400。Editorial voice 依赖这一点。
- 使用 cream `{colors.canvas}` page floor，绝不使用 pure white。
- 每个 code surface（inline、block、IDE pane）都用 JetBrains Mono 渲染。
- Timeline pastel 只用于 in-product agent visualization，绝不作为 system action color。

### Don't
- 不要引入 secondary brand action color。Cursor Orange 是唯一 action color。
- 不要把 display 提升到 bold weight（700+）。Magazine voice 依赖 400。
- 不要添加 drop shadow。Hairline + ink-on-cream contrast 承担 depth。
- 不要在 non-timeline UI 上使用 timeline pastel。它们只属于 agent timeline。
- 不要从 third-party widget（cookie consent、OneTrust）提取 CTA color。品牌 CTA 以真实 product CTA 为准。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 640px | Hero h1 72→32px；IDE mockup 折叠为 single pane preview；feature grid 1-up；nav hamburger。 |
| Tablet | 640–1024px | Hero h1 56px；IDE mockup 压缩；feature grid 2-up。 |
| Desktop | 1024–1280px | 完整 hero h1 72px；完整 multi-pane IDE mockup；feature grid 3-up。 |
| Wide | > 1280px | Content capped at 1200px。 |

### Touch Targets
- Primary CTA 高度 40px，达到 WCAG AA，并通过 padding 接近 AAA。
- Download CTA 高度 44px，达到 AAA。

### Collapsing Strategy
- Top nav 在 768px 以下切换为 hamburger。
- IDE mockup 的 multi-pane 在 mobile 上折叠为 single primary pane preview。
- Feature grid: 3-up → 2-up → 1-up。

## Iteration Guide

1. 每次聚焦单个 component。
2. CTA 默认使用 `{rounded.md}` (8px)。Card 使用 `{rounded.lg}` (12px)。
3. Variant 作为 `components:` 内的独立条目存在。
4. 所有地方使用 `{token.refs}`，不要 inline hex。
5. 不记录 hover state。
6. Display 使用 CursorGothic 400，body 使用 400/500/600。每个 code surface 使用 JetBrains Mono。
7. Cursor Orange 保持稀缺。
8. Timeline pastel 仅限于 in-product agent visualization。

## Known Gaps

- CursorGothic 是授权 typeface；Inter 是替代字体。
- Animation timing（timeline pill entrance、IDE pane reveal）不在范围内。
- In-app surface（code editor、chat panel、agent timeline）只通过 marketing IDE mockup 部分捕获。
- Focus 之外的 form validation state 在捕获 surface 中不可见。