What is Anthropic's primary brand color?

The marketing homepage's primary is slate ink #141413 on ivory cream #faf9f5 — there's no chromatic CTA in the traditional sense. But Anthropic's full design system declares 8 accent swatches on `:root` that surface on research entries, the Economic Index, and news sub-pages: clay #d97757 (warm terracotta — the strongest chromatic accent), fig #c46686 (muted rose), cactus #bcd1ca (sage), sky #6a9bcc (mid-blue for AI-safety category tiles), plus deep #c6613f, olive, heather, and coral. The accent palette reads dustier than fully-saturated brand colors — restraint is the system position, even when chroma is allowed.

What typography does Anthropic use, and what should I substitute?

Anthropic ships three custom typefaces. Anthropic Serif handles the 90px section displays AND the 24px body prose — using serif for body is the system's most distinctive typographic move. Anthropic Sans (regular for nav, bold for the impact hero) handles short-form chrome. Anthropic Mono in uppercase carries eyebrow metadata and timestamps. If the proprietary faces are unavailable, Georgia or Tiempos Text substitute for Anthropic Serif, Inter for Anthropic Sans, and JetBrains Mono for Anthropic Mono.

Why does the page alternate between cream and black?

Anthropic uses two full-bleed surface modes that swap section-to-section: cream #faf9f5 carries text-driven sections (hero, body prose, research entries), and true black #000000 carries the cinematic feature bands (Project Glasswing's hexagonal mesh illustration, model showcase cards). The contrast is the page's structural device — no gradients, no shadows, no decorative dividers. Each band swap signals a topic shift. The ivory-on-black inversion is the system's only visual flourish.

Why is there a backslash in the Anthropic wordmark?

The letter I in ANTHROPIC is replaced with a literal `\` character — the wordmark renders as ANTHROP\C across every surface. It's a typographic mark, not a logo asset, so the slash inherits the same Anthropic Sans weight and color as the surrounding letters. The choice reads as code-adjacent (the backslash is the literal escape character in most programming languages), aligning the brand identity with software craft without leaning on the gradients or geometric marks of competitor AI brands.

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

Yes — drop the file into Claude, Cursor, or Copilot and ask for a page in Anthropic's style. The agent reproduces the monochrome chrome, the three-typeface stack, the cream-to-black band rhythm, and the serif-body editorial voice rather than a generic shadcn theme. Every hex value, font name, radius, and spacing is a quoted token you can paste into Tailwind config or CSS variables. The 8px primary radius and 16px secondary radius are the only two shape values you need.

What's not in this DESIGN.md?

Several things, by design. Anthropic Serif, Sans, and Mono are proprietary typefaces with no public web fonts — substitutes are recommended but not exact. Motion (the subtle hover lifts on cards, the staggered fade-in of section content) is not captured. Form validation states beyond focus are out of scope. Color usage on the research detail pages and the Economic Index dashboards diverges from this landing-page spec — those surfaces add chart palettes (data-viz blues, mint accents) not present on the marketing canvas.

Anthropic Design System

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

About Anthropic DESIGN.md

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

AI & LLM Platforms

Anthropic's corporate site is what an AI lab's identity looks like when it refuses every category convention. The homepage paints slate ink (#141413) on ivory cream (#faf9f5) and nothing else — no gradients, no brand purple, no signature blue. Where most AI companies signal authority with cool-blue depth and saturated CTAs, Anthropic signals it with monochrome restraint and a serif body face that reads more like a printed essay than a marketing surface.

The system itself is richer than the front door suggests. Beyond the homepage's 6 painted colors, Anthropic declares 15 more on `:root` — including 8 muted accent swatches (clay, fig, cactus, sky, heather, olive, manilla, kraft) that surface only on research entries, the Economic Index dashboards, and news sub-pages. This DESIGN.md captures both layers: 21 color tokens, 11 typography levels split across three custom typefaces (Anthropic Serif, Sans, Mono), a 4-step radius scale, 8-step spacing rhythm, and 22 component definitions covering buttons, surfaces, nav, and the cream-to-black band alternation that paces every page.

Feed the file to Claude, Cursor, or Copilot and the agent reproduces the editorial voice — black slate CTAs, ivory canvas, serif body prose, mono uppercase labels — rather than a generic AI-startup theme. Or use it as an audit: a benchmark for how much chromatic noise your own design system carries that Anthropic deliberately holds in reserve.

What makes it distinct

Monochrome marketing surfaceslate #141413 on cream #faf9f5 paints the homepage, with no chromatic CTA in sight
Dormant 8-color accent paletteclay #d97757, fig #c46686, cactus #bcd1ca, sky #6a9bcc and 4 more declared in :root but scoped to research and Economic Index sub-pages
Cream-and-black band rhythmfull-bleed cream sections alternate with full-bleed #000000 black sections, replacing the gradient heroes other AI brands lean on
Three-typeface stackAnthropic Serif (90px section displays, 24px body), Anthropic Sans bold (impact hero, nav), Anthropic Mono uppercase (eyebrow metadata)
Backslash glyph wordmarkthe letter I in ANTHROP\C is a literal `\` character, codified across the brand

Live at anthropic.com

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

anthropic.com

Explore Anthropic

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.

Other

Specialty colors.

Anthropic design system FAQ

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

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

Browse all design systems

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

Anthropic — official site

The live source of this design system. Visit to see the cream-to-black band rhythm in motion.

The DESIGN.md specification

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

Use Anthropic 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 --:--:--→