<!-- Generated by ExtractVibe — https://extractvibe.com/brand/cursor.com -->
<!-- Extracted: 2026-11-07T11:30:42.201Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Cursor"
description: "Cursor projects a serious, highly capable, and technically sophisticated vibe, designed to empower ambitious developers with cutting-edge AI. It's about focused productivity and turning complex ideas into tangible code with an understated yet powerful aesthetic."
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"
  headline-sm:
    fontFamily: "CursorGothic"
    fontSize: "14px"
    fontWeight: "700"
    lineHeight: "21px"
  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 — Design System

## Overview

Cursor's design system embodies the archetypes of The Creator and The Sage. It is built for the ambitious developer, mirroring the focused productivity and technical sophistication found in platforms like GitHub Copilot, Replit, VS Code, and Linear. The aesthetic is understated yet powerful, designed to facilitate deep work and complex problem-solving. Every element serves to empower the user, providing a seamless and intelligent environment for turning ideas into code. The visual language is precise, functional, and devoid of superfluous ornamentation, reflecting a commitment to core utility and high performance.

This design system explicitly avoids any aesthetic that is playful, overly colorful, or consumer-oriented. It does not aim for broad appeal but rather for deep resonance with its target audience: serious developers who demand cutting-edge tools. There is no room for marketing fluff or trendy design fads; instead, the focus is on timeless technical elegance and uncompromising functionality. The design communicates competence, reliability, and an unwavering dedication to the craft of software development, positioning Cursor as an indispensable partner in the creative process.

**Key characteristics:**

- Vibe — developer-first, ambitious, productive, technical, sophisticated, serious
- Archetypes — The Creator, The Sage
- Comparable to — GitHub Copilot, Replit, VS Code, Linear
- Design era — contemporary-minimal
- Emotional tone — empowering-efficient
- Target audience — Professional software developers, engineering teams, and tech leaders focused on accelerating complex software development with AI-powered tools.
- Visual energy — 4/10 (moderate)

## Colors

The color palette is deliberately minimalist and high-contrast, centered on the primary color #14120b and the surface color #000000. This stark, dark scheme signals a serious, focused environment, reducing visual noise to promote concentration. It evokes the classic command line and the deep, immersive experience of coding, reinforcing Cursor's technical sophistication and developer-first ethos. The limited palette ensures clarity and prevents distraction, aligning with a productive and ambitious workflow.

### 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

Cursor's typography system utilizes CursorGothic and EB Garamond, complemented by berkeleyMono. This pairing establishes a clear hierarchy and communicates technical precision alongside sophisticated readability. CursorGothic provides the core functional interface, while EB Garamond offers a refined counterpoint for editorial or explanatory content. berkeleyMono reinforces the coding context. The type choices underscore the brand's serious, developer-first nature, ensuring legibility and a polished, professional aesthetic across all interfaces.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| CursorGothic | body | self-hosted | 400 |
| CursorGothic | heading | self-hosted | 400, 700 |
| 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 |
| Heading 4 | CursorGothic | 14px | 700 | 21px | — |
| 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.263084 -0.00230259 0.0124794 / 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.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%)`

## 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 — "Request a demo→"

**Outline**

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

**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

- Utilize CursorGothic for headings in sentence-case, with weights 400 or 700. For body text, use CursorGothic 400, EB Garamond 400, or system-ui 400, maintaining a line-height of 24px.
- Apply berkeleyMono 400 specifically for all code blocks and monospaced text elements.
- Employ a dark mode-centric color palette with #14120b as the primary dark hue, #dfa88f as a warm accent, and #000000 for backgrounds, ensuring text is #26251e.
- Design secondary buttons with a #e6e5e0 background, #26251e text, and a highly rounded (pill-shaped) border-radius of 3.35544e+07px, with padding 12.48px 21.6px 12.8px.
- Create outline buttons with #26251e text, no background, and sharp 0px border-radius, using padding 5.6px 15px.
- Implement ghost buttons with #26251e text and a #26251e border, 0px border-radius, and padding 6px 12px.
- Incorporate subtle, multi-layer shadows on card elements, specifically `oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.28)`. Avoid heavy or singular shadows.
- Use linear gradients sparingly, specifically `linear-gradient(in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%)` for subtle background fades or transitions.
- Maintain a consistent base unit of 2px for all spacing and sizing, ensuring precise alignment and visual rhythm.
- Keep copy serious, technical, and matter-of-fact, using advanced vocabulary and heavy jargon where appropriate for the developer audience.

### Don't

- Do not use playful or overly casual language; maintain a serious and professional tone (9/10 serious).
- Avoid excessive use of emojis or exclamations; keep emoji usage light and exclamations rare.
- Do not use vibrant or saturated colors outside of the defined accent #dfa88f; stick to the muted, dark palette.
- Do not apply large, prominent shadows; shadows should be subtle and multi-layered, as seen on cards.
- Avoid rounded corners on outline and ghost buttons; these should maintain a sharp 0px border-radius.
- Do not use title case for headings; all headings should be in sentence-case.
- Do not use generic system fonts when CursorGothic, EB Garamond, or berkeleyMono are available and appropriate.
- Avoid overly enthusiastic or accessible language; the brand embraces a technical and direct communication style (7/10 enthusiastic, 2/10 accessible).
- Do not use single-layer, harsh shadows; the brand's shadows are subtle and complex, indicating depth without being heavy.
- Do not introduce new gradient styles; only use the specified linear gradients for subtle effects.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 3/10 | formal |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 2/10 | technical |

### Copywriting style

- Avg. sentence length — 9 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — direct, action-oriented, and product-focused, with some navigational and informational options

### Sample copy

> Cursor is your coding agent for building ambitious software.

> Accelerate development by handing off tasks to Cursor.

> Agents turn ideas into code.

> Software creation is changing. We are a group of researchers, engineers, and technologists inventing at the edge of what's useful and possible.

> Use the best model for every task

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/cursor.com) | 100% |
| favicon | — | ico | [link](brands/cursor.com/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/cursor.com/logo-1.png) | 95% |
| favicon | — | svg | [link](brands/cursor.com/logo-2.svg) | 95% |
| favicon | — | svg | [link](brands/cursor.com/logo-3.svg) | 95% |
| favicon | — | svg | [link](brands/cursor.com/logo-4.svg) | 95% |
| favicon | — | png | [link](brands/cursor.com/logo-5.png) | 95% |
| favicon | — | png | [link](brands/cursor.com/logo-6.png) | 95% |
| favicon | — | png | [link](brands/cursor.com/logo-7.png) | 95% |

## Sources

- Official brand guidelines — https://cursor.com/brand
- Live brand page — https://extractvibe.com/brand/cursor.com
- Raw JSON — https://extractvibe.com/api/brand/cursor.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/cursor.com/design.md
- Extracted — 2026-11-07T11:30:42.201Z
- Generator — ExtractVibe vv1
- Quality score — 100/100