Cursor Design Tokens
AI-first code editor built on VS Code
AI-native editor interface
Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is computed from the real palette. Try the CLI for the complete W3C token export.
Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.
Colors
#26251e
#f7f7f4
#f54e00
#c08532
#1f8a65
#cf2d56
primary#f54e00
secondary#e6e5e0
background#f7f7f4
text#26251e
accent#cf2d56
logo#26251e
Typography
CursorGothic, CursorGothic Fallback, system-ui
hero:72px / 400
body:17.28px / 400
button:36px / 400
weights:400
leading:1, 1.1, 1.4, 1.6
tracking:-0.02em, 0, 0.04em
Shadows
sm
md
lg
Spacing
1.5px2px2.5px3px4px4.66667px
Border Radius
1.5px
2px
3px
4px
8px
Borders
1px solid #26251e
Links
Link text#26251e · no underline
Gradients
linear-gradient(135deg, #26251e 0%, #cf2d56 100%)
linear-gradient(90deg, #26251e, #f7f7f4, #f54e00)
radial-gradient(circle at 30% 20%, #26251e 0%, #f7f7f4 70%)
Opacity
0
0.04
0.08
0.16
0.4
0.64
0.92
1
Breakpoints
600px768px900px1279px
Motion
Duration120ms180ms280ms420ms
Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear
Contrast · WCAG 2.2
Aa
Button label
14.33:1
Aa
Body text
14.33:1
Button States
Tailwind CSSDefault
#26251eHover
#26251eActive
#26251eFocus
focusDisabled
disabledLoading
loadingradius: 9999pxpadding: 5.6px 10.5px
output.json
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"palette-1": {
"$type": "color",
"$value": "#26251e"
},
"palette-2": {
"$type": "color",
"$value": "#f7f7f4"
},
"palette-3": {
"$type": "color",
"$value": "#f54e00"
},
"palette-4": {
"$type": "color",
"$value": "#c08532"
},
"palette-5": {
"$type": "color",
"$value": "#1f8a65"
},
"palette-6": {
"$type": "color",
"$value": "#cf2d56"
},
"primary": {
"$type": "color",
"$value": "#f54e00"
},
"secondary": {
"$type": "color",
"$value": "#e6e5e0"
},
"background": {
"$type": "color",
"$value": "#f7f7f4"
},
"text": {
"$type": "color",
"$value": "#26251e"
},
"accent": {
"$type": "color",
"$value": "#cf2d56"
},
"logo": {
"$type": "color",
"$value": "#26251e"
},
"link": {
"$type": "color",
"$value": "#26251e"
}
},
"border": {
"border-1": {
"$type": "border",
"$value": "1px solid #26251e"
}
},
"gradient": {
"gradient-1": {
"$type": "gradient",
"$value": "linear-gradient(135deg, #26251e 0%, #cf2d56 100%)"
},
"gradient-2": {
"$type": "gradient",
"$value": "linear-gradient(90deg, #26251e, #f7f7f4, #f54e00)"
},
"gradient-3": {
"$type": "gradient",
"$value": "radial-gradient(circle at 30% 20%, #26251e 0%, #f7f7f4 70%)"
}
},
"fontFamily": {
"base": {
"$type": "fontFamily",
"$value": "CursorGothic, CursorGothic Fallback, system-ui"
}
},
"fontWeight": {
"weight-400": {
"$type": "fontWeight",
"$value": 400
}
},
"dimension": {
"space-1": {
"$type": "dimension",
"$value": "1.5px"
},
"space-2": {
"$type": "dimension",
"$value": "2px"
},
"space-3": {
"$type": "dimension",
"$value": "2.5px"
},
"space-4": {
"$type": "dimension",
"$value": "3px"
},
"space-5": {
"$type": "dimension",
"$value": "4px"
},
"space-6": {
"$type": "dimension",
"$value": "4.66667px"
},
"radius-1": {
"$type": "dimension",
"$value": "1.5px"
},
"radius-2": {
"$type": "dimension",
"$value": "2px"
},
"radius-3": {
"$type": "dimension",
"$value": "3px"
},
"radius-4": {
"$type": "dimension",
"$value": "4px"
},
"radius-5": {
"$type": "dimension",
"$value": "8px"
}
},
"shadow": {
"shadow-1": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px"
},
"shadow-2": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0px 0px 8px 0px"
},
"shadow-3": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.3) 0px 22px 70px 4px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px"
}
},
"opacity": {
"opacity-0": {
"$type": "number",
"$value": 0
},
"opacity-1": {
"$type": "number",
"$value": 0.04
},
"opacity-2": {
"$type": "number",
"$value": 0.08
},
"opacity-3": {
"$type": "number",
"$value": 0.16
},
"opacity-4": {
"$type": "number",
"$value": 0.4
},
"opacity-5": {
"$type": "number",
"$value": 0.64
},
"opacity-6": {
"$type": "number",
"$value": 0.92
},
"opacity-7": {
"$type": "number",
"$value": 1
}
},
"duration": {
"duration-1": {
"$type": "duration",
"$value": "120ms"
},
"duration-2": {
"$type": "duration",
"$value": "180ms"
},
"duration-3": {
"$type": "duration",
"$value": "280ms"
},
"duration-4": {
"$type": "duration",
"$value": "420ms"
}
},
"cubicBezier": {
"ease-1": {
"$type": "cubicBezier",
"$value": "cubic-bezier(0.4, 0, 0.2, 1)"
},
"ease-2": {
"$type": "cubicBezier",
"$value": "cubic-bezier(0.16, 1, 0.3, 1)"
},
"ease-3": {
"$type": "cubicBezier",
"$value": "linear"
}
},
"breakpoint": {
"bp-1": {
"$type": "dimension",
"$value": "600px"
},
"bp-2": {
"$type": "dimension",
"$value": "768px"
},
"bp-3": {
"$type": "dimension",
"$value": "900px"
},
"bp-4": {
"$type": "dimension",
"$value": "1279px"
}
},
"contrast": {
"button-label": {
"ratio": 14.33,
"grade": "AAA"
},
"body-text": {
"ratio": 14.33,
"grade": "AAA"
}
}
}
// ...and moreOther token exports
--dtcgW3C token JSON, checked by the DTCG Validator
--design-mdDESIGN.md for agents and docs
--brand-guideBrand guide PDF
--wcagPalette-wide contrast report
All flags in the CLI quickstart. Same tokens in your editor via the MCP server.
$npx dembrandt cursor.com