Krea AI Design Tokens

Name: Dembrandt
Author: Dembrandt

Real-time generative AI design platform

Generative image canvas

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

#404040

#ffffff

#a3a3a3

#737373

#f6f6f6

primary#737373

background#000000

logo#ffffff

Typography

Suisse Intl, ui-sans-serif, system-ui

hero:96px / 600

body:20px / 400

button:16px / 400

weights:400, 600

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

2px4px6px8px10px12px

Border Radius

6px

8px

14px

16px

24px

Borders

1px solid #e5e5e5

1px solid #e5e7eb

Links

Link text#ffffff · no underline

Gradients

linear-gradient(#474747 0%, #000000 100%)

linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

600px640px768px1024px

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

21.00:1

AAA

Button States

Tailwind CSS

Default

#ffffff

Hover

#000000

Active

#000000

Focus

focus

Disabled

disabled

radius: 9999pxpadding: 8px 16px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#000000"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#404040"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#a3a3a3"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#737373"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#f6f6f6"
    },
    "primary": {
      "$type": "color",
      "$value": "#737373"
    },
    "background": {
      "$type": "color",
      "$value": "#000000"
    },
    "logo": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "link": {
      "$type": "color",
      "$value": "#ffffff"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #e5e5e5"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid #e5e7eb"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(#474747 0%, #000000 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "Suisse Intl, ui-sans-serif, system-ui"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-600": {
      "$type": "fontWeight",
      "$value": 600
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "2px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "6px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "10px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "12px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "6px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "14px"
    },
    "radius-4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "radius-5": {
      "$type": "dimension",
      "$value": "24px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.1) 0px 1px 6px 0px"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.05) 0px 1px 2px 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": "600px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 21,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 21,
      "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 krea.ai