--- version: alpha name: Cursor-design-analysis description: "A warm-minimal developer-tool marketing surface built on a soft off-white canvas (#f7f7f4) with near-black warm ink text and pill-shaped dark CTAs. The system reads as calm, research-lab-quiet — generous whitespace, tightly-rounded warm-gray cards, and real product UI (agent panels, code windows, review dialogs) shown floating inside heavy-shadowed browser chrome. Brand voltage comes from the custom CursorGothic display face and a single warm-orange link accent, not from color-blocking." colors: ink: "#26251e" ink-deep: "#1d1b15" ink-deeper: "#201e18" canvas: "#f7f7f4" surface: "#f2f1ed" surface-alt: "#ebeae5" hairline: "#e6e5e0" muted: "#606060" black: "#000000" white: "#ffffff" accent-orange: "#f54e00" accent-amber: "#c08532" accent-green: "#1f8a65" accent-blue: "#3b82f6" accent-teal: "#267f99" accent-pink: "#cf2d56" typography: display: fontFamily: "CursorGothic, Inter, system-ui, sans-serif" fontSize: 26px fontWeight: 400 lineHeight: 1.25 letterSpacing: "-0.0125em" heading: fontFamily: "CursorGothic, Inter, system-ui, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 1.3 letterSpacing: "-0.005em" subhead: fontFamily: "system-ui, -apple-system, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.55 letterSpacing: "normal" body: fontFamily: "system-ui, -apple-system, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.55 letterSpacing: "normal" button: fontFamily: "CursorGothic, Inter, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.0 letterSpacing: "normal" rounded: none: 0px xs: 2px sm: 4px md: 8px lg: 10px xl: 12px pill: 9999px spacing: xxs: 4px xs: 6px sm: 8px md: 12px lg: 16px xl: 18px xxl: 20px components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 5.6px 10.5px button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 5.6px 10.5px text-link: backgroundColor: transparent textColor: "{colors.accent-orange}" typography: "{typography.body}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" testimonial-card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" elevated-panel: backgroundColor: "{colors.white}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" text-input: backgroundColor: "{colors.white}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" --- ## Overview Cursor's marketing surface is a warm, quiet developer-tool interface — a soft off-white canvas (`{colors.canvas}` — #f7f7f4) carrying near-black warm ink text (`{colors.ink}` — #26251e) and pill-shaped dark CTAs. The palette is intentionally low-contrast and warm-neutral: canvas, a slightly darker warm-gray card surface (`{colors.surface}` — #f2f1ed), and hairline dividers (`{colors.hairline}` — #e6e5e0) all sit within a few points of each other. The result reads as an applied-research lab rather than a loud SaaS pitch. Type voice splits into two roles: **CursorGothic** (the brand's custom display/grotesque face — h1, h3, and button labels, weight 400 with slight negative tracking) and **system-ui** (h2 subheads at weight 700 and all body text at 13px). The display face carries the brand; the system font does the reading work. Component voltage comes from **real product UI shown floating inside heavy-shadowed browser chrome** — agent task panels, mission-control windows, Slack/GitHub review threads, code terminals, PR-reviewer dialogs. Cursor doesn't illustrate the product; it drops actual product windows onto the warm canvas and lets deep drop-shadows lift them off the page. The single chromatic accent is a warm orange (`{colors.accent-orange}` — #f54e00) reserved for inline "Learn about… →" links. **Key Characteristics:** - Warm off-white canvas (`{colors.canvas}` — #f7f7f4) with warm near-black ink (`{colors.ink}` — #26251e). The whole system is warm-neutral, never cool gray. - Pill-shaped dark primary CTA (`{component.button-primary}`) — background `{colors.ink}`, text `{colors.canvas}`, fully-rounded (`{rounded.pill}`, derived from the measured full-round button radius). - Custom `CursorGothic` display face for headlines and buttons (substituted with Inter here). Slight negative letter-spacing (-0.0125em / -0.005em). - Warm-gray card surface (`{colors.surface}` — #f2f1ed) at a very tight `{rounded.sm}` (4px) radius — the dominant radius in the system. - Product UI fragments floated inside browser chrome with heavy multi-layer drop-shadows — the signature marketing device. - Orange (`{colors.accent-orange}` — #f54e00) is the only recurring chromatic accent, and only on inline text links. - Tight radius hierarchy: 4px cards, 8–12px larger panels, full-pill buttons. ## Colors ### Brand & Accent - **Accent Orange** (`{colors.accent-orange}` — #f54e00): The single brand accent. Used on inline "Learn about cloud agents →" / "Learn about Automations →" links. This is the only chromatic voltage in the marketing chrome. - **Accent Amber** (`{colors.accent-amber}` — #c08532): A warm gold measured at low frequency, appearing in small highlight moments and inside product-UI fragments. ### Syntax / Product-UI Accents These hues are measured but appear almost entirely inside the embedded product-UI fragments (code windows, diff views, agent status), not in the marketing chrome: - **Accent Green** (`{colors.accent-green}` — #1f8a65) — added-line / success tones in diffs. - **Accent Blue** (`{colors.accent-blue}` — #3b82f6) — link / info tones in product UI. - **Accent Teal** (`{colors.accent-teal}` — #267f99) — syntax highlighting. - **Accent Pink** (`{colors.accent-pink}` — #cf2d56) — syntax / removed-line tones. ### Surface - **Canvas** (`{colors.canvas}` — #f7f7f4): The default warm off-white page floor. - **Surface** (`{colors.surface}` — #f2f1ed): Card, testimonial, and section-panel background — one warm step darker than canvas. - **Surface Alt** (`{colors.surface-alt}` — #ebeae5): A secondary card/inset tone; also appears as a 2px ring in a measured focus/selection shadow. - **Hairline** (`{colors.hairline}` — #e6e5e0): The 1px divider / border tone on light surfaces. - **White** (`{colors.white}` — #ffffff): The floated product-window / elevated-panel background — brighter than canvas, which helps the panels read as lifted. - **Black** (`{colors.black}` — #000000): Used in shadow layers and rare pure-black UI moments. ### Text - **Ink** (`{colors.ink}` — #26251e): All headlines and primary text. - **Ink Deep / Deeper** (`{colors.ink-deep}` — #1d1b15 / `{colors.ink-deeper}` — #201e18): Slightly darker warm-black variants measured on nested UI text and dark fills. - **Muted** (`{colors.muted}` — #606060): Secondary / supporting text — sub-headlines and captions (e.g. "Agents use their own computers…"). - **On-Primary**: The primary button uses `{colors.canvas}` (#f7f7f4) as its label color — the canvas tone doubles as the on-dark text color. ## Typography ### Font Family The system runs **CursorGothic** for display + buttons and **system-ui** for subheads + body. CursorGothic is Cursor's custom grotesque display face — weight 400 with slight negative letter-spacing, giving headlines a calm, precise, engineered feel. The system-ui stack (`system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`) handles the reading layer at a compact 13px. The split is functional: - CursorGothic (display, 400 weight, -0.0125 to -0.005em tracking) — h1, h3, button labels - system-ui (400–700 weight) — h2 subheads (700) and body (400) ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display}` | 26px | 400 | 1.25 | -0.0125em | Page h1 ("Works autonomously, runs in parallel") — CursorGothic | | `{typography.heading}` | 22px | 400 | 1.3 | -0.005em | Section headings ("Try Cursor now.") — CursorGothic | | `{typography.subhead}` | 20px | 700 | 1.55 | normal | Bold system-font subheads / eyebrow labels | | `{typography.body}` | 13px | 400 | 1.55 | normal | Default running text, captions, nav, testimonials | | `{typography.button}` | 14px | 400 | 1.0 | normal | CTA button labels — CursorGothic | ### Principles CursorGothic is the brand voice — headlines and buttons only. The negative letter-spacing (-0.0125 to -0.005em) is part of the signature; without it the display face reads generic. Body copy stays in the compact 13px system font — Cursor's marketing text is deliberately small and dense, matching a developer-tool sensibility. Note the inversion versus most systems: the display face runs at weight **400** (light-normal) while the system subhead runs at **700**. The weight contrast, not the size jump, does much of the hierarchy work here. ### Note on Font Substitutes CursorGothic is a custom typeface and is not available as a public web font. **Inter** (or another neutral grotesque such as **Space Grotesk**) at weight 400 with ~-0.01em letter-spacing is a usable approximation — it preserves the calm, even-width grotesque character. Never claim to ship CursorGothic; declare the fallback stack. ## Layout ### Spacing System - **Base unit:** effectively 2px, with heavy clustering at 4 / 6 / 8px. - **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 6px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 18px · `{spacing.xxl}` 20px. - **Dominant unit:** `{spacing.sm}` (8px) is by far the most frequent gap/padding value. - Larger section rhythms (band-to-band vertical spacing) were not reliably measured — see Known Gaps. ### Grid & Container - **Editorial layout:** Alternating full-width bands, each pairing a floated product-UI window with a short text block (heading + muted sub-line + orange text-link). - **Hero:** Product window centered/left with the text block to the right. - **Testimonials:** 3-up quote grid on `{colors.surface}` cards. - **Feature rows:** left product-mockup / right copy, alternating sides down the page. ### Whitespace Philosophy Cursor leans on generous vertical whitespace between bands and a lot of empty warm canvas around each floated product window. The dense 13px body and tight 8px internal spacing are offset by wide margins — the page reads calm and unhurried, like a research paper rather than a sales deck. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat | No shadow, no border | Canvas sections, top nav | | Card surface | `{colors.surface}` fill, barely-there `rgba(0,0,0,0.02) 0 0 16px` + `rgba(0,0,0,0.008) 0 0 8px` | Feature / testimonial cards | | Focus ring | `rgb(235,234,229) 0 0 0 2px` (a `{colors.surface-alt}` ring) | Selected / focused inputs | | Floated panel | `rgba(0,0,0,0.14) 0 28px 70px`, `rgba(0,0,0,0.1) 0 14px 32px` + 1px hairline ring | Product-UI browser windows on canvas | | Deep float | `rgba(0,0,0,0.3) 0 22px 70px 4px` / `rgba(0,0,0,0.35) 0 8px 30px` + 0.5px ring | The marquee hero window and modal dialogs | The elevation philosophy is **deep, soft, warm shadows** used almost exclusively to lift real product windows off the flat canvas. Cards themselves stay nearly flat (2% and 0.8% alpha) — the drama is reserved for the product screenshots. ### Decorative Depth - Product windows carry macOS-style browser chrome (traffic-light dots, URL bar) as content, plus their own internal panel shadows. - Focus/selection uses a soft `{colors.surface-alt}` 2px ring rather than a bright color outline — consistent with the muted palette. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `{rounded.none}` | 0px | Text inputs (measured 0px radius) | | `{rounded.xs}` | 2px | Small inline chips / minor accents | | `{rounded.sm}` | 4px | Cards, panels — the dominant radius across the system | | `{rounded.md}` | 8px | Larger floated panels, product windows | | `{rounded.lg}` | 10px | Occasional larger containers | | `{rounded.xl}` | 12px | Rare largest-container radius | | `{rounded.pill}` | 9999px | Primary/secondary buttons (derived from the measured full-round button radius) | ### Geometry Radius is tight and restrained — 4px does most of the work, giving cards a crisp, near-square feel. The only fully-rounded elements are buttons (pill). Text inputs are fully square (0px radius). The contrast between hard-square inputs, tight-4px cards, and full-pill buttons is a deliberate part of the shape language. ## Components ### Top Navigation **`top-nav`** — Transparent-on-canvas nav bar pinned to the top of every page. Carries the Cursor wordmark + cube logo at left; center menu (Product, Enterprise, Pricing, Resources) in `{typography.body}` (system 13px); right cluster with "Sign in" text, a "Contact sales" `{component.button-secondary}`, and a "Download" `{component.button-primary}`. Background `{colors.canvas}`, text `{colors.ink}`. ### Buttons **`button-primary`** — The signature dark CTA. Background `{colors.ink}` (#26251e), label `{colors.canvas}` (#f7f7f4), type `{typography.button}` (CursorGothic 14px / 400), padding 5.6px × 10.5px, fully rounded (`{rounded.pill}`). Used for "Download", "Download for macOS". **`button-secondary`** — Outlined pill variant. Background `{colors.canvas}`, label `{colors.ink}`, 1px `{colors.hairline}` border, same pill radius + compact padding. Used for "Contact sales", "Request a demo →". **`text-link`** — Inline orange link, no background. Text `{colors.accent-orange}` (#f54e00), type `{typography.body}`, with a trailing "→". Used for "Learn about cloud agents →", "Learn about Automations →", "Explore models →". The system's only recurring chromatic accent. ### Cards & Containers **`card`** — Standard content card. Background `{colors.surface}` (#f2f1ed), rounded `{rounded.sm}` (4px), near-flat shadow (2% and 0.8% alpha). Holds feature copy and section content. **`testimonial-card`** — Customer-quote card in the 3-up testimonial grid. Background `{colors.surface}`, rounded `{rounded.sm}`, body quote in `{typography.body}` with a small avatar + name + role row. **`elevated-panel`** — The floated product-UI window (agent panel, mission-control window, PR-reviewer dialog). Background `{colors.white}` (brighter than canvas so it reads as lifted), rounded `{rounded.md}` (8px), heavy multi-layer drop-shadow + 1px hairline ring. This is the marquee marketing device — real product chrome shown floating on the warm canvas. ### Inputs & Forms **`text-input`** — Text field. Background `{colors.white}`, text `{colors.ink}`, type `{typography.body}`, fully square (`{rounded.none}` — measured 0px radius). Focus renders a soft 2px `{colors.surface-alt}` ring (see Elevation). ## Do's and Don'ts ### Do - Keep the palette warm-neutral. Canvas, surface, and hairline all sit within a few warm points of each other — resist introducing cool grays. - Reserve `{colors.accent-orange}` for inline text links with a trailing "→". It is the only chromatic accent in the marketing chrome. - Use CursorGothic weight 400 with negative letter-spacing for headlines and buttons; keep body in the compact 13px system font. - Float real product windows (`{component.elevated-panel}`) with deep soft shadows on the flat canvas. Show the product, don't illustrate it. - Keep card radius tight at `{rounded.sm}` (4px) and buttons fully pill. - Let hierarchy come from weight contrast (400 display vs 700 subhead) and floated depth, not from color-blocking. ### Don't - Don't color primary CTAs — they stay `{colors.ink}` dark. Orange is for links only. - Don't bold the display face — CursorGothic runs at 400. Heavier weights break the calm voice. - Don't apply heavy shadows to cards; reserve deep drop-shadows for floated product windows. - Don't round text inputs — they are square (`{rounded.none}`) by design. - Don't use the syntax accents (green / blue / teal / pink) in the marketing chrome; they belong inside product-UI fragments. - Don't add hover-state styling beyond default + pressed. ## Responsive Behavior ### Breakpoints Breakpoint widths were not directly measured; the following is inferred from the captured desktop layout and standard practice (derived). | Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Nav collapses; alternating feature bands stack to single column (window above copy); testimonial grid → 1-up | | Tablet | 768–1024px | Horizontal nav tightens; testimonial grid → 2-up; feature windows scale down | | Desktop | 1024–1440px | Full nav; alternating left/right feature rows; 3-up testimonials | | Wide | > 1440px | More outer canvas breathing room around floated windows | ### Touch Targets - `{component.button-primary}` / `{component.button-secondary}` use compact ~5.6px vertical padding on a 14px label — effective tap height sits near the low end; padding should be increased for touch surfaces (derived). - Nav links in `{typography.body}` (13px) are dense; mobile nav should expand spacing. ### Collapsing Strategy - Alternating feature bands collapse to a single column (product window, then copy block). - Testimonial grid reduces columns rather than shrinking type. - Floated product windows scale proportionally, retaining their browser chrome and internal legibility. ## Iteration Guide 1. Focus on ONE component at a time; reference its YAML key directly (`{component.elevated-panel}`, `{component.button-primary}`). 2. Variants (`-secondary`, focus states) live as separate entries in `components:`. 3. Use `{token.refs}` everywhere — never inline hex. 4. Never document hover. Default and Active/Pressed states only. 5. Headlines stay CursorGothic 400 with negative tracking; body stays 13px system font. The split does not blur. 6. Orange is a link-only accent — don't spread it to buttons or fills. 7. When emphasizing, float deeper before you color. ## Known Gaps - CursorGothic is a custom typeface with no public web font; a substitute (Inter / Space Grotesk) is documented. `fonts_licensed` was empty in the analysis, but the custom face is clearly non-shippable and treated as substituted. - Section-level vertical rhythm (band-to-band spacing) was not reliably captured — measured spacing tops out at 22px, which reflects component-internal padding/gaps, not the large inter-section gaps visible in screenshots. - Many measured accent hues (`{colors.accent-green}`, `{colors.accent-blue}`, `{colors.accent-teal}`, `{colors.accent-pink}`, plus #1a7f37 / #238636 / #1750eb / #171717) originate inside embedded product-UI code/diff views rather than the marketing chrome; their exact roles in the design system are approximate. - The primary button padding is reported as measured (5.6px 10.5px 5.88px) and reflects sub-pixel computed values; canonical values would round to ~6px × 10px. - Button radius was measured as an effective infinite value (3.35e7px) and mapped to `{rounded.pill}` (9999px) — derived. - Input styling beyond radius (background, border, focus color) is inferred from screenshots + the measured focus-ring shadow; a form flow would be needed to confirm. - Breakpoints, animation/transition timings, and error/success form states are out of scope for this capture.