---
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
1. **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*.
2. **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
1. Start from the ivory canvas and ink text; add oat bands to separate sections.
2. Set one serif statement, then build the rest in the sans.
3. Add pill navigation with hairline borders.
4. 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.