Design System — Claude Design System

Visual Theme & Atmosphere

Claude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a tinted cream canvas ({colors.canvas} — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a slab-serif display ("Copernicus" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with StyreneB / Inter body sans. The combination feels like a literary publication, not a SaaS marketing page.

Brand voltage comes from the cream + coral pairing — coral ({colors.primary} — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.

... 1. Cream canvas ({colors.canvas}) — default body floor 2. Light cream cards ({colors.surface-card}) — feature card backgrounds

Key Characteristics:

Warm cream canvas ({colors.canvas} — #faf9f5) with dark warm-ink text ({colors.ink} — #141413). The brand's defining color choice.
...

Live Visual Theme Representation:

"Our goal is to build helpful, honest, and harmless AI systems with a warm, reader-focused editor canvas."

Color Palette & Roles

Brand & Accent

Coral / Primary ({colors.primary} — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.
Coral Active ({colors.primary-active} — #a9583e): The press / hover-darker variant.
...

Surface

Canvas ({colors.canvas} — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.
Surface Soft ({colors.surface-soft} — #f5f0e8): Section dividers, very-soft band backgrounds.
...

Text

Ink ({colors.ink} — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.
Body Strong ({colors.body-strong} — #252523): Emphasized paragraphs, lead text.
...

Semantic

Success ({colors.success} — #5db872): Green status dots, "available" indicators.
Warning ({colors.warning} — #d4a017): Warning callouts (rare on marketing surfaces).
...

primary

#cc785c

primary-active

#a9583e

primary-disabled

#e6dfd8

ink

#141413

body

#3d3d3a

body-strong

#252523

muted

#6c6a64

muted-soft

#8e8b82

hairline

#e6dfd8

hairline-soft

#ebe6df

canvas

#faf9f5

surface-soft

#f5f0e8

surface-card

#efe9de

surface-cream-strong

#e8e0d2

surface-dark

#181715

surface-dark-elevated

#252320

surface-dark-soft

#1f1e1b

on-primary

#ffffff

on-dark

#faf9f5

on-dark-soft

#a09d96

accent-teal

#5db8a6

accent-amber

#e8a55a

success

#5db872

warning

#d4a017

error

#c64545

Typography Rules

Font Family

The system runs Copernicus (or Tiempos Headline as substitute) as the slab-serif display face for headlines, and StyreneB (or Inter as substitute) as the humanist sans for body, navigation, and UI labels. JetBrains Mono handles code blocks. The fallback stack walks Tiempos Headline, Garamond, "Times New Roman", serif for display and Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif for body.

The display/body split is editorial:

Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display
StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels
...

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
...	...	...	...	...	...

Principles

...