Cursor Design System Deep Dive

1. Brand Overview

Cursor’s design language hits a very deliberate note: utilitarian minimalism with tech-first details. It's not flashy, but it doesn’t feel generic either. From the moment you land on their site, the mood is grounded — deep neutral blacks, soft ivory backgrounds, and muted purples — it tells you: “We’re here for people who care about precision and control, but don’t need decoration.”

No brand gradient vomit. No fluffy illustrations. Typography is highly constrained — mostly one custom gothic-inspired sans (CursorGothic), paired sparingly with Lato and monospace for code references. This consistent font environment makes the UI text feel cohesive and almost modular. Sizes are dialed in to tight spacings that keep flow predictable at all scales.

Colors are sober: their primary (#26251e) has an earthy, technical black-brown that could’ve been pure black, but they intentionally softened it — enough for focus borders and text without harsh pixel bleed. The secondary and backgrounds lean warm-gray/ivory (#f7f7f4, #f2f1ed), which helps everything sit comfortably without pushing towards cold, sterile grays. Accent splashes (#f54e00, #aa52a2, #b3003f) are rare but loud — bold oranges and magentas that jump out exactly because the baseline palette is quiet.

Border radius rules are binary: either tiny corners (4px, 8px) or full-pill insanity (33,554,400px) for circular buttons. No half measures. Box shadows are sparingly applied, favoring subtle oklab-based outlines over volumetric depth. You can't miss the commitment to the 8px spacing grid for UI elements — it's in the data: 4px increments, half-steps like 5.6px (button paddings), and larger leaps for sections.

This is a functionalist brand aesthetic. Audience is clearly developers or technical teams — people who spend their days inside IDEs and dashboards. Cursor’s design says: We won’t slow you down, and we won’t make you hunt for the signal in the noise. If that’s what you value, you’ll appreciate the restraint here.

2. Color System

2.1 Primary Colors

• Primary (#26251e): Warm near-black. Feels less harsh than pure black, but still authoritative. Good for body text, headers, and UI outlines. It plays well across light and dark surfaces. Compared to competitors who go pure black (#000) like GitHub or cool gray like Notion, Cursor’s primary reads more "human" and less sterile.

• Secondary (#e6e5e0 / #f7f7f4): Warm off-white and ultra-light grays define background surfaces. They contrast enough with primary text for WCAG AA readability, but stay in the “paper” family instead of blue/gray UI backgrounds.

2.2 Complete Palette

Note: Several colors are defined in oklch for precision, meaning they’re tuned for perceptual balance rather than pure hex values — a developer-focused decision, reflecting sensitivity to visual ergonomics.

2.3 Color Relationships

Primary (#26251e) against secondary backgrounds (#f7f7f4 / #f2f1ed) offers high contrast — safe for AA/AAA accessibility. Accent orange (#f54e00) on light backgrounds pops aggressively — definitely AAA contrast for interactive elements. Muted purples are low contrast; they’re decorative, not functional text colors.

Dark mode isn’t explicitly represented here — palette is skewed to light surfaces plus dark text. But the oklab/oklch tokens hint at adaptability.

2.4 Usage Guide

• Text: Primary on ivory backgrounds always works. Keep accents for links and key highlights.
• Buttons: Primary bg with light text (#f7f7f4) is high contrast and brand-consistent.
• Cards: Use light grays (#f2f1ed, #e6e5e0) for surfaces — never pure white.
• Avoid: Putting accents like #9e94d5 over #f7f7f4 for body text — poor readability.
• Mixing: Magentas with orange can feel chaotic; keep them in separate content contexts.

3. Typography

3.1 Font Families

• Primary: CursorGothic — custom, fallback to system-ui, Helvetica Neue, Helvetica, Arial. Geometric sans with low stroke contrast. Gives a software-console feel without going monospace.
• Secondary: Lato — fallback Lato Fallback. Used for some headings and captions where more humanist shapes soften the UI.
• Code: berkeleyMono — fallback ui-monospace stack.

No Google/Adobe imports here — self-hosted or system fonts. Variable fonts not in use.

3.2 Type Scale

3.3 Hierarchy

Hierarchy’s driven more by size than weight. Big jump from 16px/400 to 72px/400 H1 — dramatic scaling when necessary. Subheadings stay modest (26px / 22px) to keep focus on primary headings. Captions are small (11–12px) but not ultra-light in weight — readability matters. Monospace captions signal technical content clearly.

4. Spacing & Layout

4.1 Spacing Scale

Cursor runs an 8px grid, but includes fractional values for micro-adjustments (e.g., 5.6px for button padding).

4.2 Layout

Breakpoints: 600px (mobile/tablet boundary), 900px (tablet/desktop boundary). Container widths aren’t in the data but it’s clear they scale content responsively at those points. Section gaps align to multiples of 8px — rhythm stays consistent.

5. Visual Elements

• Border Radius: All over the spectrum — 0px for square edges, 4px/8px for small rounding, 33,554,400px for full pills.
• Shadows: A few layered shadows for depth, but often replaced by oklab outline borders. Heavy shadows only appear in modals/popovers.
• Borders: 1px solid with oklab color mixes for subtle lines. No heavy dividers; lines blend quietly with backgrounds.

6. Components

6.1 Buttons

Skipnav small

Default:

• Bg: #26251e
• Color: #f7f7f4
• Padding: 5.6px 10.5px 5.88px
• Radius: pill (33,554,400px)
• Border: 1px solid #26251e Focus:
• Box-shadow: rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.2) 0 0 0 2px

Nav button

Default:

• Bg: transparent
• Color: #26251e
• Padding: 5.6px 15px
• Border: transparent 1px Focus: Same as above

Agent sidebar row

Default:

• Bg: #ebeae5
• Color: #26251e
• Padding: 10px 12px 10px 14px

Tab group

Two variants differ only in bg (#f7f7f4 vs #f2f1ed) and text color.

Pill gray small

Default:

• Bg: #e6e5e0
• Color: oklab(...) 0.6 opacity
• Padding: 3px 8px
• Radius: pill

6.2 Links

Five variants: primary text (#26251e), inverted (#f7f7f4 or #fff), accent (#f54e00), muted oklab.

6.3 Forms

Textarea:

• Bg: transparent
• Color: #26251e
• Border-radius: 0
• Padding: 8px 8px 6px

6.4 Cards

Surfaces use light grays (#f2f1ed, #e6e5e0). Borders in oklab 0.1 opacity.

7. Design Tokens (CSS)

:root {
  /* Colors */
  --color-primary: #26251e;
  --color-secondary: #f7f7f4;
  --color-bg-surface: #f2f1ed;
  --color-bg-surface-alt: #e6e5e0;
  --color-bg-surface-hover: #ebeae5;
  --color-accent-orange: #f54e00;
  --color-accent-magenta: #aa52a2;
  --color-accent-purple: #9e94d5;
  --color-accent-deep-purple: #6049b3;
  --color-accent-red: #b3003f;
  --color-accent-rust: #db704b;
  --color-accent-pink: #b8448b;
  --color-success-green: #1f8a65;

  /* Typography */
  --font-primary: 'CursorGothic', system-ui, Helvetica Neue, Helvetica, Arial;
  --font-secondary: 'Lato', 'Lato Fallback';
  --font-code: 'berkeleyMono', ui-monospace;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-4-66: 4.6667px;
  --space-5: 5px;
  --space-5-6: 5.6px;
  --space-5-88: 5.88px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-12-48: 12.48px;
  --space-12-8: 12.8px;
  --space-14-93: 14.9333px;
  --space-15-9: 15.9px;
  --space-16: 16px;
  --space-17-5: 17.5px;
  --space-22-4: 22.4px;
  --space-44-8: 44.8px;
  --space-67-2: 67.2px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 33554400px;

  /* Shadows */
  --shadow-lg: 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;
}

8. AI Coding Assistant Prompt

# Cursor Design System Specification

System Prompt:
You are a Cursor design expert. Build UIs matching their visual language exactly.

Brand Context:
Cursor’s visual identity is precise, minimal, and developer-oriented. It uses a restrained warm-neutral palette with rare, high-impact accent colors. Typography is consistent, favoring a custom geometric sans for most UI and a monospace for code.

Color Palette:
- Primary: #26251e — Core text, primary buttons, UI outlines
- Secondary: #f7f7f4 — Page background
- Surface light: #f2f1ed — Card backgrounds
- Surface alt: #e6e5e0 — Secondary surfaces
- Surface hover: #ebeae5 — Hover states
- Accent orange: #f54e00 — Links, key highlights
- Accent magenta: #aa52a2 — Status highlights
- Accent purple: #9e94d5 — Decorative highlights
- Accent deep purple: #6049b3 — Alternate accent
- Accent red: #b3003f — Errors
- Accent rust: #db704b — Warm alt accent
- Accent pink: #b8448b — Secondary status
- Success green: #1f8a65 — Positive states

Typography:
Fonts:
- Primary: 'CursorGothic', system-ui, Helvetica Neue, Helvetica, Arial
- Secondary: 'Lato'
- Code: 'berkeleyMono', ui-monospace

Sizes/Usage:
| Level | Font | Size | Weight | LH | Use |
| H1 | CursorGothic | 72px | 400 | 1.10 | Page titles |
| Button lg | CursorGothic | 36px | 400 | 1.20 | Nav, primary CTAs |
| Heading sm | CursorGothic | 26px | 400 | 1.25 | Section headings |
| Body | CursorGothic | 16px | 400 | 1.50 | Main text |
| Caption | CursorGothic | 14px | 400 | 1.43 | Labels |
| Code caption | berkeleyMono | 12px | 400–700 | 1.63–1.67 | Code blocks |

Spacing & Grid:
Base: 8px grid.
Scale: 2px, 3px, 4px, 4.667px, 5px, 5.6px, 5.88px, 6px, 8px, 10px, 12px, 12.48px, 12.8px, 14.9333px, 15.9px, 16px, 17.5px, 22.4px, 44.8px, 67.2px.

Border Radius:
- none: 0px — square edges
- sm: 4px — small buttons, inputs
- md: 8px — cards
- full: 33554400px — pill buttons

Shadows & Depth:
- Large shadow: rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, outline in oklab at 0.1 opacity.

Component Specifications:

Primary Button:
Default: bg #26251e, text #f7f7f4, padding 5.6px 10.5px 5.88px, radius full, border 1px solid #26251e.
Focus: box-shadow rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.2) 0 0 0 2px.

Secondary Button:
Default: bg transparent, text #26251e, padding 5.6px 15px, border transparent 1px.
Focus: same as primary.

Input Fields:
Default: bg transparent, text #26251e, padding 8px 8px 6px, border 0, radius 0.
Focus: no defined shadow; border color unchanged.

Cards:
Bg #f2f1ed or #e6e5e0, radius 8px, subtle oklab border at 0.1 opacity.

Layout & Responsive Rules:
Breakpoints: 600px, 900px.
Section spacing: multiples of 8px.

Interaction Rules:
Transitions: background and shadow changes at ~150ms ease.
Focus indicators: visible box-shadows for buttons.

DO:
- Use only provided hex/oklab colors
- Maintain 8px spacing grid
- Use CursorGothic for most UI text
- Reserve accent colors for interactive elements
- Keep radius between 0px, 4px, 8px, or full pill — no mixed radii

DON'T:
- Invent new colors
- Use shadows for depth when borders suffice
- Mix rounded and square corners in same component
- Overuse accent colors — they’re for emphasis only

Code Examples:

Primary Button CSS:
.btn-primary {
  background: #26251e;
  color: #f7f7f4;
  padding: 5.6px 10.5px 5.88px;
  border-radius: 33554400px;
  border: 1px solid #26251e;
  font-size: 14px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:focus {
  box-shadow: rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.2) 0 0 0 2px;
}

Secondary Button Tailwind:
class="bg-transparent text-[#26251e] py-[5.6px] px-[15px] border border-transparent focus:shadow-[0_4px_12px_rgba(0,0,0,0.1),0_0_0_2px_rgba(0,0,0,0.2)]"

Card CSS:
.card {
  background: #f2f1ed;
  border-radius: 8px;
  border: 1px solid oklab(0.263084 -0.00230259 0.0124794 / 0.1);
  padding: 16px;
}

9. Summary

TL;DR — Cursor’s design is a minimal, developer-friendly system with warm neutrals, a custom gothic sans, and strict spacing rules. It’s precise without sterile coldness. You can build almost any UI with their palette and type scale, but you have to respect the restraint — accents are rare, corners are either sharp or fully pill.

Brand Keywords:

• warm-technical
• minimal-functional
• dev-oriented
• restrained-accent
• grid-disciplined