Claude
A warm, editorial AI-product interface built on a cream canvas (#faf9f5) with near-black ink, a single burnt-orange brand accent, and Anthropic's custom serif display face. The system reads calm, literary and confident — large serif headlines, generous whitespace, soft-rounded white cards floating on cream, and a quiet near-black footer. Brand voltage comes almost entirely from the serif typography and the lone orange asterisk mark rather than from color saturation.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
56px · 330 · 1.2
The quick brown fox jumps
heading
18px · 430 · 1.375
The quick brown fox jumps
body
12px · 400 · 1.333
The quick brown fox jumps
button
15px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| micro | 6px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 32px | |
| huge | 48px | |
| section | 96px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sm | 8px | |
| md | 10px | |
| lg | 16px | |
| xl | 24px | |
| xxl | 32px |
FAQ
- What colors does Claude use?
- Claude's core palette includes #141413, #000000, #0b0b0b, #3d3d3a, #73726c. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Claude DESIGN.md.
- What font does Claude use?
- Claude's primary typeface is Anthropic Serif. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Claude design system?
- A warm, editorial AI-product interface built on a cream canvas (#faf9f5) with near-black ink, a single burnt-orange brand accent, and Anthropic's custom serif display face. The system reads calm, lit…