Cursor

Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.

AI code editor. Brown-tinged parchment neutrals, one vibrant orange, gothic and Garamond type over painterly landscapes.

core colors

typefaces

tokens

Now playing — motion preview

Palette

The system's color tokens.

primary

#26251E

on-primary

#F7F7F4

accent

#F54E00

accent-bg

RGBA(245,78,0,0.10)

on-surface

#26251E

on-surface-secondary

COLOR-MIX(IN OKLAB, #26251E 60%, TRANSPARENT)

on-surface-muted

COLOR-MIX(IN OKLAB, #26251E 60%, TRANSPARENT)

surface

#F7F7F4

surface-elevated

#F2F1ED

surface-hover

#EBEAE5

code-bg

#F2F1ED

hairline

COLOR-MIX(IN OKLAB, #26251E 10%, TRANSPARENT)

hairline-bright

COLOR-MIX(IN OKLAB, #26251E 20%, TRANSPARENT)

success

#1F8A65

error

#CF2D56

warning

#F54E00

timeline-thinking

#DFA88F

timeline-grep

#9FC9A2

timeline-read

#9FBBE0

timeline-edit

#C0A8DD

Typography

Type tokens — family, size.

font-sansThe quick brown fox jumps"CursorGothic", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif

font-serifThe quick brown fox jumps"EB Garamond", "Iowan Old Style", ui-serif, Georgia, serif

font-monoThe quick brown fox jumps"berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace

displayThe quick brown fox jumps{typography.font-sans}

h1The quick brown fox jumps{typography.font-sans}
26px

h3The quick brown fox jumps{typography.font-sans}
22px

eyebrowThe quick brown fox jumps{typography.font-sans}
14px

body-serifThe quick brown fox jumps{typography.font-serif}
17px

body-sansThe quick brown fox jumps{typography.font-sans}
16px

codeThe quick brown fox jumps{typography.font-mono}
12px

Spacing & Shape

Layout spacing tokens.

Token	Value	Preview
base	10px
scale	['xs 0.625', 'sm 1.25', 'md 2.5', 'lg 3.75', 'xl 5', '2xl 7.5']

Border Radius

Corner rounding tokens.

Token	Value	Preview
sm	4px
pill	9999px

design.md

The system as one file your coding agent can read and build from.

design.mdreadable by AI agents

tokens (raw)

name: cursor-design
version: alpha
description: >
  A calm, editorial developer canvas: a warm paper background (#f7f7f4) with
  near-black ink (#26251e), built on a deliberate THREE-family type system —
  CursorGothic for headings/UI, EB Garamond serif for body prose, and Berkeley
  Mono for code and inputs. The single accent is a hot orange (#f54e00) used
  only for inline "Learn about… →" links. Actions are solid near-black pill
  buttons. Geometry is restrained (4px cards, full-pill buttons) and elevation
  is barely-there. Signature moves: serif body copy and the muted agent-timeline
  accent set.
colors:
  # Brand / action
  primary: '#26251e'          # near-black ink + primary button fill
  on-primary: '#f7f7f4'
  accent: '#f54e00'           # hot orange — inline links only
  accent-bg: 'rgba(245,78,0,0.10)'
  # Text
  on-surface: '#26251e'
  on-surface-secondary: 'color-mix(in oklab, #26251e 60%, transparent)'  # ~#26251e @60%
  on-surface-muted: 'color-mix(in oklab, #26251e 60%, transparent)'
  # Surface
  surface: '#f7f7f4'          # warm paper page
  surface-elevated: '#f2f1ed' # cards / code blocks
  surface-hover: '#ebeae5'
  code-bg: '#f2f1ed'
  # Hairlines
  hairline: 'color-mix(in oklab, #26251e 10%, transparent)'    # ~10% ink
  hairline-bright: 'color-mix(in oklab, #26251e 20%, transparent)'
  # Semantic
  success: '#1f8a65'
  error: '#cf2d56'
  warning: '#f54e00'
  # Agent timeline accents (muted pastel role colors in product UI)
  timeline-thinking: '#dfa88f'
  timeline-grep: '#9fc9a2'
  timeline-read: '#9fbbe0'
  timeline-edit: '#c0a8dd'
typography:
  font-sans: '"CursorGothic", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif'  # OSS sub: "Neue Haas Grotesk" / Inter
  font-serif: '"EB Garamond", "Iowan Old Style", ui-serif, Georgia, serif'  # body prose — EB Garamond IS open source
  font-mono: '"berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace'  # OSS sub: "JetBrains Mono"
  display:                    # large hero ("Built to make you extraordinarily productive…")
    fontFamily: '{typography.font-sans}'
    fontWeight: 400
    letterSpacing: -0.0125em  # gentle negative tracking
  h1:
    fontFamily: '{typography.font-sans}'
    fontSize: 26px
    fontWeight: 400
    lineHeight: 32.5px
    letterSpacing: -0.0125em
  h3:
    fontFamily: '{typography.font-sans}'
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28.6px
    letterSpacing: -0.005em
  eyebrow:                    # small label-style h2 ("Stay on the frontier")
    fontFamily: '{typography.font-sans}'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0.01em
  body-serif:                 # PARAGRAPHS render in serif
    fontFamily: '{typography.font-serif}'
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.35
  body-sans:
    fontFamily: '{typography.font-sans}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  code:
    fontFamily: '{typography.font-mono}'
    fontSize: 12px
    lineHeight: 20px
rounded:
  sm: 4px                     # cards, code blocks
  pill: 9999px                # buttons (fully rounded)
spacing:
  base: 10px                  # scale built on (10rem/16) units
  scale: ['xs 0.625', 'sm 1.25', 'md 2.5', 'lg 3.75', 'xl 5', '2xl 7.5']  # × base
transition:
  fast: '0.14s'
components:
  button-primary:             # "Download for macOS ↓"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-sans}'
    rounded: '{rounded.pill}'
    padding: '~14px 22px'
  button-secondary:           # "Request a demo →" / "Contact"
    backgroundColor: '{colors.surface-hover}'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.hairline}'
    rounded: '{rounded.pill}'
  card:                       # feature panels, quote cards, changelog tiles
    backgroundColor: '{colors.surface-elevated}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.sm}'
    shadow: 'barely-there (≈0/0/16px black @2%)'
  link-cta:                   # "Learn about Tab →" / "Explore models ↗"
    textColor: '{colors.accent}'
    fontWeight: 400
  code-block:
    backgroundColor: '{colors.code-bg}'
    textColor: '{colors.on-surface}'
    fontFamily: '{typography.font-mono}'
    rounded: '{rounded.sm}'
motion:
  transition-fast: '{transition.fast}'   # 0.14s — quick, subtle
  # Calm: short fades + product-window mock reveals. No bounce, no parallax.
icons:
  style: outline
  stroke: ~1.5px
  sizes: { sm: 16px, md: 20px }
  color-rules: 'Monoline, inherit ink. Download "↓", arrow "→", and external "↗" are the recurring affordances.'

Cursor

cursor-design — version alpha

Surfaces studied via Playwright (cursor.com home): computed styles + a full :root token system the site exposes (--color-*, --font-*, --spacing-*, --color-timeline-*). High-confidence extraction — including the unusual three-family type stack and the agent-timeline accent colors.

Overview

Cursor's canvas is calm and editorial: a warm paper {colors.surface} (#f7f7f4) with near-black ink {colors.on-surface} (#26251e). Its defining decision is a deliberate three-family type system — CursorGothic (a clean neo-grotesque) for headings, nav and UI; EB Garamond serif for body paragraphs (an unusual, literary choice for a dev tool); and Berkeley Mono for code blocks and inputs. The single accent is a hot orange {colors.accent} (#f54e00), rationed to inline "Learn about… →" links only — never buttons. Actions are solid near-black pill buttons ("Download for macOS"). Type runs at modest sizes with light weight (400) and gentle negative tracking, so the page feels understated and premium rather than loud. Geometry is restrained (4px cards, full-pill buttons) and elevation is barely-there. A subtle product-system signature is the muted agent-timeline palette (thinking/grep/read/edit pastels) used inside the app mockups.

Colors

Ink / action — {colors.primary} #26251e. A warm near-black used for text and for primary pill buttons (paper-colored label). Secondary/muted text is the same ink at ~60% (color-mix).
Orange accent — {colors.accent} #f54e00. The only chromatic accent, reserved for inline link text ("Learn about Tab →", "Explore models ↗", "Join us →"). A 10% tint ({colors.accent-bg}) backs the rare accent chip. Discipline: orange never fills a button.
Surfaces. Paper page {colors.surface}; elevated {colors.surface-elevated} #f2f1ed for cards/code; hover {colors.surface-hover} #ebeae5 (also the secondary-button fill). Hairlines are ink at 10%/20%.
Semantic. success #1f8a65, error #cf2d56, warning = the orange #f54e00.
Agent-timeline accents (product UI): thinking #dfa88f, grep #9fc9a2, read #9fbbe0, edit #c0a8dd — muted, desaturated pastels that color step markers in the agent log. They are app-surface accents, not marketing fills.

Typography

CursorGothic — headings, nav, UI labels. Closest OSS substitute: Neue Haas Grotesk (or Inter). Run at weight 400 with small negative tracking.
EB Garamond — body paragraphs render in this serif (it is open source). This is the brand's most distinctive type move: editorial serif prose on a dev-tool site.
Berkeley Mono — code blocks and inputs. OSS sub: JetBrains Mono / IBM Plex Mono.

Token	Family	Size	Weight	Line-height	Tracking	Usage
display	CursorGothic	clamp/large	400	~1.1	-0.0125em	Hero headline
h1	CursorGothic	26px	400	32.5px	-0.0125em	Section headlines
h3	CursorGothic	22px	400	28.6px	-0.005em	Feature titles
eyebrow/h2	CursorGothic	14px	400	21px	+0.01em	Small section labels
body-serif	EB Garamond	17px	400	1.35	normal	Body paragraphs
body-sans	CursorGothic	16px	400	24px	normal	UI / nav / buttons
code	Berkeley Mono	12px	400	20px	normal	Code + inputs

Layout

Spacing is built on a 10px-derived rem scale (xs .25 → 2xl 3). The page is a sequence of alternating two-column feature rows: a short sans heading + serif paragraph + orange link on one side, a floating macOS-style product window (Cursor Desktop, Cursor CLI, browser agent) on the other. Other primitives: an 8-up trust-logo strip, a 3-column quote grid (paper cards), and a 3-up changelog row. Whitespace is generous; the mood is unhurried.

Elevation & Depth

Barely-there. Cards carry an extremely faint shadow (≈ 0 0 16px rgba(0,0,0,0.02)) on the paper. Depth is conveyed mostly by the realistic app-window mockups (with their own subtle shadows and chrome) floating over flat paper sections. No gradients, no glass.

Shapes

Restrained: {rounded.sm} 4px for cards/code blocks and full pills ({rounded.pill}) for buttons. The combination of crisp small radii on content and fully-round buttons reads as precise yet approachable.

Components

Primary button {components.button-primary} — solid #26251e pill, paper label, often with a trailing "↓" ("Download for macOS").
Secondary button {components.button-secondary} — soft paper-grey pill (#ebeae5) with a faint hairline ("Request a demo →", "Contact").
Card {components.card} — #f2f1ed fill, 4px radius, whisper shadow; used for quotes, changelog tiles, feature panels.
Link CTA {components.link-cta} — orange text with trailing "→" / "↗".
Code block {components.code-block} — #f2f1ed fill, Berkeley Mono, syntax-highlighted; the curl-install card pairs it with a dark copy button.
App-window mockups — realistic macOS frames (three traffic-light dots, title bar) presenting Cursor Desktop / CLI / browser agent, with the muted timeline accents inside.

Motion

Calm and quick: a {transition.fast} (0.14s) baseline for hovers; product-window mockups fade/scale in subtly on scroll. No bounce, no parallax, no fade-up cascades — restraint is the point.

Iconography

Thin outline monoline icons, ink-inherited; the recurring affordances are "↓" (download), "→" (inline link), and "↗" (external). Trust-logos render in their own marks within paper tiles. Sizes 16/20px.

Do's and Don'ts

Do keep the page on warm paper #f7f7f4 with warm near-black ink.
Do set body paragraphs in EB Garamond serif; headings/UI in CursorGothic.
Do reserve orange #f54e00 for inline links only.
Do make primary actions solid near-black pills.
Do use realistic macOS app-window mockups to show the product.
Don't fill buttons with orange or use orange for body text.
Don't bold headlines heavily — weight stays ~400 with gentle negative tracking.
Don't add strong shadows or gradients; elevation is near-zero on flat paper.
Don't use the timeline pastels (thinking/grep/read/edit) as marketing fills — they belong to the agent UI.

Known Gaps

Several text/muted tokens are authored as color-mix(... 60%) of the ink; rendered hexes are approximate.
The exact hero display size is a responsive clamp() not captured as a single value (the 26px h1 token is the standard section h1).