# Design System
Inspired by 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 (light mode)
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, card backgrounds

### Neutrals & Text

Charcoal Warm
#4d4c48
Button text on light surfaces
Olive Gray
#5e5d59
Secondary body text (light mode)
Stone Gray
#87867f
Secondary text (dark), tertiary (light)
Dark Warm
#3d3d3a
Dark text links, emphasized secondary
Warm Silver
#b0aea5
Tertiary 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

### Dark Surface Contained

Standard content card with 1px solid Dark Surface border and 12px radius. The default container on the dark Near Black canvas.

Whisper Shadow

### Soft Elevated Card

Elevated card with deeper shadow on dark surfaces. The 0.20 opacity and 24px blur create subtle depth against the dark canvas.

Ring Shadow

### Warm Ring Halo

Interactive card using the signature ring shadow. On dark surfaces the ring uses Charcoal Warm for a subtle warm boundary.

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. Near Black background and inline text.
Level 0
Contained
1px solid Dark Surface. Standard cards and sections.
Level 1
Ring
0px 0px 0px 1px ring shadow using Charcoal Warm. Interactive cards, buttons, hover states.
Level 2
Whisper
rgba(0,0,0,0.20) 0px 4px 24px. Deeper shadow on dark canvas for elevated cards.
Level 3
Inset
inset 0px 0px 0px 1px at 10% white opacity. Active/pressed button states on dark.
Level 4