---
version: alpha
name: Cursor
description: "Warm paper, near-black ink, an orange that behaves like a footnote."
colors:
  on-surface: "#26251E"
  surface: "#F7F7F4"
  primary: "rgba(245, 78, 0, 0.08)"
  card: "#F2F1ED"
  card-02: "#EBEAE5"
  card-03: "#E6E5E0"
  card-04: "#E1E0DB"
  ink-secondary: "rgba(38, 37, 30, 0.6)"
  ink-mid: "rgba(38, 37, 30, 0.5)"
  ink-tertiary: "rgba(38, 37, 30, 0.4)"
  hairline: "rgba(38, 37, 30, 0.1)"
  hairline-faint: "rgba(38, 37, 30, 0.03)"
  accent: "#F54E00"
  amber: "#C08532"
  diff-green-red: "#1F8A65"
  selection-blue: "#3A6A9F"
  leaderboard-set: "#0082FB"
typography:
  display:
    fontFamily: CursorGothic
    fontSize: 72px
    fontWeight: 400
    lineHeight: 79.2px
    letterSpacing: -2.16px
  section-head:
    fontFamily: CursorGothic
    fontSize: 36px
    fontWeight: 400
    lineHeight: 43.2px
    letterSpacing: -0.72px
  heading:
    fontFamily: CursorGothic
    fontSize: 26px
    fontWeight: 400
    lineHeight: 32.5px
    letterSpacing: -0.325px
  subheading:
    fontFamily: CursorGothic
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28.6px
    letterSpacing: -0.11px
  bold-label:
    fontFamily: CursorGothic
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
    letterSpacing: 0em
  body:
    fontFamily: CursorGothic
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0.08px
  body-small-nav:
    fontFamily: CursorGothic
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0.14px
  caption:
    fontFamily: CursorGothic
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0.12px
  mono:
    fontFamily: berkeleyMono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: 0em
  product-ui:
    fontFamily: CursorGothic
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16.25px
    letterSpacing: 0em
  product-label:
    fontFamily: CursorGothic
    fontSize: 11px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0.0484px
rounded:
  card-media-container-thumbnail: 4px
  editor-panel-chat-input-inline-button: 8px
  elevated-media-window: 10px
  demo-panel: 12px
  file-chip-code-pill: 2px
  buttons-chips-toggles-status-dots: 9999px
  device-frame: 44px
  inner-window-crop: 3px
spacing:
  2xs: 2px
  xs: 3px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 10px
  2xl: 20px
  card-pad: 13.4px
  card-pad-2: 15.9px
  card-pad-3: 17.5px
  band: 67.2px
  band-2: 89.6px
  band-3: 112px
---
# Cursor — Style Reference
> Warm paper, near-black ink, an orange that behaves like a footnote.

**Theme:** light

Cursor paints on warm paper. The canvas is a barely-there greige, cards step one notch into something warmer, and the ink is a near-black carrying a little brown — the neutral family sits within a few points of itself, so a page reads as one sheet with faint creases rather than a stack of panels. The signature move is the orange: it shows up as link ink on tertiary calls to action, while the button you actually press is the ink colour itself, a near-black pill. Type is CursorGothic held at regular weight from caption to seventy-two-pixel display, tracking tightening as size grows and opening as it shrinks, so hierarchy comes from scale and ink opacity rather than weight. The rhythm is a repeating band with generous vertical padding and four-pixel cards floated inside it; shadow is a product-screenshot device far more than a page device. One canvas carries the whole capture, and the benchmark pages lean on a categorical chart palette and dense ruled tables the marketing pages have little use for.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#F7F7F4` | `--color-bg` | Page and header ground; also the label ink on dark pills, so it doubles as the inverse text colour. |
| Card | `#F2F1ED` | `--color-card` | One step up from the canvas: `.card.relative.flex.w-full`, the footer band, product chrome. Carries `border none` — the luminance step is the edge. |
| Card 02 | `#EBEAE5` | `--color-card-02` | Second step: alternate cards and `.agent-sidebar__row.type-product-base.flex.w-full`. Use when two cards sit side by side and must still separate. |
| Card 03 | `#E6E5E0` | `--color-card-03` | The secondary-button fill and the pill-toggle track — the heaviest neutral that still reads as "unpressed". |
| Card 04 | `#E1E0DB` | `--color-card-04` | The smallest chrome step: icon buttons and inline file chips in the editor mocks. |
| Ink | `#26251E` | `--color-text` | Body, headings, nav, and the primary button fill. The darkest value here is text and CTA both, which is why no separate brand-dark exists. |
| Ink Secondary | `rgba(38, 37, 30, 0.6)` | `--color-text-sec` | Deck copy, eyebrow headings, table meta. Sixty percent ink is this system's idea of muted; no second grey is mixed in. |
| Ink Mid | `rgba(38, 37, 30, 0.5)` | `--color-text-mid` | Dates and changelog stamps. |
| Ink Tertiary | `rgba(38, 37, 30, 0.4)` | `--color-text-ter` | Timestamps and the faintest product labels. |
| Hairline | `rgba(38, 37, 30, 0.1)` | `--color-border` | The structural rule: table rows, editor panels, input frames. Ten percent ink is the border language wherever structure is needed. |
| Hairline Faint | `rgba(38, 37, 30, 0.03)` | `--color-border-faint` | The secondary button's edge — enough to shape the pill, too faint to read as an outline. |
| Accent | `#F54E00` | `--color-accent` | Editorial link colour on `.btn-tertiary`. Thirty-six of its thirty-seven observations are text, so treat it as ink rather than as a fill. |
| Accent Wash / Line | `rgba(245, 78, 0, 0.08)` / `rgba(245, 78, 0, 0.3)` | `--color-accent-bg` / `--color-accent-line` | The featured column on `.align-top.border-x-theme-accent/30.bg-theme-accent/8.border-x` — the accent working as structure, not as ink. |
| Amber | `#C08532` | `--color-amber` | The in-product commit action, `"Build" .rounded.px-2.py-0.5.text-xs`, plus a 15% wash behind the Plan chip. It rides mock chrome, not page chrome. |
| Diff Green / Red | `#1F8A65` / `#CF2D56` | `--color-ansi-green` / `--color-ansi-red` | Added and removed line counts in the agent mocks, with 8% and 6% washes behind gutter rows. |
| Selection Blue | `#3A6A9F` on `#E3EBF3` | `--color-select` / `--color-select-chip` | The DOM-selection tooltip and its 15% box wash in the browser-agent demo. |
| Leaderboard Set | `#0082FB` `#0EA5E9` `#EAA400` `#166534` `#9F1239` `#C66A4A` `#EF80D2` `#4F46E5` `#64748B` | `--color-chart-*` | Categorical model identity. All ride `.size-2.shrink-0.rounded-full.md:size-2.5`, encoding a series rather than a surface. |

## Tokens — Typography

### CursorGothic — the whole public voice: display, headings, body, nav, captions, all at regular weight unless a page needs a bold label · `--font-cursor-gothic`
- **Substitute:** Suisse Int'l, Inter, ui-sans-serif
- **Weights:** 400, 500, 700
- **Sizes:** 12px, 14px, 16px, 18px, 22px, 26px, 36px, 72px
- **Line height:** 79.2px at 72px (1.10) tightening upward to 21px at 14px (1.50)
- **Letter spacing:** −2.16px at 72px, −0.72px at 36px, −0.325px at 26px, −0.11px at 22px, then it crosses zero: +0.08px at 16px, +0.14px at 14px, +0.12px at 12px
- **Role:** Display, headings, body, nav and captions in one family; 500 appears on evals section titles and the benchmark table's leading cells, 700 at 18px on `.type-md-sm.font-bold.text-balance`.

### cursorDisplay — the model-launch wordmark, set once as a lockup rather than as a text style · `--font-cursor-display`
- **Substitute:** Söhne Breit, Archivo, ui-sans-serif
- **Weights:** 400
- **Sizes:** 36px
- **Line height:** 43.2px (1.20)
- **Letter spacing:** normal
- **Role:** The "Grok 4.6" title lockup on the model page — a product name treated as an object, not a running heading style.

### berkeleyMono — every technical surface inside the product mocks: terminals, diffs, file names, agent logs · `--font-mono`
- **Substitute:** Berkeley Mono, JetBrains Mono, ui-monospace
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px
- **Line height:** 18px, 19.5px and 20px (1.50–1.67)
- **Letter spacing:** normal, with one −0.3px row on the CLI transcript
- **Role:** CLI output, diff gutters, file chips and status glyphs. The site's own `--font-mono` token names it as the sanctioned technical face.

### system-ui — the simulated application's interface type, deliberately native rather than branded · `--font-ui`
- **Substitute:** -apple-system, Segoe UI, ui-sans-serif
- **Weights:** 400, 500, 510, 600, 700
- **Sizes:** 11px, 12px, 13px, 14px
- **Line height:** 14px at 11px, 15–16px at 12px, 16.25–17.33px at 13px, 21.7px at 14px
- **Letter spacing:** normal, except +0.0484px at 11px
- **Role:** Chat rows, sidebar items, tab labels and mobile UI inside the mocks — what makes a screenshot read as a real app rather than brand illustration. `-apple-system` at 400 is the fallback the census also caught.

### EB Garamond — the serif of the fictional site the agent builds on screen · `--font-serif`
- **Substitute:** Cormorant Garamond, Adobe Garamond, Georgia
- **Weights:** 400, 500
- **Sizes:** 17.28px
- **Line height:** 23.328px (1.35)
- **Letter spacing:** normal
- **Role:** Body copy and the year-ruled table of the mock "Acme Labs" page inside the hero preview, set in `rgba(38, 37, 30, 0.55)`. The demo's voice, not Cursor's chrome — do not promote it to the marketing pages.

### CursorIcons16 & Lato — families the inventory names without a measured text row
- **Weights:** CursorIcons16 400; Lato 400, 600
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** CursorIcons16 is the inline glyph face behind the arrow, download and platform marks; Lato carries no census row, so treat it as incidental.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 72px | 79.2px | −2.16px | `--text-display` |
| Section head | 36px | 43.2px | −0.72px | `--text-xl` |
| Heading | 26px | 32.5px | −0.325px | `--text-lg` |
| Subheading | 22px | 28.6px | −0.11px | `--text-md` |
| Bold label | 18px | 25.2px | normal (700) | `--text-md-sm` |
| Body | 16px | 24px | +0.08px | `--text-base` |
| Body small / nav | 14px | 21px | +0.14px | `--text-sm` |
| Caption | 12px | 18px | +0.12px | `--text-xs` |
| Mono | 12px | 19.5px | normal | `--text-mono` |
| Product UI | 13px | 16.25px | normal | `--text-product` |
| Product label | 11px | 14px | +0.0484px | `--text-product-sm` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable at page scale, compact inside the product mocks

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--space-2` |
| xs | 3px | `--space-3` |
| sm | 4px | `--space-4` |
| md | 6px | `--space-6` |
| lg | 8px | `--space-8` |
| xl | 10px | `--space-10` |
| 2xl | 20px | `--space-20` |
| Card pad (text) | 13.4px 15px | `--space-card-text` |
| Card pad | 15.9px 17.5px | `--space-card` |
| Card pad (large) | 17.5px | `--space-card-lg` |
| Band | 67.2px | `--space-band` |
| Band (longform) | 89.6px | `--space-band-lg` |
| Band (hero) | 112px | `--space-band-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Card, media container, thumbnail | 4px |
| Editor panel, chat input, inline button | 8px |
| Elevated media window | 10px |
| Demo panel (Slack, mobile pulse) | 12px |
| File chip, code pill | 2px |
| Buttons, chips, toggles, status dots | 9999px |
| Device frame | 44px |
| Inner window crop | 3px |
| Working-icon dot | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Media window | `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` | `--shadow-media` |
| Product panel | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px` | `--shadow-panel` |
| Hairline ring | `oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px` | `--shadow-ring` |
| Floating window | `rgba(0, 0, 0, 0.35) 0px 8px 30px 0px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px` | `--shadow-window` |

### Layout
- **Page max-width:** `not measured`; sections carry 20px horizontal padding on `.section.bg-theme-bg.text-theme-text.overflow-hidden`. The site declares `--insights-prose-max-width: 560px` *(declared, not painted)*.
- **Section gap:** 67.2px standard band; 89.6px longform; 112px hero and closing bands.
- **Card padding:** 15.9px 17.5px standard, 13.4px 15px text cards, 17.5px the full-width large card.
- **Element gap:** 8px leads, then 4px, 6px and 10px; the 3px and 2px steps mostly ride product chrome such as `.flex.items-center.gap-[3px].pb-[3px]`.

## Components

### Primary Button
**Role:** The download action — the one thing the page wants pressed.
Built from `"Download for macOS⤓" .btn`: an `a` filled `#26251E`, label `#F7F7F4` at 16px/400, padding 12.48px 21.6px, radius 9999px, border 1px `#26251E`, `shadow none`. The border matches the fill exactly, keeping the silhouette crisp against the canvas without a visible outline. Ink doing double duty as the CTA fill is why press-worthiness here is signalled by contrast, not hue.

### Secondary Button
**Role:** The path beside the download — demo requests, language switching.
`"Request a demo→" .btn.btn--secondary` is an `a` filled `#E6E5E0`, text `#26251E` at 16px/400, padding 12.48px 21.6px, radius 9999px, border 1px `rgba(38, 37, 30, 0.03)`, `shadow none`. The small variant, `"🌐English↓" .btn.btn--secondary.btn--sm.gap-g0.5`, drops to 14px/400 at padding 5.6px 10.5px, same radius and border. Both sit one luminance step above the card surface, so the pair reads as a rank, not two colours.

### Tertiary Link
**Role:** The read-more move at the foot of a feature block.
`"Explore models ↗" .btn-tertiary` is an `a` in `#F54E00`, CursorGothic 16px/400, line height 24px, tracking +0.08px — no fill, no underline, no capsule, just an arrow glyph riding the text. Restraint is the whole point: because the orange stays out of backgrounds, an orange word on the page reads as a destination. Keep the arrow (→ for same-page, ↗ for off-site) as part of the string.

### Site Header & Nav
**Role:** The persistent frame — wordmark left, sections centred, account right.
`.bg-theme-bg.px-g2.fixed.top-0` is a fixed `header` filled `#F7F7F4`, 20px horizontal padding, radius 0, `border none`, `shadow none` — it dissolves into the canvas rather than floating over it. Nav items are `.nav__btn` links in CursorGothic 14px/400/21px, tracking normal, ink `#26251E`. The right cluster pairs a secondary pill with the primary pill — the hero's two-rank button logic, repeated.

### Section Band
**Role:** The page's unit of rhythm — one idea per band, edge to edge.
`.section.bg-theme-bg.text-theme-text.overflow-hidden` is a `section` filled `#F7F7F4`, padding 67.2px 20px, radius 0, `border none`, `shadow none`. The taller `.section.bg-theme-bg.text-theme-text` runs 112px 20px, holding the hero and the closing "Try Cursor now." moment. Bands share the canvas fill, so separation comes from vertical air and the cards floated inside — which is why 67.2px is not negotiable.

### Card
**Role:** The default container for a feature, testimonial or changelog entry.
`.card.relative.flex.w-full` is a `div` filled `#F2F1ED`, padding 15.9px 17.5px, radius 4px, `border none`, `shadow none`. Its link form, `.card.flex.h-full.grow-1`, carries the same fill, padding and radius with `#26251E` text at 16px/400. A four-pixel radius against a fully-round button is the core shape contrast: containers nearly square, controls fully round, little in between.

### Media Frame
**Role:** The floating application window — the hero image of this brand.
`.group.absolute.rounded-[10px].overflow-hidden` is a `div` filled `#F2F1ED`, radius 10px, `border none`, carrying `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`. Its flat sibling `.media-border-container.relative.grid.grid-cols-1` uses radius 4px, `shadow none`. The 10px radius and seventy-pixel blur exist so a screenshot reads as a window above the page.

### Benchmark Table Row
**Role:** The leaderboard line — model, score, cost, tokens, steps.
`.group.border-theme-border-02.data-[interactive]:hover:bg-theme-c` is a `tr` with `fill none`, radius 0 and a 1px `rgba(38, 37, 30, 0.1)` rule. Cells come from `.align-top.px-2.py-3.md:px-3`: `td`, 12px/500/18px at +0.12px, padding 14px 12px, same hairline. The featured column is `.align-top.border-x-theme-accent/30.bg-theme-accent/8.border-x` — fill `rgba(245, 78, 0, 0.08)`, border 1px `rgba(245, 78, 0, 0.3)`. Ten-percent ink rules and an eight-percent accent wash are the whole emphasis vocabulary: no zebra striping, no filled header.

### Legend Dot
**Role:** The categorical key tying a chart series to its table row.
`.size-2.shrink-0.rounded-full.md:size-2.5` is an 8px `span` at radius 9999px, `border none`, typeset 14px/400/21px at +0.14px. Two constructions: solid fills (`#0082FB`, `#0EA5E9`, `#EAA400`, `#166534`, `#9F1239`, `#C66A4A`) and hollow rings drawn purely with inset shadow — `rgb(196, 120, 20) 0px 0px 0px 1px inset`, `rgb(49, 168, 191) 0px 0px 0px 1px inset`. Shape carries the tier distinction so hue can stay purely categorical.

### Composer Input
**Role:** The prompt field at the foot of the agent mocks — the product's front door.
`.bg-theme-product-editor.border-theme-border-02.text-theme-text.t` is a `div` filled `#F7F7F4`, padding 6px 8px, radius 8px, border 1px `rgba(38, 37, 30, 0.1)`; its stacked sibling `.rounded-lg.bg-theme-product-editor.border-theme-border-02.mt-1` uses padding 8px 8px at the same radius and border. Placeholder and typed text are system-ui 13px/400 at line height 17.33px in `#26251E`. Note the inversion: inside a `#F2F1ED` panel the input takes the *canvas* colour, so the field reads as a cut-out rather than a raised box.

### Product Chip
**Role:** The mode and model selectors inside the composer.
The neutral chip, `.type-product-sm.flex.cursor-pointer.items-center`, is a `button` filled `#E6E5E0`, text `rgba(38, 37, 30, 0.6)` at 11px/400, padding 3px 8px, radius 9999px, `border none`, `shadow none`. Its active state is the same class filled `rgba(192, 133, 50, 0.15)` with `#C08532` text at 11px/400, identical padding and radius. Selection is a fifteen-percent amber wash and nothing else — no border, size or shadow change.

### Footer
**Role:** The five-column sitemap that closes every page.
`.pt-v3.pb-v3.md:pb-g3.px-g2` is a `footer` filled `#F2F1ED`, padding 67.2px 20px, radius 0, `border none`, `shadow none`. Column headings are CursorGothic 14px/400/21px in `rgba(38, 37, 30, 0.6)`; links are the same size in full `#26251E`. Taking the card fill rather than a dark band, the page ends on a step *up* in luminance — a quieter close than the usual dark footer.

## Do's and Don'ts

### Do
- Build hierarchy from the ink ladder: `#26251E` primary, `rgba(38, 37, 30, 0.6)` decks and eyebrows, `rgba(38, 37, 30, 0.4)` timestamps.
- Draw rules and panel edges with `rgba(38, 37, 30, 0.1)` — one value for table rows and editor frames alike.
- Set body copy in CursorGothic 16px/24px at +0.08px tracking, as `.whitespace-pre-wrap.text-pretty.type-base.line-clamp-4` does.
- Let the orange do the linking: `.btn-tertiary` plus an arrow glyph is the "learn more" pattern.
- Keep the 67.2px band and the 4px card together; they are the page's constants.
- Give product screenshots the `#F2F1ED` window fill, 10px radius and the media shadow — the mock is the hero image.

### Don't
- Don't fill a button with `#F54E00`: thirty-six of its thirty-seven observations are text, so an orange surface breaks the link contract.
- Don't add elevation to page chrome. `.card.relative.flex.w-full` and `.section.bg-theme-bg.text-theme-text.overflow-hidden` both measure `shadow none`; simulated windows lift, chrome does not.
- Don't set a heading above 18px in anything but 400. The heaviest heading row is 700 at 18px on `.type-md-sm.font-bold.text-balance`; every larger row is regular.
- Don't outline a card. `.card.relative.flex.w-full` measures `border none` — the luminance step is the edge.
- Don't mix corner languages in one composition: containers 4px (`.card.relative.flex.w-full`), controls 9999px (`"Download for macOS⤓" .btn`).
- Don't reach for `#FFFFFF` as a surface. Its twelve observations are label ink and small mock buttons ("Build", "Continue", "View PR"); the lightest surface here is `#F7F7F4`.
- Don't let the amber or the leaderboard hues escape their contexts; they encode agent state and model identity, not brand.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#F7F7F4` | Page ground, header, bands, composer inputs. |
| 1 | Card | `#F2F1ED` | Cards, footer, product chrome, media windows. |
| 2 | Card 02 | `#EBEAE5` | Alternate cards, agent sidebar rows, toggles. |
| 3 | Card 03 | `#E6E5E0` | Secondary buttons, pill tracks, product chips. |
| 4 | Card 04 | `#E1E0DB` | Icon buttons, inline file chips. |
| — | Inverse | `#26251E` | Primary button fill, `#F7F7F4` label ink. |

## Elevation
Depth is a luminance ladder, not a shadow ladder. Four surfaces climb from `#F7F7F4` to `#E1E0DB` a few points at a time, and structure needing a harder edge gets a 1px `rgba(38, 37, 30, 0.1)` hairline instead of a glow. Real shadow goes to objects pretending to be application windows: the media frame's three-layer stack (28px and 14px blurs plus an `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` ring) and the product panel's `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`. That ring also appears alone on quieter media — the cheapest elevation here.

## Imagery
Two registers. The first is nineteenth-century landscape painting — luminous skies, hazy mountains, pale water — run full-bleed as the backdrop a product window floats over. The paintings share the site's warm greige and dusty blue, so they read as texture rather than photography, turning a screenshot into a still life. The second register is the product: high-fidelity mock windows of the desktop app, the CLI, a Slack thread and a phone, with real diff numbers and file names. Supporting imagery is sparse and monochrome — a logo garden on `.logo-garden-responsive-8`, circular headshots in testimonial cards, one candid team photograph shot through foliage. No illustration, no 3D, no gradient meshes; the benchmark scatter is the lone abstract graphic, and it is data.

## Layout
Full-bleed bands over a contained centre. The fixed header carries 20px side padding and a three-part split: wordmark, centred nav, sign-in / secondary-pill / primary-pill cluster. Below it, 67.2px bands alternate a left text column against a right media object, or run 3-up and 4-up card grids at 10px gaps. Hero and closing bands stretch to 112px; longform runs 89.6px. The model page swaps alternation for a left rail table of contents beside a single column; the benchmark page drops to one chart card above a full-width ruled table. Cards stretch to equal height in their grid (`.grid.grid-cols-1.gap-g1.items-stretch`), so a row reads as a band of blocks rather than loose tiles. The footer repeats its five-column sitemap under a utility row of theme toggles and a language pill.

## Typography Voice
The system runs two typographic modes and keeps them apart. The public mode is CursorGothic at 400, from 72px display to 12px caption, with tracking that crosses zero at the 16/22px boundary: negative and tightening as type grows (−2.16px at 72px, −0.72px at 36px), positive and opening as it shrinks (+0.08px at 16px, +0.14px at 14px). Line height runs the same logic in reverse — 1.10 at display, 1.50 at body — so big type reads as a compact block and small type as an airy paragraph. The product mode is system-ui at 11–13px with berkeleyMono for anything technical, deliberately unbranded so a screenshot looks like software. The two touch at the deck: a 26px or 22px line in `rgba(38, 37, 30, 0.6)` set directly under a same-size heading in full ink. Same size, same weight, different alpha — the most Cursor move in the document.

## Agent Prompt Guide

## Quick Color Reference
- background: `#F7F7F4`
- text: `#26251E`
- surface: `#F2F1ED`
- border: `rgba(38, 37, 30, 0.1)`
- accent: `#F54E00`
- primary action: `#26251E` fill with `#F7F7F4` label

## Example Component Prompts
1. **Primary Button**: Pill link, fill `#26251E`, label `#F7F7F4` in CursorGothic 16px/400, padding 12.48px 21.6px, radius 9999px, 1px `#26251E` border, no shadow.
2. **Feature Card**: `div` on `#F2F1ED`, padding 15.9px 17.5px, radius 4px, no border, no shadow. Title CursorGothic 22px/400/28.6px at −0.11px in `#26251E`; body 16px/400/24px at +0.08px in `rgba(38, 37, 30, 0.6)`; footer link `#F54E00` 16px/400 with a trailing arrow.
3. **Benchmark Table**: rows `fill none` with a 1px `rgba(38, 37, 30, 0.1)` rule; cells 12px/500/18px at +0.12px, padding 14px 12px; one featured column filled `rgba(245, 78, 0, 0.08)` with 1px `rgba(245, 78, 0, 0.3)` side borders; an 8px legend dot per row at radius 9999px.
4. **Floating App Window**: `#F2F1ED` panel at radius 10px with `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`, on a full-bleed landscape painting inside a 67.2px band.
5. **Composer Input**: `#F7F7F4` field at radius 8px, 1px `rgba(38, 37, 30, 0.1)` border, padding 6px 8px, on a `#F2F1ED` panel; text system-ui 13px/400/17.33px in `#26251E`; below it 9999px chips filled `#E6E5E0` at padding 3px 8px, the active one on `rgba(192, 133, 50, 0.15)` with `#C08532` text.

## Similar Brands
- **Vercel (Geist)** — the same monochrome chrome, mono technical captions, and screenshots treated as the hero object.
- **Linear** — kindred restraint: one ink, one sparing accent, interface mocks doing the persuading.
- **Anthropic** — a warm off-white canvas, a single warm-orange accent, and a serif kept for editorial voice.
- **The Browser Company (Arc)** — the same warm neutral paper and softly-shadowed floating app window.
- **Notion** — a greige surface ladder with low-radius containers and colour reserved for status, not identity.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-bg: #F7F7F4;
  --color-card: #F2F1ED;
  --color-card-02: #EBEAE5;
  --color-card-03: #E6E5E0;
  --color-card-04: #E1E0DB;
  --color-text: #26251E;
  --color-text-sec: rgba(38, 37, 30, 0.6);
  --color-text-mid: rgba(38, 37, 30, 0.5);
  --color-text-ter: rgba(38, 37, 30, 0.4);
  --color-text-quiet: rgba(38, 37, 30, 0.55);
  --color-border: rgba(38, 37, 30, 0.1);
  --color-border-soft: rgba(38, 37, 30, 0.08);
  --color-border-quiet: rgba(38, 37, 30, 0.06);
  --color-border-faint: rgba(38, 37, 30, 0.03);
  --color-accent: #F54E00;
  --color-accent-bg: rgba(245, 78, 0, 0.08);
  --color-accent-line: rgba(245, 78, 0, 0.3);
  --color-amber: #C08532;
  --color-amber-bg: rgba(192, 133, 50, 0.15);
  --color-ansi-green: #1F8A65;
  --color-ansi-red: #CF2D56;
  --color-diff-green: #00A63E;
  --color-diff-red: #E7000B;
  --color-select: #3A6A9F;
  --color-select-bg: rgba(58, 106, 159, 0.15);
  --color-select-chip: #E3EBF3;
  --color-on-dark: #F7F7F4;
  --color-white: #FFFFFF;
  --color-chart-blue: #0082FB;
  --color-chart-sky: #0EA5E9;
  --color-chart-amber: #EAA400;
  --color-chart-green: #166534;
  --color-chart-crimson: #9F1239;
  --color-chart-clay: #C66A4A;
  --color-chart-pink: #EF80D2;
  --color-chart-indigo: #4F46E5;
  --color-chart-slate: #64748B;

  /* Typography — Families */
  --font-cursor-gothic: 'CursorGothic', 'Suisse Int\'l', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-cursor-display: 'cursorDisplay', 'Söhne Breit', Archivo, ui-sans-serif, sans-serif;
  --font-mono: 'berkeleyMono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-ui: system-ui, -apple-system, 'Segoe UI', ui-sans-serif, sans-serif;
  --font-serif: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;

  /* Typography — Scale */
  --text-display: 72px;      --leading-display: 79.2px;   --tracking-display: -2.16px;
  --text-xl: 36px;           --leading-xl: 43.2px;        --tracking-xl: -0.72px;
  --text-lg: 26px;           --leading-lg: 32.5px;        --tracking-lg: -0.325px;
  --text-md: 22px;           --leading-md: 28.6px;        --tracking-md: -0.11px;
  --text-md-sm: 18px;        --leading-md-sm: 25.2px;     --tracking-md-sm: normal;
  --text-base: 16px;         --leading-base: 24px;        --tracking-base: 0.08px;
  --text-sm: 14px;           --leading-sm: 21px;          --tracking-sm: 0.14px;
  --text-xs: 12px;           --leading-xs: 18px;          --tracking-xs: 0.12px;
  --text-mono: 12px;         --leading-mono: 19.5px;      --tracking-mono: normal;
  --text-product: 13px;      --leading-product: 16.25px;  --tracking-product: normal;
  --text-product-sm: 11px;   --leading-product-sm: 14px;  --tracking-product-sm: 0.0484px;
  --text-serif: 17.28px;     --leading-serif: 23.328px;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-20: 20px;
  --space-card-text: 13.4px 15px;
  --space-card: 15.9px 17.5px;
  --space-card-lg: 17.5px;
  --space-band: 67.2px;
  --space-band-lg: 89.6px;
  --space-band-xl: 112px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-inner: 3px;
  --radius-card: 4px;
  --radius-panel: 8px;
  --radius-window: 10px;
  --radius-demo: 12px;
  --radius-device: 44px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-media: 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;
  --shadow-panel: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-ring: oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px;
  --shadow-window: rgba(0, 0, 0, 0.35) 0px 8px 30px 0px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px;
}
```
### Tailwind v4
```css
@theme {
  --color-bg: #F7F7F4;
  --color-card: #F2F1ED;
  --color-card-02: #EBEAE5;
  --color-card-03: #E6E5E0;
  --color-card-04: #E1E0DB;
  --color-text: #26251E;
  --color-text-sec: rgba(38, 37, 30, 0.6);
  --color-text-mid: rgba(38, 37, 30, 0.5);
  --color-text-ter: rgba(38, 37, 30, 0.4);
  --color-text-quiet: rgba(38, 37, 30, 0.55);
  --color-border: rgba(38, 37, 30, 0.1);
  --color-border-soft: rgba(38, 37, 30, 0.08);
  --color-border-quiet: rgba(38, 37, 30, 0.06);
  --color-border-faint: rgba(38, 37, 30, 0.03);
  --color-accent: #F54E00;
  --color-accent-bg: rgba(245, 78, 0, 0.08);
  --color-accent-line: rgba(245, 78, 0, 0.3);
  --color-amber: #C08532;
  --color-amber-bg: rgba(192, 133, 50, 0.15);
  --color-ansi-green: #1F8A65;
  --color-ansi-red: #CF2D56;
  --color-diff-green: #00A63E;
  --color-diff-red: #E7000B;
  --color-select: #3A6A9F;
  --color-select-bg: rgba(58, 106, 159, 0.15);
  --color-select-chip: #E3EBF3;
  --color-on-dark: #F7F7F4;
  --color-white: #FFFFFF;
  --color-chart-blue: #0082FB;
  --color-chart-sky: #0EA5E9;
  --color-chart-amber: #EAA400;
  --color-chart-green: #166534;
  --color-chart-crimson: #9F1239;
  --color-chart-clay: #C66A4A;
  --color-chart-pink: #EF80D2;
  --color-chart-indigo: #4F46E5;
  --color-chart-slate: #64748B;

  --font-cursor-gothic: 'CursorGothic', 'Suisse Int\'l', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-cursor-display: 'cursorDisplay', 'Söhne Breit', Archivo, ui-sans-serif, sans-serif;
  --font-mono: 'berkeleyMono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-ui: system-ui, -apple-system, 'Segoe UI', ui-sans-serif, sans-serif;
  --font-serif: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;

  --text-display: 72px;      --leading-display: 79.2px;   --tracking-display: -2.16px;
  --text-xl: 36px;           --leading-xl: 43.2px;        --tracking-xl: -0.72px;
  --text-lg: 26px;           --leading-lg: 32.5px;        --tracking-lg: -0.325px;
  --text-md: 22px;           --leading-md: 28.6px;        --tracking-md: -0.11px;
  --text-md-sm: 18px;        --leading-md-sm: 25.2px;     --tracking-md-sm: normal;
  --text-base: 16px;         --leading-base: 24px;        --tracking-base: 0.08px;
  --text-sm: 14px;           --leading-sm: 21px;          --tracking-sm: 0.14px;
  --text-xs: 12px;           --leading-xs: 18px;          --tracking-xs: 0.12px;
  --text-mono: 12px;         --leading-mono: 19.5px;      --tracking-mono: normal;
  --text-product: 13px;      --leading-product: 16.25px;  --tracking-product: normal;
  --text-product-sm: 11px;   --leading-product-sm: 14px;  --tracking-product-sm: 0.0484px;
  --text-serif: 17.28px;     --leading-serif: 23.328px;

  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-20: 20px;
  --spacing-band: 67.2px;
  --spacing-band-lg: 89.6px;
  --spacing-band-xl: 112px;

  --radius-chip: 2px;
  --radius-inner: 3px;
  --radius-card: 4px;
  --radius-panel: 8px;
  --radius-window: 10px;
  --radius-demo: 12px;
  --radius-device: 44px;
  --radius-pill: 9999px;

  --shadow-media: 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;
  --shadow-panel: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-ring: oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px;
  --shadow-window: rgba(0, 0, 0, 0.35) 0px 8px 30px 0px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px;
}
```