# Cursor — Marketing Site Design Spec

> Source: cursor.com (live DOM, computed styles + color census 2026-07-06; motion/effects/responsive census 2026-07-07).
> Coverage: marketing site + embedded product mockup (Cursor Desktop shell). Native app; no web dashboard (`site only`).

## 1. Visual Theme & Atmosphere

Warm-dark, editorial, restrained. A near-black canvas with a faint olive/brown warmth carries a near-white monochrome UI: fully-rounded pill buttons and modest weight-400 display type. Pastel brand accents (pink / lavender / teal / amber) appear only in the logo gradient and highlights — the UI itself stays warm-dark monochrome, near-flat, separated by translucent hairlines rather than shadows. The product mockup, not the copy, is the hero; motion is subtle and mechanical, communicating the agent working rather than decorating. Feels: precise, calm, engineer's-tool premium.

## 2. Color Palette & Roles

### Warm-dark neutral ladder
| Token | Hex | Role / usage |
|---|---|---|
| bg | `#14120b` | Page canvas (near-black, faint warm/olive tint) |
| surface-1 | `#1b1913` | Panels, cards, inputs |
| surface-2 | `#201e18` | Raised surface |
| surface-3 | `#26241e` | Secondary button, hover |
| surface-4 | `#2b2923` | Pressed / higher |
| border | `rgba(237,236,236,.1)` | Hairline (10% warm white) |
| border-strong | `rgba(237,236,236,.2)` | Outline-button border |

### Text (warm white)
| Token | Value | Role / usage |
|---|---|---|
| text | `#edecec` | Primary text (near-white) |
| text-2 | `#d6d6dd` | Secondary |
| text-muted | `rgba(237,236,236,.6)` | Tertiary / labels |
| text-faint | `rgba(237,236,236,.4)` | Disabled, hints |

### Brand accent pastels (gradient / highlights only)
| Token | Hex |
|---|---|
| pink | `#e394dc` |
| lavender | `#aaa0fa` |
| teal | `#83d6c5` |
| amber | `#c08532` |

Rule: the entire UI is warm-dark monochrome (near-black + near-white). The pastel quartet appears only in the brand logo gradient, a subtle hero glow, or diff/status accents — never as button or surface fills.

## 3. Typography Rules

- Font stack: `CursorGothic, "CursorGothic Fallback", system-ui, "Helvetica Neue", Arial, sans-serif`. CursorGothic is a custom humanist grotesque; fall back to system.
- Body/UI: 14–16px / 400 / `#edecec`.
- **Display is restrained** — weight 400, only lightly tracked; Cursor lets the product imagery carry the page, not big type.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | ~40 / 1.05 (26 at narrow) | 400 | -0.02em |
| Section (h2) | 20–28 | 400–700 | -0.01em |
| App heading | 20 | 700 | 0 |
| Body | 16 / 1.5 | 400 | 0 |
| UI / nav | 14 | 400 | 0 |
| Label / meta | 13–14 | 400–600 | 0 |
| Code (mono) | 13 | 400 | 0 |

Pattern: marketing headings stay weight 400 and modest in size; in-app section titles jump to 600–700. Editorial serif is occasionally used inside product mockups for document copy.

## 4. Component Stylings

### Buttons
- Control heights: primary/secondary button ~`43px` (nav pill ~`28px`); padding `12px 22px` (nav `6px 15px`).
- **Primary**: bg `#edecec` (warm white), text `#14120b`, full pill, ~43px, 16px/400, trailing glyph (⤓ / →). Hover: slight dim.
- **Secondary**: bg `#26241e`, text `#edecec`, faint 1px border, full pill. Hover: `#2b2923`.
- **Outline (nav CTA)**: transparent, text `#edecec`, 1px `rgba(237,236,236,.2)` border, pill.
- **Nav link**: text `#edecec`, 14px, no bg; hover subtle.

### Inputs / prompt boxes
- bg `#1b1913`, 1px translucent border, radius 8, near-white text, muted placeholder. Agent prompt boxes use the same surface.

### Cards / panels
- bg `#1b1913`–`#201e18`, 1px `rgba(237,236,236,.1)` border, radius 8, padding 12–16. Flat, monochrome.

### App shell (Cursor Desktop mockup)
- Chrome-less dark window (traffic-light dots), radius ~12. Left task list: sectioned ("IN PROGRESS", "READY FOR REVIEW") with spinner/check status icons, task title + muted subtitle rows. Center agent prompt panel. Right browser/preview pane with URL bar. Bottom "Cursor CLI / Agent" terminal panel. Diff accents: green `+`, red `−`.

### Nav
- Transparent over bg, `CURSOR` wordmark + cube logo left, center links (Product/Enterprise/Pricing/Resources, 14px), right: "Sign in" + outline "Contact sales" + white "Download" pill.

## 5. Layout Principles

- Spacing: 4px base grid; roomy hero whitespace; dense inside app panels.
- Nav: ~64px, transparent, no border.
- Hero: left-aligned; ~40px/400 headline → dual pill CTA ("Download for macOS" white + "Request a demo" dark) → large product mockup dominating the fold.
- Sections: dark throughout; centered logo wall ("Trusted every day by teams"); feature blocks pairing copy with app imagery.
- Wide, near-full-bleed product mockups; generous vertical rhythm.

## 6. Depth & Elevation

- Radii: buttons are **full pills** (`9999px`); cards/panels/inputs `8px`; app windows `10–12px`.
- Elevation: near-flat; separation via the warm surface ladder and 1px translucent borders rather than shadows. App windows use a soft ambient shadow.

## 7. Motion

- Uniform 140–200ms micro-transitions everywhere: dominant recipe `color/background-color/border-color/opacity 0.15s cubic-bezier(0.4,…)`, plus `all 0.15s`, `opacity 0.15–0.2s`, and a small `opacity/transform/visibility 0.14s cubic-bezier(0.25,…)` set.
- Nothing animates at rest (0 CSS animations running live; 3 WAAPI).
- Named keyframes: `navItemSlideIn` / `navItemSlideOut` / `navItemFade` (nav open/close), `shimmer` / `shimmer-slide` / `fade-in`, `streaming-word-fade` (AI text streaming), `shake`.
- No animation library detected (no GSAP / Three.js / Lottie); one small click-to-play video (96px).
- Character: subtle and mechanical — agent panels show live spinners and streaming text within static frames; motion communicates the agent working, never decorates.

## 8. Backgrounds, Effects & WebGL

- No canvas/WebGL, no backdrop-filter blurs, no decorative gradient washes.
- Only functional gradients: flat warm-dark fills `rgb(27,25,19)` and fades `rgb(20,18,11)` → transparent.
- Signature elevation: deep layered black shadows on floating app frames —
  - `0 28px 70px rgba(0,0,0,.14), 0 14px 32px rgba(0,0,0,.1), 0 0 … oklab(94.4% … / 0.1)`
  - `0 22px 70px 4px rgba(0,0,0,.3), 0 0 0 0.5px rgba(0,0,0,.15)`
  - `0 25px 50px -12px rgba(0,0,0,.25), 0 12px 24px -8px rgba(0,0,0,.15)`
  - Pattern: a huge soft drop + a tighter mid drop + a hairline 0.5px ring.
- Atmosphere comes from product screenshots and those deep shadows, not effects.

## 9. Do's and Don'ts

### Do
- Keep the entire UI warm-dark monochrome: near-black canvas `#14120b`, near-white text `#edecec`.
- Restrict the pastel quartet to the brand logo gradient, a subtle hero glow, or diff/status accents.
- Keep marketing display type restrained: weight 400, modest size (~40px hero), lightly tracked — let the product imagery carry the page.
- Jump in-app section titles to weight 600–700.
- Use full pills (`9999px`) for buttons; radius 8 for cards/panels/inputs; 10–12 for app windows.
- Separate surfaces with the warm surface ladder and 1px translucent borders; keep elevation near-flat.
- Give the primary button a trailing glyph (⤓ / →).
- Let a large dark product mockup dominate the hero fold.
- Keep motion subtle and mechanical (~150ms micro-transitions); use it to communicate the agent working (spinners, streaming text).
- Reserve deep layered black shadows (huge soft drop + 0.5px hairline ring) for floating app frames.

### Don't
- Don't use the pastel accents (pink/lavender/teal/amber) as button or surface fills.
- Don't let big type carry the page — marketing headings never go heavy or oversized.
- Don't rely on shadows for surface separation inside the UI — deep shadows belong only on floating app frames.
- Don't add flashy motion, or anything that animates at rest.
- Don't add gradient washes, glass blur (backdrop-filter), or canvas/WebGL flourishes — the brand doesn't use them.

## 10. Responsive Behavior

- Breakpoints (site media queries): 420, 640 (`max-width: 640`), 660, 768, 900, 1140, 1380.
- Hero headline drops from ~40px to 26px at narrow widths.
- Dedicated mobile keyframe set (`mobile-chat-enter`, `mobile-interaction-pulse`/`glow`, `mobileRecordingWaveform`…) — mobile is a first-class variant with its own chat/interaction animations, not just a reflow.

## 11. Agent Prompt Guide

- Canvas `#14120b` · Text `#edecec` · Muted `rgba(237,236,236,.6)` · Border `rgba(237,236,236,.1)` · Accents (highlights only) `#e394dc` / `#aaa0fa` / `#83d6c5` / `#c08532`
- Font: `CursorGothic, "CursorGothic Fallback", system-ui, "Helvetica Neue", Arial, sans-serif` · Body: 16px · Radius: pill (9999px) controls / 8px cards · Control height: 43px
- Hover fill: `#2b2923` (secondary button) · Focus ring: not captured

<cursor_design_language>
Use the Cursor design language: warm near-black canvas #14120b (faint olive tint) with a surface ladder #1b1913 / #201e18 / #26241e, separated by 1px translucent borders rgba(237,236,236,.1) — near-flat, no glows or blurs; only floating app frames carry deep layered black shadows (huge soft drop + 0.5px hairline ring, e.g. 0 22px 70px 4px rgba(0,0,0,.3), 0 0 0 0.5px rgba(0,0,0,.15)). Text is warm white #edecec primary, #d6d6dd secondary, muted .6/.4 alphas. Type is CursorGothic / system: display RESTRAINED — weight 400, ~40px hero, lightly tracked; in-app titles 600-700; code in mono. Buttons are full pills: primary warm-white #edecec with dark #14120b text and a trailing glyph; secondary dark #26241e; nav CTA transparent with a .2 white border. Cards/inputs radius 8, app windows 10-12. Pastel accents (pink #e394dc, lavender #aaa0fa, teal #83d6c5, amber #c08532) appear ONLY in the logo gradient, a faint hero glow, or diff/status colors — never as fills. Let a large dark product mockup be the hero. Motion is restrained: uniform ~150ms micro-transitions, nothing animating at rest, live agent spinners and streaming text. Feels: precise, calm, engineer-premium. Avoid: pastel fills, heavy or oversized display type, gradient washes or glass blur, and flashy motion.
</cursor_design_language>