---
type: design-system
title: "Anthropic — Design System Analysis"
description: "Visual and communication patterns of Anthropic/Claude. Reference for editorial identity. Dark mode as default."
tags: [design-system, anthropic, claude, editorial, dark-mode]
timestamp: "2026-07-07"
---

# 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)`, background `rgba(212,165,116,.06)`
- Notes: `border-left: 3px solid var(--text3)`, background `rgba(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