Design System
Analysis of Anthropic

A warm, editorial system painted on cream with near-black ink, where a single signature clay-orange carries the brand voice and an unusual serif-led body gives the whole site a calm, bookish, paper-like character.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Three proprietary families — Anthropic Serif, Sans, and Mono — substituted here with their nearest Google equivalents (Newsreader, Inter, IBM Plex Mono). The defining choice is serif body copy: hierarchy is built with size and tracking in the serif, and with weight in the sans.

03 — Components

Button Variants

button-primary
The clay accent (#d97757) — Anthropic's one saturated colour, reserved for high-intent moments.
button-dark
The real site primary: near-black on cream, 4px radius, tight 8×16 padding. This is the default CTA.
button-secondary
Hairline outline of ink on canvas — quiet, used alongside a darker primary.
button-pill
Full-radius sand chip for low-emphasis utility actions.
04 — Components

Cards & Surfaces

Surfaces are flat oat and sand tints separated by hairlines, not shadows. Cards round to 16px and lift only on hover with a faint, finely layered shadow.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base unit with a calm 8 / 12 / 16 / 24 / 32 / 48 rhythm — buttons pad to 8×16, sections breathe with generous vertical space.

07 — Foundations

Border Radius

Corners stay tight. A 4px workhorse on buttons and chrome, stepping up through 8–24px for cards and panels, and full-pill for badges.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default: flat surfaces separated by tone, never a shadow.
Level 1 — a finely layered, 1–4% black stack (2px / 4px / 16px). Lift without weight, used on hover.
Level 2 — a deeper version for floating panels and modals, still soft and low-contrast.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; card & listing grids collapse to one, oversized editorial headline drops to display size, gutters tighten to ~22px.
Tablet768–1023pxFour-up grids become two-up; pricing and auth stack to one column; nav condenses.
Laptop1024–1279pxFull four-column grids return; centered ~1200px column with 40px gutters.
Desktop≥ 1280pxMax column width holds; surrounding whitespace grows rather than the content.

Layout note: content is held in a centered ~1200px column with roomy vertical whitespace; sections are divided by tone and hairline rather than by heavy framing, keeping the paper-first character intact at every breakpoint.

Pricing Tiers

Illustrative tiers rendered in the Anthropic system — flat oat cards, a near-black featured plan, clay bullet accents.

Free
$0/mo
Try Claude for everyday tasks and exploration.
  • Chat on web, iOS & Android
  • Access to the latest model
  • Standard usage limits
Pro● Most popular
$20/mo
More usage and tools for daily, serious work.
  • 5× more usage
  • Projects & extended context
  • Early access to new features
Team
$30/seat
Collaboration and admin for organisations.
  • Central billing & admin
  • Higher shared usage
  • Priority support

Data Table

A dense table pattern in the warm-neutral system — mono column headers, hairline rows, sand status pills.

IDModelOwnerStatusWhen
#4821Claude OpusResearchDeployed2h ago
#4820Claude SonnetProductDeployed5h ago
#4819Claude HaikuPlatformIn reviewYesterday
#4818Eval harnessSafetyIn review2 days ago
#4817Tool-use betaAppliedDeployed3 days ago
1–5 of 412
123

Auth Forms

Sign-in patterns on white cards with the faint Level-1 shadow, serif headings, and mono field labels.

Sign in

Welcome back

OR
Create account

Get started with Claude

OR