Skip to main content

Figma

Collaborative design and prototyping tool

Canvas-based UI modes

Observed with Dembrandt. Showing a simplified version — the full output includes button states, gradients, animations, and more. Try the CLI for complete results.

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

Colors

#0d99ff
#1e1e1e
#a259ff
#1abcfe
#0acf83
#ffffff

Typography

Inter, system-ui, sans-serif
hero:80px / 700
body:16px / 400
button:13px / 400

Shadows

sm
md
lg

Spacing

4px8px12px16px24px48px

Border Radius

6px
8px
12px

Button States

React + Webpack
Default
#0d99ff
Hover
#0085e6
Active
#006bbf
radius: 6pxpadding: 8px 16px
output.json
{
  "url": "figma.com",
  "colors": [
    "#0d99ff",
    "#1e1e1e",
    "#a259ff",
    "#1abcfe",
    "#0acf83",
    "#ffffff"
  ],
  "typography": {
    "fontFamily": "Inter, system-ui, sans-serif",
    "hero": "80px / 700",
    "body": "16px / 400",
    "button": "13px / 400"
  },
  "shadows": [
    "0 1px 2px rgba(0,0,0,0.1)",
    "0 4px 12px rgba(0,0,0,0.15)",
    "0 12px 28px rgba(0,0,0,0.2)"
  ],
  "spacing": [
    "4px",
    "8px",
    "12px",
    "16px",
    "24px",
    "48px"
  ],
  "borderRadius": [
    "6px",
    "8px",
    "12px"
  ],
  "buttons": {
    "default": {
      "bg": "#0d99ff",
      "text": "#ffffff"
    },
    "hover": {
      "bg": "#0085e6",
      "text": "#ffffff"
    },
    "active": {
      "bg": "#006bbf",
      "text": "#ffffff"
    },
    "radius": "6px",
    "padding": "8px 16px",
    "framework": "React + Webpack"
  }
}
$npx dembrandt figma.com