Screenshot of Anthropic

Anthropic

www.anthropic.com

a 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.

Developer Tool Ai Research Lab flagship

Design tokens

ivory-light
ivory-medium
ivory-dark
oat
slate-dark
slate-medium
slate-light
cloud-dark
cloud-medium
cloud-light
clay
accent-deeper
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.