<!-- Generated by ExtractVibe — https://extractvibe.com/brand/cursor.sh -->
<!-- Extracted: 2026-05-03T16:48:09.254Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Cursor: The best way to code with AI"
description: "Cursor projects a sophisticated, editor-centric aesthetic that blends high-end editorial typography with the raw precision of code. The brand feels like a premium, specialized tool for serious developers, prioritizing clarity, speed, and a 'magical' reduction of friction through AI. It balances technical authority with an understated, almost literary elegance."
colors:
  primary: "#14120b"
  tertiary: "#dfa88f"
  surface: "#f7f7f4"
  on-surface: "#26251e"
  border: "#e6e5e0"
typography:
  display-lg:
    fontFamily: "CursorGothic"
    fontSize: "26px"
    fontWeight: "400"
    lineHeight: "32.5px"
    letterSpacing: "-0.325px"
  headline-lg:
    fontFamily: "CursorGothic"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "21px"
    letterSpacing: "0.14px"
  headline-md:
    fontFamily: "CursorGothic"
    fontSize: "22px"
    fontWeight: "400"
    lineHeight: "28.6px"
    letterSpacing: "-0.11px"
  body-md:
    fontFamily: "CursorGothic"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#e6e5e0"
    textColor: "#26251e"
    rounded: "3.35544e+07px"
    padding: "12.48px 21.6px 12.8px"
    fontSize: "16px"
    fontWeight: "400"
    borderWidth: "1px"
  button-outline:
    textColor: "#26251e"
    rounded: "0px"
    padding: "5.6px 15px"
    fontSize: "14px"
    fontWeight: "400"
    borderWidth: "1px"
  button-ghost:
    textColor: "#26251e"
    rounded: "0px"
    padding: "6px 12px"
    fontSize: "17.28px"
    fontWeight: "400"
    borderColor: "#26251e"
---

# Cursor: The best way to code with AI — Design System

## Overview

Cursor's design atmosphere embodies the Sage and Creator archetypes, manifesting as a sophisticated, developer-first tool. It aligns with the aesthetic principles of brands like Linear, Arc Browser, Notion, and Vercel, prioritizing clarity, precision, and an understated elegance. The visual language is fundamentally editorial, blending high-end typographic sensibilities with the raw, functional precision inherent to code. This creates a premium, specialized experience for serious developers, where AI acts as a seamless, magical reduction of friction.

This design explicitly avoids overt futurism, playful whimsy, or consumer-grade accessibility. It is not a general-purpose productivity tool; it is a dedicated environment for coding. The aesthetic rejects bright, saturated palettes, complex iconography, or decorative flourishes. Instead, it commits to a minimalist, high-contrast presentation that underscores technical authority and intellectual rigor, reflecting a tool built for deep work and focused creation.

**Key characteristics:**

- Vibe — editorial, developer-first, sophisticated, minimalist, precision, premium
- Archetypes — The Sage, The Creator
- Comparable to — Linear, Arc Browser, Notion, Vercel
- Design era — contemporary-editorial
- Emotional tone — authoritative-refined
- Target audience — Senior software engineers, technical founders, and AI-native developers who value workflow efficiency, aesthetic precision, and high-performance tools.
- Visual energy — 3/10 (calm/understated)

## Colors

The color palette, anchored by primary black (#14120b) and pure surface black (#000000), signals a high-contrast, focused environment. This deliberate absence of color saturation reinforces the brand's minimalist and precision-oriented character. It evokes the terminal, a core developer interface, while maintaining a sophisticated, premium feel. The limited palette directs attention to content and functionality, embodying efficiency and technical authority.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#14120b` | Near-Black |
| accent / tertiary | `#dfa88f` | Tan |
| surface | `#f7f7f4` | White Smoke |
| background | `#000000` | Black |
| text | `#26251e` | Near-Black |
| border | `#e6e5e0` | Gainsboro |

## Typography

The typographic system leverages CursorGothic for interface elements and code, and EB Garamond for editorial content, with berkeleyMono for monospaced contexts. This pairing establishes a clear hierarchy: the modern, precise CursorGothic grounds the application's functionality, while the classic, elegant EB Garamond elevates explanatory text and documentation. This dual-font strategy communicates both technical rigor and an intellectual, editorial depth, reinforcing Cursor's identity as a sophisticated tool for creators.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| CursorGothic | body | self-hosted | 400 |
| CursorGothic | heading | self-hosted | 400 |
| EB Garamond | body | self-hosted | 400 |
| berkeleyMono | mono | self-hosted | 400 |
| system-ui | body | system | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | CursorGothic | 26px | 400 | 32.5px | -0.325px |
| Heading 2 | CursorGothic | 14px | 400 | 21px | 0.14px |
| Heading 3 | CursorGothic | 22px | 400 | 28.6px | -0.11px |
| Body | CursorGothic | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — berkeleyMono

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `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.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0px 0px 8px 0px` |
| card | `oklab(0.263078 -0.0023028 0.0124791 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.28) 0px 18px 36px -18px` |
| element | `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 4px 6px -4px` |

### Gradients

- `linear-gradient(in oklab, rgb(242, 241, 237) 0%, 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(oklab(0.263078 -0.0023028 0.0124791 / 0.05) 0%, oklab(0.263078 -0.0023028 0.0124791 / 0.05) 100%), linear-gradient(rgb(242, 241, 237) 0%, rgb(242, 241, 237) 100%)`

## Components

### Buttons

**Secondary**

- Background — `#e6e5e0`
- Text — `#26251e`
- Radius — `3.35544e+07px`
- Padding — `12.48px 21.6px 12.8px`
- Font size — `16px`
- Font weight — `400`
- Sample copy — "Talk to the team→"

**Outline**

- Text — `#26251e`
- Radius — `0px`
- Padding — `5.6px 15px`
- Font size — `14px`
- Font weight — `400`
- Sample copy — "Product"

**Ghost**

- Text — `#26251e`
- Radius — `0px`
- Padding — `6px 12px`
- Font size — `17.28px`
- Font weight — `400`
- Border — ` solid #26251e`
- Sample copy — "See projects"

## Do's and Don'ts

### Do

- Use 'CursorGothic' at weight 400 for all body copy and headings, maintaining a strict 24px line-height for readability.
- Apply 'berkeleyMono' (weight 400) exclusively for all code snippets, technical terms, and inline code references.
- Style primary CTA buttons as secondary elements: use background #e6e5e0, text color #26251e, full pill shape (border-radius: 3.35544e+07px), and padding of 12.48px 21.6px 12.8px.
- Style secondary navigation buttons as outline/ghost elements: transparent background, text #26251e, sharp corners (border-radius: 0px), and padding of 5.6px 15px (nav) or 6px 12px (ghost).
- Utilize a dark mode palette with background #000000, primary text #14120b (for contrast against light elements) or #26251e (for standard text), and accent color #dfa88f for highlights.
- Apply subtle, multi-layer shadows to cards: use oklab(0.263078 -0.0023028 0.0124791 / 0.1) for a 1px border-like shadow and rgba(0, 0, 0, 0.28) for depth, avoiding heavy drop shadows.
- Use linear gradients in oklab space for background transitions: specifically linear-gradient(in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%) to create soft, luminous fades.
- Format all headings in sentence-case with minimal punctuation, avoiding exclamations and heavy emoji usage to maintain a formal, matter-of-fact tone.

### Don't

- Do not use title case for headings; the brand strictly adheres to sentence-case conventions.
- Avoid using serif fonts like EB Garamond for body text or UI elements; reserve it only if explicitly required for specific editorial contexts, otherwise stick to CursorGothic.
- Do not use vibrant, saturated colors; the palette is muted, relying on #dfa88f as the sole warm accent against a monochrome base.
- Avoid sharp corners on primary interactive elements (buttons); always use full pill shapes (border-radius: 3.35544e+07px) for CTAs.
- Do not use heavy, standard drop shadows; use the specific oklab-based subtle shadows defined for cards only.
- Avoid playful or casual language; the tone is formal, technical, and direct, avoiding hyperbole in favor of precise claims like 'extraordinarily productive'.
- Do not mix font families unnecessarily; strictly separate CursorGothic (text) and berkeleyMono (code) to maintain visual hierarchy.
- Avoid using system-ui fonts for primary brand content; self-hosted CursorGothic is the required standard for brand consistency.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 2/10 | enthusiastic |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 3/10 | technical |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — direct action verbs with minimal friction
- Rhetorical devices — superlative, metaphor, parallelism, hyperbole

### Sample copy

> Built to make you extraordinarily productive, Cursor is the best way to code with AI.

> Agents turn ideas into code

> Magically accurate autocomplete

> Stay on the frontier

> Software creation is changing.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/cursor.sh/logo-5.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/cursor.sh/logo-7.png) | 72% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/cursor.sh/logo-6.png) | 72% |
| favicon | — | ico | [link](https://extractvibe.com/api/assets/brands/cursor.sh/logo-0.ico) | 62% |
| favicon | — | svg | [link](https://extractvibe.com/api/assets/brands/cursor.sh/logo-1.svg) | 62% |
| favicon | — | svg | [link](https://extractvibe.com/api/assets/brands/cursor.sh/logo-2.svg) | 62% |

## Sources

- Official brand guidelines — https://cursor.sh/brand
- Live brand page — https://extractvibe.com/brand/cursor.sh
- Raw JSON — https://extractvibe.com/api/brand/cursor.sh
- DESIGN.md (this file) — https://extractvibe.com/api/brand/cursor.sh/design.md
- Extracted — 2026-05-03T16:48:09.254Z
- Generator — ExtractVibe vv1
- Quality score — 100/100