Design System: Claude (Anthropic)

1. Visual Theme & Atmosphere

Claude's interface is a literary salon reimagined as a product page warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (#f5f4ed) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.

The signature move is the custom Anthropic Serif typeface a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (#c96442), black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." The serif headlines breathe at tight-but-comfortable line-heights (1.101.30), creating a cadence that feels more like reading an essay than scanning a product page.

What makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (#5e5d59, #87867f, #4d4c48) there are no cool blue-grays anywhere. Borders are cream-tinted (#f0eee6, #e8e6dc), shadows use warm transparent blacks, and even the darkest surfaces (#141413, #30302e) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.

Key Characteristics:

• Warm parchment canvas (#f5f4ed) evoking premium paper, not screens
• Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code
• Terracotta brand accent (#c96442) warm, earthy, deliberately un-tech
• Exclusively warm-toned neutrals every gray has a yellow-brown undertone
• Organic, editorial illustrations replacing typical tech iconography
• Ring-based shadow system (0px 0px 0px 1px) creating border-like depth without visible borders
• Magazine-like pacing with generous section spacing and serif-driven hierarchy