Printed research paper meets warm writing room: ivory canvas with serif 20px body, oat cards and parchment plates, one clay #d97757 accent; the app is a warm-gray dark shell with a serif greeting and radius-20 composer.
Browse Anthropic / Claude in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: anthropic.com homepage (live DOM, computed styles), 2026-07-08, desktop 1512px. Coverage: homepage (hero → releases → mission/list rows → footer). Responsive: not captured. Product app: see apps/anthropic/app/.
A printed research paper turned into a website: warm ivory canvas, near-black ink, and a serif-first voice (Anthropic Serif at 20px body) that reads editorial rather than techy. Structure comes from generous whitespace, oat-colored content cards, and hairline-divided list rows — almost no chrome. Color is scarce and bookish: parchment illustration plates and the single clay/terracotta brand hue, used as punctuation. Display type alternates between a bold humanist sans (Anthropic Sans 700) for statements and a light serif at larger sizes for announcements. Feels: editorial, calm, bookish, trustworthy.
| Token | Hex | Role / usage |
|---|---|---|
| ivory (canvas) | #faf9f5 | Page bg, nav, footer |
| ink | #141413 | Text, primary button fill |
| ink-60 | rgba(20,20,18,.60) | Secondary text |
| gray | #87867f | Muted text, footer links |
| stone | #b0aea5 | Tertiary text, icons |
| tint | #f0eee6 | Section tint |
| oat | #e8e6dc / #e3dacc | Release cards, panels |
| parchment | #f5e3c7 | Illustration plates |
| clay | #d97757 | Brand accent (sparing) |
| clay-dark | #c6613f | Accent hover/emphasis |
| hairline | rgba(20,20,20,.10) | List-row dividers |
Rule: the page is ivory + ink; clay appears only as small punctuation (links, icons, illustration accents) — never as large fills. Cards are oat, illustrations parchment.
"Anthropic Serif", Georgia, serif (body voice), "Anthropic Sans", Arial, sans-serif (display + UI), Anthropic Mono / JetBrains Mono (labels, rare).| Role | Size/Line | Family/Weight | Notes |
|---|---|---|---|
| Display statement (h1) | 62 / 68.5 | Sans 700 | "AI research and products…" |
| Announcement display (h2) | 70 / 77 | Serif 400 | e.g. "Announcing Fable 5" |
| Card title (h3) | 24 / 31 | Sans 600 | Release cards, section heads |
| List-row title (h3) | 16 / 22 | Sans 600 | Featured-work rows |
| Body / lede | 20 / 28 | Serif 400 | Right-aligned hero paragraph |
| UI / nav / buttons | 16 / 24 | Sans 400 | |
| Footer links | 13–14 | Sans 400 | #87867f |
Patterns: no letter-spacing manipulation anywhere (tracking normal at all sizes); serif carries meaning, sans carries structure; weights 400/600/700.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.
Source: claude.ai/new (live DOM, computed styles + CDS design-token custom properties), 2026-07-08, logged-in session, dark mode at desktop 1512px. Light mode: not captured.
A warm, dim writing room rather than a tech console: the dark theme is built on warm near-black grays (60° hue tint, never blue-black), with a serif greeting in the center and a soft raised composer card as the single focal point. Chrome is quiet — a flat sidebar with plain text rows, hairline separations at half-pixel weight, and one clay/terracotta accent reserved for the brand mark and key actions. Typography mixes Anthropic Sans for UI with Anthropic Serif at light weight for moments of address. Feels: warm, calm, literary, focused.
| Token | Value | Role / usage |
|---|---|---|
| bg-100 | #1f1f1e (hsl 60 2% 12%) | Page + sidebar canvas |
| bg-000 (raised) | #2c2c2a (hsl 60 2% 17%) | Composer card, raised surfaces |
| bg-200 | hsl(60 2% 9%) ≈ #171716 | Recessed wells |
| bg-300/400 | 7% / 4% lightness | Deep overlays, scrims |
| border | rgba(228,228,215,.15) at 0.5px | Sidebar hairline |
| Token | Hex | Role / usage |
|---|---|---|
| text-000/100 | #f8f8f6 | Primary text |
| greeting | #c3c2b7 | Serif greeting (muted warm) |
| text-200/300 | hsl(55 9% 74%) ≈ #c2c0b6 | Secondary, recents list |
| text-400/500 | hsl(48 5% 57%) ≈ #97958a | Placeholder, meta, section labels |
| Token | Hex | Role / usage |
|---|---|---|
| clay (accent-brand) | #d97757 | Brand starburst, New-chat icon, primary actions |
| clay-emphasized | #c6613f | Hover/pressed |
| plum (accent-pro) | #827dbd | Pro/plan accents |
| mineral | #629987 · cactus #bcd1ca · heather #cbcadb | Pictogram highlight hues |
| danger | hsl(0 73% 59%) | Destructive |
Rule: the shell is warm-gray monochrome; clay is the only action color. Pictogram pastels appear only in illustrations/icons, never as chrome.
"Anthropic Sans", system-ui, "Segoe UI", Roboto, sans-serif — body 16px/400."Anthropic Serif" light — greeting 40px / 60px / 300, color #c3c2b7."Anthropic Mono", ui-monospace for code. Weights: 400/500/600/700 (CDS scale).| Role | Size/Line | Family/Weight |
|---|---|---|
| Greeting | 40 / 60 | Serif 300 |
| Composer placeholder | 16 | Sans 400, text-400 |
| Sidebar rows | 14–15 / 20 | Sans 400–500 |
| Section labels ("Products", "Recents") | 12–13 | Sans 500, text-400 |
| Model chip / meta | 14 | Sans 400–500 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.