Design Language Extracted

Cursor is the best way to code with AI.

https://cursor.com/ · 5,932 elements · 2026-05-14
Intent: landing · 0.31 Library: tailwindcss · 0.76 Material: flat Voice: neutral Headings: Sentence case · tight Stack: self-hosted fonts (17 files)
24
Colors
4
Font families
14
Spacing
9
Shadows
3
Radii
13
Components
28
Icons
82%
WCAG score

Color palette

24 unique colors. Warm-bone surface system anchored on #f7f7f4 with near-black warm-toned #26251e as the dominant text color. No chromatic accent — emphasis lives in editorial italics (EB Garamond) and the mono family (Berkeley Mono).

Brand

#f7f7f4
Primary · page surface
133 uses
#26251e
Secondary · warm-dark text/ink
2847 uses
#e6e5e0
Accent · warm light surface
26 uses

Neutrals & surfaces

#f7f7f4
bg / page
#f2f1ed
bg-1 / muted
#ebeae5
bg-5
#e6e5e0
bg-4 / accent
#d9d5cf
bg-2 / line
#b6b9be
bg-3 / cool gray
#4a443b
neutral-400
#3c3935
neutral-600
#26251e
text-1 · 2,847×
#141414
neutral-100
#050503
neutral-50 / text-3
#1f8a65
text-4 · success

Typography

CursorGothic handles the heavy lifting (1,262 uses). EB Garamond italic is reserved for editorial pull-quotes and price callouts. Berkeley Mono is the eyebrow/metadata mono.

Font families

CursorGothic 1262× Berkeley Mono 258× EB Garamond 158× Lato 71× CursorIcons16 icon font

Type scale · 14 sizes detected

72pxCursorGothic · display Built to make you productive 400 · lh 79.2 · H1
36pxCursorGothic · display Trusted every day 400 · lh 43.2 · H2
28pxEB Garamond · editorial Pricing — pay as you grow 400i · serif
26pxCursorGothic · H3 Built for power users 400 · lh 32.5 · H3
22pxCursorGothic · H4 Section heading 400 · lh 28.6 · H4
14pxCursorGothic · body Cursor is built on a fork of VS Code, giving you an editor you already know — supercharged. 400 · lh 21
12pxCursorGothic · base Default body size · used widely 400 · lh 16 · base
12pxBerkeley Mono · meta npm install -g cursor 400 · code
10pxBerkeley Mono · eyebrow FEATURED 600 · uppercase

Spacing scale

14 detected spacing values. No standard 4/8 base — the scale jumps in section-level chunks (28, 45, 48, 52, 56, 64, 67, 90, 101…) suggesting hand-tuned vertical rhythm.
s0 · 0px
none
s1 · 28px
7×
s2 · 45px
11×
s3 · 48px
12×
s4 · 52px
13×
s5 · 56px
14×
s6 · 64px
16×
s7 · 67px
17×
s8 · 90px
22×
s9 · 101px
25×

Elevation

9 shadow tokens, including an oklab-encoded shadow (rare). The signature Cursor card has a soft 18px blur drop plus a 1px ring.
sm · ambient
md
lg · oklab ring

Border radii

3-step scale: 2px (controls) · 8px (cards) · 12px (large containers).
2px
xs · controls
8px
md · cards
12px
lg · containers

Components

13 detected patterns rendered live. Cursor's component set is dense: buttons, cards, inputs, links, navigation, footer, comparisons, plus a distinctive editorial-italic price label.

Buttons

3 variants · solid ink primary · ghost · outline secondary

Cards · with editorial price

Soft ambient shadow · 8px radius · EB Garamond italic for pricing

Hobby

Best for individual learners.

Free

Pro

For professionals who need more power.

$20 / month

Business

Privacy, security, and shared tooling.

$40 / user

Inputs

2px radius · focused ring uses subtle panel-tint, no chromatic glow

Badges

Berkeley Mono uppercase · 2px radius · status uses success-green
v0.43 New Live MIT

Tabs

Segmented control with active panel surface

Comparison · feature matrix

3 detected on cursor.com landing · grid with hairline dividers

Other editors

Single-file context

Limited model access

Manual setup

Cursor

✓ Full codebase context

✓ Frontier models built-in

✓ Works on day one

Navigation

5 detected nav regions · top bar + sticky on scroll
Cursor
Product Pricing Enterprise Customers Docs Sign in

Voice & content

Neutral, tight Sentence-case headings. The voice leans editorial — short declarative statements; the serif italic (EB Garamond) shows up for emphasis where most sites would use a colored pill.

Sample headings

Cursor is the best way to code with AI.
Built to make you extraordinarily productive.
Trusted every day by teams that build world-class software.
Tab. Apply. Repeat.

CTA verbs

download 12× try 5× see 4× read 3× get 3× join 2×

Voice metadata

Tone
Neutral
Heading case
Sentence case
Heading length
Tight
Emphasis style
EB Garamond italic (no chromatic pill)
Buttons detected
92
Headings detected
47

Page anatomy

23 sections in reading order. Cursor's homepage is unusually structured — 4 feature-grids, 2 testimonial sections, 3 comparison tables, all separated by content prose.
ctaTrusted every day · 7 buttons0.75
navProduct · Agents · Code Review · Cloud · Tab · Docs0.90
content"Built to make you extraordinarily productive"0.30
comparisonOther editors vs Cursor — ×3 grids0.85
feature-grid"Tab. Apply. Repeat." — feature breakdown ×40.80
testimonialCustomer logos + quotes ×20.80
heroPricing block · Hobby / Pro / Business0.40
footer4 columns · 32 links0.95

Accessibility

82% WCAG contrast score. 2 detected pairs fail AA — both involve cool-gray #b6b9be as text on the warm bg.
82%
WCAG contrast score
9 passing · 2 failing pairs
Aa Sample
#26251e on #f7f7f4 · 1389×
12.7:1 AAA
Aa Sample
#4a443b on #f7f7f4 · 412×
7.9:1 AAA
Aa Sample
#b6b9be on #f7f7f4 · 34×
2.2:1 FAIL
designlang v12.10.0 · extracted 2026-05-14