Claude

# Claude Design System

## Visual Theme & Atmosphere
Warm, editorial, trustworthy. Combines serif headings with sans-serif body text to create a literary, journal-like feel. The terracotta accent evokes warmth and human connection, distinguishing it from cold tech aesthetics. Every element feels considered and calm.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #D97757 | Brand accent, CTAs, highlights |
| Background | #FAFAF8 | Main canvas (warm white) |
| Surface | #FFFFFF | Cards, panels |
| Text | #1F1F1E | Primary body text |
| Muted | #78716C | Secondary text, captions |
| Border | #E7E5E4 | Dividers, subtle borders |

## Typography Rules
- **Heading Font**: Source Serif 4, Georgia, serif
- **Body Font**: Inter, system-ui, sans-serif
- **Mono Font**: JetBrains Mono, monospace
- **Base Size**: 16px
- **H1**: 2.5rem / weight 700 / Source Serif 4
- **H2**: 1.875rem / weight 600 / Source Serif 4
- **H3**: 1.5rem / weight 600 / Source Serif 4
- **Body**: 1rem / weight 400 / Inter / line-height 1.7

## Component Stylings
- **Buttons**: Terracotta primary (#D97757), 24px radius, generous padding
- **Cards**: White, 12px radius, subtle warm-tinted border
- **Inputs**: 12px radius, warm gray background, focus with terracotta ring
- **Chat Bubbles**: User messages right-aligned, AI messages left, distinct styling

## Layout Principles
- Editorial-style reading width (680px max)
- Comfortable reading with 1.7 line-height
- Asymmetric layouts for visual interest
- Warm whitespace with subtle texture

## Responsive Behavior
- Mobile-first, single column conversations
- Collapsible sidebar on desktop
- Touch-optimized interaction areas