Anthropic
A warm, restrained canvas built around an off-white parchment tone (#FAF9F7) and a terracotta-adjacent rust accent (#C2522D) that reads as intellectual warmth rather than tech aggression. The system feels more like a considered academic journal than a startup landing page — generous whitespace, tight serif-inflected headings, and a deliberate avoidance of the saturated blues that dominate AI branding. The typography system pairs a humanist sans (Styrene) with long-form body text that invites reading. Surfaces are minimal: near-white backgrounds, thin dividers, and an ink color that never goes full black.
Color Tokens
1. Visual Theme & Atmosphere
Anthropic's visual identity is a deliberate counterpoint to the cold, dark-mode AI aesthetic. Where competitors reach for neon and neural-net imagery, Anthropic opts for warmth: an off-white canvas with parchment undertones, a terracotta brand accent that evokes analog craft, and typography that prioritizes reading comfort. The result feels more like a research institution than a tech company — careful, considered, and confident enough to be unhurried.
2. Color System
- Canvas: #FAF9F7 — warm off-white, never stark
- Surface layers: #F2F0EC / #E8E5E0 — subtle differentiation for cards and panels
- Primary accent: #C2522D — rust/terracotta, used sparingly on CTAs and brand moments
- Ink: #1A1A18 — warm near-black, never cold pure black
- Muted: #6B6B63 — desaturated warm gray for secondary text
- Border: #D8D4CC — hairline separators, soft and warm-toned
3. Typography
Styrene A/B is Anthropic's workhorse — a geometric grotesque with humanist qualities. Display sizes run at 500 weight with tight tracking (-0.03em) and compressed line-height. Body text is set generously at 17px with 1.65 leading — clearly intended for long-form reading of research and documentation. No decorative serifs; the warmth comes from color and spacing, not letterform.
4. Components & Patterns
- CTA buttons: Terracotta fill (#C2522D) with white text, medium radius (8px), no shadows
- Cards: Minimal — thin border (#D8D4CC), white or surface-1 background, generous padding
- Navigation: Clean horizontal bar, logo left, links right, no mega-menu complexity
- Research papers: Long-form layout with clear section hierarchy, generous left margin
- Claude product pages: Warmer tone, slightly more color, but same underlying system
5. Spacing & Layout
Very generous. Max content width ~960px for body text, ~1200px for marketing layouts. Section padding of 96–128px vertical. The whitespace is a design decision: it signals unhurriedness and confidence, not emptiness. Grid is simple 12-column, rarely used beyond 2–3 columns.
6. Motion & Interaction
Subtle and slow by tech standards. Hover states are gentle color shifts (120ms). Page sections may fade in on scroll but never aggressively. The philosophy matches the brand: thoughtful restraint over demonstrative animation.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for