Claude

Overview

Claude is Anthropic's conversational AI assistant designed for ambitious problem-solvers who demand clarity, precision, and nuance in their thinking partner. The design system embodies a philosophy of "Purposeful Minimalism"—a refined aesthetic that prioritizes legibility and cognitive ease over decorative flourish. The interface uses a near-white canvas (rgb(248, 248, 246)) paired with deep charcoal text (rgb(18, 18, 18)) to create maximum contrast and reduce cognitive load, while strategic accents in Google Blue (#1a73e8) and warm terracotta (#d97757) guide user attention to moments of consequence. The emotional response is one of calm competence: users feel they are in conversation with an intelligent, trustworthy partner who respects their time and attention.

The brand voice is direct, thoughtful, and unpretentious. Claude speaks in complete sentences, avoids jargon unless necessary, and treats complex ideas with respect. The vocabulary favors concrete nouns and active verbs—"transform ambitions into clarity," "your thinking partner," "question what's next"—rather than abstract corporate language. Tone is conversational but never casual; warm but never familiar. Example sentence in Claude's voice: "Let's break this down into the parts that matter most."

Colors

The color system is built on a foundation of extreme contrast and functional clarity. The primary surface is an off-white (hsl(60, 11%, 95%) / #f8f8f6) that reduces eye strain while maintaining visual warmth; this is paired with a near-black primary text color (#121212 / rgb(18, 18, 18)) that achieves WCAG AAA contrast (21:1 ratio). The secondary accent is Google Blue (#1a73e8), used exclusively for interactive elements, links, and focus states—this is the brand's signature accent and appears in approximately 30% of interactive components. Tertiary accents include a warm terracotta (#d97757) for error states and a softer teal-green for supporting UI elements. The surface stack is shallow and functional: surface-container-lowest (#f2f2f0) is used for recessed input fields, surface-container

Typography

The type system uses a single typeface family—Anthropic Sans (with system-ui, Segoe UI, and Roboto as fallbacks)—to maintain visual cohesion and reduce cognitive friction. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and sets the emotional tone; Headline-lg (40px, 600 weight) anchors major sections; Headline-md (28px, 600 weight) introduces subsections; Title-lg (20px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and ensures readability at a glance; Body-md (16px, 400 weight, 24px line-height) is the default for form labels, descriptions, and body copy. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and small UI labels; Label-sm (12px, 500 weight, 0.05em tracking)

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing for flexible composition across breakpoints while maintaining a clear visual hierarchy. The page rhythm is governed by a semantic spacing scale: gutter (24px) is used for horizontal padding on containers, lg (40px) separates major sections, md (24px) separates cards and subsections, and sm (12px) separates inline elements. The off-white background (hsl(60, 11%, 95%)) extends edge-to-edge, creating a unified canvas; content containers use rounded corners (1.5rem / 24px) and subtle borders (1px solid #d0d0d0) to define regions without introducing visual noise. Input fields and buttons are sized to 48px height (including padding) to meet touch-target accessibility standards (minimum 44px). The system fa

Elevation & Depth

Depth in Claude's design system is achieved through a restrained shadow vocabulary and subtle surface color shifts, avoiding the heavy shadows common in Material Design. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on interactive elements like buttons and input fields; md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and modals that float above the base surface; lg (0 16px 40px rgba(0, 0, 0, 0.12)) reserved for dropdowns and overlays that demand maximum visual separation. Shadows are always black with low opacity (6–12%) to maintain the system'

Shapes

The shape system follows a philosophy of "Soft Precision"—rounded corners that feel approachable without sacrificing clarity or visual weight. The rounded scale progresses from sm (4px) for small UI elements like checkboxes and icon buttons, to DEFAULT (8px) for input fields and small cards, to md (12px) for medium components, to lg (16px) for primary buttons and larger cards, to xl (24px) for hero cards and modals, and full (9999px) for pill-shaped buttons and badges. Buttons use lg (16px) to signal their interactive importance and create a tactile, inviting appearance; input fields use lg (1

Components

Action Elements Buttons are the primary interaction mechanism and use a fill-based design with a subtle scale animation on press. The primary button uses a solid black background (#121212) with white text, 48px height, 12px vertical padding, 24px horizontal padding, and lg (16px) border-radius. On hover, the background darkens to #0a0a0a and a subtle shadow (0 2px 8px rgba(0, 0, 0, 0.15)) appears over 150ms. On active/press, the button scales to 96% (transform: scale(0.96)) using a spring easing function (linear(0, .3505, .7432, .9336, .9951, 1.0062, 1.0045, 1.0019, 1.0005, 1)) over 300ms, creating a tactile feedback sensation. Secondary buttons use a transparent background with a 1px border in outline-variant (#d0d0d0) and black text; on hover, the background fills with surface-contai

Do's and Don'ts

**Do**

• Do use the primary black (#121212) for all body text and interactive elements; it creates maximum contrast and reduces cognitive load.
• Do apply the secondary blue (#1a73e8) exclusively to CTAs, links, and focus states—never use it for backgrounds or decorative elements.
• Do maintain 24px padding inside cards and 40px spacing between major sections; whitespace is a design tool, not wasted space.
• Do use the lg (16px) border-radius for buttons and primary cards to signal interactivity and approachability.
• Do apply subtle shadows (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) to interactive elements and elevate to md on hover to signal state change.
• Do use the full type hierarchy—don't skip levels or mix weights arbitrarily; each level serves a specific cognitive function.
• Do test all interactive elements with keyboard navigation; focus states must use the 3px outline + halo pattern.
• Do ensure all text meets WCAG AAA contrast (21:1 minimum); use the near-black (#121212) on light backgrounds and white on dark.

**Don't**

• Don't use colored shadows or glassmorphism effects; they conflict with the clarity-first philosophy and reduce legibility.
• Don't introduce new accent colors outside the defined palette (secondary blue, tertiary terracotta); the system's power comes from restraint.
• Don't use system-ui or generic sans-serif fallbacks in production; always specify Anthropic Sans with explicit fallbacks (Segoe UI, Roboto).
• Don't apply border-radius smaller than sm (4px) to buttons or cards; it makes them feel cheap and reduces approachability.
• Don't mix button styles on the same page (e.g., primary + secondary + ghost) without clear semantic distinction; users should understand hierarchy at a glance.
• Don't use opacity or color shifts to indicate disabled states; always use a distinct background color (surface-container-highest) and cursor: not-allowed.
• Don't create custom shadows; use only the three defined levels (sm, md, lg) to maintain visual consistency.
• Don't reduce line-height below 1.4x font-size for body text; it harms readability and accessibility, especially for users with dyslexia.