Claude

Overview

Claude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a tinted cream canvas ({colors.canvas} — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a slab-serif display ("Copernicus" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with StyreneB / Inter body sans. The combination feels like a literary publication, not a SaaS marketing page.

Brand voltage comes from the cream + coral pairing — coral ({colors.primary} — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.

The system has three surface modes that alternate page-by-page: 1. Cream canvas ({colors.canvas}) — default body floor 2. Light cream cards ({colors.surface-card}) — feature card backgrounds 3. Dark navy product surfaces ({colors.surface-dark}) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself

The dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.

Key Characteristics: - Warm cream canvas ({colors.canvas} — #faf9f5) with dark warm-ink text ({colors.ink} — #141413). The brand's defining color choice. - Coral primary CTA ({colors.primary} — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards. - Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice. - Dark navy product mockup cards ({colors.surface-dark} — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations. - Light cream feature cards ({colors.surface-card} — #efe9de) — slightly darker than canvas, used for content-driven feature explanations. - Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker. - Border radius is hierarchical: {rounded.md} (8px) for buttons + inputs, {rounded.lg} (12px) for content + product cards, {rounded.xl} (16px) for the hero illustration container, {rounded.pill} for badges. - Section rhythm {spacing.section} (96px) — modern-SaaS standard. Internal card padding stays generous at {spacing.xl} (32px).

Colors

Brand & Accent

• Coral / Primary ({colors.primary} — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.
• Coral Active ({colors.primary-active} — #a9583e): The press / hover-darker variant.
• Coral Disabled ({colors.primary-disabled} — #e6dfd8): A desaturated cream-tinted disabled state.
• Accent Teal ({colors.accent-teal} — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, "active connection" dots in connectors page).
• Accent Amber ({colors.accent-amber} — #e8a55a): A small companion warm-tone used on category badges and inline highlights.

Surface

• Canvas ({colors.canvas} — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.
• Surface Soft ({colors.surface-soft} — #f5f0e8): Section dividers, very-soft band backgrounds.
• Surface Card ({colors.surface-card} — #efe9de): Feature cards, content cards. One step darker than canvas.
• Surface Cream Strong ({colors.surface-cream-strong} — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.
• Surface Dark ({colors.surface-dark} — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.
• Surface Dark Elevated ({colors.surface-dark-elevated} — #252320): Elevated cards inside dark bands (settings panels in mockups).
• Surface Dark Soft ({colors.surface-dark-soft} — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.
• Hairline ({colors.hairline} — #e6dfd8): The 1px border tone on cream surfaces. Same hex as {colors.primary-disabled} — borders feel like one elevation step rather than ink lines.
• Hairline Soft ({colors.hairline-soft} — #ebe6df): Barely-visible divider used inside the same band.

Text

• Ink ({colors.ink} — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.
• Body Strong ({colors.body-strong} — #252523): Emphasized paragraphs, lead text.
• Body ({colors.body} — #3