--- version: alpha name: "Anthropic" description: "Anthropic's marketing site reads like a literary periodical — cream `#faf9f5` ground, custom Anthropic Sans + Anthropic Serif (yes, body in serif), warm earth-toned swatch system, generous editorial whitespace. The most editorial AI brand on the internet — sets body in serif at 20px / 1.4 line-height, headlines at 64–96px / 700 weight, and reserves the signature clay `#cc785c` for accent only. Where every other AI lab reaches for purple gradients or chrome-on-black, Anthropic ships kraft-manilla-fig-heather-cactus-olive — a 10-color earth palette treating the marketing site as a continuous editorial publication. New Yorker meets MIT Technology Review meets a research lab." colors: bg: "#faf9f5" bg-secondary: "#f0eee6" bg-secondary-hover: "#e8e6dc" surface: "#ffffff" text: "#141413" text-strong: "#000000" text-medium: "#3d3d3a" text-soft: "#5e5d59" text-faint: "#87867f" text-muted: "#b0aea5" brand: "#cc785c" brand-warm: "#d97757" brand-deep: "#a04a2c" on-brand: "#faf9f5" swatch-clay: "#d97757" swatch-kraft: "#d4a27f" swatch-manilla: "#ebdbbc" swatch-oat: "#e3dacc" swatch-coral: "#ebcece" swatch-fig: "#c46686" swatch-heather: "#cbcadb" swatch-cactus: "#bcd1ca" swatch-olive: "#788c5d" swatch-sky: "#6a9bcc" link: "#141413" link-hover: "#cc785c" selected-bg: "#f0eee6" disabled: "#b0aea5" border: "rgba(20, 20, 19, 0.10)" border-strong: "rgba(20, 20, 19, 0.20)" border-subtle: "rgba(20, 20, 19, 0.05)" border-clay: "rgba(204, 120, 92, 0.30)" success-bg: "#bcd1ca" success-text: "#3d5a47" warning-bg: "#ebdbbc" warning-text: "#7a5e1f" danger-bg: "#ebcece" danger-text: "#8a3a3a" info-bg: "#cbcadb" info-text: "#3a3a6a" typography: display: fontFamily: "Anthropic Sans" fontSize: "96px" lineHeight: 1.4 letterSpacing: "-0.02em" body: fontFamily: "Anthropic Serif" fontSize: "20px" lineHeight: 1.4 mono: fontFamily: "Anthropic Mono" rounded: button: "8px" card: "12px" pill: "9999px" spacing: xs: "1px" sm: "2px" md: "6px" lg: "12px" xl: "20px" --- ## Overview ## Overview Anthropic's marketing site is the antithesis of "AI startup with a purple gradient." Open the homepage and you land on cream `#faf9f5` — a paper-warm canvas that feels closer to a literary quarterly than a tech product page. The first headline holds at 64–96px in **Anthropic Sans**, set at weight 700 with negative tracking; the body that follows it is set in **Anthropic Serif** at 20px / 1.4 line-height. Reading body copy in serif is the brand's defining typographic move and the single decision that pulls Anthropic out of the AI-startup register and into the New-Yorker register. The palette extends the editorial conceit. Where Linear runs near-black canvas + Inter Variable, where OpenAI runs pure white + OpenAI Sans, where Stripe runs cool-white + light Söhne — Anthropic ships **cream + serif body + earth tones**. The full swatch system runs ten named hues (clay, kraft, manilla, oat, coral, fig, heather, cactus, olive, sky), all desaturated and warm, all treated as first-class design tokens rather than illustration accidents. Marketing graphics use these swatches the way a magazine spot-illustrates a feature — kraft becomes a column background, fig pull-quotes a stat, cactus stamps a callout. The page reads like *MIT Technology Review* rather than a SaaS landing. The signature accent is **clay `#cc785c`** — a terracotta that sits between rust, persimmon, and fired pottery. Anthropic uses it sparingly and almost always as punctuation: a wordmark stroke, an underline on a citation, a single small CTA on a hero. Primary call-to-action buttons invert the canvas — slate-dark `#141413` on cream — so that the page never accidentally lets the clay accent collapse into chrome. The discipline keeps the cream-and-clay pairing recognisable from a thumbnail. Atmospheric vocabulary that captures the feeling: *cream-paper, broadsheet-narrow, earth-tone, considered, magazine-quiet, hand-set, MIT-Tech-Review, pull-quote-page, columned-prose, sans-headline-serif-body, terracotta-restrained.* Every surface lands as if it were laid out by an editor rather than a product designer. **Key Characteristics** - Cream `#faf9f5` canvas — never pure white, always paper-warm - Body copy set in **serif** — the AI-industry rarity that defines the brand - Custom Anthropic type trio (Sans, Serif, Mono) — proprietary identity - Clay `#cc785c` accent reserved for punctuation, never fill - 10-color earth-tone swatch system (kraft, manilla, fig, heather, cactus…) - 720px prose width even on 1432px page — broadsheet-narrow reading column - 88–160px section gutters — magazine-paced rhythm - Slate-dark `#141413` text, never pure black — warmer ink - Editorial illustrations as decorative, not infographic - Restraint as a brand asset — what Anthropic *doesn't* show is the loudest signal ## Colors ### Primary - **bg** `#faf9f5` — the cream ivory-light canvas; defining backdrop, never substituted for `#ffffff`. - **text** `#141413` — slate-dark; warmer than `#000` so type doesn't fight the cream. - **bg-secondary** `#f0eee6` — ivory-medium for elevated panels and lifted sections. - **brand-cta-bg** `#141413` — primary CTA inverts the canvas exactly (slate on cream). - **on-cta** `#faf9f5` — cream-tinted label on slate; never pure white. ### Brand & Accent - **brand** `#cc785c` — clay terracotta, the signature. Citations, underlines, brand mark. - **brand-warm** `#d97757` — brighter clay swatch, used in illustrations. - **brand-deep** `#a04a2c` — pressed/active state. - **swatch-fig** `#c46686` — accent stamp for special features. - **swatch-heather** `#cbcadb` — info-callout fill. - **swatch-cactus** `#bcd1ca` — success / nature-of-care register. - **swatch-olive** `#788c5d` — masculine-warm fill, rare. ### Earth Tone Swatch System (the 10-color editorial palette) - **clay** `#d97757`, **kraft** `#d4a27f`, **manilla** `#ebdbbc`, **oat** `#e3dacc`, **coral** `#ebcece`, **fig** `#c46686`, **heather** `#cbcadb`, **cactus** `#bcd1ca`, **olive** `#788c5d`, **sky** `#6a9bcc`. Treat these as first-class tokens — `var(--swatch--kraft)`, not `#d4a27f`. Editorial graphics, illustration fills, and section grounds reach for them; the 10 tones are the brand. ### Interactive - **link** `#141413` — slate-dark, underlined; serif italic when in body copy. - **link-hover** `#cc785c` — clay on hover; the only interactive moment that introduces colour. - **selected-bg** `#f0eee6` — selected nav state, elevated panel. - **disabled** `#b0aea5` — slate-muted; disabled control text. ### Neutral Scale - **slate-dark** `#141413` — primary text and high-emphasis labels. - **slate-medium** `#3d3d3a` — secondary heading colour, body emphasis. - **slate-light** `#5e5d59` — supporting copy, captions. - **slate-faint** `#87867f` — eyebrows, helper text. - **slate-muted** `#b0aea5` — disabled, footer microcopy. ### Surface & Borders - **surface-0 (page)** — `#faf9f5` cream. - **surface-1 (panel)** — `#f0eee6` ivory-medium. - **surface-2 (card)** — `#ffffff` white card lift. - **border** `rgba(20, 20, 19, 0.10)` — default hairline. - **border-strong** `rgba(20, 20, 19, 0.20)` — outlined buttons, dividers under hero. - **border-subtle** `rgba(20, 20, 19, 0.05)` — quietest separation. ### Shadow Colors Anthropic shadows are warm-tinted and minimal. Cards lift off cream by **value contrast alone** (white-on-cream); explicit shadows appear only on overlays and modal layers, and they're tinted with low-opacity slate (`rgba(20,20,19,0.06)` rather than neutral grey). The brand never uses cool blue-tinted shadows — that would crack the warm temperature of the page. ### Semantic - **success** — bg `#bcd1ca` (cactus), text `#3d5a47`, border `rgba(120, 140, 93, 0.30)`. - **warning** — bg `#ebdbbc` (manilla), text `#7a5e1f`, border `rgba(212, 162, 127, 0.40)`. - **danger** — bg `#ebcece` (coral), text `#8a3a3a`, border `rgba(196, 102, 134, 0.30)`. - **info** — bg `#cbcadb` (heather), text `#3a3a6a`, border `rgba(106, 155, 204, 0.30)`. Note the unusual-but-distinctive choice: semantic colours come *from* the editorial palette, not from a separate Material/Tailwind ladder. Success isn't green-500; it's cactus. ## Typography ### Font Family - **Display & UI**: `"Anthropic Sans", Arial, sans-serif` — geometric humanist sans, custom-cut. Closer in proportions to Inter than to Geist; slightly more relaxed terminals than the SF-tech default. - **Body & Editorial**: `"Anthropic Serif", "Tiempos", Georgia, serif` — custom transitional serif used at weight 400/500. **This is the brand's signature.** - **Mono**: `"Anthropic Mono", "Söhne Mono", ui-monospace, monospace` — for code, data, tabular numerals. - **OpenType features**: `ss01` for stylistic alternate `a` in Sans display sizes; `liga` and `kern` always on; `tnum` and `zero` enabled in mono (tabular figures, slashed zero). ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | Anthropic Sans | 96px | 700 | 1.05 | -0.02em | ss01 liga | Homepage hero ceiling | | Display | Anthropic Sans | 80px | 700 | 1.05 | -0.02em | ss01 | Section intro at scale | | H1 | Anthropic Sans | 64px | 700 | 1.10 | -0.015em | liga | Page title | | H2 | Anthropic Sans | 48px | 600 | 1.15 | -0.01em | liga | Major section | | H3 | Anthropic Sans | 32px | 600 | 1.25 | normal | — | Sub-section | | H4 | Anthropic Sans | 24px | 600 | 1.30 | normal | — | Card heading | | H5 | Anthropic Sans | 20px | 600 | 1.40 | normal | — | Inline emphasis | | Eyebrow | Anthropic Sans | 13px | 500 | 1.40 | 0.04em | uppercase | Section pre-label | | Body Large | Anthropic Serif | 24px | 400 | 1.40 | normal | onum | Lede paragraph | | Body | Anthropic Serif | 20px | 400 | 1.40 | normal | onum | Default magazine body | | Body Small | Anthropic Serif | 18px | 400 | 1.50 | normal | onum | Captions, sidebars | | Caption | Anthropic Sans | 14px | 400 | 1.40 | normal | — | Image captions | | Caption Tabular | Anthropic Mono | 14px | 500 | 1.40 | normal | tnum | Stats, data labels | | Label | Anthropic Sans | 13px | 500 | 1.30 | normal | — | UI labels | | Pull Quote | Anthropic Serif | 32px | 500 | 1.30 | normal | italic | Editorial pull-quote | | Code | Anthropic Mono | 15px | 400 | 1.55 | normal | tnum zero | Inline + block | | Code Micro | Anthropic Mono | 12px | 400 | 1.40 | normal | — | Footnote refs | ### Principles - **Serif body is non-negotiable.** Anthropic Serif at 20px / 1.4 line-height is the visual signature; switching body to sans collapses the brand into the AI-startup register. - **Sans for chrome, serif for content.** Nav, buttons, labels, eyebrows, UI = Anthropic Sans. Headlines, body copy, pull-quotes = Anthropic Serif. - **Weight 700 only for display.** Headlines hit 700; subheads 600; body 400. The brand never asks weight to do shouting work. - **Negative tracking scales with size.** -0.02em at 80–96px, -0.015em at 64px, -0.01em at 48px, normal at 24px and below. The compression mirrors broadsheet masthead typography. - **Body width capped at 720px** even when the page is 1432px wide — magazine reading column. - **OpenType discipline**: `onum` (old-style figures) in serif body so numbers sit visually with letters; `tnum` (tabular figures) in mono for data alignment; `ss01` for the alternate single-storey `a` in Sans display. - **Italics in body, never in display.** The Serif italic carries quoted titles, gentle emphasis, and pull-quotes; the Sans display never italicises. - **Print-grade defaults.** 20px body, 1.4 line-height, 720px column — these are *magazine* metrics, not blog metrics. ## Layout ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 16, 24, 32, 48, 64, 80, 96, 128, 160 — Fibonacci-adjacent. - **Density observation**: Anthropic is *under-dense* by tech-page standards. Headlines float in 96–128px of margin; body paragraphs sit on 24px line gaps. ### Grid & Container - **Page max width**: `1432px` — a deliberate odd number that reads as "broadsheet" rather than the standard 1280/1200/1440. - **Site gutter**: `clamp(32px, 6vw, 80px)` — generous on desktop, accommodating on mobile. - **Grid**: 12 columns with 24px gutters. Hero blocks span full width; capability rails span 8 columns; sidebars span 4. - **Hero treatment**: full-bleed cream, 96px headline, body confined to a 720px column anchored left of centre. ### Whitespace Philosophy The whitespace *is* the brand asset. Anthropic deliberately under-fills pages so headlines have room to breathe. The visual density is closer to a printed magazine spread than to a SaaS landing — and that's the point. Section gutters run **88–160px** between major editorial blocks; minor blocks sit on 64–80px gaps; intra-section spacing uses 24–48px. ### Section Cadence - Hero (cream) → Capability Rail (white card grid on cream) → Editorial Essay (cream, 720px column) → Swatch Block (full-bleed earth-tone) → Footer (ivory-medium). - The earth-tone swatch block — a full-bleed kraft, manilla, or heather panel — appears once or twice per page as a chromatic punctuation mark. - Cream-on-cream sections separated by 1px slate-faint hairlines or by spacing alone. ### Breakpoints | Name | Width | Use | |---|---|---| | Mobile | < 640px | Single column, full-bleed sections | | Tablet | 640–1024px | 2-column rails, narrower gutters | | Desktop | 1024–1280px | Full 12-col grid, 720px prose | | Wide | 1280–1432px | Site max width hits | | Ultra | > 1432px | Page locks to 1432, gutters expand | ### Touch Targets - Minimum tap target: 44×44px (WCAG AAA). - Buttons: 48px minimum height on mobile (12px vertical padding × 2 + line-height). - Nav link tap area: 44×44px even when visual padding is smaller. ### Collapsing Strategy - **Header**: full nav at ≥1024px; hamburger sheet below. - **Hero**: 96px headline → 64px → 48px across desktop/tablet/mobile. - **Capability grid**: 3-up at desktop, 2-up at tablet, 1-up at mobile. - **Body width**: 720px → fluid 90vw at mobile. - **Section spacing**: 160px → 96px → 64px across sizes. ### Image Behavior - Editorial illustrations use `srcset` with 1x/2x/3x for crisp swatch fills. - Hero imagery uses `aspect-ratio` to prevent layout shift. - Lazy-loading on below-fold images; eager on hero. ### Container Queries Used inside capability cards to switch layout when card width crosses 320px (icon-left vs. icon-top). ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Value-contrast (white card on cream) | Editorial cards, capability tiles | | 2 | `rgba(20,20,19,0.04) 0 1px 3px` | Sticky nav, dropdowns | | 3 | `rgba(20,20,19,0.06) 0 4px 12px` | Hover-lifted cards | | 4 | `rgba(20,20,19,0.08) 0 12px 32px -8px` | Overlay menus, popovers | | 5 | `rgba(20,20,19,0.08) 0 24px 64px -16px` | Modals, dialogs | ### Shadow Philosophy Anthropic's depth is **warm-tinted and minimal**. Cards lift off cream by *value contrast alone* — white on cream provides separation without explicit shadow. When shadows do appear (modals, popovers), they're tinted with low-opacity slate-dark (`rgba(20,20,19,0.04)` to `0.08`), never neutral grey, and never blue-tinted. The brand reads as paper, not interface — the same reason heavy drop-shadows would feel wrong: paper doesn't drop-shadow against paper. ## Shapes | Tier | Value | Use | |---|---|---| | Micro | 2px | Slim chip corners, decorative dividers | | Standard (sm) | 4px | Compact chips, status pills, inline tags | | Comfortable (md) | 8px | Buttons, inputs, dropdowns — the dominant `--radius--main` | | Relaxed (lg) | 12px | Modals, code blocks, callouts | | Featured (xl) | 16px | Cards, swatch tiles, editorial pull-boxes | | Pill | 9999px | Used sparingly — rare status pills only | Anthropic's signature radius is **8px** on buttons and **16px** on cards. There are no zero-radius surfaces except editorial section dividers (1px hairlines). Compound radii are rare; the system reads as a flat ladder rather than a per-corner asymmetry. ## Components ### Buttons **Primary (Slate)** - Background: `#141413` slate-dark. - Text: `#faf9f5` cream-tinted, Anthropic Sans 500 / 16px. - Padding: `12px 24px`. Radius: `8px`. Border: `1px solid #141413`. - Hover: bg → `#3d3d3a`; transition `200ms ease-standard`. - Active: bg → `#000000` (rare absolute-black for the pressed beat). - Use: Primary CTA — *Get started, Read the paper, Talk to sales.* **Secondary (Outlined)** - Background: transparent. Text: `#141413`. Border: `1px solid #141413`. - Same padding, radius, font as primary. - Hover: bg → `rgba(20,20,19,0.05)`. - Use: Twin to primary — *Read more, Watch demo.* **Tertiary (Quiet)** - Background: transparent. Text: `#141413`. Border: `1px solid rgba(20,20,19,0.10)`. - Hover: bg → `rgba(20,20,19,0.04)`. - Use: Quietest third action — footer links, repeated CTAs. **Clay (Brand Punctuation)** - Background: `#cc785c`. Text: `#faf9f5`. No border. - Same shape (8px radius, 12×24 padding). - Hover: bg → `#d97757`. Active: `#a04a2c`. - Use: Reserved for one moment per page — wordmark stamp, hero accent CTA. Never the default primary. ### Cards **Editorial Card** - Background: `#ffffff`. Border: `1px solid rgba(20,20,19,0.10)`. Radius: `16px`. Padding: `32px`. - Shadow: none — value-contrast alone separates white card from cream page. - Hover: border → `rgba(20,20,19,0.20)`; transition `200ms`. - Use: Pull-quote box, capability tile, research index entry. **Swatch Card (Earth-tone)** - Background: any `--swatch--*` token (kraft, manilla, fig…). Border: none. Radius: `16px`. Padding: `40px 32px`. - Use: Editorial illustration card — kraft as warm-paper, fig as feminine accent, cactus as success register. ### Badges, Tags, Pills **Eyebrow Label** — no chrome, just type. Anthropic Sans 500 / 13px / uppercase / 0.04em tracking, colour `#5e5d59`. Sits above section headlines. **Clay Tag** — bg `rgba(204, 120, 92, 0.12)`, text `#a04a2c`, radius `4px`, padding `4px 10px`. Subtle clay-tinted pill on white cards. **Earth-tone Status** — bg from semantic palette (cactus / manilla / coral / heather), radius `4px`, padding `4px 10px`. ### Inputs / Forms - Background: `#ffffff`. Border: `1px solid rgba(20,20,19,0.20)`. Radius: `8px`. Padding: `12px 16px`. - Font: Anthropic Sans 400 / 16px. Placeholder: `#87867f`. - Focus: `0 0 0 2px #cc785c` ring, border → `#141413`. - Error: border → `#8a3a3a`, ring → `rgba(196, 102, 134, 0.30)`. - Helper: caption 14px slate-faint below. ### Navigation - Header height `68px`. Background `#faf9f5` cream (transparent on hero). - Logo: Anthropic wordmark, slate-dark. - Nav links: Anthropic Sans 500 / 15px, colour `#141413`, padding `8px 12px`. Hover → `#cc785c` clay; active gets `1px` underline. - Right-side CTA pair: tertiary "Log in" + primary slate "Try Claude". - Mobile: full-screen sheet, links stack at 24px / 500 / serif italic for headings. ### Optional Components **Pull Quote** — Anthropic Serif 32px / 500 / italic, slate-medium, with a clay vertical rule on the left edge. **Footnote** — Anthropic Sans 13px / 400, slate-faint; sits on a thin border-subtle rule. **Code Block** — Anthropic Mono 15px, bg `#f0eee6`, radius `8px`, padding `16px 20px`, border `rgba(20,20,19,0.10)`. Inline code: same font, bg `rgba(20,20,19,0.06)`, padding `2px 6px`, radius `4px`. **Tooltip** — bg `#141413`, text `#faf9f5`, radius `4px`, padding `8px 12px`, font `13px / 500`. **Modal** — bg `#ffffff`, radius `16px`, shadow `rgba(20,20,19,0.08) 0 12px 32px -8px`, max-width `560px`. Cream backdrop overlay at 70% opacity. ### Easing Curves - `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, color transitions. - `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; used on modal enter, hero reveal. - `ease-editorial`: `cubic-bezier(0.32, 0.72, 0, 1)` — slow-out, fast-settle; used on page transitions and editorial reveals. ### Duration Buckets - **Fast (120ms)** — colour transitions, focus rings, link hovers. - **Standard (220ms)** — button hover, card hover, dropdown reveal. - **Slow (360ms)** — modal enter/exit, page section fade-in. - **Page (480ms)** — route transitions, hero reveal sequences. ### Per-Component Micro-States - **Button hover**: bg colour shift only — no lift, no scale. `transition: background-color 220ms ease-standard`. - **Card hover**: border deepens from `rgba(20,20,19,0.10)` to `rgba(20,20,19,0.20)`; no shadow change. - **Link hover**: colour `#141413` → `#cc785c` over 120ms; underline thickens 1px → 2px. - **Input focus**: 2px clay ring fades in over 120ms; border darkens. - **Nav link active**: 1px slate underline animates in left-to-right over 220ms. ### Page Transitions Editorial reveal: hero text fades in over 480ms with 24px translate-up; below-fold sections use `IntersectionObserver` to fade in at 80% viewport, 360ms duration, no translate. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Translate animations are disabled entirely; scroll-linked reveals snap to final state. ### Contrast Pairs - **`#141413` text on `#faf9f5` bg**: 14.6:1 — AAA at all sizes. - **`#5e5d59` text on `#faf9f5` bg**: 7.1:1 — AAA at body sizes. - **`#87867f` text on `#faf9f5` bg**: 4.4:1 — AA at large sizes only (≥18px or ≥14px bold). - **`#faf9f5` text on `#141413` button**: 14.6:1 — AAA. - **`#faf9f5` text on `#cc785c` clay**: 4.7:1 — AA at body sizes; safe for buttons. - **`#a04a2c` text on `rgba(204,120,92,0.12)` tag bg**: 6.8:1 effective — AAA. ### Focus Indicators - Default focus ring: `0 0 0 2px #cc785c` with 2px offset on cream pages. - On dark surfaces (rare): `0 0 0 2px #faf9f5`. - All interactive surfaces must have a visible focus state — no `outline: none` without a replacement. ### ARIA Patterns - **Navigation**: `