Cursor Design System

Overview

Cursor's visual identity is built on a foundation of restrained warmth—off-white surfaces tinged with beige undertones ({colors.surface-soft} — #f2f1ed) that feel more editorial than clinical, paired with near-black ink ({colors.ink} — #26251e) that reads as sophisticated rather than severe. The system resists the cold grays typical of developer tools, opting instead for a palette rooted in natural materials: parchment, slate, and amber. This warmth creates immediate differentiation in a category dominated by blue-on-white SaaS defaults.

Brand voltage lives sparingly but deliberately. The primary amber ({colors.primary} — #c08532) appears only where action is demanded—the Download CTAs, status badges, and interactive highlights. It never washes over sections or backgrounds; it punctuates. A secondary orange ({colors.accent-orange} — #f54e00) provides urgency signals for notifications and destructive actions, while a soft lavender ({colors.signature-lavender} — #9e94d5) appears sparingly for decorative or tertiary emphasis.

The single typographic move that defines the system is the deployment of CursorGothic, a proprietary geometric sans-serif, exclusively for display roles—headlines, section titles, and signature callouts. Body copy remains in system-ui, creating a deliberate hierarchy not of size alone but of voice: the custom face carries personality; the system face delivers information. Weights stay modest throughout—display text never exceeds 400, while UI labels tap 600 only when semantic importance demands it. The result reads as confident without aggression.

Shape language leans toward the fully rounded: buttons are {rounded.pill}-shaped, cards use {rounded.lg} (10px), and even the IDE preview window softens at {rounded.md} (8px). Sharp corners exist only at the micro-scale—input fields, tab containers, and sidebar dividers maintain rectilinear precision that echoes the tool's technical domain. Shadows are substantial and multi-layered, giving product mockups physical presence without the flat-design austerity common in contemporary landing pages.

A distinct sub-system governs the IDE preview dialect—the simulated application interface shown within marketing surfaces. Here, monospace type ({typography.mono}), tab-based navigation chrome, syntax-highlighted code blocks, and panel-split layouts create a recognizable "product skin" that feels native to developers while remaining legible at marketing scales. This dialect uses its own surface token stack ({colors.ide-window}, {colors.ide-sidebar}, {colors.ide-editor-pane}) derived from but distinct from the marketing surface palette.

Key Characteristics

• Off-white canvas ({colors.surface-soft} — #f2f1ed) with warm undertones, never pure white or cool gray.
• Near-black ink ({colors.ink} — #26251e) for all primary text, with opacity variants for hierarchy.
• Golden amber brand color ({colors.primary} — #c08532) reserved for CTAs, badges, and active states.
• Proprietary CursorGothic typeface for all display text ({typography.display-lg}, {typography.display-md}); system-ui for body ({typography.body-md}).
• Pill-shaped buttons ({rounded.pill}) with generous horizontal padding.
• Multi-layered shadows ({extensions.shadows.lg}) on product preview cards for tactile depth.
• Monospace Berkeley Mono for all code, filenames, and technical labels ({typography.mono}).
• Spacing scale anchored at 8px ({spacing.lg}) with fine-grained 2–6px tokens for tight UI work.
• Light mode only; no dark theme detected in current implementation.

Colors

Brand & Accent

• Primary ({colors.primary} — #c08532): Golden amber used for primary CTA buttons, download triggers, brand badges, and active link states. The single source of brand warmth in an otherwise neutral palette.
• Primary Hover ({colors.primary-hover} — #d4943f): Lightened amber for hover states on primary buttons and interactive elements.
• Primary Active ({colors.primary-active} — #a67529): Deepened amber for pressed/active states, maintaining visibility under interaction.
• Accent Orange ({colors.accent-orange} — #f54e00): High-voltage orange used for urgent notifications, error-adjacent warnings, and destructive action indicators.
• Signature Lavender ({colors.signature-lavender} — #9e94d5): Muted purple used sparingly for decorative accents, gradient endpoints, and tertiary visual interest points.

Surface

• Canvas (Dark) ({colors.canvas} — #26251e): Near-black used for the top nav logo mark background, primary button fills, and skip-navigation element. Functions as the deepest surface in the system despite its darkness.
• Surface Base ({colors.surface} — #f7f7f4): Brightest off-white, used for the top navigation bar background and card interiors requiring maximum contrast.
• Surface Soft ({colors.surface-soft} — #f2f1ed): Primary page background color with perceptible warm-beige tint. Used for hero bands, section alternation, and the dominant canvas across landing pages.
• Surface Strong ({colors.surface-strong} — #e6e5e0): Medium-warm gray for elevated surfaces—IDE chrome headers, hovered card backgrounds, and bordered container backgrounds.
• Surface Elevated ({colors.surface-elevated} — #ebeae5): Subtle step between base and strong; used for floating panels, dropdown backgrounds, and secondary elevation layers within product previews.

Text & Ink

• Ink ({colors.ink} — #26251e): Primary text color for headlines, body copy, navigation links, and all readable content. Near-black with slight warmth.
• Body ({colors.body} — #141414): Deepest black variant for maximum-weight body text in long-form contexts and high-density reading areas.
• Muted (Full) ({colors.muted} — #26251e): Secondary text matching ink value; used where semantic separation comes from size/weight rather than color shift.
• Muted Medium ({colors.muted-medium} — rgba(38, 37, 30, 0.68)): 68% opacity ink for secondary labels, timestamps, metadata, and supporting text beneath headings.
• Muted Soft ({colors.muted-soft} — rgba(38, 37, 30, 0.5)): 50% opacity ink for placeholder text, disabled labels, and tertiary information.
• Muted Faint ({colors.muted-faint} — rgba(38, 37, 30, 0.4)): 40% opacity ink for decorative dividers, watermark text, and lowest-priority UI hints.
• On Primary ({colors.on-primary} — #ffffff): Pure white text atop {colors.primary} and {colors.canvas} backgrounds, ensuring AA contrast compliance.
• On Dark ({colors.on-dark} — #f7f7f4): Off-white text for dark surface contexts where pure white would create harshness.
• On Canvas ({colors.on-canvas} — #f7f7f4): Off-white text specifically tuned for readability against {colors.canvas} backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(38, 37, 30, 0.1)): 10% opacity ink borders for subtle dividers, card outlines, and non-interactive boundaries.
• Hairline Soft ({colors.hairline-soft} — rgba(38, 37, 30, 0.2)): 20% opacity ink for input borders, focus rings, and interactive element edges requiring slightly more definition.
• Border Input ({colors.border-input} — rgba(38, 37, 30, 0.15)): Mid-opacity border specifically for form inputs and editable fields.

Semantic

• Success ({colors.success} — #22c55e): Green for confirmation states, successful operations, and positive indicators.
• Error ({colors.error} — #ef4444): Red for validation failures, error messages, and destructive feedback.
• Warning ({colors.warning} — #f59e0b): Amber-yellow for caution states and attention-requiring notices.
• Link ({colors.link} — #26251e): Inline link color matches ink by default; differentiation comes from underline or hover behavior.
• Link Active ({colors.link-active} — #c08532): Active/hover state for inline links shifts to brand amber, creating clear affordance feedback.

Typography

Font Family

The system employs three distinct font families, each mapped to specific functional roles:

CursorGothic ("CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) is the proprietary geometric sans-serif serving as the brand's signature voice. It appears exclusively in display contexts: the hero headline ({typography.display-lg}), section titles ({typography.display-md}), and caption-style callouts ({typography.caption}). Its character is modern but not austere—geometric construction with humanist proportions that avoid the coldness of Futra or the ubiquity of Inter. The fallback chain degrades gracefully to system fonts if the custom face fails to load.

System UI Stack (system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif) handles everything else: body copy ({typography.body-md}), navigation links ({typography.nav-link}), UI labels ({typography.label}), and button text ({typography.button}). This choice prioritizes native rendering quality across platforms—San Francisco on macOS, Segoe UI on Windows—ensuring the tool reads as "of the platform" rather than imposing a foreign typeface. Weight stays at 400 for reading text, rising to 600 only for title-level semantics ({typography.title-md}, {typography.title-sm}).

Berkeley Mono (berkeleyMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) provides the code-facing voice. Deployed for all monospace content—filenames, code snippets, terminal output, and IDE preview text ({typography.mono}). Berkeley Mono is a premium monospace with excellent legibility at small sizes and distinctive character forms (particularly the lowercase a, l, and i) that signal technical sophistication.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 40px | 400 | 1.25 | -0.02em | Hero headlines on wide viewports; rare, maximal impact | | {typography.display-lg} | 26px | 400 | 1.25 | -0.325px | Section hero headlines, H1-equivalent | | {typography.display-md} | 22px | 400 | 1.3 | -0.11px | Subsection titles, feature block headers | | {typography.title-lg} | 18px | 600 | 1.4 | 0 | Card titles, pricing tier names, prominent labels | | {typography.title-md} | 14px | 600 | 1.55 | 0 | UI section headers, form field labels, list item titles | | {typography.title-sm} | 13px | 600 | 1.55 | 0 | Compact headers, table column headers, dense UI labels | | {typography.body-md} | 13px | 400 | 1.55 | 0 | Primary body copy, paragraphs, descriptions | | {typography.body-sm} | 12px | 400 | 1.5 | 0 | Secondary body, metadata, timestamps, legal text | | {typography.caption} | 14px | 400 | 1.5 | 0.14px | Signature callouts, muted display text with slight expansion | | {typography.caption-muted} | 14px | 400 | 1.5 | 0.14px | Caption variant with muted color applied | | {typography.button} | 14px | 500 | 1.25 | 0 | Button text, CTA labels | | {typography.label} | 12px | 500 | 1.4 | 0 | Badge text, tag labels, compact UI identifiers | | {typography.nav-link} | 14px | 400 | 1.4 | 0 | Navigation menu items, header utility links | | {typography.mono} | 13px | 400 | 1.55 | 0 | Code snippets, filenames, terminal text, IDE content |

Principles

The typography system's most striking principle is weight restraint. Display text never exceeds 400—even the largest headline sits at regular weight, relying on scale and the character of CursorGothic itself to command attention. This creates a "quiet confidence" aesthetic that distinguishes Cursor from competitors who reach for bold weights at every opportunity. When emphasis is needed, the system turns first to size differential, then to the semibold 600 weight reserved for {typography.title-*} and {typography.label} roles.

Hierarchy is carried through a three-variable system: family (custom vs. system vs. mono), size (the 12px–40px range), and color opacity (full ink down to 40% faint). Letter-spacing manipulation is minimal and purposeful—{typography.display-lg} uses -0.325px tracking to tighten the geometric face at large sizes, while {typography.caption} applies +0.14px expansion for airiness at smaller sizes. No uppercase transformations are applied; the system trusts sentence case throughout.

The mono-to-body relationship is carefully calibrated: both {typography.mono} and {typography.body-md} sit at 13px, meaning code snippets integrate visually with surrounding prose without jarring scale changes. The differentiator is purely the font family, allowing readers to register "this is code" through character shape alone—a subtlety that rewards technical audiences.

Note on Font Substitutes

CursorGothic is a proprietary font not available via Google Fonts or open-source distribution. For implementations without access to the licensed face, substitute with DM Sans (Google Fonts) as the closest match in geometric construction, x-height, and neutral tone. DM Sans offers similar proportions at 400 weight with a slightly more pronounced geometric quality. Define the substitution via CSS variable:

--font-display: "DM Sans", "CursorGothic Fallback", system-ui, sans-serif;

For Berkeley Mono, substitute with JetBrains Mono (available on Google Fonts)—it shares the same premium monospace philosophy, distinctive character forms, and excellent rendering at 13px. For the system-ui stack, no substitution is needed; the native stack already provides optimal results.

Layout

Spacing System

• Base unit: 2px ({spacing.xxs}), with the most frequently occurring practical unit being 8px ({spacing.lg} — 242 instances in extracted DOM).
• Tokens: {spacing.xxs} (2px) — micro-adjustments and hairline offsets; {spacing.xs} (3px) — icon internal spacing; {spacing.sm} (4px) — tight gaps between inline elements; {spacing.md} (5px) — compact internal padding; {spacing.base} (6px) — common gap between sibling elements; {spacing.lg} (8px) — standard padding/gap, the workhorse token; {spacing.xl} (10px) — button padding vertical; {spacing.2xl} (12px) — card internal padding; {spacing.3xl} (15px) — comfortable component margins; {spacing.4xl} (16px) — section-level gutters; {spacing.5xl} (18px) — between block elements in dense layouts; {spacing.6xl} (20px) — generous component separation; {spacing.section} (48px) — vertical rhythm between major page sections; {spacing.section-xl} (80px) — hero and footer band padding.
• Section padding (vertical): {spacing.section-xl} (80px) — used in the hero band and footer regions for breathing room.
• Card internal padding: {spacing.2xl} (12px) to {spacing.lg} (8px) depending on density; see {component.card-surface} and {component.ide-window}.
• Gutters: Horizontal page gutter is {spacing.4xl} (16px) on mobile, scaling to {spacing.section} (48px) on desktop within a max-width container of 1440px.

Grid & Container

The layout operates within a 1440px max-width container centered in the viewport. Content is left-aligned with generous right-margin whitespace on ultra-wide screens rather than centering content blocks—a choice that creates asymmetric visual tension and gives the design an editorial, print-inspired feel.

The grid behaves as a fluid single-column layout for hero content (text left, illustration right) transitioning into multi-column grids for feature showcases and comparison tables. The IDE preview component occupies full available width within its container, simulating a real application window that spans edge-to-edge of the content area. No rigid 12-column system is evident; instead, the layout employs contextual alignment where elements snap to logical zones (nav rail, content well, sidebar) rather than arbitrary grid columns.

Hero column split follows approximately a 45/55 ratio: the text column (headline + CTAs) takes roughly 45% of the content width, while the product preview illustration claims the remaining 55%. This asymmetry ensures the visual weight of the IDE mockup balances the typographic impact of the headline without either dominating.

Whitespace Philosophy

The system practices generous-but-intentional whitespace. Sections breathe with 80px vertical padding, and the hero band avoids cramping by allowing the headline and CTA pair to occupy their own visual zone before the product preview begins. However, whitespace is not unlimited—the IDE preview itself is information-dense, packing tabs, file trees, editors, and panels into a realistic simulation. The philosophy is: editorial breathing room around the product, product-like density inside the product.

Header Architecture

┌──────────────────────────────────────────────────────────────────────────────┐
│ [LOGO]     Product ▾   Enterprise   Pricing   Resources ▎    Sign in  [CTA] │
│            ~~~~~~~                  (centered nav items)              [DL]   │
│                                                                              │
│ ← 1440px max-width, centered, bg: {colors.surface} →                       │
└──────────────────────────────────────────────────────────────────────────────┘

Navigation follows a classic flush-left logo, distributed-center links, flush-right utilities pattern. The logo (Cursor wordmark + icon) anchors the left. Navigation items (Product with dropdown caret, Enterprise, Pricing, Resources with dropdown caret) cluster center-left. Utilities (Sign in text link, Contact Sales outline button, Download primary button) occupy the right. The header background is {colors.surface} (#f7f7f4) with a height of 64px. Dropdown carets indicate expandable menus on Product and Resources.

Hero Section

┌─────────────────────────────────────────────────────────────────────────────┐
│                                                                             │
│  Built to make you extraordinarily productive,                              │
│  Cursor is the best way to code with AI.          ┌─────────────────────┐   │
│                                                   │                     │   │
│  [Download for macOS ↓]  [Request a demo →]       │   IDE PREVIEW       │   │
│                                                   │   (screenshot/mockup)│   │
│                                                   │   shadow: lg        │   │
│                                                   │   rounded: lg       │   │
│                                                   └─────────────────────┘   │
│                                                                             │
│  ← bg: {colors.surface-soft} →                                             │
└─────────────────────────────────────────────────────────────────────────────┘

The hero uses a two-zone layout: the left zone contains the {typography.display-lg} headline in {colors.ink}, followed by optional subtext, then the CTA pair—{component.button-download} (dark pill) and {component.button-secondary} (ghost pill with arrow). The right zone contains the IDE preview card, which receives {extensions.shadows.lg} for dramatic elevation and {rounded.lg} corner treatment. Vertical padding is {spacing.section-xl} (80px).

IDE Preview Component Structure

The product mockup is a nested-panel simulation resembling the actual Cursor desktop application:

┌──────────────────────────────────────────────────────────────────┐
│ ● ● ●                    Cursor Desktop              [_][□][×]   │ ← ide-header
├────────────┬─────────────────────────────────┬───────────────────┤
│ IN PROGRESS│ Plan Mission Control             │feature-prd.md  × │ ← tabs
│            │                                 │presence.ts        │
│ ○ Analyze..│ let's build a mission control...│                   │
│            │                                 │ Plans › feature.. │
│ READY FOR  │                                 │           [Build] │ ← accent btn
│ REVIEW 5   │  Mission Control Interface      │                   │
│            │  A grid view of all open...     │ ┌───────────────┐ │
│ ○ Build..  │                                 │ │ Cursor CLI    │ │ ← floating pane
│ ○ Plan...  │  Trigger                       │ │ combines key.. │ │
│            │  Menu item in MenuBar.tsx...    │ │ report.py +60  │ │
│ ○ PyTorch..│                                 │ │ test_usage..   │ │
│            │  Questions                      │ └───────────────┘ │
│ ○ Set up.. │  How should Mission Control...  │                   │
│            │  1 Gesture (swipe up...)        │                   │
└────────────┴─────────────────────────────────┴───────────────────┘

Left sidebar (~25% width): task/status list with circular indicators, labels, and relative timestamps. Center pane (~50% width): main editor showing markdown/code content. Right pane (~25% width): file tabs, composer selector, and a floating CLI overlay with additional shadow layer. The entire assembly uses {component.ide-window} styling with nested {component.ide-sidebar}, {component.ide-editor-pane}, and {component.ide-header} components.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, background only | Page canvas, header band, footer band, inline elements | | 1 – Hairline | 1px {colors.hairline} border | Card outlines, divider lines, input resting state | | 2 – Soft | {extensions.shadows.sm} | Hovered cards, subtle lift states | | 3 – Medium | {extensions.shadows.md} | Dropdown menus, tooltips, focus-within containers | | 4 – Prominent | {extensions.shadows.lg} | Hero IDE preview card, featured product mockups, modal backsrops | | 5 – Floating | {extensions.shadows.floating} | Stacked overlays, second-plane floating panes (CLI overlay in IDE mockup) | | 6 – Maximal | {extensions.shadows.xl} | Top-most modals, alert toasts, drag-surfaces |

The depth system favors shadow-only elevation over color-block layering. Surfaces do not darken as they rise; instead, increasingly diffuse and offset shadows create the illusion of distance from the canvas. Shadow color remains neutral (black at varying opacities) without cool-toned tints, preserving the warmth of the underlying surface palette. A notable detail: many shadows include a hairline border as the final layer (e.g., 0 0 0 1px rgba(38, 37, 30, 0.1)), which prevents the elevated element from visually dissolving into white backgrounds at shallow angles.

Focus rings use the double-ring technique: a 2px gap of {colors.canvas} surrounded by a 4px outer ring of {colors.primary}, creating a visible but non-intrusive focus indicator that satisfies WCAG requirements without the harshness of solid-color outlines.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 2px | Badge corners, micro-elements, tag shapes | | {rounded.sm} | 4px | Accent buttons, small input fields, compact cards | | {rounded.DEFAULT} | 6px | Default component rounding, general-purpose | | {rounded.md} | 8px | IDE window frames, panel corners, medium cards | | {rounded.lg} | 10px | Large cards, hero preview container, prominent surfaces | | {rounded.xl} | 12px | Feature showcase cards, testimonial avatars | | {rounded.pill} | 9999px | All buttons (primary, secondary, outline, nav CTAs) | | {rounded.full} | 9999px | Avatar circles, icon containers requiring perfect roundness |

The shape vocabulary is intentionally bimodal: interactive elements (buttons, pills, tags) go fully round at {rounded.pill}, while containers and surfaces stop at {rounded.lg} (10px). This creates a visual grammar where "clickable = infinite curve, containable = controlled curve." The IDE preview dialect breaks slightly from this, using {rounded.md} (8px) for its window frame to evoke native OS chrome rather than web-card aesthetics.

Photography Geometry

No photographic imagery is present in the extracted viewport—the hero features a constructed UI mockup (the IDE preview) rather than photography. The mockup maintains {rounded.lg} (10px) external corners with {rounded.md} (8px) internal panel divisions. Aspect ratio is approximately 16:10 (widescreen), mimicking actual laptop display proportions. Future photography (team photos, office shots) should adopt {rounded.lg} or {rounded.xl} depending on context, with no hard crop masks—gentle corner softening only.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g., {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The persistent header bar spanning the full viewport width at 64px height. Background {colors.surface} (#f7f7f4), text rendered in {colors.ink} via {typography.nav-link}. Contains the logo anchor on the left, navigation links centered-left, and utility actions (Sign in, Contact Sales, Download) on the right. Has no visible border or shadow; separation from content is implicit through background color difference.

{component.top-nav-link} — Individual navigation menu items within the header. Transparent background, {colors.ink} text at {typography.nav-link} (14px/400). Padding of 5.6px 15px horizontally. On Product and Resources, a dropdown caret icon (↓) sits adjacent, indicating expandable sub-menus. Active states shift text toward {colors.link-active}.

{component.top-nav-logo} — The Cursor wordmark and geometric icon at the header's left edge. Renders in {colors.canvas} (dark fill) against the light {colors.surface} header background, creating the inverted logo treatment common in light-mode headers. No background fill, transparent.

{component.button-primary} — The primary conversion button pattern. Background {colors.canvas} (near-black), text {colors.on-canvas} (off-white) at {typography.button} (14px/500). Fully rounded with {rounded.pill}. Padding 10px 20px. Used for the "Download" CTA in the header and hero. Active variant {component.button-primary-active} deepens the background to #1a1915.

{component.button-secondary} — Ghost/outline-style secondary action. Transparent background with {colors.ink} text at {typography.button}. {rounded.pill} shape, 10px 20px padding. Used for "Request a demo" and similar non-primary conversions. Includes a trailing arrow indicator (→) in production. Active state {component.button-secondary-active} reveals {colors.surface-strong} background.

{component.button-accent} — Small amber-filled action button. Background {colors.primary} (#c08532), text {colors.on-primary} (#ffffff) at {typography.label} scale (12px/500). Less rounded than primary buttons at {rounded.sm} (4px), tighter padding 6px 12px. Used for "Build" buttons and inline CTAs within the IDE preview.

{component.button-outline} — Tertiary outlined button with transparent fill and subtle border. Text in {typography.label} (12px), {rounded.pill} geometry. Used for "Contact Sales" in the header navigation area.

{component.button-download} — Hero-specific download CTA variant. Identical to {component.button-primary} in color scheme but with increased padding (11px 24px) for greater prominence. Includes a downward arrow icon (↓) suffix indicating download action.

{component.skip-nav} — Accessibility skip-navigation link positioned off-screen until focused. Background {colors.canvas}, text {colors.on-canvas} at nav-link scale, {rounded.pill} shape. Appears as a floating pill when activated via keyboard navigation.

Cards & Containers

{component.card-surface} — General-purpose content card. Background {colors.surface} (#f7f7f4), text {colors.ink} at {typography.body-md}. Rounded {rounded.lg} (10px) with {spacing.lg} (8px–12px) internal padding. Used for feature descriptions, pricing tiers, and informational blocks outside the IDE preview context.

{component.card-preview} — Product demonstration card housing the IDE mockup. Surface {colors.surface}, text in {typography.mono} for any overlay content. {rounded.lg} corners, zero internal padding (content fills edge-to-edge). Receives {extensions.shadows.lg} for dramatic elevation above the hero band.

{component.hero-band} — Full-viewport-width section containing the headline, subtext, and CTA pair alongside the product preview. Background {colors.surface-soft} (#f2f1ed), text {colors.ink}. Typography for headline is {typography.display-lg}. Padding {spacing.section-xl} vertically with horizontal gutter. Acts as the visual anchor of the landing experience.

{component.footer} — Page-footer region. Background {colors.surface-soft}, text {colors.muted} at {typography.body-sm}. Generous padding {spacing.section} vertical. Contains legal links, social icons, and organizational information in a multi-column layout.

IDE Preview Dialect Components

{component.ide-window} — Top-level container for the simulated IDE interface. Background {colors.surface-elevated} (#ebeae5), text {colors.ink} rendered in {typography.mono}. {rounded.md} (8px) corners. Houses the three-pane layout (sidebar, editor, inspector). Receives layered shadow treatment combining multiple blur radii.

{component.ide-header} — Title bar of the IDE window. Background {colors.surface-strong} (#e6e5e0), text {colors.muted} at {typography.caption} scale. Height fixed at 36px. Contains traffic-light dots (●●●) on the left, window title "Cursor Desktop" centered, and window controls on the right. Rounded top corners only ({rounded.md} {rounded.md} 0 0).

{component.ide-sidebar} — Left panel of the IDE showing tasks/plans. Background {colors.surface} (#f7f7f4), text {colors.ink} at {typography.body-sm} (12px). No border-radius (integrates flush with window frame). Contains hierarchical list items with status indicators, labels, and timestamp metadata.

{component.ide-editor-pane} — Center content area showing file contents. Background {colors.surface}, text {colors.ink} in {typography.mono}. No corner radius. Contains file tab bar, editor scroll area, and inline UI elements (Composer selector, Build button).

{component.ide-tab-active} — Currently selected file tab in the IDE tab bar. Background {colors.surface} (blends with editor), text {colors.ink} at {typography.body-sm}. No rounding; tabs are rectangular with bottom-border indication of active state.

{component.ide-tab-inactive} — Non-selected file tab. Transparent background, text {colors.muted-soft} (50% opacity ink) at {typography.body-sm}. Shows filename with close (×) icon on hover.

{component.badge-status} — Colored status badge within the IDE. Background {colors.accent-orange} (#f54e00), text {colors.on-primary} at {typography.label} (12px/500). {rounded.sm} (4px) corners, tight padding 2px 8px. Used for "now" indicators, counts, and status labels.

{component.badge-neutral} — Uncolored informational badge. Background {colors.surface-strong}, text {colors.ink} at {typography.label}. {rounded.xs} (2px) for minimal rounding. Used for file-type indicators, version tags, and metadata labels.

Inputs & Forms

{component.input-text} — Single-line text input field. Transparent background (inherits parent surface), text {colors.ink} at {typography.mono} (for code inputs) or {typography.body-md} (for general text). Zero border-radius (rectangular), padding 8px. Border appears on focus via {colors.hairline-soft} ring. Used for search fields, filename inputs, and short-form entries within the IDE preview.

{component.textarea-input} — Multi-line text input. Transparent background, text {colors.ink} at {typography.body-md} (13px/400). No border-radius, padding 8px 8px 6px (slightly less bottom padding to optically balance line height). Used for composer areas, comment fields, and prompt inputs.

Links

{component.link-inline} — Standard inline hyperlink within body text. Transparent background, text {colors.link} (matches ink color #26251e) at {typography.body-md}. Differentiation occurs through underline (present or hover-revealed). Active state {component.link-inline-active} shifts to {colors.link-active} (amber).

Do's and Don'ts

Do

• Use {colors.primary} (#c08532) exclusively for actionable elements—buttons, active states, badges, and interactive highlights—never for decorative backgrounds or large color blocks.
• Apply {rounded.pill} to all clickable buttons and CTAs; reserve {rounded.lg} (10px) for container cards and {rounded.md} (8px) for window/chrome elements.
• Render display text (headlines, section titles) in CursorGothic at weight 400; never apply bold (700) or semibold (600) to the display face—it carries hierarchy through scale and character, not weight.
• Use opacity variants of {colors.ink} ({colors.muted-medium}, {colors.muted-soft}, {colors.muted-faint}) for text hierarchy rather than introducing new color values; the ink-at-opacity system covers all non-semantic text needs.
• Layer shadows using the defined {extensions.shadows.*} tokens, always including the final hairline border layer (e.g., 0 0 0 1px rgba(...)) to prevent edge dissolution on light backgrounds.
• Reserve Berkeley Mono ({typography.mono}) for code, filenames, and technical identifiers; never use monospace for body copy, labels, or UI text outside the IDE preview dialect.
• Maintain {spacing.lg} (8px) as your baseline rhythmic unit for component-internal padding and gaps; escalate to {spacing.2xl} (12px) only for card-level containers and {spacing.section-xl} (80px) for band-level spacing.
• Pair the dark {colors.canvas} button background with {colors.on-canvas} (#f7f7f4) text—not pure white—to achieve softer contrast that aligns with the warm palette's tone.
• Use the IDE preview dialect components ({component.ide-window}, {component.ide-sidebar}, etc.) with their dedicated surface tokens when constructing product mockups; these differ from general marketing card tokens.

Don't

• Don't introduce cool gray tones (#f0f0f0, #e5e5e5) for surfaces—all surface tokens carry warm undertones (#f7f7f4, #f2f1ed, #e6e5e0); cool grays will read as foreign.
• Don't bold {typography.display-lg} or {typography.display-md} headlines—the display face is designed to perform at 400 weight; adding weight destroys its refined character.
• Don't use {colors.signature-lavender} (#9e94d5) for primary actions or critical UI elements; it's reserved for decorative/tertiary accents and will fail AA contrast checks at small sizes.
• Don't apply {rounded.pill} to cards, panels, or windows—fully rounded corners are exclusive to interactive buttons; containers must use {rounded.md} through {rounded.lg}.
• Don't replace {colors.ink} (#26251e) with pure black (#000000) for text—the warmth in the ink value is essential to the palette's cohesion.
• Don't add gradients to button backgrounds or hero bands; the system is flat-color with depth achieved through shadow layering only.
• Don't exceed 600 weight for any typography role; the heaviest weight in the system is {typography.title-md} at semibold 600, and applying it beyond label/title scope breaks the restraint principle.
• Don't use the same shadow token for both a hovered card ({extensions.shadows.sm} or {extensions.shadows.md}) and a hero preview card ({extensions.shadows.lg}); elevation levels must map to semantic depth, not arbitrarily.
• Don't render navigation links in anything other than {typography.nav-link} (14px/400); nav items are intentionally understated compared to body text to avoid competing with content.
• Don't omit the double-ring focus style ({extensions.shadows.focus-ring}) on keyboard-navigable elements; solid-color outlines violate the system's refined interaction language.

Motion & Animation

Transition Tokens

/* Color transitions — standard duration for all property color changes */
--transition-color: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    outline-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Transform transitions — for movement, scale, and spatial animations */
--transition-transform: transform 0.14s cubic-bezier(0.25, 1, 0.5, 1);

/* Border-specific transition */
--transition-border: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Opacity fade transitions */
--transition-opacity: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Scroll-triggered entrance animation */
--transition-entrance: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

• newsletter-submit-pulse — Brief radial pulse emanating from newsletter submission button on click, confirming action.
• gallery-marquee-item-slide-up — Upward sliding motion for marquee/gallery carousel items entering the viewport.
• spin — Continuous 360° rotation for loading spinners and indeterminate progress indicators.
• pulse / pulse-emit / pulse-bit — Multi-stage pulse sequence for status indicators, connection states, and "live" badges—emit expands outward, bit flickers internally.
• swipe-out-left/right/up/down — Directional exit animations for dismissible elements (toasts, notifications, list items) that animate out along the swipe axis.
• sonner-fade-in/out/spin — Toast notification lifecycle: fade in from transparent, hold, optionally spin icon during action, fade out.
• tabCaretBlink — Periodic opacity toggle (1→0→1) for the blinking cursor in code editor simulations.
• fadeIn — Simple opacity 0→1 transition for gentle appearance.
• fadeSlideUp — Combined opacity fade and upward Y-axis translation (-20px→0) for scroll-triggered content entrances.
• fadeSlideRight — Fade combined with leftward X-axis translation for staggered list item appearances.
• barGrow — Width 0→100% transition for progress bars and loading indicators.
• tilePopIn — Scale(0.95)→scale(1) with opacity fade for grid tile entrance animations.

Interaction Patterns

• Button press state: Background color shift to active variant ({component.button-primary-active}) over 0.15s with cubic-bezier(0.4, 0, 0.2, 1) easing—snappy but not jarring.
• Card hover lift: Subtle Y-axis translate(-2px) combined with shadow upgrade from sm→md over 0.14s with overshooting ease cubic-bezier(0.25, 1, 0.5, 1).
• Scroll-triggered reveals: Content blocks below the fold fade-and-slide-up (fadeSlideUp) using IntersectionObserver, staggered by 80ms per element for cascading effect.
• Dropdown menu reveal: ScaleY(0.95)→scaleY(1) from origin-top with opacity fade, accompanied by shadow layer-in, over 0.2s.
• Tab switching (IDE preview): Content crossfade with 150ms duration; no slide animation to preserve the "instantaneous app" feeling.
• Toast notifications: Slide in from top-right with sonner-fade-in, auto-dismiss with swipe-out-right after 4s, manual dismiss via swipe gesture.
• Focus rings: Instantaneous (0ms transition) ring appearance on focus, using the double-ring {extensions.shadows.focus-ring} style.
• Marquee/carousel: Continuous linear translation for logo walls and testimonial tickers; pause on hover.

Imagery Style

• The hero features a constructed UI mockup of the Cursor IDE interface, not a photograph or abstract illustration. This mockup is rendered with pixel-accurate fidelity to the real product, including window chrome, file tabs, syntax highlighting approximations, and panel layouts.
• The mockup sits atop a soft painterly background—appears to be a landscape painting or textured wash in desaturated earth tones (beiges, soft greens, grays), providing atmospheric warmth behind the sharp-edged UI.
• Imagery philosophy is product-first: the tool speaks for itself. No lifestyle photography of developers, no abstract gradient blobs, no 3D illustrations. The visual story is "here is the interface you will use."
• The IDE preview uses layered depth—the main window casts a large shadow, and within it, a floating CLI panel casts its own smaller shadow, creating physical stacking.
• Any future photography should be shot in warm, natural lighting with shallow depth of field, processed to favor the existing palette's beige-gray spectrum. Avoid high-contrast black-and-white or saturated color photography.
• Illustrations (if added) should follow a flat, minimal vector style with stroke weights of 1.5–2px, using only {colors.ink}, {colors.muted-soft}, and {colors.primary} as the illustration palette.

Icon System

• Library: Lucide (detected from framework analysis and icon class patterns like icon-glyph-09).
• Specific icons observed:
  • ArrowDown/ChevronDown — Dropdown carets on "Product" and "Resources" navigation items
  • ArrowRight — Trailing icon on "Request a demo" ghost button (→)
  • Download/ArrowDownLine — Suffix icon on "Download for macOS" button (↓)
  • X/Close — Tab close buttons in IDE preview (×)
  • Circle/CircleDot — Task status indicators in IDE sidebar (○, ◉)
  • CheckCircle — Completed task markers
  • Terminal/Square — File type indicators or pane icons
  • ExternalLink — Outbound link indicators
  • Menu/Hamburger — Mobile navigation toggle (inferred)
• Treatment: Stroke-based icons (not filled) at 1.5–2px stroke width. Color set to currentColor, inheriting from parent text color (typically {colors.ink} or {colors.muted}). Size aligned with adjacent text: 16px for inline icons (navigation carets, button suffixes), 20px for standalone icons.
• Custom icon font: CursorIcons16 detected in font stack—likely a custom icon set for brand-specific marks (the Cursor logo glyph, proprietary symbols). Falls back to Lucide for standard UI icons.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — inferred from __next_s runtime markers in source
- Styling:        Tailwind CSS v3.4+ — confirmed by tailwindLikely flag, utility class patterns,
                  and arbitrary-value syntax (pt-[var(--site-header-height)])
- Fonts:          Self-hosted woff2 files for CursorGothic and Berkeley Mono;
                  Google Fonts CDN fallback for DM Sans (display substitute)
                  and JetBrains Mono (mono substitute)
- Animation:      Tailwind-built-in transitions + CSS @keyframes for named animations;
                  Framer Motion recommended for complex scroll-triggered sequences
- Icons:          Lucide React (lucide-react package) for standard iconography;
                  custom SVG for CursorIcons16 brand marks
- Component lib:  Custom components (no shadcn/Radix detected); consider Radix Primitives
                  for accessible dropdowns, dialogs, and toasts if building interactives

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; hero stacks (text above IDE preview); nav collapses to hamburger; IDE preview simplifies to single-pane view | | Tablet | 640px – 1024px | Two-column hero maintained but compressed; nav items may truncate; IDE preview shows 2-pane layout (sidebar + editor) | | Desktop | 1024px – 1440px | Full hero layout (45/55 text-to-preview split); complete IDE 3-pane mockup; full navigation visible | | Wide | > 1440px | Container maxes at 1440px centered; additional horizontal whitespace; no content stretching |

Touch Targets

• {component.button-primary} and {component.button-download}: ~44px minimum touch height (padding 10–11px vertical + 14px font meets guideline).
• {component.button-secondary}: ~44px height with 10px vertical padding—meets WCAG AAA 44×44 minimum.
• {component.top-nav-link}: Nav items have ~32px touch height (5.6px padding × 2 + ~20px font); may fall short on mobile—consider increasing to 44px via responsive padding boost.
• {component.input-text}: 32px effective height (8px padding × 2 + ~16px line height); recommend 44px minimum for mobile forms.
• {component.badge-status}: ~24px height—acceptable for non-interactive labels; if made clickable, expand to 32px+.

Collapsing Strategy

• Navigation: At mobile breakpoint, horizontal nav links collapse into a hamburger-menu drawer sliding from the right. Logo remains visible; "Download" CTA may persist as a compact pill in the header bar.
• Hero columns: Text column and IDE preview column stack vertically—text occupies full width above, preview scales to full width below (maintaining aspect ratio). CTA buttons remain inline with text.
• IDE preview: On mobile, the three-pane layout (sidebar + editor + inspector) collapses to a single editor pane with a collapsible sidebar drawer. Tab bar persists; floating CLI overlay may hide or become a full-width banner.
• Spacing scaling: Vertical section padding reduces from {spacing.section-xl} (80px) on desktop to {spacing.section} (48px) on mobile, preserving proportionality.
• Typography scaling: {typography.display-lg} may reduce from 26px to ~22px on mobile; {typography.display-xl} (if used deeper in page) scales from 40px to ~32px. Body text remains 13px across all breakpoints.

Image Behavior

• Hero IDE mockup: Maintains aspect ratio (approximately 16:10) while scaling width to container. On mobile, height may be capped at 400px to prevent excessive scrolling. Shadow intensity remains constant; {extensions.shadows.lg} does not scale down.
• Background texture: The painterly backdrop behind the IDE preview likely uses background-size: cover with background-position: center; on mobile it may crop to the center region, losing peripheral details.
• Logo: SVG wordmark scales fluidly; icon portion remains crisp at all sizes due to vector format.
• Avatars (future): If team/testimonial avatars are added, they should maintain {rounded.full} (circle) or {rounded.xl} (squircle) at 48–64px on all breakpoints, with object-fit: cover.

Iteration Guide

1. Initialize a Next.js project with App Router and Tailwind CSS v3.4+. Configure tailwind.config.ts to accept the custom color, typography, spacing, and borderRadius values from this DESIGN.md's YAML frontmatter as design tokens.
2. Define CSS custom properties for the font families (--font-display, --font-body, --font-mono) mapping CursorGothic → DM Sans fallback, system-ui as-is, and Berkeley Mono → JetBrains Mono fallback. Import Google Fonts for substitutes; self-host proprietary faces from /public/fonts/ or a CDN.
3. Build the top navigation first: fixed/sticky header at 64px height, {colors.surface} background, flexbox layout with justify-content: space-between. Implement the logo (SVG), nav links array (with dropdown caret icons from Lucide), and right-side utilities (Sign in text link, Contact Sales outline button, Download primary button).
4. Construct the hero band next: {colors.surface-soft} background, 80px vertical padding, max-width 1440px container. Implement the two-column grid (CSS Grid or flexbox) with 45/55 approximate ratio. Left column: {typography.display-lg} headline in CursorGothic, optional {typography.body-md} subtext, then the CTA row ({component.button-download} + {component.button-secondary}).
5. Build the IDE preview mockup as a static HTML/CSS construction (no interactivity needed for marketing surface). Use nested flex/grid for the three-pane layout: 25% sidebar (task list), 50% editor (markdown content), 25% inspector (tabs + floating CLI). Apply {extensions.shadows.lg} to the outer container, {rounded.lg} corners, and the layered surface backgrounds per component specs.
6. Add scroll-triggered animations using Intersection Observer or Framer Motion's useInView: fadeSlideUp for content blocks below the fold, staggering each child by 80–100ms. Keep duration at 0.5s with cubic-bezier(0.4, 0, 0.2, 1) ease.
7. Implement state variants for all interactive components per your stack's conventions: Tailwind uses hover:, focus:, active:, disabled: pseudo-variants; map these to the -active, -disabled, -focus component entries in the frontmatter. Do NOT invent hover styles beyond what the active variants imply.
8. Run accessibility audits: ensure all interactive elements have visible focus rings ({extensions.shadows.focus-ring} style), color contrast ratios meet WCAG AA (4.5:1 for body text, 3:1 for large text), and the skip-navigation link ({component.skip-nav}) functions correctly.
9. Test responsive behavior at 375px (mobile), 768px (tablet), and 1440px (desktop). Verify nav collapse, hero stacking, and IDE preview simplification at each breakpoint. Adjust typography scale if display text wraps awkwardly on narrow viewports.
10. Run npx @google/design.md lint DESIGN.md after any modifications to catch broken token references, orphaned components missing prose entries, or contrast-ratio violations. Treat linter errors as blocking issues.

Font Setup for Implementation:

/* In globals.css or tailwind.config.ts theme.extend.fontFamily */
@theme {
  --font-display: "CursorGothic", "CursorGothic Fallback", "DM Sans", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

If CursorGothic and Berkeley Mono font files are unavailable, remove them from the stack (they'll fall through to DM Sans and JetBrains Mono respectively). The design degrades gracefully without proprietary faces.

Known Gaps

• Hover state styling: Per the no-hover policy, hover background color shifts, shadow elevations on hover, and link underline reveal behaviors are documented only as intent in the prose; exact color values for hover states (especially {colors.primary-hover}) are extrapolated from the active-state token and may need empirical tuning.
• Loading/skeleton states: No loading skeletons, shimmer effects, or pending-state placeholders were extractable from the static screenshot. Recommend implementing skeleton screens using {colors.surface-strong} as the bone color with {rounded.sm} for shimmer rectangles.
• Form validation states: Beyond focus ring appearance, error/validation states for inputs (red border, error message text, icon changes) were not present in the viewport. Map to {colors.error} for error borders and messages.
• Dark mode: The site operates exclusively in light mode (extensions.mode: "light"). No dark-mode surface tokens, inverted text colors, or dark canvas values were detectable. A future dark theme would require a complementary palette generation pass.
• Dashboard/authenticated surfaces: The screenshot captures the marketing/landing page only. Dashboard interfaces, settings panels, authenticated user flows, and in-product UI surfaces (actual IDE, not the marketing mockup) may use divergent token values not represented here.
• Sub-brand palettes: Enterprise, Teams, or tier-specific color variations (common in pricing pages) were not visible in the extracted viewport. If such variations exist deeper in the site, they would require separate documentation.
• Exact oklab color values: Several colors in the source CSS use oklab() color space (e.g., oklab(0.263078 -0.0023028 0.0124791 / 0.6) for muted text). These have been converted to approximate rgba() equivalents for the hex-based token system, but subtle perceptual differences may exist in gamut-sensitive displays.
• Component count limits: While 35+ component entries are documented, complex nested structures (individual IDE list items, each unique tab, every nav dropdown panel) are generalized into archetype components. Pixel-perfect reproduction of every leaf-element may require additional specificity.