Figma Design Tokens

Name: Dembrandt
Author: Dembrandt

Collaborative design and prototyping tool

Canvas-based UI modes

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

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

#00b6ff

#24cb71

#ff7237

#ff3737

#874fff

#1e1e1e

background#ffffff

text#000000

logo#000000

Typography

figmaSans, Inter, sans-serif

hero:48px / 400

body:16px / 400

button:13px / 400

weights:400

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

4px8px12px16px24px48px

Border Radius

2px

6px

8px

9999px

Borders

1px solid #ffffff

Links

Link text#000000 · underline

Gradients

repeating-conic-gradient(#00b6ff 0deg, #00b6ff 18deg, rgba(0, 0, 0, 0) 18deg, rgba(0, 0, 0, 0) 30deg)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

320px480px768px1024px1280px1920px

Motion

Duration120ms180ms280ms420ms

Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear

Contrast · WCAG 2.2

Button label

21.00:1

AAA

Body text

7.82:1

AAA

Button States

React + Webpack

Default

#000000

Hover

#1e1e1e

Active

#000000

Focus

focus

Disabled

disabled

radius: 8pxpadding: 12px 22px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#00b6ff"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#24cb71"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#ff7237"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#ff3737"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#874fff"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#1e1e1e"
    },
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "text": {
      "$type": "color",
      "$value": "#000000"
    },
    "logo": {
      "$type": "color",
      "$value": "#000000"
    },
    "link": {
      "$type": "color",
      "$value": "#000000"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #ffffff"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "repeating-conic-gradient(#00b6ff 0deg, #00b6ff 18deg, rgba(0, 0, 0, 0) 18deg, rgba(0, 0, 0, 0) 30deg)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "figmaSans, Inter, sans-serif"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "24px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "48px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "2px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "6px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-4": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.1)"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "0 4px 12px rgba(0,0,0,0.15)"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "0 12px 28px rgba(0,0,0,0.2)"
    }
  },
  "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": "320px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "480px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1920px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 21,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 7.82,
      "grade": "AAA"
    }
  }
}
// ...and more

Other 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 figma.com