W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Anthropic
Anthropic is an AI safety company and the maker of Claude — a family of large language models built with constitutional AI and safety research as first-class concerns. The brand voice is serious, considered, and humane: long-form reasoning over marketing copy, transparency about limits, deference to the reader. Visually, Anthropic is paper-toned and warm — a cream "Ivory" canvas, deep "Slate" text, and Claude's signature terracotta "Clay" as the primary accent, supported by a muted natural-world secondary scale (Oat, Manilla, Olive, Cactus, Sky, Heather, Fig, Coral). Typography is the proprietary Anthropic Sans / Anthropic Serif / Anthropic Mono family.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/anthropic/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/anthropic/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Anthropic
Anthropic is an AI safety company and the maker of Claude — a family of large language models built with constitutional AI and safety research as first-class concerns. The brand voice is serious, considered, and humane: long-form reasoning over marketing copy, transparency about limits, deference to the reader. Visually, Anthropic is paper-toned and warm — a cream "Ivory" canvas, deep "Slate" text, and Claude's signature terracotta "Clay" as the primary accent, supported by a muted natural-world secondary scale (Oat, Manilla, Olive, Cactus, Sky, Heather, Fig, Coral). Typography is the proprietary Anthropic Sans / Anthropic Serif / Anthropic Mono family.
Tags: anthropic, claude, ai, safety, brand, warm, paper, light-first
Atoms
Palette
Anthropic · [email protected] · Proprietary — All Rights Reserved
Anthropic's brand palette, captured directly from the live marketing site (anthropic.com) where the design system exposes named swatch tokens on the document root. The brand is warm and paper-toned: a cream "Ivory" canvas, deep "Slate" text, with Claude's signature "Clay" terracotta as the primary accent. A muted natural-world secondary scale — Cloud, Oat, Manilla, Kraft, Olive, Cactus, Sky, Heather, Fig, Coral — supports illustration and surface accents. Anthropic is light-first; the dark mode used on hero modules flips Slate-dark to canvas with Ivory text.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
ivory-light |
Ivory Light | #FAF9F5 |
ivory-medium |
Ivory Medium | #F0EEE6 |
ivory-dark |
Ivory Dark | #E8E6DC |
slate-dark |
Slate Dark | #141413 |
slate-medium |
Slate Medium | #3D3D3A |
slate-light |
Slate Light | #5E5D59 |
cloud-light |
Cloud Light | #D1CFC5 |
cloud-medium |
Cloud Medium | #B0AEA5 |
cloud-dark |
Cloud Dark | #87867F |
clay |
Clay | #D97757 |
accent |
Accent | #C6613F |
oat |
Oat | #E3DACC |
manilla |
Manilla | #EBDBBC |
kraft |
Kraft | #D4A27F |
olive |
Olive | #788C5D |
cactus |
Cactus | #BCD1CA |
sky |
Sky | #6A9BCC |
heather |
Heather | #CBCADB |
fig |
Fig | #C46686 |
coral |
Coral | #EBCECE |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
ivory-light |
#FAF9F5 |
surface |
ivory-medium |
#F0EEE6 |
surface-elevated |
ivory-light |
#FAF9F5 |
text-primary |
slate-dark |
#141413 |
text-secondary |
slate-medium |
#3D3D3A |
text-tertiary |
slate-light |
#5E5D59 |
primary |
clay |
#D97757 |
primary-hover |
accent |
#C6613F |
accent |
clay |
#D97757 |
accent-hover |
accent |
#C6613F |
warning |
kraft |
#D4A27F |
warning-hover |
accent |
#C6613F |
error |
fig |
#C46686 |
success |
olive |
#788C5D |
border |
ivory-dark |
#E8E6DC |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
slate-dark |
#141413 |
surface |
slate-medium |
#3D3D3A |
surface-elevated |
slate-light |
#5E5D59 |
text-primary |
ivory-light |
#FAF9F5 |
text-secondary |
cloud-medium |
#B0AEA5 |
text-tertiary |
cloud-dark |
#87867F |
primary |
clay |
#D97757 |
primary-hover |
accent |
#C6613F |
accent |
clay |
#D97757 |
accent-hover |
accent |
#C6613F |
warning |
manilla |
#EBDBBC |
warning-hover |
kraft |
#D4A27F |
error |
fig |
#C46686 |
success |
cactus |
#BCD1CA |
border |
slate-light |
#5E5D59 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
ivory-light |
#FAF9F5 |
on-identity |
slate-dark |
#141413 |
primary |
clay |
#D97757 |
primary-hover |
accent |
#C6613F |
accent |
clay |
#D97757 |
accent-hover |
accent |
#C6613F |
mark |
clay |
#D97757 |
success |
olive |
#788C5D |
warning |
kraft |
#D4A27F |
error |
fig |
#C46686 |
text-primary-light |
slate-dark |
#141413 |
text-primary-dark |
ivory-light |
#FAF9F5 |
background-light |
ivory-light |
#FAF9F5 |
background-dark |
slate-dark |
#141413 |
surface-light |
ivory-medium |
#F0EEE6 |
surface-dark |
slate-medium |
#3D3D3A |
text-secondary-light |
slate-medium |
#3D3D3A |
text-tertiary-light |
slate-light |
#5E5D59 |
border-light |
ivory-dark |
#E8E6DC |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Slate Dark (#141413) on Ivory Light (#FAF9F5) gives ~17:1 — clears AAA decisively. The brand's deliberate, long-form reading posture justifies an AAA contrast target rather than the AA floor.
colorChoice → roles.colors.primary
- allowed: clay, accent
- forbidden: fig, coral, kraft, sky, olive
Clay (#D97757) is Claude's signature warm. The other secondary swatches appear in illustration and surface accents only — fig as muted-rose, coral as pale pink, kraft as tan — and must not stand in for the primary brand action color.
colorChoice → roles.colors.mark
- allowed: clay
- forbidden: accent, fig, coral, kraft, olive, sky
The Claude / Anthropic mark fill is clay specifically. The pressed
accentvariant is reserved for hover/active states on interactive surfaces, not for the mark itself.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
Anthropic's identity is restrained by design. Recolored, skewed, or gradient-filled marks conflict with the brand's humane, considered voice.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
The Anthropic Sans display face pairs with Anthropic Serif for long-form prose on anthropic.com. A 1.5× minimum display-to-prose size ratio preserves the typographic hierarchy when the serif is rendered alongside the sans headlines.
contextRestriction → roles.colors.success
- forbiddenContexts: error-state, destructive-action
- allowedContexts: confirmation, completion, data-viz-positive
Olive (#788C5D) is the muted-green secondary used for confirmation and positive data points. It is NOT the error color (use fig). Reusing it for failure states conflicts with the established positive-natural meaning.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
Anthropic's marketing site uses Regular (400), Medium (500), SemiBold (600), and Bold (700) — declared on the live stylesheet as --_typography---font--display-sans-regular through --display-sans-bold. Heavier display weights are not in the licensed variable-font cut.
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The brand's long-form, considered posture and research-document aesthetic justify the enhanced 7:1 target rather than the AA 4.5:1 floor.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: ivory-light, ivory-medium, slate-dark
- doesNotPairWith: fig, sky, heather
Clay reads cleanest against the ivory canvas or the slate dark canvas. Pairing it adjacent to fig (rose-magenta), sky (blue), or heather (lavender) introduces a chromatic conflict that fights for attention without resolving into hierarchy.
Provenance
- Source: https://www.anthropic.com/
- License:
Proprietary — All Rights Reserved - Attribution: Anthropic, PBC — visual identity captured from the deployed stylesheet on anthropic.com (--swatch-, --_typography-, --_color-theme-* token families). Anthropic, Claude, and associated marks are property of Anthropic.
- Imported:
2026-05-17 - Notes: The proprietary brand typefaces (Anthropic Sans, Anthropic Serif, Anthropic Mono) are declared on anthropic.com via @font-face but are not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles and notes the proprietary primaries here.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Anthropic
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Anthropic
A clear hierarchy in Anthropic's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ clay #D97757 accent-hover
→ accent #C6613F background-dark
→ slate-dark #141413 background-light
→ ivory-light #FAF9F5 border-light
→ ivory-dark #E8E6DC error
→ fig #C46686 identity
→ ivory-light #FAF9F5 mark
→ clay #D97757 on-identity
→ slate-dark #141413 primary
→ clay #D97757 primary-hover
→ accent #C6613F success
→ olive #788C5D surface-dark
→ slate-medium #3D3D3A surface-light
→ ivory-medium #F0EEE6 text-primary-dark
→ ivory-light #FAF9F5 text-primary-light
→ slate-dark #141413 text-secondary-light
→ slate-medium #3D3D3A text-tertiary-light
→ slate-light #5E5D59 warning
→ kraft #D4A27F Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from anthropic)
Light mode (15 roles)
accent
→ clay accent-hover
→ accent background
→ ivory-light border
→ ivory-dark error
→ fig primary
→ clay primary-hover
→ accent success
→ olive surface
→ ivory-medium surface-elevated
→ ivory-light text-primary
→ slate-dark text-secondary
→ slate-medium text-tertiary
→ slate-light warning
→ kraft warning-hover
→ accent Dark mode (15 roles)
accent
→ clay accent-hover
→ accent background
→ slate-dark border
→ slate-light error
→ fig primary
→ clay primary-hover
→ accent success
→ cactus surface
→ slate-medium surface-elevated
→ slate-light text-primary
→ ivory-light text-secondary
→ cloud-medium text-tertiary
→ cloud-dark warning
→ manilla warning-hover
→ kraft Rules (9 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Slate Dark (#141413) on Ivory Light (#FAF9F5) gives ~17:1 — clears AAA decisively. The brand's deliberate, long-form reading posture justifies an AAA contrast target rather than the AA floor.
colorChoice roles.colors.primary allowed clay, accent forbidden fig, coral, kraft, sky, olive Clay (#D97757) is Claude's signature warm. The other secondary swatches appear in illustration and surface accents only — fig as muted-rose, coral as pale pink, kraft as tan — and must not stand in for the primary brand action color.
colorChoice roles.colors.mark allowed clay forbidden accent, fig, coral, kraft, olive, sky The Claude / Anthropic mark fill is clay specifically. The pressed `accent` variant is reserved for hover/active states on interactive surfaces, not for the mark itself.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo Anthropic's identity is restrained by design. Recolored, skewed, or gradient-filled marks conflict with the brand's humane, considered voice.
fontPairing typography.display requires prose minSizeRatio 1.5 The Anthropic Sans display face pairs with Anthropic Serif for long-form prose on anthropic.com. A 1.5× minimum display-to-prose size ratio preserves the typographic hierarchy when the serif is rendered alongside the sans headlines.
contextRestriction roles.colors.success forbiddenContexts error-state, destructive-action allowedContexts confirmation, completion, data-viz-positive Olive (#788C5D) is the muted-green secondary used for confirmation and positive data points. It is NOT the error color (use fig). Reusing it for failure states conflicts with the established positive-natural meaning.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 Anthropic's marketing site uses Regular (400), Medium (500), SemiBold (600), and Bold (700) — declared on the live stylesheet as --_typography---font--display-sans-regular through --display-sans-bold. Heavier display weights are not in the licensed variable-font cut.
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The brand's long-form, considered posture and research-document aesthetic justify the enhanced 7:1 target rather than the AA 4.5:1 floor.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith ivory-light, ivory-medium, slate-dark doesNotPairWith fig, sky, heather Clay reads cleanest against the ivory canvas or the slate dark canvas. Pairing it adjacent to fig (rose-magenta), sky (blue), or heather (lavender) introduces a chromatic conflict that fights for attention without resolving into hierarchy.
Provenance
- Source
- https://www.anthropic.com/
- License
Proprietary — All Rights Reserved- Attribution
- Anthropic, PBC — visual identity captured from the deployed stylesheet on anthropic.com (--swatch-*, --_typography-*, --_color-theme-* token families). Anthropic, Claude, and associated marks are property of Anthropic.
- Imported
2026-05-17- Notes
- The proprietary brand typefaces (Anthropic Sans, Anthropic Serif, Anthropic Mono) are declared on anthropic.com via @font-face but are not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles and notes the proprietary primaries here.