DesignMD

version: alpha name: Cursor 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

Focus on a single component at a time.
CTAs default to {rounded.md} (8px). Cards use {rounded.lg} (12px).
Variants live as separate entries inside components:.
Use {token.refs} everywhere — never inline hex.
Hover state never documented.
CursorGothic 400 for display, 400/500/600 for body. JetBrains Mono on every code surface.
Cursor Orange stays scarce.
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.