---
title: "Cursor design system"
variant: extended
source: https://cursor.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/cursor-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Cursor · Design System

> Warm editorial restraint, anchored by real software in action.

**Theme:** light · **Industry:** ai · **Source:** https://cursor.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Cursor’s homepage pairs a warm off-white canvas and restrained typography with large, detailed views of its coding interfaces. A sequence of split product stories, testimonials, updates, and a direct download CTA makes the page feel like a research-minded software product rather than a conventional sales funnel.

## North star

Keep the page calm and editorial, letting large, believable product interfaces—not decorative effects—carry the story.

## Overview

The visual strategy is quiet and product-led: a light canvas (#f2f1ed) and near-white surfaces (#f7f7f4) carry most of the page, while dark ink (#26251e) provides readable headlines, navigation, and interface-like detail. Orange (#f54e00) is reserved for text links; green and ochre appear as small interface or demo accents rather than broad brand fields. CursorGothic supplies restrained, humanist sans-serif headlines and body copy, with system-ui supporting compact labels and Berkeley Mono giving code snippets an authentic developer texture. A narrow left-aligned hero statement and dark download button introduce a large product image. Below, alternating two-column feature blocks, testimonial cards, and three-column product stories create a steady editorial rhythm. Generous open space separates sections, while fine borders and subtle neutral bands define cards without competing with screenshots. Photographic and product imagery stays large enough to make the software legible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Code Paper | `#f2f1ed` | `--color-warm-code-paper` | brand | Warm canvas and code-area background; also appears in product cards and image surroundings. |
| Soft Graphite | `#26251e` | `--color-soft-graphite` | brand | Primary headings, body text, navigation, and dark download buttons. |
| Studio Porcelain | `#f7f7f4` | `--color-studio-porcelain` | surface | Dominant page surface behind the hero, feature sections, cards, and most content. |
| Cursor Ember | `#f54e00` | `--color-cursor-ember` | accent | Text-link accent for calls to explore agents, models, changelog, and related content. |
| Terminal Green | `#34785c` | `--color-terminal-green` | semantic | Small success or product-interface accent; not a large page background. |
| Ochre Action | `#c08532` | `--color-ochre-action` | accent | Small buttons within the product demo, not the main site download CTA. |
| Muted Taupe | `#787771` | `--color-muted-taupe` | neutral | Secondary copy, captions, badges, and subdued supporting text. |
| Divider Stone | `#dddcd8` | `--color-divider-stone` | neutral | Hairline borders around cards, badges, and other low-contrast interface details. |
| Pale Pebble | `#e2e2de` | `--color-pale-pebble` | neutral | Subtle badge, card, and control fills visible in the measured interface. |
| Warm Footer Grey | `#d9d5cf` | `--color-warm-footer-grey` | surface | Secondary neutral surface, most evident in footer and interface details. |
| Cool Interface Grey | `#b6b9be` | `--color-cool-interface-grey` | surface | Muted grey interface surface found in product imagery and supporting details. |
| Slate Caption | `#70706f` | `--color-slate-caption` | neutral | Low-emphasis footer and supporting text. |
| Control Mist | `#eaeae8` | `--color-control-mist` | neutral | Very light control or button surface detail. |
| Stone Caption | `#8c8b85` | `--color-stone-caption` | neutral | Occasional muted text and secondary labels. |
| Deep Charcoal | `#2c2c2c` | `--color-deep-charcoal` | neutral | Sparse dark text or heading detail, close to the primary ink. |
| Ash Caption | `#a09f9a` | `--color-ash-caption` | neutral | Occasional secondary copy and low-contrast text detail. |

### Semantic aliases

`--color-canvas` → `#f2f1ed` (Warm Code Paper) · `--color-surface` → `#f7f7f4` (Studio Porcelain) · `--color-surface-2` → `#d9d5cf` (Warm Footer Grey) · `--color-surface-3` → `#b6b9be` (Cool Interface Grey) · `--color-text` → `#26251e` (Soft Graphite) · `--color-text-muted` → `#787771` (Muted Taupe) · `--color-border` → `#dddcd8` (Divider Stone) · `--color-accent` → `#f54e00` (Cursor Ember) · `--color-accent-2` → `#c08532` (Ochre Action) · `--color-accent-3` → `#34785c` (Terminal Green) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#26251e` | `#f2f1ed` | 13.6:1 | AAA |
| `#26251e` | `#f7f7f4` | 14.33:1 | AAA |
| `#26251e` | `#d9d5cf` | 10.52:1 | AAA |
| `#26251e` | `#b6b9be` | 7.81:1 | AAA |
| `#787771` | `#f2f1ed` | 3.97:1 | AA-large |
| `#787771` | `#f7f7f4` | 4.18:1 | AA-large |
| `#787771` | `#d9d5cf` | 3.07:1 | AA-large |
| `#787771` | `#b6b9be` | 2.28:1 | fail |
| `#f54e00` | `#f2f1ed` | 3.11:1 | AA-large |
| `#f54e00` | `#f7f7f4` | 3.28:1 | AA-large |

### Gradients

- `linear-gradient(oklab(0.263084 -0.00230259 0.0124794 / 0.05) 0%, oklab(0.263084 -0.00230259 0.0124794 / 0.05) 100%), linear-gradient(rgb(242, 241, 237) 0%, rgb(242, 241, 237) 100%)`
- `linear-gradient(to top, color(srgb 0.988235 0.988235 0.988235 / 0.92) 0%, color(srgb 0.988235 0.988235 0.988235 / 0.62) 36%, color(srgb 0.988235 0.988235 0.988235 / 0.22) 68%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| CursorGothic | `--font-body` | webfont | 400, 500 | Primary headings, body copy, navigation, and text links. | Inter |
| system-ui | `--font-system-ui` | system | 400, 500, 700, 600, 510 | Compact headings, captions, button labels, and interface-style supporting text. | Inter |
| berkeleyMono | `--font-mono` | webfont | 400, 500 | Code samples and developer-interface labels. | IBM Plex Mono |
| Lato | `--font-lato` | webfont | 400, 600 | Minor measured font presence; not a defining page-wide text style. | Lato |

- **CursorGothic:** Regular-weight, sentence-case prose; restrained negative tracking on larger headings and lightly open body tracking.
- **system-ui:** Small functional text; regular labels and heavier emphasis for selected subheads, with no uppercase treatment.
- **berkeleyMono:** Compact monospace text with neutral tracking, used to make code and file labels read as tooling.
- **Lato:** Measured at low share; retain only where inherited or embedded UI content requires it.

### Type scale — Minor Third (ratio ≈ 1.176, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 26px | 400 | 1.25 | -0.012em | — | CursorGothic | Hero statement and prominent page-level headings. |
| h2 | 22px | 400 | 1.3 | -0.005em | — | CursorGothic | Feature section headings and major editorial statements. |
| h3 | 20px | 700 | 1.55 | 0 | — | system-ui | Compact supporting headings within feature and content blocks. |
| body | 16px | 400 | 1.5 | 0.005em | — | CursorGothic | Feature descriptions, testimonials, and explanatory copy. |
| caption | 12px | 400 | 1.33 | 0 | — | system-ui | Metadata, dates, small interface labels, and supporting notes. |
| button | 12px | 400 | 1.33 | 0 | — | system-ui | Download and small product-interface action labels. |
| nav | 14px | 400 | 1.5 | 0.01em | — | CursorGothic | Header navigation links. |
| link | 16px | 400 | 1.5 | 0.005em | — | CursorGothic | Inline calls to action and editorial links. |
| code | 12px | 400 | 1.5 | 0 | — | berkeleyMono | Code snippets, file labels, and developer-interface content. |

OpenType features in use: `"ss09"`, `"ss08"`, `"case"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 8, 10, 12, 13, 15, 16, 18, 20 px.
- Section rhythm 67px · element gap 8px · card padding 17px · max content width 1300px.

Use a centered content frame capped at the measured 1300px maximum, with broad side margins and a comfortable, low-density composition. The hero aligns its text and actions to the left above a wide product image. Subsequent feature stories alternate image and copy across two columns, while testimonials and product highlights use three-column groupings. Changelog and recent highlights use compact multi-column rows. Section spacing is generous, with the measured section gap around 67px and element gaps around 8px; preserve the visible breathing room rather than filling every area.

## Shape & elevation

- Radius: button `4px` · card `4px` · media `50%` · badge `4px` · nav `9999px` · link `4px` · xs `2px` · sm `3px` · md `4px` · lg `8px` · xl `10px` · 2xl `12px` · pill `9999px`
- Shadow `xl` (card): `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 `hairline` (other): `rgb(252, 252, 252) 0px 0px 0px 2px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.3) 0px 22px 70px 4px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px`
- Shadow `xl-3` (card): `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, rgba(0, 0, 0, 0.15) 0px 12px 24px -8px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 0.5px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.35) 0px 8px 30px 0px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4p`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections and cards feel flat, separated by whitespace and thin neutral borders rather than strong shadows. Product mockups are the exception: floating software windows use soft, layered shadows to distinguish them from their background imagery. Keep corner treatment modest on cards and buttons, and reserve stronger depth for the showcased interface itself.

## Imagery

Lead with large screenshots of Cursor’s real-looking editor, agent, and terminal interfaces, often layered over softly tinted photographic or scenic backdrops. Keep interface text, panes, and controls legible; avoid replacing software demonstrations with abstract illustration. Later sections mix product mockups with a team photograph and editorial imagery. Images are broad, restrained, and integrated into pale surfaces, with occasional interface windows overlapping one another.

## Components

### Top navigation

A quiet header with the Cursor mark at left, centered product and resource links, and account, contact, and download actions at right.

### Primary download CTA

Dark graphite button with white text, compact system-ui label, and a small radius; contrast it against the light canvas.

### Hero product demo

Left-aligned headline and paired actions sit above a broad editor screenshot with multiple overlapping product windows.

### Feature split

Two-column stories alternate copy and screenshot placement; orange text links provide the main color accent.

### Testimonial cards

Three-column quote group with restrained pale surfaces, compact attribution, and minimal framing.

### Product highlight cards

A three-column row of short product descriptions and links above software or developer imagery.

### Footer link columns

A warm neutral footer groups dense navigation links under concise category labels.

### Measured component styles

- **Primary button** (“Build”): background #c08532 · text #ffffff · radius 4px · padding 2px 8px · 500 12px system-ui
- **Secondary button** (“Models”): transparent background · text #26251e · border 1px solid · radius 0px · padding 5.6px 15px · 400 14px CursorGothic
- **Link** (“Mar 27, 2026 · Research A technical repo”): background #f2f1ed · text #26251e · radius 4px · padding 13.4px 15px 15px 15px · 400 16px CursorGothic
- **Input**: transparent background · text #26251e · radius 0px · padding 8px 8px 6px 8px · 400 13px system-ui
- **Card** (““It was night and day from one batch to ”): background #f2f1ed · text #26251e · radius 4px · padding 15.9px 17.5px 17.5px 17.5px · 400 16px CursorGothic
- **Badge** (“feature-prd.md”): background #e1e0db · text #26251e · radius 2px · padding 0px 2px · 400 12px berkeleyMono
- **Navigation item** (“Agents”): transparent background · text #26251e · radius 0px · padding 4.7px 0px · 400 14px CursorGothic

## Do

- Use warm off-whites as the dominant page surfaces.
- Keep primary text dark and highly legible.
- Show real product interfaces at generous scale.
- Use orange for text links, not broad color blocks.
- Alternate image and copy across feature stories.
- Keep spacing open and content density comfortable.

## Don't

- Do not make the page dark or saturated.
- Do not turn interface accent colors into site-wide backgrounds.
- Do not add gradients as a dominant visual treatment.
- Do not crowd the layout with decorative badges.
- Do not flatten or obscure the product screenshots.
- Do not use heavy borders or shadows on every card.

## Agent prompt

Build a new Cursor-style page as a calm, product-led editorial experience. Use Warm Code Paper (#f2f1ed) and Studio Porcelain (#f7f7f4) for the main canvas and content surfaces, with Soft Graphite (#26251e) for headings, body text, navigation, and dark primary actions. Reserve Cursor Ember (#f54e00) for inline links; use Terminal Green (#34785c) and Ochre Action (#c08532) only as small interface accents. Set prose in a CursorGothic-like sans serif and use a restrained monospace for code. Start with a left-aligned statement, concise actions, and a large, legible software screenshot. Build a spacious sequence of alternating feature splits, editorial proof, compact updates, and a clear closing CTA. Separate sections with whitespace and subtle rules; apply soft depth mainly to floating product windows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and actions above a broad, full-width product demo image. | Download action, Request-demo action, Interactive product demo | Light canvas, Dark primary button, Layered software windows |
| 2 | logo-cloud | Centered heading above a single horizontal row of eight brand marks. | Social proof | Centered label, Monochrome logo row |
| 3 | feature-split | Copy and link on the left, large agent interface on the right. | Feature explanation, Learn-more link, Interactive demo | Two-column split, Orange text link, Product screenshot |
| 4 | feature-split | Large product image on the left and explanatory copy on the right. | Cloud-agent education, Learn-more link | Reversed two-column split, Screenshot panel, Orange link |
| 5 | feature-split | Copy and command detail at left, broad interface image at right. | Tool compatibility, Install command | Two-column split, Code-like text, Product screenshot |
| 6 | feature-split | Product interface on the left with explanatory text and link on the right. | Feature explanation, Download link, Interactive demo | Alternating split, Large product screenshot, Orange link |
| 7 | testimonials | Centered heading above three columns of quote cards and attributions. | Customer proof, Named attribution | Three-column grid, Pale cards, Compact portraits |
| 8 | feature-grid | Section heading followed by three columns of feature copy, links, and images. | Explore-models link, Agent information, Enterprise link | Three-column feature row, Small orange links, Product imagery |
| 9 | content-feed | Left-aligned heading over a compact four-column changelog row. | Release discovery, See-all link | Date and title pairs, Subtle separators, Text-first layout |
| 10 | team | Text block on the left and a large team photograph on the right. | Recruiting link | Two-column split, Editorial photo, Orange inline link |
| 11 | content-feed | Section heading above four compact editorial entries with metadata. | Article discovery, See-all posts link | Four-column row, Date and category labels, Small thumbnails |
| 12 | cta | Centered, oversized closing statement with one dark download button. | Direct download | Centered typography, Single primary button, Open whitespace |
| 13 | footer | Warm neutral footer with five link groups and a compact legal and locale row. | Deep navigation, Legal links, Locale selection | Multi-column link lists, Muted secondary text, Quiet footer surface |

## Source CSS custom properties (selected)

```css
--color-bg: #f7f7f4;
--color-text-primary: #26251e;
--color-text-muted: color-mix(in oklab, #26251e 60%, transparent);
--color-text-secondary: color-mix(in oklab, #26251e 60%, transparent);
--color-border: color-mix(in oklab, #26251e 10%, transparent);
--color-accent: #f54e00;
--color-code-bg: #f2f1ed;
--color-code-text: #26251e;
--color-bg-hover: #ebeae5;
--color-border-bright: color-mix(in oklab, #26251e 20%, transparent);
--color-success: #1f8a65;
--color-success-bg: color-mix(in srgb, #1f8a65 15%, transparent);
--color-error: #cf2d56;
--color-error-bg: color-mix(in srgb, #cf2d56 15%, transparent);
--color-warning: #f54e00;
--color-warning-bg: color-mix(in srgb, #f54e00 15%, transparent);
--color-accent-bg: color-mix(in srgb, #f54e00 10%, transparent);
--color-accent-bg-strong: color-mix(in srgb, #f54e00 25%, transparent);
--color-info: color-mix(in oklab, #26251e 60%, transparent);
--spacing-xs: calc(calc(10rem / 16) * .25);
--spacing-sm: calc(calc(10rem / 16) * .5);
--spacing-md: calc(calc(10rem / 16) * 1);
--spacing-lg: calc(calc(10rem / 16) * 1.5);
--spacing-xl: calc(calc(10rem / 16) * 2);
--spacing-2xl: calc(calc(10rem / 16) * 3);
--color-bg-elevated: #f2f1ed;
--color-timeline-thinking: #dfa88f;
--color-timeline-grep: #9fc9a2;
--color-timeline-read: #9fbbe0;
--color-timeline-edit: #c0a8dd;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/cursor-com