Warm monochrome
Paper whites and warm gray text create editorial depth. Clay orange is reserved for compact decorative marks.
Editorial intelligence
Anthropic Serif introduces the reflective voice; Anthropic Sans keeps navigation and product language precise. Source Serif 4 and Inter render as open substitutes.
Source Serif 4 · source: Anthropic Serif
Inter · source: Anthropic Sans
editorial heading
30 / 1.2 / 400
card heading
24 / 1.33 / 400
price
24 / 1.33 / 580
body
16 / 1.5 / 400
navigation
15 / 1.5 / 500
body small
14 / 1.5 / 400
caption
12 / 1.33 / 400
Paper rhythm
Eight-pixel controls sit inside 16px nested surfaces and 24px elevated cards, with generous 64–80px editorial intervals.
Observed spacing
2
2px
4
4px
8
8px
12
12px
16
16px
20
20px
24
24px
32
32px
40
40px
64
64px
80
80px
Observed radii
8px · controls
16px · nested
24px · cards
Observed depth
Two restrained card elevations preserve the layered-paper effect without making the page feel glossy.
rgba(0,0,0,.04) 0 4px 20px 0
oklab(0.431435 -0.02915 -0.125723 / .1) 0 4px 24px 0
Quiet controls
Actions remain monochrome; the serif appears in editorial and pricing moments, while product interactions stay sans.
Action hierarchy
8px radius
Pricing tiers
24px card / 32px pad
Free
Talk to Claude on web, iOS, and Android.
Pro
More usage and access to advanced models.
FAQ accordion
hairline rows
Research, reasoning, writing, and analysis stay within one calm conversation.
Input and accent mark
paper / clay
Clay orange punctuates editorial moments without becoming an action fill.
Usage rules
The Claude system gains personality from material warmth, typography, and restraint.
Preserve
- Use Bone Parchment for large page backgrounds.
- Set display headlines in the serif at weight 400.
- Pair white cards with warm gray hairlines.
- Keep Clay orange to marks and editorial accents.
Avoid
- Using Clay orange as a button fill.
- Introducing a second chromatic accent.
- Using pure white as the full-page canvas.
- Applying the serif to navigation or form controls.