Claude

version alpha

name Claude

description A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display ("Copernicus" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark.

colors primary: "#cc785c" primary-active: "#a9583e" primary-disabled: "#e6dfd8" ink: "#141413" body: "#3d3d3a" body-strong: "#252523" muted: "#6c6a64" muted-soft: "#8e8b82" hairline: "#e6dfd8" hairline-soft: "#ebe6df" canvas: "#faf9f5" surface-soft: "#f5f0e8" surface-card: "#efe9de" surface-cream-strong: "#e8e0d2" surface-dark: "#181715" surface-dark-elevated: "#252320" surface-dark-soft: "#1f1e1b" on-primary: "#ffffff" on-dark: "#faf9f5" on-dark-soft: "#a09d96" accent-teal: "#5db8a6" accent-amber: "#e8a55a" success: "#5db872" warning: "#d4a017" error: "#c64545"

typography display-xl: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 64px fontWeight: 400 lineHeight: 1.05 letterSpacing: -1.5px display-lg: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: -1px display-md: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 36px fontWeight: 400 lineHeight: 1.15 letterSpacing: -0.5px display-sm: fontFamily: "Copernicus, Tiempos Headline, serif" fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.3px title-lg: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0 title-md: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-sm: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 caption: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 caption-uppercase: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 1.5px code: fontFamily: "JetBrains Mono, ui-monospace, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 button: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1 letterSpacing: 0 nav-link: fontFamily: "StyreneB, Inter, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded xs: 4px sm: 6px md: 8px lg: 12px xl: 16px pill: 9999px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 40px button-secondary-on-dark: backgroundColor: "{colors.surface-dark-elevated}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px button-text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px text-link: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: 96px hero-illustration-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px product-mockup-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px code-window-card: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.code}" rounded: "{rounded.lg}" padding: 24px model-comparison-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px pricing-tier-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px pricing-tier-card-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px callout-card-coral: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px connector-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.lg}" padding: 20px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 14px height: 40px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.md}" cookie-consent-card: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 24px category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.nav-link}" padding: 8px 14px rounded: "{rounded.md}" category-tab-active: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.md}" badge-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px badge-coral: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 12px cta-band-coral: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.display-sm}" rounded: "{rounded.lg}" padding: 64px cta-band-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-sm}" rounded: "{rounded.lg}" padding: 64px footer: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark-soft}" typography: "{typography.body-sm}" padding: 64px

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:

• Cream canvas ({colors.canvas}) — default body floor

• Light cream cards ({colors.surface-card}) — feature card backgrounds

• 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 pri