Cursor

# layout.md — Cursor.com Design System

---

## 0. Quick Reference

**Stack:** cursor.com · extracted CSS custom properties (37 vars, high confidence) · serif body / custom gothic display / Berkeley Mono code · theming via `--color-theme-*` primitives.

**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.

```css
:root {
  /* Colours — semantic tier (aliases --color-theme-* primitives) */
  --color-bg: var(--color-theme-bg);               /* Page background */
  --color-text-primary: var(--color-theme-text);   /* rgb(38,37,30) — primary text */
  --color-text-muted: var(--color-theme-text-sec); /* ~55% opacity of primary — captions, meta */
  --color-border: var(--color-theme-border-02);    /* Subtle dividers */
  --color-accent: var(--color-theme-accent);       /* Brand amber — links, accents */
  --color-bg-hover: var(--color-theme-card-hover-hex); /* Card/row hover state */
  --color-code-bg: var(--color-theme-card-hex);    /* Code block backgrounds */
  --color-error: var(--color-theme-product-ansi-red);  /* Error states */
  --color-success: var(--color-theme-product-ansi-green); /* Success states */

  /* Typography */
  --font-mono: var(--font-berkeley-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --space-xs: 6px;   --space-sm: 7.5px; --space-md: 8px;
  --space-lg: 10px;  --space-xl: 17.5px; --space-2xl: 20px; --space-3xl: 30px;

  /* Radius — CRITICAL: primary buttons and badges use pill (≈33M px = full-round) */
  --radius-sm: 4px;    /* Cards, inputs */
  --radius-md: 8px;    /* Icon buttons, panels */
  --radius-lg: 3.35544e+07px; /* Pill — buttons, badges, avatars */

  /* Motion */
  --duration-fast: 0.14s; --duration-base: 0.15s; --duration-slow: 0.2s;
  --ease-default: ease;
}
```

```tsx
// Primary pill button — correct token usage
<button style={{
  fontFamily: 'CursorGothic, "CursorGothic Fallback", system-ui, sans-serif',
  fontSize: '16px', lineHeight: '16px', fontWeight: 400,
  color: 'rgb(247,247,244)',
  backgroundColor: 'rgb(38,37,30)',
  borderRadius: 'var(--radius-lg)',
  padding: '12.48px 21.6px 12.8px',
  border: '1px solid rgb(38,37,30)',
  transition: 'all var(--duration-base) var(--ease-default)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
}}>Download</button>
```

**NEVER rules:**
- **NEVER** use `border-radius: 8px` on primary buttons — they use pill shape (`--radius-lg`)
- **NEVER** use Inter, Roboto, or Arial as the display font — use `CursorGothic`
- **NEVER** hardcode `#000` or `#fff` — use `--color-text-primary` / `--color-bg`
- **NEVER** construct Tailwind class names dynamically (e.g. `bg-${color}`) — always full static class names
- **NEVER** use spacing values outside the token scale — no arbitrary `px` values
- **NEVER** omit hover/focus/disabled states — all interactive elements require all three
- **NEVER** use `font-weight: 700` for display headings — CursorGothic headings use `400`

**Full design system → see layout.md**

---

## 1. Design Direction & Philosophy

### Character & Aesthetic Intent
Cursor's design language is **editorial-technical** — a deliberate collision of classical typographic tradition (EB Garamond serif body, near-zero font weights for headings) with the precision of developer tooling (Berkeley Mono, tight pixel-level spacing tokens, product-UI chrome). The result reads as calm, confident, and slightly austere: a tool for serious engineers that doesn't need to shout.

The palette is near-monochromatic: a single warm near-black (`rgb(38,37,30)`) anchors everything, with an amber accent (`rgb(192,133,50)`) used sparingly. Backgrounds are off-white, not pure white. The overall feeling is **warm-neutral with high information density**.

### Typographic Stance
- **Display / UI text:** `CursorGothic` at weight `400` — this is intentional. Heavy weights are not used for headings. The brand expresses authority through scale and letterform, not weight.
- **Body / editorial:** `EB Garamond` — a classical serif at 17.28px, signalling long-form reading comfort and editorial credibility.
- **Code / product UI:** `Berkeley Mono` (custom) — a premium monospace that positions the product as a serious coding tool.

### What This Design Explicitly Rejects
- Rounded cards and "friendly" bubble UI — corners are 4px (sharp) on cards, pill only on interactive controls
- Heavy font weights as a hierarchy signal — hierarchy is expressed by size, not weight
- Saturated or warm colour palettes — a single amber accent on an otherwise cool-warm neutral base
- Drop shadows as depth signals — elevation is nearly invisible (`0.02` opacity shadows)
- Generic sans-serif system stacks for brand surfaces — `CursorGothic` is the brand voice

---

## 2. Colour System

### Tier 1 — Primitive Values (theme layer, resolved by `--color-theme-*`)

```css
/* These are the concrete values resolved by the theme system at runtime.
   Document here for reference — use the semantic tier in components. */
:root {
  /* Primitives: warm near-black scale */
  /* --color-theme-text      → rgb(38, 37, 30)         Full-opacity text */
  /* --color-theme-text-sec  → rgba(38,37,30,0.55)     Secondary/muted text */
  /* --color-theme-bg        → rgb(247, 247, 244)       Page background */
  /* --color-theme-card-hex  → rgb(242, 241, 237)       Card/code bg surface */
  /* --color-theme-card-hover-hex → slightly lighter than card-hex, hover */
  /* --color-theme-border-02 → subtle border, ~10% opacity of text */
  /* --color-theme-border-02-5 → brighter border variant */
  /* --color-theme-border-03 → info/link blue channel */
  /* --color-theme-accent    → amber, approx

## Appendix A: Complete Token Reference

Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.

```css
/* Colours (21) */
--color-bg: var(--color-theme-bg);
--color-text-primary: var(--color-theme-text);
--color-text-muted: var(--color-theme-text-sec);
--color-border: var(--color-theme-border-02);
--color-accent: var(--color-theme-accent);
--color-code-bg: var(--color-theme-card-hex);
--color-bg-hover: var(--color-theme-card-hover-hex);
--color-border-bright: var(--color-theme-border-02-5);
--color-success: var(--color-theme-product-ansi-green);
--color-success-bg: color-mix(in srgb, var(--color-theme-product-ansi-green) 15%, transparent);
--color-error: var(--color-theme-product-ansi-red);
--color-error-bg: color-mix(in srgb, var(--color-theme-product-ansi-red) 15%, transparent);
--color-warning-bg: color-mix(in srgb, var(--color-theme-accent) 15%, transparent);
--color-accent-bg: color-mix(in srgb, var(--color-theme-accent) 10%, transparent);
--color-accent-bg-strong: color-mix(in srgb, var(--color-theme-accent) 25%, transparent);
--color-info: var(--color-theme-border-03);
--color-timeline-thinking: #dfa88f;
--color-timeline-grep: #9fc9a2;
--color-timeline-read: #9fbbe0;
--color-timeline-edit: #c0a8dd;
--brand-primary-cta: rgb(192, 133, 50); /* Primary CTA background, dominant on 1 button — e.g. "Build" /* mined from computed styles */ */

/* Typography (13) */
--font-mono: var(--font-berkeley-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--font-size-xs: 11px; /* 6 elements — e.g. button "Agent", button "Opus 4.6", button "Agent" /* mined from computed styles */ */
--font-size-sm: 12px; /* 3 elements — e.g. div "Explored 12 files, 4", div "Worked for 14m 22s", div "Processed screen rec" /* mined from computed styles */ */
--font-size-md: 13px; /* 13 elements — e.g. button "AutoSuggested✓", button "Composer 2", button "GPT-5.4" /* mined from computed styles */ */
--font-size-lg: 14px; /* 65 elements — e.g. h2 "Trusted every day by", h3 "Product", h3 "Resources" /* mined from computed styles */ */
--font-size-xl: 16px; /* 74 elements — e.g. h3 "Use the best model f", h3 "Complete codebase un", h3 "Develop enduring sof" /* mined from computed styles */ */
--font-size-2xl: 22px; /* 10 elements — e.g. h2 "Stay on the frontier", h2 "Changelog", h2 "Recent highlights" /* mined from computed styles */ */
--font-size-3xl: 26px; /* 1 element — e.g. h1 "Built to make you ex" /* mined from computed styles */ */
--font-weight-regular: 400; /* 171 elements — e.g. h1 "Built to make you ex", h2 "Trusted every day by", h2 "The new way to build" /* mined from computed styles */ */
--font-weight-medium: 500; /* 4 elements — e.g. div "This Week", div "This Month", div "Acme Labs" /* mined from computed styles */ */
--line-height-tight: 21px; /* 61 elements — e.g. h2 "Trusted every day by", h3 "Product", h3 "Resources" /* mined from computed styles */ */
--line-height-normal: 24px; /* 71 elements — e.g. h3 "Use the best model f", h3 "Complete codebase un", h3 "Develop enduring sof" /* mined from computed styles */ */
--line-height-loose: 28.6px; /* 10 elements — e.g. h2 "Stay on the frontier", h2 "Changelog", h2 "Recent highlights" /* mined from computed styles */ */

/* Spacing (25) */
--button-padding-default: .78em 1.35em .8em;
--button-padding-md-sm: .6em 1.25em .62em;
--button-padding-sm: .4em .75em .42em;
--button-padding-xs: .15em .5em;
--site-header-height: 52px;
--spacing-xs: var(--spacing-g0\.25);
--spacing-sm: var(--spacing-g0\.5);
--spacing-md: var(--spacing-g1);
--spacing-lg: var(--spacing-g1\.5);
--spacing-xl: var(--spacing-g2);
--spacing-2xl: var(--spacing-g3);
--space-xs: 6px; /* 30 elements — e.g. div .inline-grid, div .inline-grid, div .inline-grid /* mined from computed styles */ */
--space-sm: 7.5px; /* 25 elements — e.g. div .gap-g0.75, div .gap-g0.75, div .gap-g0.75 /* mined from computed styles */ */
--space-md: 8px; /* 22 elements — e.g. div .group/agent, div .group/agent, div .group/agent /* mined from computed styles */ */
--space-lg: 10px; /* 68 elements — e.g. ul .gap-x-g1, ul .gap-x-g1, a .card /* mined from computed styles */ */
--space-xl: 17.5px; /* 96 elements — e.g. a .card, a .card, a .card /* mined from computed styles */ */
--space-2xl: 20px; /* 30 elements — e.g. section .section, section .section, section .section /* mined from computed styles */ */
--space-3xl: 30px; /* 17 elements — e.g. footer .pt-v3, div .col-span-full, div .col-span-full /* mined from computed styles */ */
--space-xs: 6px;
--space-sm: 7.5px;
--space-md: 8px;
--space-lg: 10px;
--space-xl: 17.5px;
--space-2xl: 20px;
--space-3xl: 30px;

/* Radius (6) */
--radius-sm: 4px; /* 20 elements — e.g. button .transition-opacity "Get Cursor", button .text-theme-text-sec, button .text-theme-text-sec /* mined from computed styles */ */
--radius-md: 8px; /* 7 elements — e.g. div .group/agent "Acme Research Dashbo", div .group/agent "Live Telemetry Pipe", div .group/agent "Zero-Downtime Deplo" /* mined from computed styles */ */
--radius-lg: 3.35544e+07px; /* 15 elements — e.g. button .type-product-sm "Agent", a .skipnav "Skip to content", a .skipnav "Skip to content" /* mined from computed styles */ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 3.35544e+07px;

/* Effects (2) */
--transition-fast: var(--duration);
--shadow-sm: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0… <0.2KB elided>; /* 2 elements — e.g. div .card, div .card /* mined from computed styles */ */

/* Motion (22) */
----motion-newsletter-submit-pulse: @keyframes newsletter-submit-pulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}; /* @keyframes newsletter-submit-pulse */
----motion-spin: @keyframes spin { 
  100% { transform: rotate(360deg); }
}; /* @keyframes spin */
----motion-pulse: @keyframes pulse { 
  50% { opacity: 0.5; }
}; /* @keyframes pulse */
----motion-pulse-emit: @keyframes pulse-emit { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}; /* @keyframes pulse-emit */
----motion-pulse-bit: @keyframes pulse-bit { 
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}; /* @keyframes pulse-bit */
----motion-swipe-out-left: @keyframes swipe-out-left { 
  0% { transform: var(--y) translateX(var(--swipe-amount-x)); opacity: 1; }
  100% { transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%)); opacity: 0; }
}; /* @keyframes swipe-out-left */
----motion-swipe-out-right: @keyframes swipe-out-right { 
  0% { transform: var(--y) translateX(var(--swipe-amount-x)); opacity: 1; }
  100% { transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%)); opacity: 0; }
}; /* @keyframes swipe-out-right */
----motion-swipe-out-up: @keyframes swipe-out-up { 
  0% { transform: var(--y) translateY(var(--swipe-amount-y)); opacity: 1; }
  100% { transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%)); opacity: 0; }
}; /* @keyframes swipe-out-up */
----motion-swipe-out-down: @keyframes swipe-out-down { 
  0% { transform: var(--y) translateY(var(--swipe-amount-y)); opacity: 1; }
  100% { transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%)); opacity: 0; }
}; /* @keyframes swipe-out-down */
----motion-sonner-fade-in: @keyframes sonner-fade-in { 
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}; /* @keyframes sonner-fade-in */
----motion-sonner-fade-out: @keyframes sonner-fade-out { 
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}; /* @keyframes sonner-fade-out */
----motion-sonner-spin: @keyframes sonner-spin { 
  0% { opacity: 1; }
  100% { opacity: 0.15; }
}; /* @keyframes sonner-spin */
----motion-tabCaretBlink: @keyframes tabCaretBlink { 
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}; /* @keyframes tabCaretBlink */
----motion-fadeIn: @keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}; /* @keyframes fadeIn */
----motion-fadeSlideUp: @keyframes fadeSlideUp { 
  0% { opacity: 0; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes fadeSlideUp */
----motion-fadeSlideRight: @keyframes fadeSlideRight { 
  0% { opacity: 0; transform: translateX(-2px); }
  100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes fadeSlideRight */
----motion-barGrow: @keyframes barGrow { 
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}; /* @keyframes barGrow */
----motion-tilePopIn: @keyframes tilePopIn { 
  0% { opacity: 0; transform: scale(0.7) translateY(3px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}; /* @keyframes tilePopIn */
--duration-fast: 0.14s; /* 23 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-base: 0.15s; /* 41 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-slow: 0.2s; /* 10 elements — e.g. button, button, button /* mined from computed styles */ */
--ease-default: ease; /* 307 elements — e.g. button, button, button /* mined from computed styles */ */
```