Cursor Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

22tokens

9type steps

6radius steps

4pxspacing base

Cursor, in one page

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:

Warm cream canvas, not white. Ink is warm (#26251e), not pure black.
Single CTA color: {colors.primary} (Cursor Orange #f54e00). Used scarcely.
Display weight stays at 400 — never bold. Magazine voice.
AI timeline pastels: 5 dedicated tokens for in-product agent action stages.
Compact 8px CTA radius — developer dialect.
Hairline-only depth; no drop shadows.
80px section rhythm.

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.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Cursor design language. Follow the measured tokens below — do not substitute your own palette.

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

Type:
- families: CursorGothic, Helvetica Neue, Helvetica, Arial
- scale: 11, 13, 14, 16, 18, 22, 26, 36, 72
- weights: 400, 500, 600

Shape:
- radius: 0, 4, 6, 8, 12, 16

Spacing: 4, 8, 10, 12, 16, 20, 24, 32, 48, 80

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

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

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.
Surface Card ({colors.surface-card} — #ffffff): Pure white card surface — slight contrast against the cream canvas.
Surface Strong ({colors.surface-strong} — #e6e5e0): Badges, tag pills.

Hairlines

Hairline ({colors.hairline} — #e6e5e0): 1px divider.
Hairline Soft ({colors.hairline-soft} — #efeee8): Lighter divider.
Hairline Strong ({colors.hairline-strong} — #cfcdc4): Stronger panel outline.

Text

Ink ({colors.ink} — #26251e): Display, body emphasis. Warm near-black.
Body ({colors.body} — #5a5852): Default running-text.
Body Strong ({colors.body-strong} — #26251e): Same as ink.
Muted ({colors.muted} — #807d72): Sub-titles.
Muted Soft ({colors.muted-soft} — #a09c92): Disabled text.
On Primary ({colors.on-primary} — #ffffff): White text on Cursor Orange.

Timeline (AI-action signature)

Thinking ({colors.timeline-thinking} — #dfa88f): Peach. Used inside in-product agent timeline only.
Grep ({colors.timeline-grep} — #9fc9a2): Mint.
Read ({colors.timeline-read} — #9fbbe0): Pastel blue.
Edit ({colors.timeline-edit} — #c0a8dd): Lavender.
Done ({colors.timeline-done} — #c08532): Warm gold.

Semantic

Success ({colors.semantic-success} — #1f8a65): Confirmation indicators.
Error ({colors.semantic-error} — #cf2d56): Validation errors.

Type scaleRead the full spec

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

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

Principles

Display weight stays at 400. Magazine voice, never bold.
Negative letter-spacing on display only. -0.11px to -2.16px tracking.
JetBrains Mono on every code surface.

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.

Components and layoutRead the full spec

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.

Responsive behaviourRead the full spec

Breakpoints

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.

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.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-cursor {--page-bg: #f7f7f4;
  --page-bg-gradient: none;
  --text-color: #26251e;
  --heading-color: #26251e;
  --link-color: #b93b00;
  --link-hover-color: #862b00;
  --border-color: #d1d1cd;
  --card-bg: #f7f7f4;
  --card-shadow: 0 1px 2px rgba(38,37,30,0.06);
  --card-hover-shadow: 0 6px 18px rgba(38,37,30,0.12);
  --header-bg: #26251e;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #f7f7f4;
  --footer-text-color: #6f6f69;
  --button-bg: #c83f00;
  --button-text-color: #ffffff;
  --button-hover-bg: #952f00;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #eaeae7;
  --button-secondary-text-color: #26251e;
  --button-secondary-hover-bg: #dededa;
  --button-secondary-border: 1px solid #d1d1cd;
  --prompt-bg: #edede9;
  --prompt-text-color: #26251e;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-mono);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

cal 86.4%
elevenlabs 85.7%
ferrari 81.0%
vercel 80.9%
clay 80.1%

Where this came from

Source document: volt/design-md/cursor/DESIGN.md · 21.1 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.