Cursor Design System

AI-first code editor · Confident light-editorial canvas...
Back to Home
01

Visual Theme & Atmosphere

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).

...

Key Characteristics:

  • Warm cream canvas, not white. Ink is warm (#26251e), not pure black.
  • ...

Live Visual Theme Representation:

// An editor-forward design built on clean warm paper (#f7f7f4) rather than typical neon cyber themes.
02

Color Palette & Roles

Brand & Accent

  • Cursor Orange ({colors.primary} — #f54e00): Primary CTA pills, wordmark, hero accent. Used scarcely.
  • Cursor Orange Active ({colors.primary-active} — #d04200): Press state.

Surface

  • Canvas ({colors.canvas} — #f7f7f4): Warm cream page floor.
  • Canvas Soft ({colors.canvas-soft} — #fafaf7): IDE-pane background inside mockups.
  • ...

Hairlines

  • Hairline ({colors.hairline} — #e6e5e0): 1px divider.
  • Hairline Soft ({colors.hairline-soft} — #efeee8): Lighter divider.
  • ...

Text

  • Ink ({colors.ink} — #26251e): Display, body emphasis. Warm near-black.
  • Body ({colors.body} — #5a5852): Default running-text.
  • ...

Timeline (AI-action signature)

  • Thinking ({colors.timeline-thinking} — #dfa88f): Peach. Used inside in-product agent timeline only.
  • Grep ({colors.timeline-grep} — #9fc9a2): Mint.
  • ...

Semantic

  • Success ({colors.semantic-success} — #1f8a65): Confirmation indicators.
  • Error ({colors.semantic-error} — #cf2d56): Validation errors.
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
03

Typography Rules

Font Family

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

Hierarchy

TokenSizeWeightLine HeightLetter SpacingUse
..................

Principles

  • Display weight stays at 400. Magazine voice, never bold.
  • Negative letter-spacing on display only. -0.11px to -2.16px tracking.
  • ...

Note on Font Substitutes

CursorGothic is licensed. Open-source substitute: Inter at weight 400 with letter-spacing -1.5%. Or GT Sectra for a more editorial feel.
Dynamic Preview:
display-mega size: 72px | weight: 400 | height: 1.1 | spacing: -2.16px
The quick brown fox jumps over the lazy dog
display-lg size: 36px | weight: 400 | height: 1.2 | spacing: -0.72px
The quick brown fox jumps over the lazy dog
display-md size: 26px | weight: 400 | height: 1.25 | spacing: -0.325px
The quick brown fox jumps over the lazy dog
display-sm size: 22px | weight: 400 | height: 1.3 | spacing: -0.11px
The quick brown fox jumps over the lazy dog
title-md size: 18px | weight: 600 | height: 1.4 | spacing: 0
The quick brown fox jumps over the lazy dog
title-sm size: 16px | weight: 600 | height: 1.4 | spacing: 0
The quick brown fox jumps over the lazy dog
body-md size: 16px | weight: 400 | height: 1.5 | spacing: 0
The quick brown fox jumps over the lazy dog
body-tracked size: 16px | weight: 400 | height: 1.5 | spacing: 0.08px
The quick brown fox jumps over the lazy dog
body-sm size: 14px | weight: 400 | height: 1.5 | spacing: 0
The quick brown fox jumps over the lazy dog
caption size: 13px | weight: 400 | height: 1.4 | spacing: 0
The quick brown fox jumps over the lazy dog
caption-uppercase size: 11px | weight: 600 | height: 1.4 | spacing: 0.88px
The quick brown fox jumps over the lazy dog
code size: 13px | weight: 400 | height: 1.5 | spacing: 0
The quick brown fox jumps over the lazy dog
button size: 14px | weight: 500 | height: 1.0 | spacing: 0
The quick brown fox jumps over the lazy dog
nav-link size: 14px | weight: 500 | height: 1.4 | spacing: 0
The quick brown fox jumps over the lazy dog
04

Layout Principles

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.
  • ...

Grid & Container

  • Max content width: ~1200px.
  • Editorial body: 12-column grid.
  • ...

Whitespace Philosophy

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).

Grid Layout Wireframe Mockup:

Section 1 (Spacer Gap: 80px)
Section 2 (Spacer Gap: 80px)
Layout Wireframe blueprint
1
2
3
4
5
6
7
8
9
10
11
12
Gutter spacing: 16px / 24px
Side Margins: 24px (Mobile) / 48px (Desktop)
Max Container Width: 1200px
05

Depth & Elevation

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.

LevelTreatmentUse
.........

Decorative Depth

  • IDE-mockup cards are the only "elevated" element. White card on cream canvas with internal pane structure mimicking the actual Cursor editor.
  • Timeline pastel pills add chromatic depth without surface elevation.

Elevation Level Showcase:

Zero-elevation design
Cursor utilizes minimal 1px outlines (`#e6e5e0`) and flat backgrounds. Drop shadows are completely absent.
Flat Surface (Level 0)

Used for background layers, sidebar headers, or baseline borders.

Low Elevation (Level 1 / Card)

Used for floating product elements, cards, and hover states.

High Elevation (Level 2 / Popover & Dropdown)

Used for modals, select menus, code editor tooltips, and overlay headers.

Border Radius & Shape Scale:

radius-sm 4px
radius-md 6px
radius-lg 8px
radius-pill Pill / Tag
06

Component Stylings

Border Radius Scale

TokenValueUse
.........

Top Navigation

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.

Buttons

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 & IDE Mockups

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.

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. 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.

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. 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

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

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.

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

Interactive Component Demonstrations:

Thinking Grepping Reading
07

Do's and Don'ts

Do

  • Reserve {colors.primary} (Cursor Orange) for primary CTAs and brand wordmark.
  • Keep display weight at 400. The editorial voice depends on this.
  • Use the cream {colors.canvas} page floor — never pure white.
  • Render every code surface (inline, blocks, IDE panes) in JetBrains Mono.
  • Use timeline pastels only inside in-product agent visualizations — never as system action colors.

Don't

  • Don't introduce a secondary brand action color. Cursor Orange is the only one.
  • Don't drop display to bold weights (700+). Magazine voice depends on 400.
  • Don't add drop shadows. Hairlines + ink-on-cream contrast carry the depth.
  • Don't use timeline pastels on non-timeline UI. They're scoped to the agent timeline only.
  • Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual product CTAs.
✅ Recommended / Do
  • Reserve {colors.primary} (Cursor Orange) for primary CTAs and brand wordmark.
  • Keep display weight at 400. The editorial voice depends on this.
  • Use the cream {colors.canvas} page floor — never pure white.
  • Render every code surface (inline, blocks, IDE panes) in JetBrains Mono.
  • Use timeline pastels only inside in-product agent visualizations — never as system action colors.
❌ Discouraged / Don't
  • Don't introduce a secondary brand action color. Cursor Orange is the only one.
  • Don't drop display to bold weights (700+). Magazine voice depends on 400.
  • Don't add drop shadows. Hairlines + ink-on-cream contrast carry the depth.
  • Don't use timeline pastels on non-timeline UI. They're scoped to the agent timeline only.
  • Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual product CTAs.
08

Responsive Behavior

Breakpoints

NameWidthKey Changes
.........

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.
  • ...

Responsive Adaptation Note:

📱 Responsive scale uses full-width grid wrapping with code containers becoming scrollable columns.
Interactive Viewport Simulator
Width: 800px (Desktop Mode) Grid Container
Primary Column

Adjusts layout width

Secondary Column

Folds on viewport change

Sidebar Column

Stacks to bottom on mobile

09

Agent Prompt Guide

1. Focus on a single component at a time. 2. CTAs default to {rounded.md} (8px). Cards use {rounded.lg} (12px).

  • ...

Copyable Agent Integration Prompt:

"Generate a developer portal in Cursor-style: white cards with thin light grey margins (#e6e5e0), JetBrains Mono code blocks, and flat rectangular buttons."
10

Full System Design Tokens

The parsed design tokens extracted from the core stylesheet of this design system:

Design TokenHex ValueSystem Palette Role
--primary#f54e00System color representation for primary
--primary-active#d04200System color representation for primary-active
--ink#26251eSystem color representation for ink
--body#5a5852System color representation for body
--body-strong#26251eSystem color representation for body-strong
--muted#807d72System color representation for muted
--muted-soft#a09c92System color representation for muted-soft
--hairline#e6e5e0System color representation for hairline
--hairline-soft#efeee8System color representation for hairline-soft
--hairline-strong#cfcdc4System color representation for hairline-strong
--canvas#f7f7f4System color representation for canvas
--canvas-soft#fafaf7System color representation for canvas-soft
--surface-card#ffffffSystem color representation for surface-card
--surface-strong#e6e5e0System color representation for surface-strong
--on-primary#ffffffSystem color representation for on-primary
--timeline-thinking#dfa88fSystem color representation for timeline-thinking
--timeline-grep#9fc9a2System color representation for timeline-grep
--timeline-read#9fbbe0System color representation for timeline-read
--timeline-edit#c0a8ddSystem color representation for timeline-edit
--timeline-done#c08532System color representation for timeline-done
--semantic-error#cf2d56System color representation for semantic-error
--semantic-success#1f8a65System color representation for semantic-success