Cursor Design System

---

version: alpha

name: Cursor-design-analysis

description: An AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (`#f7f7f4`) instead of the typical dark IDE atmosphere. Near-black warm ink (`#26251e`) carries body and display alike — display sits at weight 400 with negative letter-spacing for a magazine feel rather than a bold tech voice. The single brand voltage is **Cursor Orange** (`#f54e00`) reserved for primary CTAs and the wordmark. A signature pastel timeline palette (peach, mint, blue, lavender, gold) marks AI-action stages (Thinking / Reading / Editing / Grepping / Done) — only inside in-product timeline visualizations. Cards use minimal hairlines, no shadows, generous 80px section rhythm. CursorGothic for display/body, JetBrains Mono on every code surface (which is roughly half the page).

colors:

primary: "#f54e00"

primary-active: "#d04200"

ink: "#26251e"

body: "#5a5852"

body-strong: "#26251e"

muted: "#807d72"

muted-soft: "#a09c92"

hairline: "#e6e5e0"

hairline-soft: "#efeee8"

hairline-strong: "#cfcdc4"

canvas: "#f7f7f4"

canvas-soft: "#fafaf7"

surface-card: "#ffffff"

surface-strong: "#e6e5e0"

on-primary: "#ffffff"

timeline-thinking: "#dfa88f"

timeline-grep: "#9fc9a2"

timeline-read: "#9fbbe0"

timeline-edit: "#c0a8dd"

timeline-done: "#c08532"

semantic-error: "#cf2d56"

semantic-success: "#1f8a65"

typography:

display-mega:

fontFamily: "'CursorGothic', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"

fontSize: 72px

fontWeight: 400

lineHeight: 1.1

letterSpacing: -2.16px

display-lg:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 36px

fontWeight: 400

lineHeight: 1.2

letterSpacing: -0.72px

display-md:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 26px

fontWeight: 400

lineHeight: 1.25

letterSpacing: -0.325px

display-sm:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 22px

fontWeight: 400

lineHeight: 1.3

letterSpacing: -0.11px

title-md:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 18px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

title-sm:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 16px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

body-md:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

body-tracked:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0.08px

body-sm:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 14px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

caption:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 13px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0

caption-uppercase:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 11px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0.88px

textTransform: uppercase

code:

fontFamily: "'JetBrains Mono', 'Fira Code', monospace"

fontSize: 13px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

button:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

nav-link:

fontFamily: "'CursorGothic', sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

rounded:

none: 0px

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

base: 16px

md: 20px

lg: 24px

xl: 32px

xxl: 48px

section: 80px

components:

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.nav-link}"

height: 64px

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

height: 40px

button-primary-active:

backgroundColor: "{colors.primary-active}"

textColor: "{colors.on-primary}"

rounded: "{rounded.md}"

button-secondary:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 9px 17px

height: 40px

button-tertiary-text:

backgroundColor: transparent

textColor: "{colors.ink}"

typography: "{typography.button}"

button-download:

backgroundColor: "{colors.ink}"

textColor: "{colors.canvas}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 12px 20px

height: 44px

hero-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-mega}"

padding: 80px

ide-mockup-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

rounded: "{rounded.lg}"

padding: 0

ide-pane:

backgroundColor: "{colors.canvas-soft}"

textColor: "{colors.body}"

typography: "{typography.code}"

rounded: "{rounded.md}"

padding: 16px

feature-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 24px

comparison-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 24px

timeline-pill-thinking:

backgroundColor: "{colors.timeline-thinking}"

textColor: "{colors.ink}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

timeline-pill-grep:

backgroundColor: "{colors.timeline-grep}"

textColor: "{colors.ink}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

timeline-pill-read:

backgroundColor: "{colors.timeline-read}"

textColor: "{colors.ink}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

timeline-pill-edit:

backgroundColor: "{colors.timeline-edit}"

textColor: "{colors.ink}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

timeline-pill-done:

backgroundColor: "{colors.timeline-done}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

code-block:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.code}"

rounded: "{rounded.lg}"

padding: 20px

pricing-tier-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

pricing-tier-featured:

backgroundColor: "{colors.ink}"

textColor: "{colors.canvas}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

text-input:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 12px 16px

height: 44px

badge-pill:

backgroundColor: "{colors.surface-strong}"

textColor: "{colors.ink}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

cta-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-lg}"

padding: 96px

testimonial-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 24px

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.body-sm}"

padding: 64px 48px

footer-link:

backgroundColor: transparent

textColor: "{colors.body}"

typography: "{typography.body-sm}"

---

Cursor's marketing site reads as a quietly-confident developer brand that believes in editorial calm over IDE-darkness. The base canvas is **warm cream** (`{colors.canvas}` — #f7f7f4) holding warm near-black ink (`{colors.ink}` — #26251e) for body and display alike. The single brand voltage is **Cursor Orange** (`{colors.primary}` — #f54e00) reserved for primary CTAs and the wordmark — used scarcely.

Type runs **CursorGothic** as the single sans family. Display sits at weight 400 with negative letter-spacing — a magazine-editorial voice rather than tech-bombastic. JetBrains Mono carries every code surface (and code surfaces are roughly half the page).

The brand's strongest visual signature is the **AI-timeline pill palette**: five pastel pills (peach `{colors.timeline-thinking}`, mint `{colors.timeline-grep}`, blue `{colors.timeline-read}`, lavender `{colors.timeline-edit}`, gold `{colors.timeline-done}`) marking AI-action stages inside in-product timeline visualizations. Used only in product UI — never as system action colors.

**Key Characteristics:**

**CursorGothic** is the licensed display + body family. Fallback: `system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif`. Code surfaces switch to **JetBrains Mono**.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 72px | 400 | 1.1 | -2.16px | Homepage hero h1 |

| `{typography.display-lg}` | 36px | 400 | 1.2 | -0.72px | Section heads |

| `{typography.display-md}` | 26px | 400 | 1.25 | -0.325px | Sub-section heads |

| `{typography.display-sm}` | 22px | 400 | 1.3 | -0.11px | Card group titles |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | List labels |

| `{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 captions |

| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, timeline pill labels |

| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |

| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA pill labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |

CursorGothic is licensed. Open-source substitute: **Inter** at weight 400 with letter-spacing -1.5%. Or **GT Sectra** for a more editorial feel.

Generous editorial pacing — closer to a print magazine than a tech site. The cream canvas has plenty of breathing room; cards within bands sit close (16-24px gap).

The system uses **hairline-only depth**. No drop shadows, no elevation tiers. Cards float above the canvas via 1px hairlines and the slight white-on-cream contrast.

| Level | Treatment | Use |

|---|---|---|

| Flat (canvas) | `{colors.canvas}` (#f7f7f4) | Body bands, footer |

| Card | `{colors.surface-card}` (#ffffff) | Content cards |

| Hairline border | 1px `{colors.hairline}` | Card outlines, dividers |

| IDE pane | `{colors.canvas-soft}` (#fafaf7) | Inside IDE mockup cards |

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Reserved |

| `{rounded.xs}` | 4px | Inline tags |

| `{rounded.sm}` | 6px | Compact rows |

| `{rounded.md}` | 8px | CTA buttons, form inputs |

| `{rounded.lg}` | 12px | Cards, IDE panes |

| `{rounded.xl}` | 16px | Larger feature cards (rare) |

| `{rounded.pill}` | 9999px | Timeline pills, badges |

| `{rounded.full}` | 9999px | Avatars (rare) |

**`top-nav`** — Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Cursor wordmark left, primary horizontal menu (Pricing / Features / Enterprise / Blog / Forum / Careers), Sign In + Download primary CTA right.

**`button-primary`** — The 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).

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

**`button-secondary`** — White card pill on cream canvas. Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.

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

**`button-download`** — Larger ink-canvas CTA. Background `{colors.ink}`, text `{colors.canvas}`, padding 12px × 20px, height 44px. Used for "Download for macOS" type CTAs.

**`hero-band`** — Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (72px / 400 / -2.16px), subhead in `{typography.body-md}`, two CTAs (`button-download` + `button-tertiary-text`), and a centered IDE-mockup card below the hero copy.

**`ide-mockup-card`** — A white card containing a multi-pane IDE mockup (sidebar + main editor + chat panel + terminal). Background `{colors.surface-card}`, rounded `{rounded.lg}` (12px), 1px `{colors.hairline}` border, no padding (panes fill the card edge-to-edge).

**`ide-pane`** — Individual IDE pane inside the mockup. Background `{colors.canvas-soft}`, text `{colors.body}` in `{typography.code}` (JetBrains Mono 13px), rounded `{rounded.md}` (8px), padding 16px.

**`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. Same surface and rounding; internally split into 2 columns.

**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.

**`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. Marks "Thinking" stage in product timeline.

**`timeline-pill-grep`** — Mint pill. Same shape, background `{colors.timeline-grep}`. Marks "Grepping" stage.

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

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

**`timeline-pill-done`** — Gold pill. Background `{colors.timeline-done}`, text `{colors.on-primary}` white. Marks "Done" stage.

**`code-block`** — Inline code block. Background `{colors.surface-card}`, text `{colors.ink}` in `{typography.code}`, rounded `{rounded.lg}`, padding 20px, 1px `{colors.hairline}` border.

**`pricing-tier-card`** — Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding 32px, 1px `{colors.hairline}` border.

**`pricing-tier-featured`** — Featured tier inverts to ink. Background `{colors.ink}`, text `{colors.canvas}`. Same shape, dark inversion signals "highlighted" without colored ribbon.

**`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-band`** — Pre-footer "Try Cursor now" band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single Cursor Orange CTA. 96px vertical padding.

**`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}`.

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 640px | Hero h1 72→32px; IDE mockup collapses to single pane preview; feature grid 1-up; nav hamburger. |

| Tablet | 640–1024px | Hero h1 56px; IDE mockup compresses; feature grid 2-up. |

| Desktop | 1024–1280px | Full hero h1 72px; full multi-pane IDE mockup; feature grid 3-up. |

| Wide | > 1280px | Content caps at 1200px. |

1. Focus on a single component at a time.

2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` (12px).

3. Variants live as separate entries inside `components:`.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. CursorGothic 400 for display, 400/500/600 for body. JetBrains Mono on every code surface.

7. Cursor Orange stays scarce.

8. Timeline pastels stay scoped to in-product agent visualizations.