Vercel Design Tokens

Name: Dembrandt
Author: Dembrandt

Frontend cloud platform for deployment

Black and white precision UI

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

#171717

#0070f3

#4d4d4d

#8f8f8f

#fafafa

#ffffff

primary#0070f3

background#fafafa

text#171717

Typography

GeistSans, Geist Mono, Arial

hero:48px / 600

body:16px / 400

button:14px / 500

weights:400, 500, 600

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

1px2px3px4px5px6px

Border Radius

2px

4px

6px

8px

12px

Borders

1px solid #171717

1px solid #ebebeb

Links

Link text#0072f5 · no underline

Gradients

linear-gradient(to top in oklab, #fafafa 0%, rgba(0, 0, 0, 0) 100%)

radial-gradient(circle at 0% 0%, #fafafa 0%, rgba(0, 0, 0, 0) 30%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

370px480px640px768px1024px1200px

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.93:1

AAA

Body text

17.93:1

AAA

Button States

Tailwind CSS

Default

#ffffff

Hover

#ffffff

Active

#ffffff

Focus

focus

Disabled

disabled

radius: 128pxpadding: 0px 12px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#171717"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#0070f3"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#4d4d4d"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#8f8f8f"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#fafafa"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#0070f3"
    },
    "background": {
      "$type": "color",
      "$value": "#fafafa"
    },
    "text": {
      "$type": "color",
      "$value": "#171717"
    },
    "link": {
      "$type": "color",
      "$value": "#0072f5"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #171717"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid #ebebeb"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(to top in oklab, #fafafa 0%, rgba(0, 0, 0, 0) 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 0% 0%, #fafafa 0%, rgba(0, 0, 0, 0) 30%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "GeistSans, Geist Mono, Arial"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-500": {
      "$type": "fontWeight",
      "$value": 500
    },
    "weight-600": {
      "$type": "fontWeight",
      "$value": 600
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "1px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "2px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "3px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "5px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "6px"
    },
    "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": "12px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.04) 0px 2px 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": "370px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "480px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1200px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 17.93,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 17.93,
      "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 vercel.com