designlang
Brand guidelines #d97757

June 12, 2026

anthropic.com

A reading of the visual language at https://anthropic.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
D 63/100
Tokens
13 colours · 9 sizes
Generated
designlang
Chapter 01

About

Page intent
landing 59% confidence
Material language
flat
Imagery style
mixed
Component library
unknown
Stack
webflow
Voice tone
friendly
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 8 neutrals · 13 total

Primary #D97757
RGB
217, 119, 87
HSL
15°, 63%, 60%
Secondary #FAF9F5
RGB
250, 249, 245
HSL
48°, 33%, 97%
Accent #F5E3C7
RGB
245, 227, 199
HSL
37°, 70%, 87%

Neutrals

#141413
#B0AEA5
#000000
#87867F
#F0EEE6
#3D3D3A
#E8E6DC
#A1A0A0

Full palette

#141413
#FAF9F5
#B0AEA5
#000000
#87867F
#F0EEE6
#E3DACC
#D97757
#3D3D3A
#C6613F
#E8E6DC
#A1A0A0
#F5E3C7

WCAG 0% · 0 passing pairs · 2 failing. Full breakdown in §11.

Chapter 04

Typography

4 families · 9 sizes · 4 weights

Display
Anthropic Sans
Body
Anthropic Serif
Weights
400, 500, 700, 600

Specimen

AI research and products that put safety at the frontier AI research and products that put safety at the frontier
Announcing Fable 5

Scale

StepSizeSample
t00 64.6857px AI research and products tha
t01 57.7306px AI research and products tha
t02 24px AI research and products tha
t03 20px AI research and products tha
t04 18px AI research and products tha
t05 16px AI research and products tha
t06 15px AI research and products tha
t07 14px AI research and products tha
t08 12px AI research and products tha
Chapter 05

Spacing

Base 2px · 13 steps captured

Rhythm

2px
21px
31px
45px
53px
58px
67px
84px
100px
142px
Chapter 06

Shape

5 radii · 1 elevation tiers

Border radii

8px
12px
16px
24px
1600px

Elevation

xs
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
—
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: responsive · 5 durations · 3 easings

Duration scale

100ms
200ms
300ms
800ms
15209000ms

Easings

Chapter 09

Components

unknown · 0 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →
Chapter 10

Voice

friendly · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

0% WCAG 2.1 contrast
0 passing · 2 failing

Failing pairs

Aa 3.12:1
Foreground
#ffffff
Background
#d97757
Rule
AA-normal

Suggested replacements

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #d97757;
  --font-display: "Anthropic Sans";
  --space-base: 4px;
  --radius-md: 12px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#d97757' },
      fontFamily: { display: ['Anthropic Sans', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '12px' },
    },
  },
};

Run npx designlang pack anthropic.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.