How colors are organized in claude-com-variables.css. Anthropic ships a deep HSL-based palette — 30+ swatches per hue (gray, red, orange, yellow, green, aqua, blue, violet, magenta) layered under a smaller semantic surface (bg / text / border / accent / brand).
Warm bone-white system. --bg-100 (page) sits darker than --bg-000 (white surfaces) — an inversion of the typical light pattern that gives the entire site its signature warmth.
| Token | Hex | Used for |
|---|---|---|
| --bg-000 | #ffffff | Pure white (cards, modals, elevated surfaces) |
| --bg-100 / --color-bg | #f8f8f6 | Page background — the signature bone tone |
| --bg-1 / --color-bg-1 | #faf9f5 | Soft card surface, slightly lighter than page |
| --bg-200 / --bg-2 | #f5f4ed | Alt-row, subtle sectioning |
| --bg-300 / --gray-50 | #f0eee6 | Sunken regions, hover backgrounds |
A near-black ink anchor with a long warm-grey ramp. The blue link color is the only chromatic text token in regular use.
Body text uses --text-100 on --bg-100.
--text-300 — supporting copy, descriptions, captions in dense UI.
--text-400 — metadata, timestamps, "last updated" lines.
Inline link colored with --accent-200 for outbound references and CTAs.
--text-500 — placeholder text, inactive controls.
| Token | Hex | Used for |
|---|---|---|
| --text-100 / --text-000 | #141413 | Headings, body copy, primary labels (658 uses) |
| --gray-750 | #1f1e1d | Strong-emphasis text (645 uses) |
| --text-300 | #3d3d3a | Supporting copy, paragraph descriptions |
| --text-400 | #73726c | Captions, metadata, hints |
| --text-500 | #9c9a92 | Disabled controls, placeholder text |
| --accent-200 (link) | #1b67b2 | Inline links — only chromatic text token |
The warm #dedcd1 tan handles essentially every border — 431 usages. Darker variants surface only on hover or focus.
| Token | Hex / HSL | Used for |
|---|---|---|
| --border (default) | #dedcd1 | Cards, dividers, inputs (431 uses) |
| --border-100 / 200 / 300 / 400 | hsl(60 2% 12%) | Strong borders — same hex, four aliases |
| --gray-200 | #c2c0b6 | Faint dividers, secondary outlines |
| --tw-ring-color (focus) | rgba(20,20,19,0.08) | Translucent focus ring |
Two parallel accent systems: the clay-orange --brand-* (Anthropic's signature warmth, applied to CTAs and highlights) and the blue --accent-* ramp (links and focus). Pro tokens (--accent-pro-*) layer a deeper indigo for upgrade surfaces.
| Token | HSL | Used for |
|---|---|---|
| --brand-100 / --brand-200 | hsl(14.8 63% 60%) | Clay accent · highlight pills · feature CTAs |
| --_brand-clay-emphasized | hsl(15.1 54% 51%) | Hover / emphasized brand state |
| --accent-100 / --accent-200 | hsl(213 68% 50%) | Link color · interactive states (Try Claude blue) |
| --accent-000 | hsl(214 72% 34%) | Active / pressed link state |
| --accent-900 | hsl(213 85% 89%) | Link tint backgrounds |
| --accent-pro-100 / 200 | hsl(248 67% 63%) | Claude Pro upgrade surface |
| --accent-pro-000 | hsl(249 48% 44%) | Pro deep / pressed state |
Semantic groups (--success-*, --warning-*, --danger-*) live in the variables file but are used sparingly on the public site — most are reserved for the in-product chat experience.
| Token | HSL / Hex | Used for |
|---|---|---|
| --success-100 / 200 | hsl(82 100% 27%) | Success states, confirmations |
| --warning-100 / 200 | hsl(38 100% 33%) | Quota notices, deprecation banners |
| --danger-100 / 200 | hsl(0 61% 52%) | Errors, destructive confirmations |
| --accent-200 (info) | hsl(213 68% 50%) | Informational banners (no dedicated --info token) |
| --aqua-300 (idea) | hsl(157 52% 49%) | Tips / "did you know" — reuses aqua ramp |
Anthropic ships a complete Tailwind-style HSL palette as --_{hue}-{shade} (gray, red, orange, yellow, green, aqua, blue, violet, magenta). Each hue has 30+ steps from 0 → 900. Mostly unused on the marketing page — designed for the in-product chat surfaces.
Write and refactor code in your terminal. Available now in beta.
Organize context and conversations into shared workspaces.
Brainstorm in chat, build alongside Claude — your AI pair.
Claude is an AI assistant built by Anthropic to be helpful, harmless, and honest. It can help with writing, analysis, math, coding, creative work, and answering questions — across long conversations with rich context.
Drafting, brainstorming, summarizing, coding, research, customer support, content moderation — anywhere thoughtful, accurate text generation can move work forward.
Yes. Claude has a generous free tier on claude.com. Pro and Team plans unlock higher usage limits, faster response times, and access to the latest Opus model.
Opus 4.7 (most capable), Sonnet 4.6 (balanced speed and intelligence), and Haiku 4.5 (fastest, lightweight). Each is available via the chat app, API, and Bedrock / Vertex.
