# Cursor — Design Reference

> A quiet editor on warm paper, framed by oil paintings

**Theme:** light · **Measured from:** cursor.com (English, 1440 px)

Cursor looks like a calm workspace rather than a launch page. The canvas is warm off-white Paper (`#f7f7f4`) and the text is a brownish near-black Ink (`#26251e`), never pure black. One custom grotesk, **CursorGothic**, at weight 400 only — and the hero headline is just **26px**, smaller than most sites' subheads. The product does the talking: real app windows (agent list, plan, editor, CLI) float with deep soft shadows over painted landscape backdrops in muted oil colors. Buttons are pills — Ink for the primary, a light warm gray for the secondary. Feature sections sit on Cream (`#f2f1ed`) panels with square corners. The only accent is an orange (`#f54e00`) used for text links with arrows.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Ink | `#26251e` | All text; primary pill fill |
| Paper | `#f7f7f4` | Page canvas; text on Ink |
| Ink 55 | `#84847e` | Secondary text, gray second sentence of headings (Ink at 55%) |
| Cream | `#f2f1ed` | Feature panels, testimonial cards, logo tiles, code backgrounds |
| Hover | `#ebeae5` | Hover/selected rows inside product UI |
| Chip | `#e6e5e0` | Secondary pill fill |
| Orange | `#f54e00` | Text links with arrows; warnings. The only accent |
| Success | `#1f8a65` | Diff additions (+20) |
| Error | `#cf2d56` | Diff removals (-3), errors |
| PR Green | `#34785c` | "View PR" button inside the integration mock |

**Transparency over new grays:** secondary text is Ink at 55% and faint labels Ink at 38–40%. Build grays by lowering Ink's opacity, not by picking cool neutrals.

## Typography

**CursorGothic** is the main family — substitute **Geist** (400) from Google Fonts. **berkeleyMono** for code — substitute **JetBrains Mono** (400/500/700). (Lato, EB Garamond and system-ui appear only inside product mockups — Slack, a demo app — and are not part of the brand.)

- Weight **400** for everything: headlines, body, buttons. No bold anywhere in marketing copy.
- Headlines are small and quiet: the H1 is 26px, feature titles 22px; the largest heading on the page is 36px.
- Slight negative tracking on headings (`-0.325px` at 26px, `-0.72px` at 36px); slight *positive* tracking on body (`0.08px` at 16px, `0.14px` at 14px).

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Heading large | 36px | 400 | 1.2 | -0.72px |
| Display (H1) | 26px | 400 | 1.25 | -0.325px |
| Heading | 22px | 400 | 1.3 | -0.11px |
| Body | 16px | 400 | 1.5 | 0.08px |
| Button | 16px | 400 | 1 | 0 |
| Small | 14px | 400 | 1.5 | 0.14px |
| Mono | 12px | 400 | 1.625 | 0 |
| Caption | 12px | 400 | 16px | 0 |

**Two-tone feature text:** a 22px title in Ink ("Agents turn ideas into code") immediately followed by the description at the same size in Ink 55 ("Accelerate development by handing off tasks to Cursor…"), then an orange link with `→`.

## Shape and spacing

- **Buttons:** full pill.
- **Cards and panels:** 4px on testimonial cards and logo tiles; feature panels are square.
- **Product windows:** 10–12px radius with deep soft shadows.
- **Small UI buttons and inputs:** 4–8px.
- **Base unit:** 8px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96.
- **Content width:** 1300px.
- **Section gap:** about 96px between panels.

## Components

### Primary button
Ink `#26251e` fill, Paper `#f7f7f4` text, pill radius, padding `12.5px 21.6px` (about 44px tall), CursorGothic 400 at 16px, with a trailing glyph ("Download for Windows ⤓"). In the nav it shrinks to 27px tall, padding `5.6px 10.5px`, 14px — "Download".

### Secondary button
Chip `#e6e5e0` fill, Ink text, pill radius, same size as the primary, label with arrow: "Request a demo →". In the nav, "Contact sales" is a transparent pill with a thin Ink-tinted border.

### Navigation
Transparent on Paper, no border. Cube logo + "CURSOR" wordmark left; centered 14px Ink links (Models, Product, Enterprise, Pricing, Resources); right: "Sign in" text, "Contact sales" outline pill, "Download" Ink pill.

### Product window
A real app window (title bar with three gray traffic-light dots, sidebar of agents, plan pane, editor) on Paper/Cream, 10px radius, shadow `0 28px 70px rgba(0,0,0,.14), 0 14px 32px rgba(0,0,0,.1)` plus a 1px Ink-10% ring. Windows overlap (a CLI window in front of the desktop app) and sit over a painted landscape image that fills a wide panel edge to edge.

### Feature panel
Full-width Cream `#f2f1ed` panel, square corners. Text column on one side (two-tone 22px title + description, orange link), product window over a painting on the other. Panels alternate text-left / text-right down the page.

### Logo tiles
Eight customer logos in Ink monochrome, each in its own Cream tile with 4px radius, in a single row, under a 14px centered label "Trusted every day by teams that build world-class software".

### Testimonial card
Cream card, 4px radius, padding about `16px 17.5px`; the quote in 16px Ink, then a small round avatar, name in Ink and title in Ink 55. Three columns, two rows, under a 36px centered heading "The new way to build software."

## Do

- Use Paper `#f7f7f4` for the canvas and brownish Ink `#26251e` for text.
- Keep every piece of text at weight 400; let size and opacity create hierarchy.
- Keep headlines small and calm (22–36px).
- Show real product windows with deep soft shadows over painted backdrops.
- Use pills for buttons: Ink primary, warm-gray secondary.
- Reserve orange for text links with arrows.

## Don't

- Don't use pure black or pure white.
- Don't use bold headlines or giant hero type.
- Don't add color fills to buttons other than Ink and Chip.
- Don't round feature panels; only windows get soft corners.
- Don't use cool grays; derive grays from Ink opacity.
- Don't use orange for buttons or backgrounds.

## Layout

Left-aligned hero: a two-line 26px headline ("Cursor is your coding agent for building ambitious software.") and the pill pair, then a wide painted panel across the full 1300px with the product window inside. Logo tiles follow, then alternating Cream feature panels (text column + window over painting), a 36px centered testimonial section in a 3×2 grid, and a "Stay on the frontier" row of small cards.

## Agent prompt guide

- Text: `#26251e` · Secondary text: `#26251e` at 55% (`#84847e`)
- Canvas: `#f7f7f4` · Panels: `#f2f1ed` · Hover: `#ebeae5`
- Action: `#26251e` (Paper label) · Secondary pill: `#e6e5e0` · Link accent: `#f54e00`

Example prompts:

1. "Primary button: background #26251e, text #f7f7f4, fully rounded pill, padding 12.5px 21.6px, Geist 400 16px. Secondary: background #e6e5e0, text #26251e, same pill, label 'Request a demo →'."
2. "Feature panel: full-width #f2f1ed, square corners; left column a 22px weight-400 title in #26251e followed by the description at the same size in rgba(38,37,30,.55), then a #f54e00 link with →; right a product window with 10px radius and shadow 0 28px 70px rgba(0,0,0,.14), 0 14px 32px rgba(0,0,0,.1) over a painted landscape."
3. "Testimonial card: #f2f1ed, 4px radius, padding 16px 17.5px; 16px quote in #26251e, then a round avatar with name in #26251e and title at 55% opacity."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-ink: #26251e;
  --color-paper: #f7f7f4;
  --color-ink-55: #84847e;
  --color-cream: #f2f1ed;
  --color-hover: #ebeae5;
  --color-chip: #e6e5e0;
  --color-orange: #f54e00;
  --color-success: #1f8a65;
  --color-error: #cf2d56;
  --color-pr-green: #34785c;

  /* Fonts */
  --font-sans: 'CursorGothic', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'berkeleyMono', 'JetBrains Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-heading-lg: 36px;
  --text-heading-lg--line-height: 1.2;
  --text-heading-lg--letter-spacing: -0.72px;
  --text-heading-lg--font-weight: 400;
  --text-display: 26px;
  --text-display--line-height: 1.25;
  --text-display--letter-spacing: -0.325px;
  --text-display--font-weight: 400;
  --text-heading: 22px;
  --text-heading--line-height: 1.3;
  --text-heading--letter-spacing: -0.11px;
  --text-heading--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: 0.08px;
  --text-body--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1;
  --text-button--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: 0.14px;
  --text-small--font-weight: 400;
  --text-mono: 12px;
  --text-mono--line-height: 1.625;
  --text-mono--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 8px;
  --radius-cards: 4px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-window: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(38, 37, 30, 0.1);
  --shadow-window-deep: 0 22px 70px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.15);

  /* Layout */
  --container-page: 1300px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #26251e;
  --color-paper: #f7f7f4;
  --color-ink-55: #84847e;
  --color-cream: #f2f1ed;
  --color-hover: #ebeae5;
  --color-chip: #e6e5e0;
  --color-orange: #f54e00;
  --color-success: #1f8a65;
  --color-error: #cf2d56;
  --color-pr-green: #34785c;

  /* Fonts */
  --font-sans: 'CursorGothic', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'berkeleyMono', 'JetBrains Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-heading-lg: 36px;
  --text-heading-lg--line-height: 1.2;
  --text-heading-lg--letter-spacing: -0.72px;
  --text-heading-lg--font-weight: 400;
  --text-display: 26px;
  --text-display--line-height: 1.25;
  --text-display--letter-spacing: -0.325px;
  --text-display--font-weight: 400;
  --text-heading: 22px;
  --text-heading--line-height: 1.3;
  --text-heading--letter-spacing: -0.11px;
  --text-heading--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: 0.08px;
  --text-body--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1;
  --text-button--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: 0.14px;
  --text-small--font-weight: 400;
  --text-mono: 12px;
  --text-mono--line-height: 1.625;
  --text-mono--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 8px;
  --radius-cards: 4px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-window: 0 28px 70px rgba(0, 0, 0, 0.14), 0 14px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(38, 37, 30, 0.1);
  --shadow-window-deep: 0 22px 70px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.15);

  /* Layout */
  --container-page: 1300px;
}
```

---

*Measured from https://cursor.com/ on 2026-10-28 by Faundr. Inspired by Cursor; not its official design system and not affiliated with Cursor.*