Cursor

Cursor

AI-first code editor

An AI-first code editor built on VS Code, whose marketing site trades dark-IDE atmosphere for a warm-cream editorial canvas.

cursor.com

Color palette

Accent

Primary#f54e00

Primary brand color — key actions and emphasis.

Primary Active#d04200

Pressed or hover state of its base color.

Timeline Grep#9fc9a2

Accent color used within the product's own UI.

Timeline Read#9fbbe0

Accent color used within the product's own UI.

Timeline Edit#c0a8dd

Accent color used within the product's own UI.

Timeline Done#c08532

Accent color used within the product's own UI.

Semantic

Semantic Error#cf2d56

Error and destructive state.

Semantic Success#1f8a65

Success state.

Neutral

Ink#26251e

Primary text color.

Body#5a5852

Secondary or muted text.

Body Strong#26251e

Primary text color.

Muted#807d72

Secondary or muted text.

Muted Soft#a09c92

Secondary or muted text.

Hairline#e6e5e0

Borders and dividers.

Hairline Soft#efeee8

Borders and dividers.

Hairline Strong#cfcdc4

Borders and dividers.

Canvas#f7f7f4

Page background.

Canvas Soft#fafaf7

Page background.

Surface Card#ffffff

Card and panel surfaces.

Surface Strong#e6e5e0

Card and panel surfaces.

On Primary#ffffff

Text and icon color on a solid primary fill.

Timeline Thinking#dfa88f

Primary text color.

Type scale

Display Mega
72px · 400 · 1.1
Display Lg
36px · 400 · 1.2
Display Md
26px · 400 · 1.25
Display Sm
22px · 400 · 1.3
Title Md
18px · 600 · 1.4
Title Sm
16px · 600 · 1.4
Body Md
16px · 400 · 1.5
Body Tracked
16px · 400 · 1.5
Body Sm
14px · 400 · 1.5
Button
14px · 500 · 1
Nav Link
14px · 500 · 1.4
Caption
13px · 400 · 1.4
Code
13px · 400 · 1.5
Caption Uppercase
11px · 600 · 1.4

Fonts

PrimaryCursorGothicWeights 400, 500, 600Fallback: system-ui, Helvetica Neue, Helvetica, Arial
CodeJetBrains MonoWeights 400Fallback: Fira Code, monospace

Spacing & shape

Xxs
4px
Xs
8px
Sm
12px
Base
16px
Md
20px
Lg
24px
Xl
32px
Xxl
48px
Section
80px
None
0px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Pill
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (CursorGothic, JetBrains Mono).
  • Use one of the documented corner radii (0px, 4px, 6px, 8px, 12px, 16px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 80px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.