Cursor

version: alpha
name: Cursor-design-analysis
description: An AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (`#f7f7f4`) instead of the typical dark IDE atmosphere. Near-black warm ink (`#26251e`) carries body and display alike — display sits at weight 400 with negative letter-spacing for a magazine feel rather than a bold tech voice. The single brand voltage is **Cursor Orange** (`#f54e00`) reserved for primary CTAs and the wordmark. A signature pastel timeline palette (peach, mint, blue, lavender, gold) marks AI-action stages (Thinking / Reading / Editing / Grepping / Done) — only inside in-product timeline visualizations. Cards use minimal hairlines, no shadows, generous 80px section rhythm. CursorGothic for display/body, JetBrains Mono on every code surface (which is roughly half the page).

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

typography:
  display-mega:
    fontFamily: "'CursorGothic', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -2.16px
  display-lg:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.72px
  display-md:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.325px
  display-sm:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.11px
  title-md:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  title-sm:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-md:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-tracked:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08px
  body-sm:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption-uppercase:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.88px
    textTransform: uppercase
  code:
    fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0
  nav-link:
    fontFamily: "'CursorGothic', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px
  full: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  base: 16px
  md: 20px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 80px

components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: 64px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    height: 40px
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
  button-secondary:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 9px 17px
    height: 40px
  button-tertiary-text:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button}"
  button-download:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    height: 44px
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-mega}"
    padding: 80px
  ide-mockup-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0
  ide-pane:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.body}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 16px
  feature-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.lg}"
    padding: 24px
  comparison-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 24px
  timeline-pill-thinking:
    backgroundColor: "{colors.timeline-thinking}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  timeline-pill-grep:
    backgroundColor: "{colors.timeline-grep}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  timeline-pill-read:
    backgroundColor: "{colors.timeline-read}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  timeline-pill-edit:
    backgroundColor: "{colors.timeline-edit}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  timeline-pill-done:
    backgroundColor: "{colors.timeline-done}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  code-block:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.code}"
    rounded: "{rounded.lg}"
    padding: 20px
  pricing-tier-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  pricing-tier-featured:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  text-input:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 44px
  badge-pill:
    backgroundColor: "{colors.surface-strong}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  cta-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: 96px
  testimonial-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 24px
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    padding: 64px 48px
  footer-link:
    backgroundColor: transparent
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"

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

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.

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.

Level	Treatment	Use
Flat (canvas)	{colors.canvas} (#f7f7f4)	Body bands, footer
Card	{colors.surface-card} (#ffffff)	Content cards
Hairline border	1px {colors.hairline}	Card outlines, dividers
IDE pane	{colors.canvas-soft} (#fafaf7)	Inside IDE mockup cards

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

Token	Value	Use
{rounded.none}	0px	Reserved
{rounded.xs}	4px	Inline tags
{rounded.sm}	6px	Compact rows
{rounded.md}	8px	CTA buttons, form inputs
{rounded.lg}	12px	Cards, IDE panes
{rounded.xl}	16px	Larger feature cards (rare)
{rounded.pill}	9999px	Timeline pills, badges
{rounded.full}	9999px	Avatars (rare)

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

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.

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.