cursor.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: cursor.com
description: "Light product system built on #f7f7f4 with #26251e as the primary CTA accent. Type anchored in CursorGothic at 72px / weight 400. Extracted automatically from https://cursor.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  cursor.com is built on a warm, off-white canvas (rgb(247, 247, 244)).
  The system uses rgb(38, 37, 30) as a near-neutral accent (low saturation).
  Crisp CTAs (3.35544e+07px radius) reinforce a precise, technical aesthetic alongside CursorGothic as the primary typeface.
  CursorGothic is paired with CursorGothic Fallback for secondary roles.
  A layered elevation system (10 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 19 keyframe animations plus transition-driven interactions.

colors:
  background: "#f7f7f4"
  surface-1: "#f2f1ed"
  surface-2: "#ebeae5"
  ink: "#26251e"
  ink-subtle: "#26251e"
  primary: "#26251e"
  on-primary: "#ffffff"
  primary-hover: "#3b3a33"
  hairline: "#e6e5e0"
  primary-focus: "#26251e"
  semantic-error: "#cf2d56"
  semantic-success: "#1f8a65"
  semantic-warning: "#f54e00"

typography:
  display-xl:
    fontFamily: "CursorGothic, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.325px
  display-md:
    fontFamily: "CursorGothic, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.11px
  body:
    fontFamily: "CursorGothic, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  mono:
    fontFamily: "Helvetica Neue, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 6px
  sm: 8px
  md: 13px
  lg: 22px
  xl: 30px
  xxl: 67px

components:
  button-pill:
    backgroundColor: "{colors.primary-focus}"
    textColor: "{colors.background}"
    typography: "{typography.mono}"
    rounded: "{rounded.pill}"
    padding: 5.6px 10.5px 5.88px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.mono}"
    rounded: "{rounded.none}"
    padding: 5.6px 15px
  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.mono}"
    rounded: "{rounded.pill}"
    padding: 5.6px 10.5px 5.88px
  card-standard-card:
    backgroundColor: "{colors.surface-1}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 7.9px 15px 12.8px
  input-text-input:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.mono}"
    rounded: "{rounded.none}"
    padding: 8px 8px 6px
  navigation-main-nav:
    backgroundColor: "{colors.background}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 20px
  status-badge-neutral-dark:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.mono}"
    rounded: "{rounded.pill}"
    padding: 5.6px 10.5px 5.88px
  tab-pill-tab:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary-focus}"
    typography: "{typography.mono}"
    rounded: "{rounded.none}"
    padding: 0px 8px 1px 12px

extracted_at: "2026-06-11T05:11:05.066Z"
completeness: 90
scoreVersion: "v2"

---

# Design System — cursor.com
> Extracted automatically by Prism from https://cursor.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#f7f7f4` |
| Type posture | sans-led (CursorGothic) | "Try Cursor now." |
| Color assertion | dual-accent | #26251e |
| Whitespace | moderate | section rhythm 49px |
| Interaction | expressive | 19 keyframes, 7 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(247, 247, 244)` is the page background. Every component composits against this.
> - **Accent**: `rgb(38, 37, 30)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 49px between major bands. Card padding: 22px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

**Signature:** a gradient wash in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

cursor.com's canvas is a warm, intentionally-tinted surface (`#f7f7f4`) — a refusal of the default white that immediately signals editorial intent. This isn't sterility, it's an invitation to read. 

Typography is anchored in **CursorGothic**, deployed with OpenType features enabled globally (`"ss09"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. Negative letter-spacing at display sizes (-0.325px at 26px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Near-Black (`#26251e`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Near-Black** (`#26251e`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (10 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Off-White (`#f7f7f4`)
- Primary typeface: CursorGothic
- Primary text: Near-Black (`#26251e`)
- Accent: Near-Black (`#26251e`)
- Display: 26px weight 400, letter-spacing -0.325px
- Shadow system: 10 distinct elevation levels
- Custom fonts loaded: CursorGothic, CursorGothic Fallback, berkeleyMono, EB Garamond, Lato, Lato Fallback

## 2. Color Palette & Roles

### Background & Surface
- **Off-White** (`#f7f7f4`): Page background (primary)
- **Bg Hover** (`#ebeae5`): Surface / elevated background (CSS var)
- **Bg Elevated** (`#f2f1ed`): Surface / elevated background (CSS var)
- **Whitesmoke** (`#e6e5e0`): Surface / elevated background
- **Whitesmoke** (`#e1e0db`): Surface / elevated background

### Text & Content
- **Text Primary** (`#26251e`): Primary body text
- **Black** (`#000000`): Secondary text
- **Translucent Jet Black (92%)** (`rgba(20, 20, 20, 0.92)`): Secondary text
- **#b3003f** (`#b3003f`): Secondary text
- **Near-Black** (`#1a1a1a`): Secondary text

### Accent & Interactive
- **Accent** (`#f54e00`): Accent / interactive (CSS var)
- **Success** (`#1f8a65`): Interactive / accent
- **Error** (`#cf2d56`): Interactive / accent
- **Slate Blue** (`#6049b3`): Interactive / accent
- **Warm Terracotta** (`#db704b`): Interactive / accent
- **Slate Gray** (`#427986`): Interactive / accent
- **#9e94d5** (`#9e94d5`): Interactive / accent

### Border & Divider
- **Light Grey** (`#d9d5cf`): Borders / dividers
- **Grey** (`#b6b9be`): Borders / dividers

### Full Extracted Palette
**29 colors rendered on the page** + **7** more declared in design tokens (CSS custom properties — not necessarily painted). (19 categorized above + 17 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#aa52a2` — #aa52a2
- `#b8448b` — #b8448b
- `#206595` — #206595
- `#c08532` — Honey
- `#ffffff` — White
- `#34785c` — Teal
- `#a78bfa` — #a78bfa
- `#edecec` — Whitesmoke
- `#4a443b` — Dark Gray
- `#3c3935` — Charcoal
- `#f0efeb` — Off-White *(token)*
- `#dfa88f` — #dfa88f *(token)*
- `#9fc9a2` — #9fc9a2 *(token)*
- `#3b3a33` — Charcoal *(token)*
- `#9fbbe0` — Sage *(token)*
- `#c0a8dd` — Plum *(token)*
- `#f3ede6` — Light Gray *(token)*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-inset-shadow-alpha`: `100%`
- `--tw-inset-ring-shadow`: `0 0 #0000`
- `--tw-inset-shadow`: `0 0 #0000`
- `--tw-shadow-alpha`: `100%`

**Spacing Token**
- `--spacing-prose-wide`: `96ch`
- `--spacing-v9/12`: `calc(1rem * 1.4 * 9 / 12)`
- `--spacing-v1.5`: `calc(1rem * 1.4 * 1.5)`
- `--spacing-v5`: `calc(1rem * 1.4 * 5)`

**Border Radius Token**
- `--prose-code-border-radius`: `4px`
- `--radius-2xs`: `2px`
- `--radius-sm`: `.25rem`
- `--radius-2xl`: `1rem`

**Text Color**
- `--color-text-secondary`: `color-mix(in oklab, #26251e 60%, transparent)`
- `--color-text-primary`: `#26251e`
- `--color-text-muted`: `color-mix(in oklab, #26251e 60%, transparent)`

**Success**
- `--color-green-500`: `lab(70.5521% -66.5147 45.8073)`
- `--color-green-900`: `lab(30.797% -29.6927 17.382)`
- `--color-green-600`: `lab(59.0978% -58.6621 41.2579)`
- `--color-success-bg`: `color-mix(in srgb, #1f8a65 15%, transparent)`

**Primary Brand Color**
- `--color-accent`: `#f54e00`
- `--color-accent-bg`: `color-mix(in srgb, #f54e00 10%, transparent)`
- `--color-accent-bg-strong`: `color-mix(in srgb, #f54e00 25%, transparent)`

**Font Weight Token**
- `--font-weight-bold`: `700`
- `--font-weight-light`: `300`
- `--font-weight-semibold`: `600`
- `--font-weight-medium`: `500`

**Motion Token**
- `--default-transition-duration`: `.15s`
- `--default-transition-timing-function`: `cubic-bezier(.4, 0, .2, 1)`
- `--transition-fast`: `.14s`

**Border**
- `--color-border-bright`: `color-mix(in oklab, #26251e 20%, transparent)`
- `--color-border`: `color-mix(in oklab, #26251e 10%, transparent)`

**Warning**
- `--color-warning-bg`: `color-mix(in srgb, #f54e00 15%, transparent)`
- `--color-warning`: `#f54e00`

**Error / Destructive**
- `--color-error`: `#cf2d56`
- `--color-red-600`: `lab(48.4493% 77.4328 61.5452)`
- `--color-red-500`: `lab(55.4814% 75.0732 48.8528)`
- `--color-error-bg`: `color-mix(in srgb, #cf2d56 15%, transparent)`

**Background**
- `--color-bg-hover`: `#ebeae5`
- `--color-bg`: `#f7f7f4`
- `--color-bg-elevated`: `#f2f1ed`

**Font Size Token**
- `--katex-font-size`: `1.15rem`

**Other tokens**
- `--color-theme-button-bg`: `#26251e`
- `--color-theme-fg-01`: `color-mix(in oklab, #26251e 1%, transparent)`
- `--color-slate-200`: `lab(91.7353% -.998765 -4.76968)`
- `--color-slate-500`: `lab(48.0876% -2.03595 -16.5814)`
- `--text-base--line-height`: `calc(1.5 / 1)`
- `--color-theme-product-editor`: `#f7f7f4`
- `--color-theme-border-01-5`: `color-mix(in oklab, #26251e 5%, transparent)`
- `--color-gray-300`: `lab(85.1236% -.612259 -3.7138)`

## 3. Typography Rules

### Font Families
- **Primary**: `CursorGothic`
- **Secondary**: `KaTeX_AMS`
- **Font 3**: `KaTeX_Caligraphic`
- **Font 4**: `KaTeX_Fraktur`
- **Font 5**: `KaTeX_Main`

### Custom Fonts Loaded
- **KaTeX_AMS** weight 400 (normal)
- **KaTeX_Caligraphic** weight 700 (normal)
- **KaTeX_Caligraphic** weight 400 (normal)
- **KaTeX_Fraktur** weight 700 (normal)
- **KaTeX_Fraktur** weight 400 (normal)
- **KaTeX_Main** weight 700 (normal)
- **KaTeX_Main** weight 400 (italic)
- **KaTeX_Math** weight 700 (italic)
- **KaTeX_Math** weight 400 (italic)
- **KaTeX_SansSerif** weight 700 (normal)
- **KaTeX_SansSerif** weight 400 (italic)
- **KaTeX_Script** weight 400 (normal)
- **KaTeX_Size1** weight 400 (normal)
- **KaTeX_Size2** weight 400 (normal)
- **KaTeX_Size3** weight 400 (normal)
- **KaTeX_Size4** weight 400 (normal)
- **KaTeX_Typewriter** weight 400 (normal)
- **CursorGothic** weight 400 (normal)
- **CursorGothic** weight 700 (normal)
- **CursorGothic Fallback** weight normal (normal)
- **berkeleyMono** weight 400 (normal)
- **EB Garamond** weight 400 (italic)
- **EB Garamond** weight 500 (italic)
- **EB Garamond** weight 600 (italic)
- **EB Garamond** weight 700 (italic)
- **EB Garamond** weight 800 (italic)
- **Lato** weight 100 (italic)
- **Lato** weight 300 (italic)
- **Lato** weight 400 (italic)
- **Lato** weight 700 (italic)
- **Lato** weight 900 (italic)
- **Lato Fallback** weight normal (normal)
- **CursorIcons16** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | CursorGothic | 26px | 400 | 1.25 | -0.325px | Main headline (h1) |
| Sub-heading | CursorGothic | 22px | 400 | 1.3 | -0.11px | Third-level heading (h3) |
| Body | CursorGothic | 16px | 400 | 1.5 | normal | Standard reading text |
| Card Title | CursorGothic | 14px | 400 | 1.5 | 0.14px | Card headings |
| Input | Helvetica Neue | 13px | 400 | 1.33 | normal | Form input (13px) |
| Input | berkeleyMono | 12px | 400 | 1.67 | normal | Form input (12px) |

### Font Weight Scale

CSS custom properties define 5 explicit weight steps:
- `--font-weight-light`: `300` — Light
- `--font-weight-normal`: `400` — Regular
- `--font-weight-medium`: `500` — Medium
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-bold`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `72px`, `36px`, `26px`, `22px`, `20px`, `16px`, `14px`, `13px`, `12px`, `11px`, `10px`

> 5 size(s) detected outside the sampled hierarchy (72px, 36px, 20px, 11px, 10px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **tabular figures** (`tnum`) — numbers align vertically, essential for pricing tables and dashboards
- **case-sensitive forms** (`case`) — punctuation height adjusted for uppercase contexts

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "ss09", "ss08", "cswh", "case", "tnum", "ss10", "ss11";
}
```

## 4. Component Stylings

### Buttons

**Pill**
- Background: `#26251e` `{colors.primary-focus}`
- Text: `#f7f7f4` `{colors.background}`
- Padding: 5.6px 10.5px 5.88px
- Radius: 9999px
- Border: 1px solid rgb(38, 37, 30)
- Font: 14px weight 400
- Use: Status pills, tags, chips
- Focus: outline: `rgb(38, 37, 30) solid 2px`

**Ghost**
- Background: `transparent`
- Text: `#26251e` `{colors.primary-focus}`
- Padding: 5.6px 15px
- Radius: 0px
- Border: 1px solid rgba(0, 0, 0, 0)
- Font: 14px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: outline: `rgb(38, 37, 30) solid 2px`

**Outline**
- Background: `transparent`
- Text: `#26251e` `{colors.primary-focus}`
- Padding: 5.6px 10.5px 5.88px
- Radius: 9999px
- Border: 1px solid oklab(0.263084 -0.00230259 0.0124794 / 0.2)
- Font: 14px weight 400
- Use: Secondary action with border
- Focus: outline: `rgb(38, 37, 30) solid 2px`

**Secondary**
- Background: `#26251e` `{colors.primary-focus}`
- Text: `#f7f7f4` `{colors.background}`
- Padding: 12.48px 21.6px 12.8px
- Radius: 9999px
- Border: 1px solid rgb(38, 37, 30)
- Font: 16px weight 400
- Use: Secondary action
- Focus: outline: `rgb(38, 37, 30) solid 2px`

**Icon Button**
- Background: `transparent`
- Text: `#f7f7f4` `{colors.background}`
- Padding: 0px 0px 0px 4px
- Radius: 0px
- Font: 16px weight 400
- Use: Toolbar/UI icons
- Focus: outline: `rgb(38, 37, 30) solid 2px`

**Secondary**
- Background: `#e6e5e0` `{colors.hairline}`
- Text: `#26251e` `{colors.primary-focus}`
- Padding: 12.48px 21.6px 12.8px
- Radius: 9999px
- Border: 1px solid oklab(0.263084 -0.00230259 0.0124794 / 0.025)
- Font: 16px weight 400
- Use: Secondary action
- Focus: outline: `rgb(38, 37, 30) solid 2px`

### Cards & Containers

**Standard Card**
- Background: `#f2f1ed` `{colors.surface-1}`
- Padding: 7.9px 15px 12.8px
- Radius: 4px
- Shadow: `rgba(0, 0, 0, 0.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0px 0px 8px 0px`
- Use: Content containers, listing items

### Inputs & Forms

**Text Input**
- Background: `transparent`
- Text: `#26251e` `{colors.primary-focus}`
- Padding: 8px 8px 6px
- Radius: 0px
- Border: 0px solid rgb(38, 37, 30)
- Font: 13px weight 400
- Use: Text fields, search inputs
- Focus: outline: `rgb(16, 16, 16) none 1px`

### Navigation

**Main Nav**
- Background: `#f7f7f4` `{colors.background}`
- Padding: 0px 20px
- Radius: none
- Font: 16px weight 400
- Use: Fixed/sticky block nav — N/A items

### Status Badges

**Neutral Dark**
- Background: `transparent`
- Text: `#26251e` `{colors.primary-focus}`
- Padding: 5.6px 10.5px 5.88px
- Radius: 9999px
- Font: 14px weight 400
- Use: Status indicator, label, pill

### Tabs

**Pill Tab**
- Background: `#f7f7f4` `{colors.background}`
- Text: `#26251e` `{colors.primary-focus}`
- Padding: 0px 8px 1px 12px
- Radius: 0px
- Font: 14px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(38, 37, 30)"
      fg: "rgb(247, 247, 244)"
      border: "1px solid rgb(38, 37, 30)"
    focus:
      bg: "transparent"
      fg: "inherit"
  input:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(38, 37, 30)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(38, 37, 30)"
  card:
    default:
      bg: "rgb(242, 241, 237)"
      fg: "rgb(38, 37, 30)"
      shadow: "rgba(0, 0, 0, 0.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0"
  navLink:
    default:
      bg: "rgb(38, 37, 30)"
      fg: "rgb(247, 247, 244)"
      border: "1px solid rgb(38, 37, 30)"
  tab:
    default:
      bg: "rgb(247, 247, 244)"
      fg: "rgb(38, 37, 30)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(38, 37, 30)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **5 shape(s)** in this system: `Pill`, `Ghost`, `Outline`, `Secondary`, `Icon Button`
- **DO NOT introduce new buttons variants** without justification

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

### Status Badges
- **1 shape(s)** in this system: `Neutral Dark`
- **DO NOT introduce new status badges variants** without justification

### Tabs
- **1 shape(s)** in this system: `Pill Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1300px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 6px |
| sm | 8px |
| md | 13px |
| base | 15px |
| lg | 22px |
| xl | 30px |
| 2xl | 49px |
| 3xl | 67px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 20px | Large rounded elements, pill segments |
| Xl | 32px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `9999px` |
| Cards & Containers | `4px` |
| Inputs & Forms | `0px` |
| Navigation | `none` |
| Status Badges | `9999px` |
| Tabs | `0px` |
| Page Body | `0px` |
| Primary Input | `0px` |

**Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy.

**Full Radius Spectrum**: 2px, 3px, 4px, 7px, 8px, 10px, 12px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~67px internal vertical padding (up to 123px) — **generous**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `67px` | Top/bottom of full-bleed hero sections |
| **section** | `30px` | Between major bands (color change, content shift) |
| **subsection** | `22px` | Within a section, between content groups |
| **card** | `13px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `6px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**5/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Cursor is your coding agent for building ambitious software." — 26px left-aligned
- **Subheading:** "⬢Reviewed workspace usage exports and historical engagement notes"
- **Media:** present, positioned top
- **CTAs:** 8 (primary: "Download for Windows⤓")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Place media top of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 34px
- **Logo:** ✗ absent
- **Nav links:** 0 primary items
- **CTAs in nav:** 4
- **Clone instruction:** Build a static unknown navigation. Reserve 4 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 4 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1440×700px (aspect 2.06:1)
- **Gap:** 90px between cards
- **Content:** ✗ no image + icon + CTA
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~2.06:1 aspect ratio. Text/icon-only cards (no photography).

### Testimonial Pattern

- **Count:** 6 testimonial blocks
- **Layout:** grid
- **Avg quote length:** 203 chars (long-form story)
- **Includes:** ✗ no avatars | ✗ no logos | ✗ no ratings
- **Clone instruction:** Build a grid of 6 testimonials.   

### Footer Pattern

- **Columns:** 5
- **Links:** 33 total
- **Height:** 526px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 5-column footer with ~7 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.02) 0px 0px 16px 0px`,<br>`rgba(0, 0, 0, 0.008) 0px 0px 8px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.14) 0px 28px 70px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 14px 32px 0px`,<br>`oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.3) 0px 22px 70px 4px`,<br>`rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`,<br>`rgba(0, 0, 0, 0.15) 0px 12px 24px -8px`,<br>`oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 0.5px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--ease-out-spring` | `cubic-bezier(.25, 1, .5, 1)` | Custom Ease — Balanced |
| `--default-transition-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-out` | `cubic-bezier(0, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-in-out` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--default-transition-duration` | `.15s` | Fast |
| `--duration-slow` | `.25s` | Normal |
| `--duration` | `.14s` | Fast |

### Copy-Paste Transition Snippets

**Opacity**
```css
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
```

**Opacity**
```css
transition: opacity 0.14s cubic-bezier(0.25, 1, 0.5, 1);
```

**Transform**
```css
transition: transform 0.14s cubic-bezier(0.25, 1, 0.5, 1);
```

**Opacity**
```css
transition: opacity 0.14s cubic-bezier(0.25, 1, 0.5, 1), transform 0.14s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.14s;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `newsletter-submit-pulse` | Fade | opacity | Attention / status |
| `gallery-marquee-item-slide-up` | Fade + Move | opacity, transform | Panel / drawer enter |
| `spin` | Rotate / Spin | transform | Loading indicator |
| `pulse` | Fade | opacity | Attention / status |
| `pulse-emit` | Scale | transform | Attention / status |
| `pulse-bit` | Scale | transform | Attention / status |
| `swipe-out-left` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-right` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-up` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-down` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `sonner-fade-in` | Fade + Move | opacity, transform | Element entrance |
| `sonner-fade-out` | Fade + Move | opacity, transform | Element exit |
| `sonner-spin` | Fade | opacity | Loading indicator |
| `tabCaretBlink` | Fade | opacity | Attention / status |
| `fadeIn` | Fade | opacity | Element entrance |
| `fadeSlideUp` | Fade + Move | opacity, transform | Panel / drawer enter |
| `fadeSlideRight` | Fade + Move | opacity, transform | UI transition |
| `barGrow` | Scale | transform | UI transition |
| `tilePopIn` | Fade + Move | opacity, transform | UI transition |

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `200ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 19 unique animations (19 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Off-White (`#f7f7f4`) as the page background — it's intentionally not pure white
- Use Text Primary (`#26251e`) for text — not pure black, it's warmer and more readable
- Use CursorGothic as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-0.325px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Text Primary (`#26251e`) as the primary accent — it's the brand's signature interactive color
- Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs
- Apply 7.9px 15px 12.8px padding inside cards — matches the design system's content breathing room
- Use 4px border-radius on cards — consistent with the grid card corners
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Include exactly 8 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Each card uses an icon (not photo) — the visual language is illustrative, not photographic
- Lay out testimonials in a grid (6+ items) — quantity signals scale and trust
- Build a content-dense footer (5 columns, ~33 links) — this site treats the footer as a sitemap, not an afterthought

### Don't
- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(247, 247, 244)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(247, 247, 244)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(38, 37, 30)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(38, 37, 30)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 420px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1024px | Multi-column grids begin |
| Desktop | 1139px | Full feature layout |
| Desktop | 1279px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `26px` | `24.375px` |
| heading | line-height | `32.5px` | `30.4688px` |
| heading | letter-spacing | `-0.325px` | `-0.304688px` |
| body | font-size | `16px` | `15px` |
| body | line-height | `24px` | `22.5px` |
| body | padding | `52px 0px 0px` | `56px 0px 0px` |
| nav | height | `34.1875px` | `auto` |
| button | font-size | `14px` | `13.125px` |
| button | width | `10.1406px` | `auto` |
| card | padding | `7.9px 15px 12.8px` | `7.40625px 14.0625px 12px` |
| card | width | `158px` | `auto` |

### Collapsing Strategy
- Headlines: 26px → 24.375px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Hero CTAs:** 8 on desktop → 1 on mobile (secondary CTAs dropped on small screens).
- **Footer columns collapse:** 5 columns (desktop) → 2 columns (mobile).


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Clip-path shapes** — 6 non-rectangular cut(s).
- **CSS-variable animations** (4) — animated custom properties.

> **Motion fingerprint**: non-rectangular shapes (6)

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://cursor.com/marketing-static/og/opengraph-default.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.81:1 (landscape (16:9-ish))
- Rendered size: 1300×720px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 7 (78%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 2 (22%)

**Media Format Mix:**
- PNG: 1 (logos, transparent UI elements, mockups)

**Average rendered image size:** 749×547px
**Above-fold image count:** 1 / 9

**Decorative Patterns Detected:**
- 2 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth

**Clone instruction for decorative work:** Decorative details are subtle — don't over-style; the design relies on restraint.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Off-White (`#f7f7f4`)
- Primary text: Near-Black (`#26251e`)
- Accent: Near-Black (`#26251e`)
- Border: Whitesmoke (`#e6e5e0`)
- Font: CursorGothic
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Off-White background (#f7f7f4). Headline at 26px CursorGothic weight 400, line-height 1.25, letter-spacing -0.325px, color #26251e."
- "Create the primary CTA button: `#26251e` background, `#26251e` text, 9999px border-radius, 11px 21px padding, 700 weight, CursorGothic font."
- "Design a card on `#f2f1ed` background. Border: none. Radius: 4px. Shadow: use extracted shadow. Padding: 7.9px 15px 12.8px."
- "Build navigation: absolute on `#f7f7f4`. CursorGothic 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Off-White (`#f7f7f4`) — every component is composited against this exact base.
2. **Typography**: All type in CursorGothic, weight range 300–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Near-Black (`#26251e`) is the sole interactive color. On hover → Success (`#1f8a65`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 140ms for micro-interactions, 150ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `9999px`, cards at `4px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (6px–30px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-background: #f7f7f4;
  --ca-surface-1: #f2f1ed;
  --ca-surface-2: #ebeae5;
  --ca-primary-focus: #26251e;
  --ca-on-primary: #ffffff;
  --ca-primary-hover: #3b3a33;
  --ca-hairline: #e6e5e0;
  --ca-semantic-error: #cf2d56;
  --ca-semantic-success: #1f8a65;
  --ca-semantic-warning: #f54e00;
}

/* Typography */
:root {
  --ca-font-primary: "CursorGothic", system-ui, sans-serif;
  --ca-text-display: 26px;
  --ca-text-body: 16px;
  --ca-text-mono: 13px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 6px;
  --ca-space-sm: 8px;
  --ca-space-md: 13px;
  --ca-space-base: 15px;
  --ca-space-lg: 22px;
  --ca-space-xl: 30px;
  --ca-space-2xl: 49px;
  --ca-space-3xl: 67px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 32px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-out-spring: cubic-bezier(.25, 1, .5, 1);
  --ca-ease-out: cubic-bezier(0, 0, .2, 1);
  --ca-duration-slow: .25s;
  --ca-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ca-duration: .14s;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: main
    height: 7675px
    width: full-bleed
    layout: block
    children: 9
    vertical-padding: ~123px (airy)
  - section: feature-section
    tag: section
    classes: ["section", "bg-theme-bg", "text-theme-text"]
    height: 1086px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(247, 247, 244)"
    vertical-padding: ~90px (generous)
    padding: "112px 20px 67.2px"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 907px
    width: 1300px
    layout: block
    children: 2
  - section: content-section
    tag: div
    classes: ["media-border-container", "relative", "grid", "grid-cols-1"]
    height: 720px
    width: 1300px
    layout: grid: 1-col gap=normal
    children: 2
    bg-treatment: linear-gradient
  - section: sidebar
    tag: aside
    classes: ["bg-theme-card", "text-theme-text", "h-full", "w-full"]
    height: 592px
    width: 219px
    layout: block
    children: 1
  - section: logo-strip
    tag: section
    classes: ["section", "bg-theme-bg", "text-theme-text", "pb-v1.5"]
    height: 177px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(247, 247, 244)"
    padding: "0px 20px 33.6px"
  - section: logo-strip
    tag: div
    classes: ["stack", "container", "text-center"]
    height: 143px
    width: 1300px
    layout: block
    children: 2
  - section: content-section
    tag: section
    classes: ["section", "section--flush-x"]
    height: 3203px
    width: full-bleed
    layout: block
    children: 4
    vertical-padding: ~67px (generous)
    padding: "67.2px 0px"
  - section: content-section
    tag: section
    classes: ["section", "bg-theme-bg", "text-theme-text", "section--flush-y"]
    height: 715px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(247, 247, 244)"
    padding: "0px 20px"
  - section: content-section
    tag: div
    classes: ["container", "mb-v4"]
    height: 715px
    width: 1300px
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["media-border-container", "relative", "grid", "grid-cols-1"]
    height: 680px
    width: 840px
    layout: grid: 1-col gap=normal
    children: 3
  - section: testimonials
    tag: section
    classes: ["section", "bg-theme-bg", "text-theme-text", "section--flush-y"]
    height: 715px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(247, 247, 244)"
    padding: "0px 20px"
  - section: testimonials
    tag: div
    classes: ["container", "mb-v4"]
    height: 715px
    width: 1300px
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["media-border-container", "relative", "grid", "grid-cols-1"]
    height: 680px
    width: 840px
    layout: grid: 1-col gap=normal
    children: 3
  - section: testimonials
    tag: section
    classes: ["section", "bg-theme-bg", "text-theme-text", "section--flush-y"]
    height: 685px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(247, 247, 244)"
    padding: "0px 20px"
  - section: testimonials
    tag: div
    classes: ["container", "mb-v4"]
    height: 685px
    width: 1300px
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["media-border-container", "relative", "grid", "grid-cols-1"]
    height: 650px
    width: 840px
    layout: grid: 1-col gap=normal
    children: 2
    bg-treatment: linear-gradient
  - section: content-section
    tag: section
    classes: ["section", "bg-theme-bg", "text-theme-text", "section--flush-y"]
    height: 685px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(247, 247, 244)"
    padding: "0px 20px"
  - section: content-section
    tag: div
    classes: ["container"]
    height: 685px
    width: 1300px
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["media-border-container", "relative", "grid", "grid-cols-1"]
    height: 650px
    width: 840px
    layout: grid: 1-col gap=normal
    children: 2
    bg-treatment: linear-gradient
  - section: feature-section
    tag: section
    classes: ["section", "bg-theme-bg", "text-theme-text", "overflow-hidden"]
    height: 724px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(247, 247, 244)"
    vertical-padding: ~67px (generous)
    padding: "67.2px 20px"
  - section: content-section
    tag: div
    classes: ["container"]
    height: 490px
    width: 1300px
    layout: block
    children: 1
  - section: content-section
    tag: section
    classes: ["section", "bg-theme-bg", "text-theme-text"]
    height: 739px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(247, 247, 244)"
    vertical-padding: ~67px (generous)
    padding: "67.2px 20px"
  - section: content-section
    tag: div
    classes: ["container"]
    height: 604px
    width: 1300px
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["media-border-container", "relative", "grid", "grid-cols-1"]
    height: 392px
    width: 392px
    layout: grid: 1-col gap=normal
    children: 1
    bg: "rgb(230, 229, 224)"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Trusted every day by teams that build world-class software"
    - "Mission Control Interface"
    - "Trigger"
    - "#feature-realtime-sync"
    - "The new way to build software."
    - "Stay on the frontier"
  sub-headings:
    - "Agents turn ideas into code"
    - "Use the best model for every task"
    - "Cursor is an applied research team focused on building the future of software development."
    - "Product"
  ctas:
    - "Skip to content"
    - "Product"
    - "Sign in"
    - "Contact sales"
    - "Download"
    - "Download for Windows ⤓"
    - "Request a demo →"
  navigation:
    - "Cursor"
    - "Skip to content"
    - "Product"
    - "Enterprise"
    - "Pricing"
    - "Resources"
    - "Sign in"
    - "Contact sales"
    - "Download"
    - "Agents"
  footer-links:
    - "Agents"
    - "Anysphere, Inc."
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  hero:
    count: 1
    avg-ratio: 1.81
    common-aspect: "~16:9 landscape"
  product:
    count: 2
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
  thumbnail:
    count: 18
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "member-1"
      - "member-2"
      - "member-3"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Skip to content
</button>
```
_Source pattern detected: padding `5.6px 10.5px 5.88px` · radius `3.35544e+07px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `7.9px 15px 12.8px` · radius `4px` · shadow `rgba(0, 0, 0, 0.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 5 · **auth** 1 · **product** 3 · **pricing** 2 · **docs** 5 · **blog** 13 · **social** 3 · **legal** 1 · **footer** 22 · **other** 5

**Primary actions (conversion path):**
- Account access — "Sign in" (login/signup) → `https://cursor.com/dashboard`

**Projects / case studies detected** (clustered by URL + featured image):

*Blog* — medium confidence, 5 items:

| Title | Featured image | Link |
|---|---|---|
| Mar 27, 2026 · Research A technical report o | `image?url=https%3A%2F%2Fptht05hbb1ss` (ar 1) | https://cursor.com/blog/composer-2-technical-report |
| May 18, 2026 · Research Introducing Composer | `image?url=https%3A%2F%2Fptht05hbb1ss` (ar 1) | https://cursor.com/blog/composer-2-5 |
| Apr 2, 2026 · Product Meet the new Cursor Mi | `image?url=https%3A%2F%2Fptht05hbb1ss` (ar 1) | https://cursor.com/blog/cursor-3 |
| Mar 19, 2026 · Research Introducing Composer | `image?url=https%3A%2F%2Fptht05hbb1ss` (ar 1) | https://cursor.com/blog/composer-2 |
| Blog | — | https://cursor.com/en-US/blog |

*Docs* — medium confidence, 3 items:

| Title | Featured image | Link |
|---|---|---|
| Explore models ↗ | — | https://cursor.com/docs/models |
| Learn about codebase indexing ↗ | `image?url=https%3A%2F%2Fptht05hbb1ss` (ar 1.78) | https://cursor.com/docs/context/semantic-search |
| Learn about cloud agents → | — | https://cursor.com/docs/cloud-agent |

**Signals:** 8/60 links carry a featured image · device mockups detected: laptop ×1 · dominant link roles: footer-link (37), inline-link (13), navigation (5).


---
## Extraction Completeness: 90/100 (A)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 19 named colors |
| Typography | 15 | 20 | 6 roles defined |
| Components | 20 | 20 | 6 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 293 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (KaTeX_AMS, KaTeX_Caligraphic, KaTeX_Fraktur)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 293 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 6 typography roles inferred |
| §4 Components | High | 6 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 22 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 9 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

41 font file(s) captured (1411KB total). When running `prism add`, fonts are saved to `extractions/cursor.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'CursorGothic';
  /* src: url('/fonts/CursorGothic.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CursorGothic';
  /* src: url('/fonts/CursorGothic.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'CursorGothic';
  /* src: url('/fonts/CursorGothic.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CursorGothic';
  /* src: url('/fonts/CursorGothic.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'CursorGothic Fallback';
  /* src: url('/fonts/CursorGothic-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'berkeleyMono';
  /* src: url('/fonts/berkeleyMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'berkeleyMono';
  /* src: url('/fonts/berkeleyMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  /* src: url('/fonts/EB-Garamond.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  /* src: url('/fonts/Lato.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato Fallback';
  /* src: url('/fonts/Lato-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KaTeX_AMS';
  /* src: url('/fonts/KaTeX_AMS.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Caligraphic';
  /* src: url('/fonts/KaTeX_Caligraphic.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Caligraphic';
  /* src: url('/fonts/KaTeX_Caligraphic.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Fraktur';
  /* src: url('/fonts/KaTeX_Fraktur.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Fraktur';
  /* src: url('/fonts/KaTeX_Fraktur.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Main';
  /* src: url('/fonts/KaTeX_Main.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Main';
  /* src: url('/fonts/KaTeX_Main.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Main';
  /* src: url('/fonts/KaTeX_Main.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Main';
  /* src: url('/fonts/KaTeX_Main.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Math';
  /* src: url('/fonts/KaTeX_Math.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Math';
  /* src: url('/fonts/KaTeX_Math.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_SansSerif';
  /* src: url('/fonts/KaTeX_SansSerif.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_SansSerif';
  /* src: url('/fonts/KaTeX_SansSerif.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_SansSerif';
  /* src: url('/fonts/KaTeX_SansSerif.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Script';
  /* src: url('/fonts/KaTeX_Script.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Size1';
  /* src: url('/fonts/KaTeX_Size1.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Size2';
  /* src: url('/fonts/KaTeX_Size2.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Size3';
  /* src: url('/fonts/KaTeX_Size3.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Size4';
  /* src: url('/fonts/KaTeX_Size4.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'KaTeX_Typewriter';
  /* src: url('/fonts/KaTeX_Typewriter.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
```

### Keyframe Animations (Intercepted from CSS)

**14 @keyframes found** — these are the real animation definitions:

```
@keyframes pulse-emit { ... }
@keyframes pulse-bit { ... }
@keyframes navItemSlideIn { ... }
@keyframes navItemSlideOut { ... }
@keyframes navItemFade { ... }
@keyframes shimmer { ... }
@keyframes shimmer-slide { ... }
@keyframes fade-in { ... }
@keyframes shake { ... }
@keyframes streaming-word-fade { ... }
@keyframes newsletter-submit-pulse { ... }
@keyframes gallery-marquee-item-slide-up { ... }
@keyframes spin { ... }
@keyframes pulse { ... }
```

<details><summary>Full keyframes CSS (14 animations)</summary>

```css
@keyframes pulse-emit{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes pulse-bit{0%{transform:scale(1)}
@keyframes navItemSlideIn{0%{opacity:0;transform:translateY(-4px)}
@keyframes navItemSlideOut{0%{opacity:1;transform:translateY(0)}
@keyframes navItemFade{0%{opacity:0}
@keyframes shimmer{0%{background-position:200% 0}
@keyframes shimmer-slide{0%{transform:translate(-100%)}
@keyframes fade-in{0%{opacity:0}
@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}
@keyframes streaming-word-fade{0%{opacity:.4}
@keyframes newsletter-submit-pulse{0%,to{opacity:1}50%{opacity:.3}}
@keyframes gallery-marquee-item-slide-up{0%{opacity:0;transform:translateY(25%)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5}}
```
</details>

### Brand Gradient Palette

**3 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(45deg,transparent 40%,var(--color-theme-text);

/* Gradient 2 */
background: linear-gradient(-45deg,transparent 40%,var(--color-theme-text);

/* Gradient 3 */
background: linear-gradient(90deg,transparent 0%,var(--color-theme-bg);

```

### Hover State CSS (Intercepted)

**2 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.prose-column a:hover{opacity:.7}

.control-button:hover{background:var(--color-bg-hover);border-color:var(--color-border-bright)}

.step-dot:hover:not(.active){background:var(--color-border-bright)}

.demo-tab:hover{color:var(--color-text-primary)}

.part-button:hover{background:var(--color-bg-hover);border-color:var(--color-accent)}

.clear-button:hover{border-color:var(--color-error);color:var(--color-error)}

.run-benchmark-btn:hover:not(:disabled){filter:brightness(1.1)}

.toggle-btn:hover{color:var(--color-text-primary)}

.document-row:hover{border-color:var(--color-border-bright)}

.doc-input:hover{border-color:var(--color-border)}

.trigram-badge-sm:hover,.trigram-badge-sm.highlighted{border-color:var(--color-accent);background:var(--color-accent-bg)}

.index-entry-compact:hover,.index-entry-compact.highlighted{background:var(--color-accent-bg)}

.mode-btn:hover{color:var(--color-text-primary)}

.mode-toggle-btn:hover:not(.active){color:var(--color-text-secondary)}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 2722 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**14 breakpoints** read from the live `@media` rules (not guessed):
`420px` · `600px` · `630px` · `640px` · `660px` · `767px` · `768px` · `900px` · `1024px` · `1139px` · `1140px` · `1180px` · `1279px` · `1380px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×1118 · `12px`×837 · `14px`×380 · `11px`×138 · `13px`×133 · `17.28px`×76 · `22px`×24 · `26px`×2

**Radius scale** (× = paint count): `4px`×239 · `8px`×38 · `9999px`×22 · `10px`×8 · `2px`×2 · `3px`×2 · `12px`×1

**Weights** (× = paint count): `400`×2651 · `500`×45 · `600`×22 · `700`×2

**Layout gaps** (× = paint count): `8px`×60 · `4px`×29 · `6px`×27 · `3px`×16 · `2px`×11 · `0px 10px`×10 · `normal 10px`×6 · `1px`×6

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px
rgba(0, 0, 0, 0.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0px 0px 8px 0px
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
rgba(0, 0, 0, 0.3) 0px 22px 70px 4px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { background-color:var(--color-theme-bg) }
body { color:var(--color-theme-text) }
header { background-color:var(--color-theme-bg) }
h1 { font-size:var(--text-md-lg); font-weight:var(--font-weight-normal) }
h2 { font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--font-weight-normal) }
button { transition:opacity var(--duration) var(--ease-out-spring) }
button { font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--font-weight-normal) }
button { font-family:var(--font-sans) }
a { background-color:var(--color-theme-button-bg); color:var(--color-theme-button-text); font-size:var(--text-base); font-weight:var(--font-weight-normal) }
a { font-size:var(--text-sm) }
input { color:var(--color-theme-text) }
card { background-color:var(--color-theme-card-hex); border-radius:var(--radius-xs) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://cursor.com | 2026-06-11T05:11:05.149Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*