Anthropic Design Tokens

Name: Dembrandt
Author: Dembrandt

AI safety company and maker of Claude

Minimal AI-first layout

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

#141413

#3d3d3a

#b0aea5

#faf9f5

primary#141413

background#faf9f5

text#141413

logo#141413

Typography

Anthropic Serif, Anthropic Sans, Anthropic Mono, Georgia

hero:96px / 400

body:20px / 400

button:24px / 400

weights:400

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

2px4px5px8px12px16px

Border Radius

8px

12px

16px

24px

Borders

1px solid #141413

1px solid #f0eee6

Links

Link text#141413 · no underline

Gradients

linear-gradient(135deg, #141413 0%, #faf9f5 100%)

linear-gradient(90deg, #141413, #3d3d3a, #b0aea5)

radial-gradient(circle at 30% 20%, #141413 0%, #3d3d3a 70%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

479px501px676px768px991px

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

AAA

Body text

17.50:1

AAA

Button States

PrimeReact

Default

#141413

Hover

#141413

Active

#141413

Focus

focus

Disabled

disabled

radius: 8pxpadding: 8px 16px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#141413"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#3d3d3a"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#b0aea5"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#faf9f5"
    },
    "primary": {
      "$type": "color",
      "$value": "#141413"
    },
    "background": {
      "$type": "color",
      "$value": "#faf9f5"
    },
    "text": {
      "$type": "color",
      "$value": "#141413"
    },
    "logo": {
      "$type": "color",
      "$value": "#141413"
    },
    "link": {
      "$type": "color",
      "$value": "#141413"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #141413"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid #f0eee6"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(135deg, #141413 0%, #faf9f5 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(90deg, #141413, #3d3d3a, #b0aea5)"
    },
    "gradient-3": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 30% 20%, #141413 0%, #3d3d3a 70%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "Anthropic Serif, Anthropic Sans, Anthropic Mono, Georgia"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "2px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "5px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "12px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "16px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "12px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "16px"
    },
    "radius-4": {
      "$type": "dimension",
      "$value": "24px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.01) 0px 2px 2px 0px, rgba(0, 0, 0, 0.02) 0px 4px 4px 0px, rgba(0, 0, 0, 0.04) 0px 16px 24px 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": "479px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "501px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "676px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "991px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 17.5,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 17.5,
      "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 anthropic.com