AI Developer Toolslight canvasDESIGN.md

Cursor

Warm-cream editorial canvas, warm ink, one Cursor Orange voltage.

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

Theme Preview

A landing-page sketch built from the tokens, followed by live MotionFoundry components re-skinned with this theme. Switch Dark | Light to preview a derived variant that keeps the brand accent, radius, and fonts.

Native light canvas

CursorProductDocsPricing

Build what moves people.

Every surface, type ramp, and accent on this card comes from the brand's DESIGN.md tokens.

Get startedLearn more

Cursor moves, ships, delights

Magnetic

Shiny border

Confetti

Slide fill

Toggle

Checkbox

Loading

Loader

Toasts

No notifications yet

Color Palette

22 tokens. Click a swatch to copy its value.

Typography

Brand typefaces are proprietary, so specimens fall back to the closest system fonts in the stack: 'CursorGothic', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif

display-mega

72px · 400 · -2.16px

The quick brown fox jumps over the lazy dog

display-lg

36px · 400 · -0.72px

The quick brown fox jumps over the lazy dog

display-md

26px · 400 · -0.325px

The quick brown fox jumps over the lazy dog

display-sm

22px · 400 · -0.11px

The quick brown fox jumps over the lazy dog

title-md

18px · 600 · 0

The quick brown fox jumps over the lazy dog

title-sm

16px · 600 · 0

The quick brown fox jumps over the lazy dog

body-md

16px · 400 · 0

The quick brown fox jumps over the lazy dog

body-tracked

16px · 400 · 0.08px

The quick brown fox jumps over the lazy dog

Radius

none0px

xs4px

sm6px

md8px

lg12px

xl16px

pill9999px

full9999px

Use as a Preset

Every MotionFoundry component reads its surfaces, text, borders, and accent from --mf-* CSS variables. Set them on any wrapper (or :root) to adopt the Cursor look, and pass the accent to color props.

globals.css

1.theme-cursor {2  --mf-bg: #f7f7f4;3  --mf-surface: #ffffff;4  --mf-surface-raised: #fafaf7;5  --mf-fg: #26251e;6  --mf-muted: #5a5852;7  --mf-subtle: #807d72;8  --mf-border: #e6e5e0;9  --mf-border-strong: #cfcdc4;10  --mf-accent: #f54e00;11}

example.tsx

1<div className="theme-cursor">2  <ConfettiButton accentColor="#f54e00" secondaryColor="#9fbbe0" />3  <ToggleSwitch accentColor="#f54e00" />4</div>

Building with an AI coding agent? Put this file at your project root as DESIGN.md and ask it to follow the design system — or try it on any component page with the Design picker.

Specification

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

Source: VoltAgent/awesome-design-md (MIT). An inspired analysis of public marketing surfaces — not an official Cursor asset.