# Anthropic design system: colors, fonts and tokens

> Anthropic's website (anthropic.com) uses a light interface with #d97757 as its primary color and Anthropic Sans as the main typeface, with Anthropic Serif alongside it. designlang measured 9 font sizes from 12px to 64.6857px, 13 spacing values, 5 corner radii.

Source: https://anthropic.com, captured 12 June 2026. Page: https://designlang.app/design-system/anthropic

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#d97757` | 3 |
| Secondary | `#faf9f5` | 444 |
| Accent | `#f5e3c7` | 1 |

Neutrals: `#141413`, `#b0aea5`, `#000000`, `#87867f`, `#f0eee6`, `#3d3d3a`, `#e8e6dc`, `#a1a0a0`

Backgrounds: `#faf9f5`, `#f0eee6`, `#f5e3c7`, `#e3dacc`, `#141413`

## Fonts

- Anthropic Sans (sans), 584 elements
- Anthropic Serif (serif), 553 elements
- Anthropic Mono (mono), 6 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 64.6857px | 400 | 71.1543px | normal | h2 |
| 57.7306px | 700 | 63.5037px | normal | h1, span, a |
| 24px | 400 | 33.6px | normal | div, p, h2, h3 |
| 20px | 400 | 28px | normal | body, div, main, style |
| 18px | 600 | 25.2px | normal | a, div, p, br |
| 16px | 400 | normal | normal | html, head, style, meta |
| 15px | 400 | 21px | -0.0375px | div |
| 14px | 500 | 18.2px | normal | div, p, a |
| 12px | 400 | 16.8px | normal | footer, h2, div, nav |

## Spacing

2px, 21px, 31px, 45px, 53px, 58px, 67px, 84px, 100px, 142px, 149px, 165px, 214px

## Radii

8px, 12px, 16px, 24px, pill

## Motion

Feel: responsive. Durations: 100ms, 200ms, 300ms, 800ms, 15209000ms.

## Audit

Overall 63/100 (grade D).

- Color Discipline: 92/100
- Typography Consistency: 50/100
- Spacing System: 70/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 90/100
- Accessibility: 0/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #d97757;
  --color-secondary: #faf9f5;
  --color-accent: #f5e3c7;
  --color-background: #faf9f5;
  --color-text: #000000;
  --color-neutral-1: #141413;
  --color-neutral-2: #b0aea5;
  --color-neutral-3: #000000;
  --color-neutral-4: #87867f;
  --font-primary: "Anthropic Sans", sans-serif;
  --font-secondary: "Anthropic Serif", serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/anthropic-com/anthropic-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/anthropic-com/anthropic-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/anthropic-com/anthropic-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/anthropic-com/anthropic-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/anthropic-com/anthropic-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/anthropic-com/anthropic-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/anthropic-com/anthropic-com-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/anthropic-com/anthropic-com.brand.pdf)

Regenerate: `npx designlang anthropic.com`