Design System Inspiration of Claude (Anthropic)
1. Visual Theme & Atmosphere
Claude is Anthropic’s public AI product: the official product overview describes it as a conversational tool for bringing together documents, tools, and web knowledge, while Anthropic describes its broader work as building reliable, interpretable, and steerable AI systems. On the supplied public surfaces, that practical role is expressed through a restrained warm-neutral system rather than a generic blue software palette. The Claude overview and pricing pages repeatedly use #f5f4ed canvas areas, near-black #141413 text, white cards, and a mix of loaded Anthropic Sans and Anthropic Serif. Serif display text gives the public product pages an editorial cadence; Sans carries repeated navigation, body, tab, and control text. The capture also records #c96442 on the overview, but it is a low-frequency observed accent, not evidence that every Claude action is terracotta.
The public system is not a proxy for every Anthropic surface. This reference separates Anthropic’s marketing home, the Claude overview, and public pricing; it does not assert equivalence with authenticated chat, Help Center/documentation chrome, or internal product UI. Components below are only the selector-backed public examples recorded in the supplied capture.
Key characteristics:
- Warm public canvas and near-black text:
#f5f4ed and #141413.
- White public cards bounded by the quiet
#f0eee6 hairline.
- Loaded Anthropic Serif for editorial display and loaded Anthropic Sans for public UI/body rhythm.
- Rounded public tabs (12px), pricing cards (24px), and model cards (32px), each tied to a separate selector.
- A limited observed
#c96442 accent, without a universal-action claim.
2. Color Palette & Roles
Selector-backed public colors
- Near Black (
#141413): repeated text, border, and dark-surface value across all three supplied public routes.
- Parchment Canvas (
#f5f4ed): observed overview and pricing background value; it is not claimed as an authenticated-chat canvas.
- White Surface (
#ffffff): selected public tabs and recorded model/pricing cards.
- Muted Warm Gray (
#5e5d59): repeated public overview/pricing text and border value.
- Dark Surface (
#30302e): observed on the public product/pricing surfaces.
- Hairline Cream (
#f0eee6): recorded border and background value, including the public card borders below.
- Warm Sand (
#e8e6dc): recorded public-pricing background value and the overview appearance-toggle ring treatment.
- Terracotta Accent (
#c96442): a low-frequency overview background observation. Treat it as an observed public accent, not a complete action scale.
Surface boundary
The capture contains no evidence that these values govern Claude’s signed-in conversation UI, support-documentation chrome, or every Anthropic corporate page. It also includes a blue-tinted featured pricing-card variant; that single route-local card is not promoted to the general palette.
3. Typography Rules
Evidence classes
| Evidence class | Family and boundary |
|---|
| Official product-use | No first-party typography guide or font license assigning a general product role was found in the reviewed official context sources. The live-font evidence below is the basis for UI-family tokens. |
| Live computed surface-use | Anthropic Sans is loaded/high with 1,493 computed uses across the supplied routes; Anthropic Serif is loaded/high with 65. Both have computed-family usage plus FontFaceSet/source-URL corroboration in the supplied artifact. |
| Official distributed brand asset | No separate official font-distribution or license page was located in this pass. The browser-served WOFF2 URLs establish delivery on the captured public routes, not a license grant for reuse. |
| Declared-only | anthropicMono and JetBrains Mono have captured @font-face source URLs but zero visible computed usage. They remain declared-only and are excluded from tokens.typography.family. |
| System / unresolved | Arial and Georgia appear only as CSS fallbacks in observed stacks. They are not substitutes for, or tokens representing, Anthropic Sans or Anthropic Serif. |
Captured hierarchy
| Role | Family | Size | Weight | Line Height | Evidence boundary |
|---|
| Public h1 | Anthropic Serif | 64px | 500 | 70.4px | two public-route h1 occurrences |
| Public h2 | Anthropic Serif | 52px | 500 | 62.4px | five public-route h2 occurrences |
| Public h3 | Anthropic Serif | 36px | 500 | 46.8px | four public-route h3 occurrences |
| Repeated body/list | Anthropic Sans | 20px | 400 | 32px | public overview/pricing text and list items |
| Public control | Anthropic Sans | 15px | 400 | 24px | observed buttons and inputs; preserve selector-specific geometry |
| Public tab | Anthropic Sans | 20px | 400 | 32px | overview and pricing tab controls |
Do not render a system fallback as a named Anthropic typeface. Anthropic Mono is useful as a declared asset record, but no visible use was captured, so this reference does not claim a mono scale.
4. Component Stylings
Public product navigation
Selected Overview Tab
- Background:
#ffffff
- Text:
#141413
- Radius: 12px
- Padding: 8px 16px 8px 12px
- Font: 20px / 400 / Anthropic Sans
- Use:
surface-2::[data-omd-capture="5"], the selected tab on https://claude.com/product/overview.
Unselected Overview Tab — pressed sample
- Text:
#5d5c58
- Radius: 12px
- Padding: 8px 16px 8px 12px
- Font: 20px / 400 / Anthropic Sans
- Pressed:
surface-2::[data-omd-capture="6"]::state-pressed records rgba(255, 255, 255, 0.004) background and #5d5c58 text.
- Use: Public overview tab; this is the observed pressed state, not a universal hover or focus rule.
Public cards
Model Card — overview
- Background:
#ffffff
- Text:
#141413
- Border: 1px solid
#f0eee6
- Radius: 32px
- Padding: 48px
- Font: 20px / 400 / Anthropic Sans
- Use:
surface-2::div.card_model_wrap.u-theme-white; four observed overview cards.
Pricing Card — standard
- Background:
#ffffff
- Text:
#141413
- Border: 1px solid
#f0eee6
- Radius: 24px
- Padding: 32px
- Font: 20px / 400 / Anthropic Sans
- Use:
surface-3::div.card_pricing_wrap.u-theme-white; two observed public pricing cards.
Pricing Card — featured
- Background:
#ffffff
- Border: 1px solid
color(srgb 0.415686 0.607843 0.8 / 0.2)
- Radius: 24px
- Padding: 32px
- Shadow:
rgba(98, 158, 218, 0.16) 0px 4px 20px 0px
- Use:
surface-3::div.card_pricing_wrap.w-variant-e2cc9fd4-13af-f05c-3a0a-f9943311e113; one featured public pricing-card variant only.
Public appearance control
Appearance Toggle Tile
- Background:
#e8e6dc (computed as color(srgb 0.909804 0.901961 0.862745))
- Text:
#4d4c48
- Radius: 16px
- Shadow:
#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px
- Font: 16px / 400 / Anthropic Sans
- Use:
surface-2::div.button_toggle_wrap.w-variant-ab355ea0-b722-2f23-3507-f0290f710e57; one overview control. No selected/disabled variant was captured.
Only tab selection, tab pressed, and tab-panel expansion were observed as interactions. No generic modal, toast, menu, error, disabled, or hover system is inferred from the supplied artifact.
5. Layout Principles
Captured spacing and shape observations
- The artifact clusters 4px, 8px, 12px, 16px, 24px, 32px, and 48px spacing values. This is an observed public-style inventory, not a declared global spacing scale.
- Recorded public radii include 6px, 8px, 12px, 16px, 24px, and 32px. The 12px tab, 24px pricing card, and 32px model card have selector-backed component use above.
- The supplied capture has no mobile viewport, container-width, or responsive-breakpoint measurement. Do not derive breakpoints or a universal grid from this packet.
6. Depth & Elevation
The standard public model and pricing card samples are flat white surfaces with #f0eee6 borders and no computed shadow. One featured pricing card alone uses a cool translucent border and rgba(98, 158, 218, 0.16) 0px 4px 20px 0px shadow; the overview appearance control uses a one-pixel warm ring. These are selector-specific observations, not a general elevation scale.
7. Do's and Don'ts
Do
- Use only the selector-backed public values above when recreating these particular public card and tab patterns.
- Keep Anthropic Sans and Anthropic Serif distinct when their browser-loadable sources are available.
- Preserve the selected-tab and featured-pricing treatments as route-local variants.
Don't
- Don't use Arial, Georgia, Inter, or a system stack while labeling the result Anthropic Sans, Anthropic Serif, or Anthropic Mono.
- Don't generalize the featured pricing-card blue shadow to ordinary cards or product surfaces.
- Don't invent chat composer, error, toast, menu, disabled, or responsive variants that this packet did not observe.
8. Responsive Behavior
No responsive breakpoint or mobile-surface evidence was supplied. The reference intentionally has no breakpoint, collapse, or touch-target token claims.
9. Agent Prompt Guide
Use the public Claude overview pattern only where the evidence fits: a #f5f4ed canvas, near-black text, a white card with the route-specific 24px or 32px radius, and loaded Anthropic Sans/Serif. Treat the values as public-web observations, not as a complete implementation kit for the authenticated chat product.
10. Voice & Tone
Official Anthropic sources frame the company as an AI safety and research company building systems people can rely on, and describe Claude’s intended behavior as helpful, honest, thoughtful, and caring. This supports a source-informed public-content voice that is direct, careful about uncertainty, and oriented to practical help; it does not prove a universal copywriting ban list or an app-wide tone specification.
| Context | Source-informed guidance |
|---|
| Product explanation | Explain the user outcome and the relevant capability plainly, as the official Claude overview does for conversation, documents, tools, and web knowledge. |
| Safety or policy | Name the tradeoff and intent directly; the Constitution explains both broad safety and genuine helpfulness rather than reducing the topic to a slogan. |
| Company communication | Prefer specific, accountable language about reliable, interpretable, and steerable systems. |
Do
- State what the product can help a person or organization do.
- Keep safety and helpfulness in the same explanation when both materially affect the outcome.
- Distinguish an intention or policy from an observed product behavior.
Don't
- Don't present the Constitution’s intended values as a guarantee about every response.
- Don't turn the public product-page tone into an undocumented rule for support, legal, or signed-in surfaces.
11. Brand Narrative
Anthropic describes itself as an AI safety and research company building reliable, interpretable, and steerable systems. Its company page says it translates that research into practical tools such as Claude for businesses, nonprofits, civil-society groups, their clients, and people around the world. The public Claude overview, separately, presents Claude as a conversational thinking partner that can connect documents, tools, and web knowledge. Those statements explain the product/category relationship without treating a marketing surface as an authenticated-product specification.
The January 2026 Constitution adds a current public articulation of Claude’s intended character and role. Anthropic says the document expresses its intentions for Claude’s values and behavior and is part of the training process; it identifies broad safety, ethics, compliance with Anthropic guidelines, and genuine helpfulness as key concerns. This is narrative and product-intent evidence, not evidence for color, typography, or component tokens.
12. Principles
- Build systems people can rely on. Anthropic’s company page describes reliable, interpretable, and steerable systems. UI implication: make the scope and consequence of a public action understandable rather than relying on visual emphasis alone.
- Treat safety as systematic work. Anthropic says it treats AI safety as a science and feeds product learning back into research. UI implication: distinguish an observed interface state from an inference, and retain its evidence boundary.
- Be helpful, honest, and harmless. The company values and Constitution both place helpfulness beside honesty and safety. UI implication: pair useful next steps with clear limits where the product context requires them.
- Serve a broad set of affected people. Anthropic’s company page names customers, policymakers, employees, and people affected by the technology in its broad definition of users. UI implication: avoid assuming a single expert audience or treating one public marketing surface as the whole product.
13. Personas
The following are evidence-bounded stakeholder archetypes, not fictional people or behavioral research findings.
Individual learner or problem solver. The Claude overview presents learning through conversation, documents, images, and visual study aids. This archetype needs plain language about what a public feature does; no private-app workflow is inferred.
Team or organization using Claude for work. Anthropic says Claude is a practical tool for businesses, nonprofits, civil-society groups, and their clients. This archetype needs clarity about product purpose and outcomes, while deployment, administration, and pricing behavior remain route-specific.
Person affected by AI systems. Anthropic’s company page explicitly broadens “users” beyond direct customers. This archetype motivates clear safety and policy explanations, but does not establish a visual or interaction variant.
14. States
The supplied capture records only selected/tab-selected and pressed tab behavior, plus tab-panel expansion on the public overview and pricing pages. It does not provide selector-backed empty, loading, error, success, skeleton, or disabled treatments. Those state categories are intentionally left unspecified rather than populated with plausible Claude-like patterns.
15. Motion & Easing
No duration, easing, reduced-motion, streaming, or page-transition value was captured. The only interaction evidence is tab selection/pressed state and tab-panel expansion; it establishes neither an animation curve nor a motion scale.
Verified: 2026-07-13
Tier 1 sources: https://www.anthropic.com/ (marketing); https://claude.com/product/overview (public product overview); https://claude.com/pricing (public pricing); supplied raw artifact artifacts/reference-evidence/claude.json.
Tier 2 sources: https://getdesign.md/claude (directory page; no canonical numeric values promoted); https://styles.refero.design/?q=Anthropic → https://styles.refero.design/style/d469cba4-c448-4a43-a033-883f8bfcdc42 (independent analysis; conflicts recorded in .verification.md).
Context sources: https://www.anthropic.com/company; https://www.anthropic.com/constitution; https://www.anthropic.com/news/claude-new-constitution.
Conflicts unresolved: none
