Skip to main content

Cursor Design Tokens

AI-first code editor built on VS Code

AI-native editor interface

StripeLinearNotionOpenAITeslaAirbnbFigmaSlackUberAppleRaycastKrea AIFamilyOuraNikeDuolingoArcPerplexity AIAnthropicVercelCursor

Observed with Dembrandt. Contrast and gradients are 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
#f2f1ed
#c08532

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

Gradients

linear-gradient(135deg, #26251e 0%, #c08532 100%)

linear-gradient(90deg, #26251e, #f2f1ed, #c08532)

radial-gradient(circle at 30% 20%, #26251e 0%, #f2f1ed 70%)

Opacity

0
0.04
0.08
0.16
0.4
0.64
0.92
1

Breakpoints

480px640px768px1024px1280px1536px

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

AAA
Aa

Body text

13.60:1

AAA

Button States

Tailwind CSS
Default
#26251e
Hover
#26251e
Active
#26251e
Focus
focus
Disabled
disabled
Loading
loading
radius: 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": "#f2f1ed"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#c08532"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(135deg, #26251e 0%, #c08532 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(90deg, #26251e, #f2f1ed, #c08532)"
    },
    "gradient-3": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 30% 20%, #26251e 0%, #f2f1ed 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": "480px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1536px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 14.33,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 13.6,
      "grade": "AAA"
    }
  }
}
// ...and more

Other token exports

The JSON above is one of several output formats. The same extraction can produce:

  • --dtcgW3C Design Tokens format. Validate any DTCG file with the DTCG Validator.
  • --design-mdA readable DESIGN.md summary for agents and docs. More on its limits in DESIGN.md is a good idea with a low ceiling.
  • --brand-guideA brand guide PDF generated from the live URL.
  • --wcagA full WCAG contrast report across the palette, the same grades shown above. Why it matters in catching token drift.

See every flag in the CLI quickstart, or pull tokens straight into your editor with the Dembrandt MCP server.

$npx dembrandt cursor.com