Anthropic Design System Reference

AI Research & Safety

Anthropic Design System

Deliberate, refined, and intellectual — a design language rooted in accessible clarity and sophisticated restraint. Warm earth tones guide intentional moments; generous whitespace breathes meaning into every interface.

Serif-driven typography Warm accent palette 8px spacing grid 4 border radius scales Anthropic Serif + Sans

Foundation

Color Tokens

Anthropic's carefully curated palette of warm earth tones balanced against a crisp neutral foundation, reflecting our commitment to intellectual clarity and accessible design.

Charcoal

#141413

Primary text · Primary CTA bg · Deep neutral

Cream Off-White

#FAF9F5

Page background · Primary surface · Light text

Terracotta

#D97757

Primary accent · Interactive highlights · Success

Earth Brown

#C6613F

Hover states · Elevated interactions · Secondary accent

Sage Green

#788C5D

Contextual highlights · Tertiary accent

Cool Blue

#6A9BCC

Informational state · Secondary context

Mauve

#C46686

Tertiary accent · Special states

Soft Blush

#EBCECE

Subtle backgrounds · Gentle separation

Soft Seafoam

#BCD1CA

Tertiary backgrounds · Delicate separation

Tertiary Surface

#E3DACC

Warm background · Elevated sections

Border Light

#C6C4BA

Default borders · Dividers · Primary stroke

Neutral Medium-Dark

#87867F

Tertiary text · Disabled states

Typography

Type Scale

Anthropic Serif establishes intellectual authority for headings and navigation; Anthropic Sans provides clarity for functional UI. Generous line heights and deliberate weight hierarchy create readable, breathing typographic systems.

Primary Serif Anthropic Serif Headings · Navigation · Body · Authority

Primary Sans Anthropic Sans UI · Labels · Forms · Clarity

Display Build with intent 104px · 300 · 104px

Heading 1 The quick brown fox 60px · 400 · 67px

Heading 3 Section heading 24px · 600 · 31px

Body Large The quick brown fox jumps 24px · 400 · 34px

Body Standard The quick brown fox jumps over the lazy dog 17px · 400 · 26px

Caption Small captions and helper text 12px · 400 · 17px

Button Button label 16px · 400 · 16px

Link / CTA Call to action 18px · 600 · 25px

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 8. Border radii range from sharp (0px) to gentle (16px), matching the system's restrained, intellectual aesthetic.

Spacing Scale

8px xs

12px sm

16px md

20px lg

24px xl

32px 2xl

48px 3xl

64px 4xl

Border Radius

None 0px

SM 4px

MD 8px

LG 16px

Shadows

Base No elevation · Static elements

Hover Dropdowns · Cards on hover · Subtle lift

Elevated Solid background · Modal · Raised

Border Widths

Thin 1px

Medium 2px

Opacity

Full 100%

Secondary 34%

Disabled 50%

Z-index / Layering

Base 1

Raised 2

Dropdown 10

Fixed Nav 101

Modal 1000

Elevation

Depth & Surfaces

Anthropic's depth system relies on solid backgrounds and borders rather than shadows. Three primary surface levels create hierarchy: Cream (base), Warm (elevated), and Dark (special).

Primary Surface

Default page and card background — base layer for all content

L0 · #FAF9F5

Tertiary Surface

Warm background for elevated sections · highlights · special content

L1 · #E3DACC

Dark Surface

Modal overlays · raised containers · darkest elevation level

L2 · #141413

Primary #FAF9F5

Tertiary #E3DACC

Dark #141413

Border #C6C4BA

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — combining serif authority with functional clarity.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #141413 bg · #FAF9F5 text · 8px radius · 8/16px padding · 36px height. Secondary: transparent bg · #C6C4BA border. Ghost: light text on dark context.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #C6C4BA border · 8px radius · 40px height. Focus: #D97757 border · no ring · 17px font.

Card

Content container — elevated surface with border

.card

Research Project

A brief description of this research initiative. It represents our commitment to AI safety and responsible development.

#FAF9F5 bg · #C6C4BA border · 8px radius. Title: 14px/600/#141413. Body: 13px/#87867F. CTA: primary terracotta button.

Badges

Status indicators — Success, Special, Info

.badge

Active Special Info

12px/600 · 4/12px padding · 4px radius. Success: #D97757. Special: #C46686. Info: #6A9BCC.

Guidelines

Do's & Don'ts

Principles for consistent application of the Anthropic design language across all surfaces and contexts.

Do — Embrace

Use serif fonts for primary headings and navigation to establish intellectual authority
Reserve accent colors exclusively for interactive elements and calls-to-action
Maintain generous whitespace around major content blocks (48px–64px padding)
Apply subtle borders (1px) instead of shadows for depth and visual separation
Combine serif and sans thoughtfully: Serif for meaning, Sans for UI clarity
Use the neutral scale (#141413 text, #FAF9F5 background) as the foundation

Don't — Avoid

Don't use multiple accent colors in a single section without clear semantic distinction
Don't apply shadows to static content or non-interactive elements
Don't mix serif and sans fonts within a single heading or text block
Don't reduce whitespace below 16px between major sections
Don't use pure black (#000000) for primary text; use #141413 for softer rendering
Don't apply accent colors as background fills for large areas

anthropic.com

Preview