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 + WebpackDefault
#0d99ffHover
#0085e6Active
#006bbfradius: 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