# Design System Inspiration of Cursor

AI-first code editor with an editorial dev-tools voice. Warm cream canvas, single Cursor Orange accent, CursorGothic at weight 400 — magazine-quiet, never bold.

01 — Color Palette

## Cream canvas, warm ink, Cursor Orange

Warm cream page floor with warm near-black ink. Single brand voltage (Cursor Orange) on CTAs. Five timeline pastels mark AI-action stages — scoped to in-product visualizations only.

### Brand

primary (Cursor Orange)
#f54e00
All primary CTAs and brand wordmark.
primary-active
#d04200
Press state.

### Surface

canvas
#f7f7f4
Warm cream page floor.
canvas-soft
#fafaf7
IDE pane background.
surface-card
#ffffff
Pure white card surface.
surface-strong
#e6e5e0
Badges, tag pills.

### Text & Hairlines

ink
#26251e
Display, body emphasis. Warm near-black.
body
#5a5852
Default running-text.
muted
#807d72
Sub-titles.
muted-soft
#a09c92
Disabled text.
hairline
#e6e5e0
1px divider.
hairline-strong
#cfcdc4
Stronger panel outline.

### AI Timeline (signature)

timeline-thinking
#dfa88f
Peach. "Thinking" stage.
timeline-grep
#9fc9a2
Mint. "Grepping" stage.
timeline-read
#9fbbe0
Pastel blue. "Reading" stage.
timeline-edit
#c0a8dd
Lavender. "Editing" stage.
timeline-done
#c08532
Warm gold. "Done" stage.

### Semantic

success
#1f8a65
Confirmation.
error
#cf2d56
Validation errors.
02 — Typography

## CursorGothic 400 + JetBrains Mono

Display weight stays at 400 — magazine voice, never bold. Mono on every code surface.

display-mega72px / 400 / 1.1 / -2.16px
Built to make you extraordinarily productive
display-lg36px / 400 / 1.2 / -0.72px
Section heading
display-md26px / 400 / 1.25 / -0.325px
Sub-section heading
display-sm22px / 400 / 1.3 / -0.11px
Card group title
title-md18px / 600 / 1.4
Component title
body-md16px / 400 / 1.5
Default body on warm cream canvas with warm ink. Reads editorial.
body-sm14px / 400 / 1.5
Footer body.
caption-uppercase11px / 600 / 1.4 / 0.88px
Section label
code13px / 400 / 1.5 (JetBrains Mono)
await agent.run({ task: 'analyze' })
button14px / 500 / 1.0
Download for macOS
nav-link14px / 500 / 1.4
Pricing · Features · Enterprise · Blog
03 — Buttons

## 8px radius — developer dialect

Compact CTAs. Cursor Orange for the primary brand action; ink-canvas for the dominant download CTA; white-card for secondary.

button-primary
Cursor Orange / 8px / 40px
button-primary-active
Deeper press state.
button-secondary
White card + 1px hairline.
button-tertiary-text
Inline ink text.
button-download
Ink fill / cream text / 44px height.
04 — AI Timeline (signature)

## Five pastel pills mark agent stages

The brand's distinctive product-UI signature: pastel pills label AI-action stages inside in-product agent timelines. Scoped to the timeline only — never as system action colors.

Thinkinganalyzing repository structure...
Grepsearched 142 files for handler signatures
Readopened src/api/router.ts (98 lines)
Editapplied 3 changes to runner.ts
Doneall checks passing · ready to commit
05 — Cards

## Hairline-only depth

#### Tab autocomplete

Multi-cursor suggestions across the whole file — Tab to accept.

#### Codebase awareness

Ask questions about your full codebase. Get cited answers.

#### Bring your own keys

Use your own API keys for OpenAI, Anthropic, or Azure.

06 — Code Block

## JetBrains Mono on white

// Quickstart
import { Cursor } from 'cursor'
const agent = new Cursor()
await agent.run({ task: 'refactor router.ts' })
07 — Pricing Tiers

## Featured tier inverts to ink

Visual inversion signals "highlighted choice" without colored ribbons.

#### Hobby

$0

- Free trial
- 2,000 completions
- 50 slow requests

#### Pro

$20/mo

- Unlimited completions
- 500 fast requests
- Unlimited slow

#### Business

$40

- Everything in Pro
- Privacy mode
- Centralized billing

08 — Forms

## Inputs

Email
Workspace
License key
09 — Badges

Small uppercase pills.

NewBetaProEnterprise
10 — Spacing Scale

4px base, 80px section rhythm.

xxs · 4
xs · 8
sm · 12
base · 16
md · 20
lg · 24
xl · 32
xxl · 48
section · 80
11 — Border Radius

Compact developer-ergonomic radii. Pill only for timeline labels and badges.

0 · none
4 · xs
6 · sm
8 · md
12 · lg
16 · xl
pill
12 — Elevation & Depth

Hairline-only depth. No drop shadows. White-on-cream contrast carries the layering.

##### Flat / Canvas

Body bands, footer.

##### IDE pane

Inside IDE mockup cards.

##### Card

White card on cream — 1px hairline border.

##### Inverted card

Featured pricing tier.

13 — Responsive Behavior

Name | Width | Key Changes
--- | --- | ---
Mobile | < 640px | Hero h1 72→32px; IDE mockup → single pane; feature grid 1-up; nav hamburger.
Tablet | 640–1024px | Hero h1 56px; feature grid 2-up.
Desktop | 1024–1280px | Full hero h1 72px; full IDE mockup; feature grid 3-up.
Wide | > 1280px | Content caps at 1200px.

375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

#### Touch Targets

- Primary CTA at 40px height — at WCAG AA, padded for AAA.
- Download CTA at 44px — at AAA.

#### Collapsing Strategy

- Top nav switches to hamburger below 768px.
- IDE mockup multi-pane collapses to a single primary pane preview on mobile.
- Feature grid: 3-up → 2-up → 1-up.