What is Claude's primary brand color?

Claude's signature color is a warm coral at #cc785c, with an active press state at #a9583e and a disabled cream-tinted #e6dfd8. The coral carries every primary CTA, full-bleed callout cards, and inline links in body copy. It is deliberately warm and slightly muted — never cyan or saturated red — to counter-position against OpenAI's slate, Google's saturated blue, and Microsoft's corporate cyan. The system uses it scarcely on individual buttons and generously on entire coral surface bands.

What typography does Claude use, and what should I use if Copernicus isn't available?

Claude runs Copernicus (or Tiempos Headline) as a slab-serif display at weight 400 for h1 through h3, paired with StyreneB or Inter as the humanist sans body. JetBrains Mono handles code. Display sizes ladder from 28px to 64px with negative letter-spacing from -0.3px to -1.5px — the tracking is non-negotiable. If Copernicus is unavailable, Cormorant Garamond at weight 500 with -0.02em tracking is the closest open-source substitute. For StyreneB, Inter or Söhne work cleanly.

Why does Claude alternate between cream and dark navy surfaces?

The system uses three surface modes that rotate page-by-page: cream canvas #faf9f5 as the default floor, cream feature cards #efe9de one shade darker, and dark navy product surfaces #181715 for code editor mockups, model showcase cards, and pre-footer CTAs. The cream-to-dark contrast is the page's pacing rhythm. Dark surfaces are where Claude shows its actual product chrome — code blocks, terminal output, model comparison tables — rather than abstract marketing illustrations.

Can I use this DESIGN.md to build my own React app?

Yes — the file is structured to feed into Claude, Cursor, or any AI tool that reads design tokens. The agent reproduces Claude's editorial voice (serif headlines, cream canvas, coral CTAs, dark code-window cards) instead of a generic shadcn theme. Every color, type style, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or your own component library. Border radii ladder from 4px buttons through 8px CTAs, 12px cards, and 16px hero illustrations.

What's missing from this DESIGN.md spec?

A handful of items documented in the Known Gaps section. Copernicus and StyreneB are licensed Anthropic typefaces with no public web fonts — substitutes are listed but not exact. The Anthropic radial-spike-mark is treated as a logo asset, not a system token. Animation and transition timings (chat message reveals, code typewriter, agentic-flow diagrams) are out of scope. Form validation states beyond focus are not extracted. The claude.ai product surface adds chat bubbles, message tools, and conversation sidebars not captured in this marketing-surface document.

Claude Design System

Anthropic's Claude design system as a DESIGN.md file.

About Claude DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source claude.com

AI & LLM Platforms
Developer Tools & IDEs

Claude's design system is built around one tension: a warm cream canvas paired with dark navy product surfaces, joined by a single coral accent. No cool grays. No pure white. The cream tint #faf9f5 is the brand's defining choice — a deliberate counter-positioning against every other AI tool in the category, which leans on blue or slate.

This page packages all of that into a single DESIGN.md file. Inside: 24 color tokens, 15 type styles built on Copernicus serif and StyreneB sans, 7 corner radii, 9 spacing values, and 30 components — every piece you need to build something that looks like Anthropic.

Download the file and feed it to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that match Claude's editorial voice — serif display headlines, coral CTAs, dark navy code-window cards — rather than a generic SaaS theme. Or use it as a reference for your own work.

What makes it distinct

Cream canvas #faf9f5 with warm ink #141413the defining counter-positioning against every cool-gray AI brand
Coral primary #cc785c used scarcely on CTAs and generously on full-bleed coral callout cards, never as a third accent
Copernicus slab-serif display at weight 400 with -1.5px trackingthe literary voice that separates Claude from sans-led SaaS
Three surface modes alternate page-by-pagecream canvas, cream cards #efe9de, and dark navy product mockups #181715
Generous 32px card padding and 96px section rhythmpacing reads as long-form magazine column, not marketing template

Live at claude.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

claude.com

Explore Claude

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Claude design system FAQ

Common questions about Claude's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Claude in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→