Cursor

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}