Design System Preview:
Claude

Auto-generated design token catalog from DESIGN.md

01 / Color Palette

Color Palette & Roles

Primary

Anthropic Near Black
#141413
Primary text, dark-theme surface
Terracotta Brand
#c96442
Core brand color, primary CTA buttons
Coral Accent
#d97757
Text accents, links on dark surfaces

Secondary & Accent

Error Crimson
#b53333
Error states, warm red
Focus Blue
#3898ec
Input focus rings (only cool color)

Surface & Background

Parchment
#f5f4ed
Primary page background
Ivory
#faf9f5
Card surfaces, elevated containers
Pure White
#ffffff
Button surfaces, max contrast
Warm Sand
#e8e6dc
Button backgrounds, interactive surfaces
Dark Surface
#30302e
Dark-theme containers, nav borders

Neutrals & Text

Charcoal Warm
#4d4c48
Button text on light surfaces
Olive Gray
#5e5d59
Secondary body text
Stone Gray
#87867f
Tertiary text, footnotes, metadata
Dark Warm
#3d3d3a
Dark text links, emphasized secondary
Warm Silver
#b0aea5
Text on dark surfaces

Semantic & Borders

Border Cream
#f0eee6
Standard light-theme border
Border Warm
#e8e6dc
Prominent borders, section dividers
Ring Warm
#d1cfc5
Button hover/focus ring shadow
Ring Deep
#c2c0b6
Active/pressed ring states
02 / Typography Scale

Typography Rules

Display Hero
Display / Hero — 64px / 500 / 1.10 / normal — Anthropic Serif (Georgia fallback)
Section Heading
Section Heading — 52px / 500 / 1.20 / normal — Anthropic Serif
Sub-heading Large
Sub-heading Large — 36px / 500 / 1.30 / normal — Anthropic Serif
Sub-heading
Sub-heading — 32px / 500 / 1.10 / normal — Anthropic Serif
Sub-heading Small
Sub-heading Small — 25px / 500 / 1.20 / normal — Anthropic Serif
Body serif text for editorial passages. The generous 1.60 line-height creates a literary reading experience closer to a book than a dashboard, with warm tones throughout.
Body Serif — 17px / 400 / 1.60 / normal — Anthropic Serif
Body Large Sans
Body Large — 20px / 400 / 1.60 / normal — Anthropic Sans (Arial fallback)
Standard body text for UI copy, navigation, and button labels. Anthropic Sans handles all functional text with quiet efficiency.
Body Standard — 16px / 400 / 1.60 / normal — Anthropic Sans
Caption and metadata text for descriptions
Caption — 14px / 400 / 1.43 / normal — Anthropic Sans
LABEL TEXT
Label — 12px / 500 / 1.60 / 0.12px — Anthropic Sans
const response = await claude.messages.create()
Code — 15px / 400 / 1.60 / -0.32px — Anthropic Mono (SFMono fallback)
03 / Button Variants

Buttons

Warm Sand (Secondary)
White Surface
Dark Charcoal
Terracotta Brand
Dark Primary
04 / Card Examples

Cards & Containers

Standard Card

Border Cream Contained

Standard content card with 1px solid Border Cream and 8px radius. The default container for features and content sections on Ivory surface.

Whisper Shadow

Soft Elevated Card

Elevated card with whisper-soft shadow at 0.05 opacity and 24px blur. Suggests floating rather than casting. For featured product screenshots.

Ring Shadow

Warm Ring Halo

Interactive card using Claude's signature ring shadow system. The 0px 0px 0px 1px pattern creates a border-like halo that is softer than a true border.

05 / Spacing Scale

Spacing System

Base unit: 8px. Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px.

3px
4px
6px
8px
10px
12px
16px
20px
24px
30px
06 / Border Radius Scale

Border Radius

4px
Sharp
6px
Subtly rounded
8px
Comfortably rounded
12px
Generously rounded
16px
Very rounded
24px
Highly rounded
32px
Maximum rounded
07 / Elevation & Depth

Depth & Elevation

Flat
No shadow, no border. Parchment background and inline text.
Level 0
Contained
1px solid Border Cream. Standard cards and sections.
Level 1
Ring
0px 0px 0px 1px ring shadow using warm grays. Interactive cards, buttons, hover states.
Level 2
Whisper
rgba(0,0,0,0.05) 0px 4px 24px. Elevated feature cards, product screenshots.
Level 3
Inset
inset 0px 0px 0px 1px at 15% opacity. Active/pressed button states.
Level 4