Family Design Tokens

Name: Dembrandt
Author: Dembrandt

Crypto wallet with cinematic 3D interface

3D card animations

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

#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

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.04

0.08

0.16

0.4

0.64

0.92

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

Button label

17.04:1

AAA

Body text

16.86:1

AAA

Button States

PrimeReact

Default

#f6f4ef

Hover

#eae6dd

Active

#f6f4ef

Focus

focus

Disabled

disabled

radius: 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 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 family.co