# Anthropic — Marketing Site Design Spec

> Source: anthropic.com homepage (live DOM, computed styles), 2026-07-08, desktop 1512px.
> Coverage: homepage (hero → releases → mission/list rows → footer). Responsive: not captured. Product app: see `apps/anthropic/app/`.

## 1. Visual Theme & Atmosphere

A printed research paper turned into a website: warm ivory canvas, near-black ink, and a serif-first voice (Anthropic Serif at 20px body) that reads editorial rather than techy. Structure comes from generous whitespace, oat-colored content cards, and hairline-divided list rows — almost no chrome. Color is scarce and bookish: parchment illustration plates and the single clay/terracotta brand hue, used as punctuation. Display type alternates between a bold humanist sans (Anthropic Sans 700) for statements and a light serif at larger sizes for announcements. Feels: editorial, calm, bookish, trustworthy.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| ivory (canvas) | `#faf9f5` | Page bg, nav, footer |
| ink | `#141413` | Text, primary button fill |
| ink-60 | `rgba(20,20,18,.60)` | Secondary text |
| gray | `#87867f` | Muted text, footer links |
| stone | `#b0aea5` | Tertiary text, icons |
| tint | `#f0eee6` | Section tint |
| oat | `#e8e6dc` / `#e3dacc` | Release cards, panels |
| parchment | `#f5e3c7` | Illustration plates |
| clay | `#d97757` | Brand accent (sparing) |
| clay-dark | `#c6613f` | Accent hover/emphasis |
| hairline | `rgba(20,20,20,.10)` | List-row dividers |

Rule: the page is ivory + ink; clay appears only as small punctuation (links, icons, illustration accents) — never as large fills. Cards are oat, illustrations parchment.

## 3. Typography Rules

- Families: `"Anthropic Serif", Georgia, serif` (body voice), `"Anthropic Sans", Arial, sans-serif` (display + UI), `Anthropic Mono` / `JetBrains Mono` (labels, rare).
- **Body is serif**: 20px / 28px / 400 — the defining choice.

| Role | Size/Line | Family/Weight | Notes |
|---|---|---|---|
| Display statement (h1) | 62 / 68.5 | Sans 700 | "AI research and products…" |
| Announcement display (h2) | 70 / 77 | Serif 400 | e.g. "Announcing Fable 5" |
| Card title (h3) | 24 / 31 | Sans 600 | Release cards, section heads |
| List-row title (h3) | 16 / 22 | Sans 600 | Featured-work rows |
| Body / lede | 20 / 28 | Serif 400 | Right-aligned hero paragraph |
| UI / nav / buttons | 16 / 24 | Sans 400 | |
| Footer links | 13–14 | Sans 400 | `#87867f` |

Patterns: no letter-spacing manipulation anywhere (tracking normal at all sizes); serif carries meaning, sans carries structure; weights 400/600/700.

## 4. Component Stylings

### Buttons
- **Primary ("Try Claude" split button)**: ink `#141413` fill, ivory text, h36, 16px/400, padding `8px 16px`, radius `8px 0 0 8px` + attached caret segment `0 8px 8px 0` separated by a 1px ivory seam.
- **Secondary**: transparent, ink text, 1px ink border, radius 8.
- Text links: ink with underline or trailing → arrow; hover shifts color 0.2s ease (sometimes to clay).

### Release cards
- bg oat `#e3dacc`–`#e8e6dc`, radius 16–24, padding ~28px; title 24/600 sans, body 16–17 serif, "Model details →" text link. 3-up grid.

### Featured-work list rows
- Full-width rows divided by 1px `rgba(20,20,20,.10)`: left 16/600 sans title, right category tag in gray 16/400. Hover: title color shifts.

### Illustration plates
- Full-bleed-ish parchment `#f5e3c7` panels, radius 24, hand-drawn line illustrations; one ambient video plate.

### Nav / footer
- Nav h~68 on ivory: ANTHROP\C wordmark left, 16px links right, ink split-button. Footer: ivory, ink logogram, 5+ columns of 13–14px gray links, © 2026 Anthropic PBC.

## 5. Layout Principles

- Content max ~1280px; hero is asymmetric: bold sans statement left/top, serif lede right-aligned below-right, then a full-width parchment plate (radius 24).
- Sections: "Latest releases" 3-up oat cards; mission statement 24/600; featured-work hairline list rows.
- Spacing is editorial and generous (~120–160px section rhythm); separation by whitespace and hairlines, never heavy borders or shadows.

## 6. Depth & Elevation

- Radius scale: 8 (buttons), 12/16 (cards), 24 (large cards/plates), 1600px (pills, rare).
- Elevation: essentially flat — no shadows observed on cards or buttons; depth comes from the oat/parchment fills against ivory.

## 7. Motion

- Micro: `color 0.2s ease` (dominant, 253 els), `opacity 0.1–0.2s ease`.
- Reveals: `opacity/transform 0.8s cubic-bezier(0.16,…)` scroll entrances; keyframes: `fadein`, `marquee`, `menuOpen/menuClose`, `spin`.
- One ambient background video in an illustration plate; no canvas/WebGL, no motion library. Quiet, page-like motion.

## 8. Backgrounds, Effects & WebGL

- Flat ivory throughout; texture comes from parchment illustration plates (paper-grain imagery) and hand-drawn line art.
- No gradients in chrome, no glassmorphism, no dot grids. One `<video>` (ambient illustration). Flat solid surfaces otherwise.

## 9. Do's and Don'ts

### Do
- Set body copy in the serif at 20/28 — the serif body IS the brand.
- Keep the canvas ivory `#faf9f5` with ink `#141413`; use oat `#e3dacc/#e8e6dc` for cards and parchment `#f5e3c7` for illustration plates.
- Use clay `#d97757` only as small punctuation (accents, links, icon strokes).
- Alternate display voices: Sans 700 (~62px) for statements, Serif 400 (~70px) for announcements.
- Keep tracking normal at every size; weights 400/600/700 only.
- Use the ink split-button (radius 8 + caret segment) as the primary CTA.
- Divide lists with 1px 10%-ink hairlines; keep everything else flat and roomy.
- Keep motion to 0.2s color fades and slow 0.8s ease-out reveals.

### Don't
- Don't use sans for long body copy, and don't shrink body below ~17px.
- Don't use clay as a button fill or large surface.
- Don't add shadows, glass, gradients, or dark sections — the page stays light and flat.
- Don't tighten letter-spacing on display type.
- Don't use pure white or pure black; it's always ivory/ink.

## 10. Responsive Behavior

Not captured — desktop 1512px only.

## 11. Agent Prompt Guide

- Canvas `#faf9f5` · Ink `#141413` · Muted `#87867f` · Card `#e3dacc` · Plate `#f5e3c7` · Accent `#d97757` · Hairline `rgba(20,20,20,.10)`
- Fonts: body `"Anthropic Serif", Georgia` 20/28 · display/UI `"Anthropic Sans", Arial` · Radius: 8 buttons / 16–24 cards · Button h36
- Displays: Sans 62/700 or Serif 70/400, tracking normal

<anthropic-marketing_design_language>
Use the Anthropic marketing design language: warm ivory #faf9f5 canvas with near-black ink #141413 — a printed-research-paper aesthetic. Body copy is SERIF ("Anthropic Serif"/Georgia) at 20px/28px 400; display alternates bold sans statements (Anthropic Sans ~62px/700) with light serif announcements (~70px/400); UI text is 16px sans 400; tracking stays normal everywhere. Color is bookish and scarce: oat #e3dacc/#e8e6dc cards (radius 16–24), parchment #f5e3c7 illustration plates with hand-drawn line art, gray #87867f muted text, and clay #d97757 strictly as small punctuation — never a fill. Primary CTA is an ink split-button: #141413 fill, ivory text, h36, radius 8 with an attached caret segment. Lists are hairline-divided rows (1px 10% ink); layout is asymmetric and editorial with generous ~140px rhythm; elevation is flat — no shadows, no gradients, no dark sections. Motion: 0.2s color fades and slow 0.8s ease-out reveals. Feels: editorial, calm, bookish, trustworthy. Avoid: sans body copy, clay-filled buttons, shadows/glass/gradients, tight tracking, pure black or white.
</anthropic-marketing_design_language>