Anthropic
www.anthropic.coma warm ivory-and-slate site where editorial serif typography, a single clay accent, and unhurried 0.8s expo reveals reframe AI as a humanist research practice rather than a product to sell.
Design tokens
- display
- "Anthropic Sans", Arial, sans-serif
- body
- "Anthropic Serif", Georgia, sans-serif
- mono
- "Anthropic Mono", Arial, sans-serif
Do / Don't
Reference it for
- The serif-as-body discipline: editorial paragraph type on a tech/AI site that successfully reads as authoritative rather than precious.
- A warm, near-neutral palette (#faf9f5 / #f0eee6 / #e3dacc / #141413 / #d97757) used to wash a whole site rather than as accents - depth comes from background swaps section-to-section, not shadows.
- The single signature reveal curve: opacity, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) applied uniformly. Slow, expo, never bouncy. Pair with quick 0.2s colour micro-transitions so the slow reveals feel deliberate, not sluggish.
- A 12-column grid pinned to a generous 89.5rem (1432px) site width with fluid gutter clamp(2rem, 1.08rem + 3.92vw, 5rem) - the math is in a complete set of --column-margin--N / --column-width--N tokens worth borrowing as a layout convention.
- Restrained section count: hero, one mission-statement CTA at editorial scale, latest releases grid, mission section, dark footer. Five blocks total.
- A monochrome dark footer (#141413 bg, ivory text) that visually concludes the page as a deliberate counterpoint, not a tacked-on link dump.
Do not copy
- The exact ivory + clay palette - it is now strongly Anthropic-coded; a service site that lifts both reads as a clone.
- The Anthropic Sans / Serif / Mono families themselves - bespoke, not for redistribution. Borrow the *idea* of pairing a serif body with a sans display, sourced from the client's own type license.
- The "AI research" tonal positioning - serious, restrained, mission-led - unless the client genuinely earns it. On a warmer or louder brand this voice reads as borrowed solemnity.
- Locomotive scroll - smooth-scroll libraries fight Astro's native page transitions and add weight for an effect most users do not notice.
Signature moves
serif-as-body humanist tech voice
editorial serif paragraph type on an AI/tech site reads authoritative not precious, paired with a sans display, on a warm ivory #faf9f5 wash with depth from section-to-section background swaps not shadows.
single 0.8s expo reveal curve
one signature reveal, opacity/transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), applied uniformly, paired with quick 0.2s colour micro-transitions so the slow reveals feel deliberate.
12-column token grid with five-block restraint
a 12-column grid pinned to 89.5rem (1432px) with fluid gutter clamp(2rem, 1.08rem + 3.92vw, 5rem) via --column-margin/-width tokens, across just five blocks closing on a monochrome #141413 dark footer.
Related references
Alche
strongCreative Studio
The reference for Japanese virtual-character + immersive experience studios — Astro v5 build, neon yellow-green accent, 5-font multi-language system, KizunaAI case study.
Cyphr
strongCreative Studio
The reference for venture-studio portfolios that flex through monumental condensed type, a single blue I-beam cursor accent, and a venetian-blind slat hero that fragments a single image into a column-rhythmic curtain.
Huge
flagshipCreative Studio
a black-canvas, Monument-Grotesk agency site that turns brutalist restraint into confidence, sharp corners, one type family, vast empty space, then detonates a few hot-pink and acid-green colour blocks and lets Lenis-smooth scroll reveal the work.
Koto
strongCreative Studio
The reference for global brand-agency studios — yellow logomark on near-black, four custom typefaces, live UTC clock chrome, split-screen sticky-text case study reveals.