---
site: Home \ Anthropic
url: "https://anthropic.com"
generated_at: "2026-06-12T12:49:59.179Z"
generator: "designlang@12.16.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#d97757"
    secondary: "#faf9f5"
    accent: "#f5e3c7"
    background: "#faf9f5"
    foreground: "#000000"
  typography:
    sans: Anthropic Sans
    mono: Anthropic Mono
    base: 12
  spacing:
    scale: "[2, 21, 31, 45, 53, 58, 67, 84, 100, 142]"
  radii:
    md: 8
    lg: 16
    xl: 24
    full: 1600
  shadows:
    sm: "rgba(0, 0, 0, 0.01) 0px 2px 2px 0px, rgba(0, 0, 0, 0.02) 0px 4px 4px 0px, rgba(0, 0, 0, 0.04) 0px 16px 24px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.59), dressed in **flat** material.

> "Announcing Fable 5"

The author writes in a **friendly** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `feature-grid → nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → hero → hero → content → footer → nav → pricing → pricing → testimonials → content`.

Source: <https://anthropic.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#d97757` | 3 |
| secondary | `#faf9f5` | 444 |
| accent | `#f5e3c7` | 1 |
| background | `#faf9f5` | — |
| foreground | `#000000` | — |

**Neutrals:** `#141413` · `#b0aea5` · `#000000` · `#87867f` · `#f0eee6`

**Total unique colors detected:** 13.

# Typography

**Families**
- `Anthropic Sans` · 584 uses
- `Anthropic Serif` · 553 uses
- `Anthropic Mono` · 6 uses
- `Times` · 1 uses

**Body size:** `12px` / line-height `16.8px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64.6857px` | `400` | `71.1543px` |
| h2 | `57.7306px` | `700` | `63.5037px` |
| h3 | `24px` | `400` | `33.6px` |
| h4 | `20px` | `400` | `28px` |

# Layout

**Scale:** `2px` · `21px` · `31px` · `45px` · `53px` · `58px` · `67px` · `84px` · `100px` · `142px`

**Layout primitives:** 13 grid containers · 274 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0.01) 0px 2px 2px 0px, rgba(0, 0, 0, 0.02) 0px 4px 4px 0px, rgba(0, 0, 0, 0.04) 0px 16px 24px 0px`

**Z-index layers:** 5

# Shapes

**Radius scale**
- `md` — `8px`
- `lg` — `12px`
- `lg` — `16px`
- `xl` — `24px`
- `full` — `1600px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `badges` · `switches`


# Do's and Don'ts

**Do's**
- Use `privacy` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **we-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 2 contrast pair(s) fail WCAG AA on the source itself.
- Don't 4 font families — consider limiting to 2 (heading + body).
- Don't 2 wcag contrast failures.
- Don't 91 !important rules — prefer specificity over overrides.
- Don't 81% of css is unused — consider purging.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.16.0 from <https://anthropic.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._