# Anthropic Paper 따뜻한 크림 페이퍼 위에 기하학적 산세리프 헤드라인과 고전 세리프 스테이트먼트를 얹고, 저채도 진흙빛 코랄을 구두점처럼 쓰는 절제된 에디토리얼 스타일. - taxonomy: warm-paper · warm-paper, cream-canvas, editorial, serif-sans-pairing, clay-coral-accent, print-like, restrained, geometric-grotesque · complexity=medium - page types: landing, marketing, editorial, docs - best for: AI·연구·기술 브랜드의 신뢰감 있는 랜딩, 매니페스토·정책 페이지, 따뜻하고 절제된 코퍼레이트 마케팅, 텍스트가 주인공인 에디토리얼 콘텐츠 - avoid for: 데이터 밀도가 높은 대시보드, 장난스러운 파스텔 소비자 앱, 차가운 다크 네이티브 개발자 도구, 네온·그라디언트 중심의 하이테크 랜딩 - provenance: website (Home \ Anthropic) — confidence: colors_measured=computed-css, color_roles=vision-inferred, accent_color=manual, typography=computed-css, typography_fallbacks=manual, radius=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, dark=vision-inferred ## Design rules # 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). ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Anthropic Paper — theme.css (generated, do not edit) */ :root { --radius: 16px; --radius-selector: 8px; --radius-field: 8px; --font-sans: "Anthropic Sans", "Space Grotesk", "Styrene B", Arial, sans-serif; --font-serif: "Anthropic Serif", "Newsreader", Georgia, "Times New Roman", serif; --font-mono: "Anthropic Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; --font-display: "Anthropic Sans", "Space Grotesk", "Styrene B", Arial, sans-serif; --spacing: 8px; --shadow: 0px 16px 24px 0px color-mix(in oklab, oklch(0.191 0.002 106.6) 4%, transparent); --ks-display-weight: 700; --ks-display-tracking: -0.02em; --background: oklch(0.948 0.011 95.2); --foreground: oklch(0.191 0.002 106.6); --card: oklch(0.982 0.005 95.1); --card-foreground: oklch(0.191 0.002 106.6); --popover: oklch(0.982 0.005 95.1); --popover-foreground: oklch(0.191 0.002 106.6); --primary: oklch(0.191 0.002 106.6); --primary-foreground: oklch(0.982 0.005 95.1); --secondary: oklch(0.924 0.012 96.4); --secondary-foreground: oklch(0.191 0.002 106.6); --muted: oklch(0.924 0.012 96.4); --muted-foreground: oklch(0.619 0.010 100.1); --accent: oklch(0.672 0.131 38.8); --accent-foreground: oklch(0.982 0.005 95.1); --destructive: oklch(0.577 0.220 27.3); --destructive-foreground: oklch(0.982 0.005 95.1); --border: oklch(0.885 0.010 95.2); --input: oklch(0.885 0.010 95.2); --ring: oklch(0.672 0.131 38.8); --chart-1: oklch(0.672 0.131 38.8); --chart-2: oklch(0.191 0.002 106.6); --chart-3: oklch(0.750 0.013 96.5); --chart-4: oklch(0.619 0.010 100.1); --chart-5: oklch(0.560 0.090 45); } .dark { --background: oklch(0.191 0.002 106.6); --foreground: oklch(0.982 0.005 95.1); --card: oklch(0.239 0.003 106.4); --card-foreground: oklch(0.982 0.005 95.1); --popover: oklch(0.259 0.004 106.4); --popover-foreground: oklch(0.982 0.005 95.1); --primary: oklch(0.982 0.005 95.1); --primary-foreground: oklch(0.191 0.002 106.6); --secondary: oklch(0.259 0.004 106.4); --secondary-foreground: oklch(0.982 0.005 95.1); --muted: oklch(0.259 0.004 106.4); --muted-foreground: oklch(0.750 0.013 96.5); --accent: oklch(0.700 0.132 40.0); --accent-foreground: oklch(0.191 0.002 106.6); --destructive: oklch(0.640 0.200 27.3); --destructive-foreground: oklch(0.191 0.002 106.6); --border: oklch(0.300 0.004 106.4); --input: oklch(0.320 0.005 106.4); --ring: oklch(0.700 0.132 40.0); --chart-1: oklch(0.700 0.132 40.0); --chart-2: oklch(0.982 0.005 95.1); --chart-3: oklch(0.750 0.013 96.5); --chart-4: oklch(0.619 0.010 100.1); --chart-5: oklch(0.600 0.095 45); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

AI research and products that put safety at the frontier

AI will have a vast impact on the world. We build it to be trustworthy, human, and calm.

Built on hard questions.

Learn more →

Latest releases

Responsible scaling

How we take on the hardest questions across safety and governance.

Model details

Economic index

Tracking how AI is adopted across the real economy.

Explore
Core views on AI safety Announcements
Our constitution Alignment
Build and learn Education
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/anthropic.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `