Family Design Tokens
Crypto wallet with cinematic 3D interface
3D card animations
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
#000000
#707070
#121212
#eae6dd
#1a88f8
primary#f6f4ef
background#ffffff
text#474645
accent#1a88f8
logo#262626
Typography
Family, -apple-system, system-ui
hero:68px / 500
body:17px / 500
button:15px / 500
weights:500
leading:1, 1.1, 1.4, 1.6
tracking:-0.02em, 0, 0.04em
Shadows
sm
md
Spacing
2px4px5px6px8px9px
Border Radius
2px
4px
6px
8px
10px
Borders
8px solid rgba(255, 255, 255, 0.25)
Links
Link text#474645 · no underline
Gradients
linear-gradient(135deg, #000000 0%, #1a88f8 100%)
linear-gradient(90deg, #000000, #707070, #121212)
radial-gradient(circle at 30% 20%, #000000 0%, #707070 70%)
Opacity
0
0.04
0.08
0.16
0.4
0.64
0.92
1
Breakpoints
390px580px768px920px
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
17.04:1
Aa
Body text
16.86:1
Button States
PrimeReactDefault
#f6f4efHover
#eae6ddActive
#f6f4efFocus
focusDisabled
disabledLoading
loadingradius: 32pxpadding: 0px 14px
output.json
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"palette-1": {
"$type": "color",
"$value": "#000000"
},
"palette-2": {
"$type": "color",
"$value": "#707070"
},
"palette-3": {
"$type": "color",
"$value": "#121212"
},
"palette-4": {
"$type": "color",
"$value": "#eae6dd"
},
"palette-5": {
"$type": "color",
"$value": "#1a88f8"
},
"primary": {
"$type": "color",
"$value": "#f6f4ef"
},
"background": {
"$type": "color",
"$value": "#ffffff"
},
"text": {
"$type": "color",
"$value": "#474645"
},
"accent": {
"$type": "color",
"$value": "#1a88f8"
},
"logo": {
"$type": "color",
"$value": "#262626"
},
"link": {
"$type": "color",
"$value": "#474645"
}
},
"border": {
"border-1": {
"$type": "border",
"$value": "8px solid rgba(255, 255, 255, 0.25)"
}
},
"gradient": {
"gradient-1": {
"$type": "gradient",
"$value": "linear-gradient(135deg, #000000 0%, #1a88f8 100%)"
},
"gradient-2": {
"$type": "gradient",
"$value": "linear-gradient(90deg, #000000, #707070, #121212)"
},
"gradient-3": {
"$type": "gradient",
"$value": "radial-gradient(circle at 30% 20%, #000000 0%, #707070 70%)"
}
},
"fontFamily": {
"base": {
"$type": "fontFamily",
"$value": "Family, -apple-system, system-ui"
}
},
"fontWeight": {
"weight-500": {
"$type": "fontWeight",
"$value": 500
}
},
"dimension": {
"space-1": {
"$type": "dimension",
"$value": "2px"
},
"space-2": {
"$type": "dimension",
"$value": "4px"
},
"space-3": {
"$type": "dimension",
"$value": "5px"
},
"space-4": {
"$type": "dimension",
"$value": "6px"
},
"space-5": {
"$type": "dimension",
"$value": "8px"
},
"space-6": {
"$type": "dimension",
"$value": "9px"
},
"radius-1": {
"$type": "dimension",
"$value": "2px"
},
"radius-2": {
"$type": "dimension",
"$value": "4px"
},
"radius-3": {
"$type": "dimension",
"$value": "6px"
},
"radius-4": {
"$type": "dimension",
"$value": "8px"
},
"radius-5": {
"$type": "dimension",
"$value": "10px"
}
},
"shadow": {
"shadow-1": {
"$type": "shadow",
"$value": "color(display-p3 0.94902 0.941176 0.929412) 0px 0px 0px 1px inset"
},
"shadow-2": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.1) 0px 3px 16px 0px"
}
},
"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": "390px"
},
"bp-2": {
"$type": "dimension",
"$value": "580px"
},
"bp-3": {
"$type": "dimension",
"$value": "768px"
},
"bp-4": {
"$type": "dimension",
"$value": "920px"
}
},
"contrast": {
"button-label": {
"ratio": 17.04,
"grade": "AAA"
},
"body-text": {
"ratio": 16.86,
"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 family.co