Cursor DESIGN.md

Overview

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.

Colors

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.

Typography

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

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.

Layout

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.
• Section padding: 80px.

Grid & Container

• Max content width: ~1200px.
• Editorial body: 12-column grid.
• Feature card grids: 2-up at desktop for splits, 3-up for benefits.
• Footer: 5-column at desktop.

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

Elevation & Depth

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.

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.

Shapes

Border Radius Scale

Components

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

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.

Responsive Behavior

Breakpoints

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.

Iteration Guide

1. Focus on a single component at a time.
2. CTAs default to {rounded.md} (8px). Cards use {rounded.lg} (12px).
3. Variants live as separate entries inside components:.
4. Use {token.refs} everywhere — never inline hex.
5. Hover state never documented.
6. CursorGothic 400 for display, 400/500/600 for body. JetBrains Mono on every code surface.
7. Cursor Orange stays scarce.
8. Timeline pastels stay scoped to in-product agent visualizations.

Known Gaps

• CursorGothic is a licensed typeface; Inter is the substitute.
• Animation timings (timeline pill entrance, IDE pane reveal) out of scope.
• In-app surfaces (code editor, chat panel, agent timeline) only partially captured via marketing IDE mockups.
• Form validation states beyond focus not visible on captured surfaces.