Anthropic — Design System Analysis
Visual and communication patterns of Anthropic/Claude. Reference for editorial identity. Dark mode as default.
Anthropic — Design System
Dark Mode — Default (approved 2026-07-07)
Dark mode as default for artifacts. Inspired by Anthropic's visual style.
Palette
| Token | Hex | Usage |
|---|---|---|
| Background | #171717 | Main background (never pure black) |
| Background 2 | #1e1e1e | Secondary background |
| Surface | #232329 | Cards, tables, blocks |
| Border | #2e2e32 | Borders, separators |
| Text | #e8e8ed | Main text |
| Text 2 | #a1a1aa | Secondary text |
| Text 3 | #71717a | Muted, labels |
| Warm | #d4a574 | Primary accent (Anthropic warm) |
| Green | #66bfa2 | Success, best values |
| Red | #e8706a | Error, worst values |
Rules
- Tables: uppercase headers, letter-spacing 0.4px, text3 color
- Row hover:
rgba(212,165,116,.04)— barely perceptible - Callouts:
border-left: 3px solid var(--warm), backgroundrgba(212,165,116,.06) - Notes:
border-left: 3px solid var(--text3), backgroundrgba(255,255,255,.03)
Light Mode — Alternative
For print PDFs, official documents, contexts where dark is not appropriate.
Palette
| Token | Hex | Usage |
|---|---|---|
| Background | #ffffff | Background |
| Surface | #f8f9fa | Cards, tables |
| Border | #ddd | Borders |
| Text | #1a1a2e | Main text |
| Accent | #2563eb | Links, highlights |
| Green | #16a34a | Best |
| Red | #dc2626 | Worst |
Typography (both modes)
- Headings: Source Serif 4 (serif)
- Body: Inter (sans-serif)
- Code: JetBrains Mono (monospace)
Visual Language
- Spacing: Generous, whitespace as a design element
- Borders: 1px subtle, no exaggerated border-radius
- Effects: None. No gradients, no animations, no shadows.
Blog Posts
- Large title, serif font
- Subtitle in lighter gray
- Blockquotes with border-left
- Clean tables with uppercase headers
- Inline math in LaTeX
- Paper links integrated into text
System Cards / Model Cards
- Complete technical format
- Benchmark tables with comparisons
- Precise language without filler
- Numbered sections
- Clear disclaimer about limitations
Communication Tone
- Academic but accessible
- No flattery
- Data speaks for itself
- Honesty about limitations
What to absorb
- The editorial seriousness — nothing like "AI slop"
- Respect for the reader — assume technical knowledge
- Honesty about limitations and risks
- The warm palette (#d4a574) as identity
What NOT to absorb
- Excessively corporate tone
- Generic "tech blog" formatting
- Generic dark mode with bright borders