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

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
NameWidthKey Changes
Mobile< 640pxHero h1 72→32px; IDE mockup → single pane; feature grid 1-up; nav hamburger.
Tablet640–1024pxHero h1 56px; feature grid 2-up.
Desktop1024–1280pxFull hero h1 72px; full IDE mockup; feature grid 3-up.
Wide> 1280pxContent caps at 1200px.
375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

Touch Targets

Collapsing Strategy