Design tokens (YAML front matter)

version: alpha
name: Anthropic-Inspired-design-analysis
description: An inspired interpretation of Anthropic's design language — a warm, paper-toned research brand built on ivory and oat surfaces, near-black ink, a custom serif for statements and a custom sans for everything else, with fully rounded pill navigation and almost no shadow.

colors:
  primary: "#141413"
  on-primary: "#faf9f5"
  canvas: "#faf9f5"
  canvas-oat: "#f5f4ed"
  canvas-clay: "#e8e6dc"
  ink: "#141413"
  ink-soft: "#30302e"
  body: "#5e5d59"
  mute: "#87867f"
  faint: "#b0aea5"
  hairline: "#e8e6dc"
  hairline-strong: "#dedcd1"
  border-dark: "#3d3d3a"

typography:
  display-serif:
    fontFamily: anthropicSerif, Georgia, "Times New Roman", serif
    fontSize: 40px
    fontWeight: 400
    lineHeight: 50px
    letterSpacing: -0.4px
  display-sans:
    fontFamily: anthropicSans, "Styrene B", Inter, system-ui, sans-serif
    fontSize: 52px
    fontWeight: 600
    lineHeight: 56px
    letterSpacing: 0px
  heading-md:
    fontFamily: anthropicSans, Inter, system-ui, sans-serif
    fontSize: 24px
    fontWeight: 500
    lineHeight: 32px
    letterSpacing: 0px
  body-lg:
    fontFamily: anthropicSans, Inter, system-ui, sans-serif
    fontSize: 17px
    fontWeight: 400
    lineHeight: 25.5px
    letterSpacing: 0px
  body-md:
    fontFamily: anthropicSans, Inter, system-ui, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0px
  nav-label:
    fontFamily: anthropicSans, Inter, system-ui, sans-serif
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0.13px

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  xl: 16px
  2xl: 24px
  pill: 9999px

spacing:
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  section: 96px

components:
  nav-pill:
    backgroundColor: "{colors.canvas-oat}"
    textColor: "{colors.border-dark}"
    borderColor: "{colors.hairline}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.pill}"
    padding: "8px 12px 8px 16px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.pill}"
  dark-band:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

Design System Inspiration of Anthropic

Overview

Anthropic presents itself as a research institution first and a product company second, and the surface follows that order. The page reads like well-set paper: an ivory canvas ({colors.canvas} #faf9f5), a slightly deeper oat band ({colors.canvas-oat} #f5f4ed) and a warm near-black ink ({colors.ink} #141413) that is never pure black. Nothing on the page is cold — every gray is pulled toward olive or sand, so even the dividers feel like the edge of a sheet of paper rather than a UI rule.

The opening statement is set in a custom serif (“AI research and products that put safety at the frontier.”), long and sentence-like, while the rest of the system — navigation, section titles, body, labels — uses a custom humanist sans. That split is the brand: the serif carries conviction, the sans carries information.

Measured on the live homepage, about 45% of painted area is the ivory canvas, 40% is the oat band, and roughly 20% is the near-black dark band used for the footer and feature panels. There is effectively no accent color on the marketing surface; emphasis comes from the ink-on-paper contrast and from illustration, not from a brand hue.

Key Characteristics:

Warm paper palette: ivory, oat and clay surfaces with olive-tinted grays; no pure white panels, no pure black text.
Serif display statement + humanist sans for everything else.
Pill-shaped navigation chips (9999px radius) with a 1px clay border on an oat fill.
Almost no shadow. Depth comes from surface steps (ivory → oat → ink), not elevation.
Restrained motion and generous vertical whitespace; long single-column statements.

Colors

Surface

Canvas ({colors.canvas} — #faf9f5): The page background. Warm ivory, the most-painted color on the site.
Canvas Oat ({colors.canvas-oat} — #f5f4ed): Section bands and the fill of navigation pills.
Canvas Clay ({colors.canvas-clay} — #e8e6dc): Inset panels, hover fills and the lightest divider tone.
Ink Band ({colors.primary} — #141413): The dark band for footers, cookie panels and feature blocks. Text on it switches to {colors.on-primary}.

Text

Ink ({colors.ink} — #141413): Headlines and primary text.
Ink Soft ({colors.ink-soft} — #30302e): Strong secondary text and nav labels on light surfaces.
Body ({colors.body} — #5e5d59): The most-used text color by volume — paragraphs and descriptions.
Mute ({colors.mute} — #87867f): Dates, metadata, captions.
Faint ({colors.faint} — #b0aea5): Disabled text and the lowest-priority labels.

Lines

Hairline ({colors.hairline} — #e8e6dc): Borders on pills and cards on light surfaces.
Hairline Strong ({colors.hairline-strong} — #dedcd1): List and table dividers.
Border Dark ({colors.border-dark} — #3d3d3a): Dividers inside the dark band, and nav-pill label color.

Accent

The marketing surface has no saturated accent. When a brand hue is needed (illustration, product imagery), use a muted terracotta in the family of #d97757 sparingly and never for body links or buttons. Links are distinguished by underline, not color.

Typography

Font Family

A custom serif (served as anthropicSerif) for the hero statement and editorial pull-quotes. Weight 400 only, slight negative tracking (-0.4px at 40px). Substitute: Tiempos Text, Source Serif 4 or Georgia.
A custom humanist sans (served as anthropicSans) for headings, navigation, body and labels. Weights 400, 500 and 600. Substitute: Styrene B if licensed, otherwise Inter or Söhne-like grotesques.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-sans}`	52px	600	56px	0	Section titles (“2026 Public Benefit Report”).
`{typography.display-serif}`	40px	400	50px	-0.4px	Hero statement; long, sentence-case, can run several lines.
`{typography.heading-md}`	24px	500	32px	0	Card and article titles.
`{typography.body-lg}`	17px	400	25.5px	0	Lead paragraphs and panel headings.
`{typography.body-md}`	14px	400	20px	0	Default body and descriptions.
`{typography.nav-label}`	13px	400	20px	0.13px	Navigation pills, buttons, metadata.

Principles

The serif is for statements, the sans is for structure. Do not set navigation or buttons in the serif.
Sentence case everywhere, including section titles. No all-caps headings.
Body text sits in {colors.body}, not {colors.ink}; the softer gray is what makes long reading comfortable on ivory.

Layout

Spacing System

Base unit: 4px, used mostly in 8px steps.
Section padding: 64–96px top and bottom between bands; the hero statement gets the most air.
Pill padding: 8px 12px 8px 16px (the extra right padding leaves room for a chevron).

Grid & Container

Max width: the page frame runs to 1920px with wide side gutters; text columns stay narrow (around 600–720px) so statements read as paragraphs, not banners.
Columns: news and research listings use 3-up cards on desktop, collapsing to 1-up on mobile.

Whitespace Philosophy

Whitespace is the main design material. Sections are separated by surface changes (ivory → oat → ink) and generous padding rather than rules or boxes.

Elevation & Depth

Level	Treatment	Use
0	Flat, no border	Page sections on ivory or oat.
1	1px `{colors.hairline}` border	Nav pills, cards, inputs.
2	Surface flip to `{colors.primary}`	Footer, cookie panel, feature blocks.
Focus	`0 0 0 2px {colors.canvas}` ring	Keyboard focus on dark surfaces.

Drop shadows are essentially absent — the only shadow measured is a 2px focus ring.

Shapes

Border Radius Scale

{rounded.pill} 9999px — navigation chips, primary buttons, tags.
{rounded.md} 8px / {rounded.lg} 10px — cookie and settings buttons, small cards.
{rounded.xl} 16px / {rounded.2xl} 24px — media and illustration cards.
{rounded.sm} 4px — inputs and inline controls.

Components

Navigation

nav-pill — each top-level section (News, Research, Policy, Commitments, Company) is a pill.

Fill {colors.canvas-oat}, label {colors.border-dark} in {typography.nav-label}, 1px {colors.hairline} border, {rounded.pill}, padding 8px 12px 8px 16px. Dropdown items carry a trailing chevron.

“Try Claude” — styled as a nav pill rather than a loud CTA; the brand keeps the product link calm.

Buttons

button-primary — ink pill: {colors.primary} fill, {colors.on-primary} label, {rounded.pill}.

button-outline-dark — on the dark band: transparent fill, 1px {colors.on-primary} border and label, {rounded.md} 8px, padding 8px 16px.

Cards

News and research cards sit on ivory or oat with a hairline border or none at all, an illustration on top, a date in {colors.mute} and a title in {typography.heading-md}.

Illustration

Hand-drawn, organic line-and-shape illustrations in warm, earthy tones accompany research topics. They carry all of the color on the page.

Do’s and Don’ts

Do

Keep every surface warm: ivory, oat, clay and warm ink.
Use the serif for one big statement per view, the sans for everything else.
Use pills for navigation and primary actions.
Separate sections with surface changes and whitespace.
Keep body copy in {colors.body} #5e5d59 for a soft reading tone.

Don’t

Don’t use pure white #ffffff panels or pure black #000000 text.
Don’t add a bright accent color to buttons or links.
Don’t use heavy drop shadows or glossy gradients.
Don’t set navigation or buttons in the serif.
Don’t crowd the hero with multiple CTAs; one calm link is enough.

Responsive Behavior

Navigation pills collapse into a menu button below tablet width.
The serif hero statement steps down to about 28–32px on mobile while keeping its line length.
Card grids go 3 → 2 → 1 columns; section padding drops to about 48px.

Iteration Guide

Start from the ivory canvas and ink text; add oat bands to separate sections.
Set one serif statement, then build the rest in the sans.
Add pill navigation with hairline borders.
Add warm illustrations last — they are the only color.

Known Gaps

Measured from the public homepage at 1440px; product (claude.ai) surfaces use a related but separate system.
The custom fonts are proprietary; sizes above are from computed styles and substitutes are approximate.
The terracotta accent is inferred from brand imagery, not measured from the homepage.

Anthropic

Palette

At a glance

Design System · Anthropic

Design System Inspiration of Anthropic

Overview