Anthropic design system

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.

Captured 12 June 2026Light UI1,186 elements read

Download tokens Read it yourself

Anthropic colors

The brand roles and neutrals anthropic.com renders, with how many elements use each one.

Brand colors

Primary#d977573 uses
Secondary#faf9f5444 uses
Accent#f5e3c71 uses

Neutrals

#1414131,264 uses
#b0aea5395 uses
#000000132 uses
#87867f100 uses
#f0eee619 uses
#3d3d3a3 uses
#e8e6dc2 uses
#a1a0a02 uses

Backgrounds

#faf9f5
#f0eee6
#f5e3c7
#e3dacc
#141413

Text colors

#00000019.93:1 on #faf9f5
#14141317.5:1 on #faf9f5
#87867f3.47:1 on #faf9f5
#faf9f51:1 on #faf9f5
#b0aea52.11:1 on #faf9f5
#ffffff1.05:1 on #faf9f5
#e8e6dc1.19:1 on #faf9f5
#a1a0a02.48:1 on #faf9f5

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 0% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#d97757`	3.12:1	Fails AA

Anthropic fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Anthropic Sans: sans, most text (584 elements)
Anthropic Serif: serif, most text (553 elements)
Anthropic Mono: mono, body (6 elements)

Body text: 12px at weight 400, line height 16.8px.

Weights in use: 400, 500, 700, 600.

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 and radii

Spacing scale

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

Corner radii

8px
12px
16px
24px
pill

Medium radii lead, with a few larger ones. 1 distinct box shadows.

Motion

The motion reads as responsive.

Durations

xs: 100ms
sm: 200ms
md: 300ms
xl: 800ms
xxl: 15209000ms

Easing

custom (8 uses): cubic-bezier(0.77, 0, 0.175, 1)
ease-out (10 uses): cubic-bezier(0.16, 1, 0.3, 1)
ease-in-out (1 uses): ease

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

63/100, grade D

Components found: buttons (25), cards (3), inputs (3), links (176), navigation (346), footer (298).

By category

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

4 font families — consider limiting to 2 (heading + body)
2 WCAG contrast failures
91 !important rules — prefer specificity over overrides
81% of CSS is unused — consider purging
5073 duplicate CSS declarations

Download the tokens

The files designlang wrote for anthropic.com. Run it yourself for a fresh read: npx designlang anthropic.com.

The core values as CSS variables

: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;
}

Read anthropic.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Mintlify design system

Light UI, inter, #faf8f5

Airbnb design system

Light UI, Airbnb Cereal VF, #ff385c

Tailwind CSS design system

Light UI, inter, #ec0853

Postman design system

Light UI, inter, #e05320

Quick answers

What font does Anthropic use?

anthropic.com sets most of its text in Anthropic Sans (584 elements), with Anthropic Serif and Anthropic Mono alongside it. designlang read this from the computed styles of the live page on 12 June 2026.

What are Anthropic's brand colors?

The brand roles on anthropic.com are primary #d97757, secondary #faf9f5 and accent #f5e3c7, on a #faf9f5 background. The neutrals used most are #141413, #b0aea5 and #000000.

How do I use the Anthropic design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang anthropic.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from anthropic.com's public pages on 12 June 2026, so it shows what the site renders, not Anthropic's internal source files. Anthropic is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of anthropic.com on 12 June 2026. Anthropic is a trademark of its owner; designlang is not affiliated with it. More: the full Anthropic brand kit, the token extraction guide and the markdown version of this page.