Cursor Design System
Dark · Generated 15/04/2026 · 42 colors · 52 type tokens · 50 spacing steps · 4 breakpoints · 5 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
Dark Gray
#26251E
Dark Gray 6
#27271D
Dark Gray 8
#28231E
Dark Gray 9
#222222
Orange
#C08532
Light Gray
#F2F1ED
White
#F7F7F4
Light Gray 2
#E6E5E0
Dark Cyan 2
#1A8C66
Text Colors
Dark Gray 3
#26261E
Dark Gray 5
#25251E
Light Blue
#9E94D5
Dark Cyan
#1F8A65
Orange 2
#F54E00
Red
#B3003F
Pink
#AA52A2
White 2
#FFFFFF
Border Colors
Blue 3 (tint)
rgba(58,106,159,.08)
Blue 4 (border)
rgba(58,106,159,.15)
Light Gray 4 (fill)
#EDECEC
Accent & State Colors
Blue
#3A6A9F
Blue 2
#6049B3
Red 2
#CF2D56
Red 3
#CC3355
Orange 3
#DB704B
Dark Cyan 3
#34785C
Dark Orange
#4A443B
Green (tint)
rgba(34,197,94,.12)
Typography
Base Font · CursorGothic / Lato (fallback)
CursorGothic
The best way to code with AI — write, edit, and chat with full codebase context.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Serif · jjannon & Mono · berkeleyMono
jjannon Serif
// AI-powered code editing in your terminal and IDE
Serif · jjannon Mono · berkeleyMono
Display
font-size-72px · 72px · Bold · letter-spacing: −2.16px · line-height: 79.2px
The best way to code with AI.
font-size-36px · 36px · Bold · letter-spacing: −0.72px · line-height: 43.2px
Heading Level 2
font-size-26px · 26px · Semibold · letter-spacing: −0.325px · line-height: 32.5px
Heading Level 3
font-size-6xl · 22px · Semibold · letter-spacing: −0.275px · line-height: 28.6px
Cursor is an AI-first code editor built for collaborative programming with large language models.
font-size-2xl · 16px · Regular · letter-spacing: −0.11px · line-height: 24px
Body text at 14px — standard interface copy with tight tracking.
font-size-xl · 14px · Regular · line-height: 21px
LABEL · CAPTION · META INFO
font-size-base · 12px · Medium · letter-spacing: 0.14px · line-height: 16px
Line Heights
tight
6px
snug
11px
normal
12px
relaxed
14px
lh-6
16px
lh-9
20px
lh-13
24px
lh-14
28.6px
lh-15
31px
lh-16
32.5px
lh-17
43.2px
lh-18
79.2px
Letter Spacing
Tight Display
letter-spacing-tight
−2.16px · hero, display, 72px headings
Normal Heading
letter-spacing-normal
−0.72px · 36px headings
Body Text
letter-spacing-widest
−0.11px · body, default text
MICRO LABEL
letter-spacing-ls-9
0.14px · uppercase labels
Spacing
Spacing Scale
50 tokens — 1px → 141.383px
1
1.87
2
2.5
3
3.5
4
7
10
11.2
12
12.5
12.8
14
15
15.9
16
16.8
17.5
20
21.6
22.4
24
28
30
32
33.6
44.8
52
56
64
67.2
89.6
100.8
112
127
134
141
Borders
Border Radii
SM
1.5px
MD
2px
LG
3px
XL
4px
2XL
8px
Full
10px
R7
12px
R8 / Circle
≈∞
Border Widths
Hairline
0.5px
Thin
1px
Base
2px
Three border widths — hairline at 0.5px for subtle separators, thin at 1px for standard borders (most common), and base at 2px for emphasis.
Shadows / Elevation
Shadow Tokens
6 levels — from subtle ambient to strong floating
shadow-md
Subtle ambient
rgba(0,0,0,.02) 16px · rgba(0,0,0,.008) 8px — cards, flat surfaces
shadow-lg
Strong lift
rgba(0,0,0,.3) 22px 70px · rgba(0,0,0,.15) 0.5px inset ring
shadow-sm
Deep float
rgba(0,0,0,.14) 28px 70px · rgba(0,0,0,.1) 14px 32px · ring
shadow-xl
Overlay / Modal
rgba(0,0,0,.25) 25px 50px · rgba(0,0,0,.15) 12px 24px · ring
shadow-5
Tooltip / Popup
rgba(0,0,0,.35) 8px 30px · rgba(0,0,0,.15) 0.5px ring
Z-Index
LayerValueUsage
z-1 · Base1Base content layer, default document flow
z-2 · Raised2Slightly elevated inline elements
z-3 · Nav10Sticky headers, persistent navigation
z-4 · Float15Floating panels, inline suggestions
z-5 · Dropdown20Dropdowns, context menus, popovers
z-6 · Overlay30Sidebars, drawers, overlapping panels
z-7 · Modal50Modals, dialogs, command palette
z-8 · Toast51Toasts, notifications above modals
Breakpoints
📱
breakpoint-xs
600px
Mobile · Small phones and below
📲
breakpoint-sm
768px
Tablet · Portrait tablets, large phones
💻
breakpoint-md
900px
Small desktop · Landscape tablets
🖥️
breakpoint-lg
1279px
Desktop · Standard and wide screens
Opacity
Opacity Tokens
15 tokens — 0.04 → 0.70
opacity-4
4%
opacity-6
6%
opacity-8
8%
opacity-10
10%
opacity-15
15%
opacity-25
25%
opacity-30
30%
opacity-35
35%
opacity-40
40%
opacity-50
50%
opacity-60
60%
opacity-70
70%
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray-2--color-dark-gray1.01:1Fail
--color-dark-gray-2--color-black1.35:1Fail
--color-dark-gray-2--color-light-gray13.74:1AAA
--color-dark-gray-2--color-white14.47:1AAA
--color-dark-gray-2--color-dark-gray-61.03:1Fail
--color-dark-gray-3--color-dark-gray1.01:1Fail
--color-dark-gray-3--color-light-gray13.48:1AAA
--color-dark-gray-3--color-white14.19:1AAA
--color-dark-gray-4--color-light-gray16.3:1AAA
--color-dark-gray-4--color-white17.16:1AAA
--color-dark-gray-5--color-light-gray13.64:1AAA
--color-dark-gray-5--color-white14.36:1AAA
--color-light-blue--color-dark-gray5.6:1AA
--color-light-blue--color-black7.65:1AAA
--color-light-blue--color-light-gray2.43:1Fail
--color-light-blue--color-white2.56:1Fail
--color-light-blue--color-dark-gray-65.49:1AA
CSS Variables Reference
Background Colors
Black--color-black#000000
Dark Gray (base)--color-dark-gray#26251E
Dark Gray 6--color-dark-gray-6#27271D
Dark Gray 8--color-dark-gray-8#28231E
Dark Gray 9--color-dark-gray-9#222222
Dark Gray 10--color-dark-gray-10#3C3935
Dark Gray 11--color-dark-gray-11#26261A
Orange--color-orange#C08532
Dark Orange--color-dark-orange#4A443B
Light Gray--color-light-gray#F2F1ED
White--color-white#F7F7F4
Light Gray 2--color-light-gray-2#E6E5E0
Dark Cyan 2--color-dark-cyan-2#1A8C66
Dark Cyan 3--color-dark-cyan-3#34785C
Text & Border Colors
Dark Gray 3--color-dark-gray-3#26261E
Dark Gray 5--color-dark-gray-5#25251E
Light Blue--color-light-blue#9E94D5
Dark Cyan--color-dark-cyan#1F8A65
Orange 2--color-orange-2#F54E00
Orange 3--color-orange-3#DB704B
Red--color-red#B3003F
Red 2--color-red-2#CF2D56
Pink--color-pink#AA52A2
Blue--color-blue#3A6A9F
Blue 2--color-blue-2#6049B3
White 2--color-white-2#FFFFFF
Blue 4 (border)--color-blue-4rgba(58,106,159,.15)
Light Gray 4 (fill)--color-light-gray-4#EDECEC
Typography
Base--font-family-baseCursorGothic
Serif--font-family-3jjannon
Mono--font-family-7berkeleyMono
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2xs (6px)--font-size-2xs6px
base (12px)--font-size-base12px
xl (14px)--font-size-xl14px
2xl (16px)--font-size-2xl16px
6xl (22px)--font-size-6xl22px
26px--font-size-26px26px
36px--font-size-36px36px
72px--font-size-72px72px
Tight (−2.16px)--letter-spacing-tight−2.16px
Normal (−0.72px)--letter-spacing-normal−0.72px
Wide (−0.325px)--letter-spacing-wide−0.325px
Label (0.14px)--letter-spacing-ls-90.14px
Spacing (selected)
1--space-11px
3 (2px)--space-32px
5 (3px)--space-53px
12 (4px)--space-124px
25 (12px)--space-2512px
33 (16px)--space-3316px
35 (17.5px)--space-3517.5px
36 (20px)--space-3620px
39 (24px)--space-3924px
40 (28px)--space-4028px
41 (30px)--space-4130px
42 (32px)--space-4232px
44 (44.8px)--space-4444.8px
47 (64px)--space-4764px
48 (67.2px)--space-4867.2px
49 (89.6px)--space-4989.6px
51 (112px)--space-51112px
53 (134.4px)--space-53134.4px
Borders & Radius
Hairline--border-width-hairline0.5px
Thin--border-width-thin1px
Base--border-width-base2px
SM--radius-sm1.5px
MD--radius-md2px
LG--radius-lg3px
XL--radius-xl4px
2XL--radius-2xl8px
Full--radius-full10px
R7--radius-r712px
R8 / Circle--radius-r8≈∞
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant140ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow--duration-slow500ms
Easing--easing-linearlinear
Ghost--opacity-44%
Faint--opacity-88%
Subtle--opacity-1515%
Dim--opacity-4040%
Muted--opacity-6060%
Strong--opacity-7070%
Base--z-11
Float--z-415
Dropdown--z-520
Overlay--z-630
Modal--z-750
Toast--z-851
XS · Mobile--breakpoint-xs600px
SM · Tablet--breakpoint-sm768px
MD · Small desktop--breakpoint-md900px
LG · Desktop--breakpoint-lg1279px
Design System Preview · Cursor · Generated 15/04/2026 · 42 color tokens · 14 font-size · 7 font-family · 4 font-weight · 18 line-height · 9 letter-spacing · 50 spacing · 8 radius · 3 border-width · 6 shadow · 4 duration · 1 easing · 8 z-index · 4 breakpoints · 15 opacity