# Anthropic Paper

## Overview
A warm, print-like editorial system: cream paper canvas, near-black warm ink, and a single clay-coral brand accent used as punctuation. The identity comes from a deliberate type pairing — bold geometric-grotesque sans headlines against large classic-serif statements. Decoration is minimal; trust and calm come from warmth, contrast, and generous whitespace rather than color or effects.

## Colors & Roles
Warm monochrome foundation: `background` cream (#f0eee6, oklch 0.948/0.011/95), `foreground` near-black warm ink (#141413, oklch 0.191/0.002/107) — both slightly warm, never neutral gray. Surfaces lift by a lighter off-white `card` (#faf9f5) and low-contrast warm hairline `border`, never by shadow. `muted-foreground` is a warm gray (#87867f). `primary` is ink black (the "Try Claude" pill), with cream `primary-foreground`. The lone chromatic `accent` is Anthropic's clay coral (#d97757, oklch 0.672/0.131/39) — a punctuation mark used at most twice per page (a key CTA, an emphasis). Never let coral cover large areas, and never make the primary button coral.

## Typography Rules
Two families in deliberate contrast. Geometric grotesque sans (Anthropic Sans, Styrene-derived → **Space Grotesk** fallback, which itself descends from Styrene) carries bold hero headlines at weight 700 with tight tracking (−0.02em). Classic transitional serif (Anthropic Serif, Tiempos-like → **Newsreader** fallback) carries the large statements (e.g. "Anthropic is built on hard questions") at weight 400. Body is sans, 20px/1.4, weight 400. Weights used: 400 / 600 / 700. Mono (Anthropic Mono → JetBrains Mono) for code only.

## Layout Principles
Max content width 1280px on a 12-column / 24px-gutter grid. The hero splits asymmetrically — a large left headline against a right serif lead paragraph. Release content sits in a 3-column card grid. A single dark statement panel is dropped into the cream flow to break rhythm. Vertical rhythm is large: section gaps `clamp(5rem, 10vw, 9rem)`, with lots of cream whitespace.

## Depth & Elevation
Effectively flat. No gradients, glass, or noise. The measured shadow is a very faint multi-layer wash (rgba 0.01/0.02/0.04); in practice cards separate by tonal step (`background` → `card`) and warm hairlines. Soft shadows are reserved for genuinely floating elements.

## Shapes
Moderate rounding: cards/boxes 16px, fields and pill selectors 8px. The dark statement panel is more strongly rounded (~24px). Corners are soft but not bubbly.

## Component Stylings
- **Button**: primary = ink-black pill, cream text, radius 8px, padding 12px 20px, 14–16px/500. Hover lightens slightly; focus = 2px coral ring. Secondary = transparent with 1px hairline. Text-link buttons use serif + underline. Coral fill only for one or two emphasis CTAs.
- **Card**: off-white `card` bg, 1px hairline or tonal step, radius 16px, padding 24–32px, no shadow. The dark statement panel inverts to ink bg + cream text + white pill.
- **Input**: `card` bg, 1px border, radius 8px; focus border → coral ring.
- **Nav**: transparent, left wordmark (ANTHROP\C), right serif links + ink "Try Claude" pill.
- **List row**: title left, category label right, 1px hairline rule under each item.

## Motion
Calm and restrained. Opacity fades + translateY(8px), 150–300ms, standard easing. No bounce, spring, or heavy parallax — keep the static, print-like impression.

## Do's and Don'ts
**Do:** pair bold geometric sans headlines with large classic-serif statements; keep every neutral warm (hue 95–107); use coral as sparse punctuation; separate surfaces with hairlines and tonal steps.
**Don't:** flood coral across backgrounds or large areas; make the primary button coral; use cool grays or pure white; add gradients, glass, neon, or heavy drop shadows; unify on a single type family.

## Responsive Behavior
The 12-column grid collapses to a single column on mobile; the hero's headline/lead stack. Display type scales via `clamp()`. Release cards go 3 → 1 column with hairline separators preserved.

## Agent Prompt Guide
> Build this in the 'Anthropic Paper' style: a warm cream canvas (#f0eee6) with near-black warm ink (#141413), print-like contrast, and a single clay-coral accent (#d97757) used sparingly as punctuation — a key CTA or emphasis, at most twice per page. The primary button is an ink-black pill, NOT coral. Signature move: bold geometric-grotesque sans headlines (700, Space Grotesk) against large classic-serif statements (400, Newsreader). Keep neutrals warm (hue 95–107), radius 8–16px, and separate surfaces with low-contrast warm hairlines and tonal steps, not heavy shadows. Author dark as a warm near-black counterpart (#141413 ground, #faf9f5 text, white pill primary). Motion is calm (fades + short slides, no bounce).

## Known Gaps / Confidence
- **Colors measured (`computed-css`)**: cream bg, ink, off-white, and the two warm grays are extracted values. **Color role assignment is `vision-inferred`** from the screenshot.
- **Accent coral is `manual`.** The captured home page was effectively monochrome (cream + ink); no coral appeared in this capture, and extraction measured none. The coral (#d97757) is Anthropic's documented brand clay color, applied by curation as the accent. Treat it as brand-true but not measured-from-this-page.
- **`secondary`/`muted`/`border`** are honest interpolations (a slightly darker warm cream / low-contrast warm hairline), not distinct measured swatches. `destructive` is a conventional system red, not a brand color.
- **Dark set is `vision-inferred`.** The site has no native dark mode (the "dark" capture was identical to light). The dark tokens are authored from a real anchor: the dark statement card inside the *light* hero (#141413 ground + #faf9f5 cream text + white pill), both measured values, with the rest extrapolated warm.
- **Fonts**: "Anthropic Sans/Serif/Mono" are proprietary; Google-Fonts fallbacks (Space Grotesk / Newsreader / JetBrains Mono) are `manual` practical substitutes chosen for lineage (Space Grotesk descends from Styrene; Newsreader is Tiempos-adjacent).