Anthropic

Overview

Anthropic's design system embodies Architectural Minimalism—a philosophy that prioritizes clarity, precision, and intellectual rigor over decorative flourish. The brand serves researchers, developers, and enterprises seeking trustworthy AI systems; the interface conveys competence through restrained elegance, warm earth-tone accents (#c6613f clay and #d97757 terracotta), and a deliberate absence of visual noise. The aesthetic evokes a research laboratory rendered in refined typography and generous whitespace: every pixel serves a function. The emotional response is one of calm authority—users feel they are engaging with a serious, well-considered tool built by thoughtful people. Voice: precise, measured, never hyperbolic. Vocabulary favors concrete nouns ("safety," "research," "frontier") over marketing abstractions. The brand speaks as a peer to domain experts, assuming technical literacy. Example sentence: "We build AI systems that remain interpretable as they scale—because understanding is the foundation of safety."

Colors

The color palette is grounded in warm, desaturated earth tones that evoke both natural materials and the austere aesthetic of academic institutions. Primary (#c6613f, a muted clay-rust) is deployed on call-to-action buttons, interactive focus states, and key brand moments—it reads as authoritative without aggression. Secondary (#788c5d, a sage-olive) and Tertiary (#6a9bcc, a dusty sky-blue) provide supporting accents for status indicators, secondary actions, and data visualization. The surface stack is anchored in cream and off-white (#faf9f5 as the dominant background, #f0eee6 as container-low, #e8e6dc as container-mid), creating a warm, paper-like foundation that reduces eye strain during extended reading. On-surface text is near-black (#141413), providing 16:1 contrast for accessibility

Typography

The type system pairs Anthropic Sans (a geometric, humanist sans-serif used for headlines and UI labels) with Anthropic Serif (a high-contrast, classical serif for body text and long-form content). This pairing communicates both precision (sans) and thoughtfulness (serif), reflecting the brand's dual commitment to technical rigor and human-centered design. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; it commands attention through scale and negative space rather than color. Headline-lg (48px, 700 weight) and headline-md (32px, 700 weight) structure content hierarchy, with tighter letter-spacing (-0.02em to -0.01em) to reinforce authority. Body-lg (20px, 400 weight, 32px line-height) is the primary reading size for long-form content, s

Layout

The page employs a 12-column grid system with a fixed container max-width of 1280px and symmetric 24px gutters, creating a fluid-yet-controlled layout that adapts gracefully from mobile to desktop. The grid is defined via CSS custom properties (--grid-main, --column-width--1, etc.) and supports breakout patterns for full-width sections. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for compact UI elements, md (24px) for standard section padding and component spacing, lg (40px) for major section separation, and xl (64px) for hero and full-width container margins. The page rhythm is deliberate: hero sections occupy 60–80vh with generous vertical padding (lg spacing top/bottom), content sections use md spacing for breathing room, and cards are padded with md (24

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the brand's minimalist aesthetic. Level 1 (Base/Surface): no shadow; elements sit flush on the background. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(20, 20, 19, 0.15), a soft, close shadow that lifts the element 4–8px. Level 3 (Elevated/Modal/Hover): box-shadow: 0 8px 24px rgba(20, 20, 19, 0.12), a larger spread shadow suggesting 16–24px elevation. Shadows use the on-surface color (rgba(20, 20, 19, ...)) to maintain warmth and avoid harsh blacks. Interactive elements (buttons, cards) transition between shadow levels o

Shapes

The shape philosophy is Soft-Technical: rounded corners are used strategically to soften the geometric precision of the grid while maintaining a professional, engineered feel. Buttons and small interactive elements use rounded.DEFAULT (8px), a subtle radius that humanizes the interface without appearing playful. Cards and larger containers use rounded.lg (24px), creating a more pronounced softness that invites interaction. Input fields use rounded.DEFAULT (8px) to align with buttons and maintain visual consistency. Badges and pills use rounded.full (9999px) for maximum softness, signaling seco

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses backgroundColor: {colors.primary} (#c6613f), textColor: {colors.on-primary} (white), with padding 12px 31px and height 48px for comfortable touch targets. The rounded radius is {rounded.DEFAULT} (8px). On hover, button-primary-hover shifts to backgroundColor: {colors.primary-fixed-dim} (#d97757) and elevates the shadow to {elevation.lg} (0 8px 24px rgba(20, 20, 19, 0.12)), creating a tactile lift effect with a 200ms transition. Button-secondary is transparent with a 1px border at outline-variant, textColor: {colors.on-surface}, and shifts to backgroundColor: {colors.surface-container-high} on hover. Focus states (button-primary-focus, button-secondary-focus) apply a 2px solid outline at {colors.outlin

Do's and Don'ts

**Do**

• Do use primary (#c6613f) exclusively for high-priority CTAs and interactive focus states—it is the brand's signature accent and must remain visually distinct.
• Do maintain the 12-column grid and respect the container-max (1280px) to ensure consistent, readable layouts across all screen sizes.
• Do apply md spacing (24px) as the default section separator and card padding; use lg (40px) only for major section breaks to avoid visual fragmentation.
• Do pair Anthropic Sans (headlines) with Anthropic Serif (body) to reinforce the brand's dual commitment to precision and thoughtfulness.
• Do use the shadow system (elevation.md and elevation.lg) to create depth, and transition between levels on hover with 200ms cubic-bezier(0.16, 1, 0.3, 1) easing.
• Do apply 1px borders at outline-variant (#87867f) to define card and input boundaries, avoiding heavy shadows that would clutter the minimalist aesthetic.

**Don't**

• Don't use secondary (#788c5d) or tertiary (#6a9bcc) as primary CTAs—they are supporting accents only and will dilute the brand's visual hierarchy.
• Don't exceed 24px border-radius on cards or containers; excessive rounding undermines the technical credibility of the brand.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(20, 20, 19, 0.12)) or use harsh blacks (rgba(0, 0, 0, ...)) in shadow definitions—maintain warmth via on-surface color.
• Don't set line-height below 1.5x for body text; the serif typeface requires generous vertical spacing for comfortable reading.
• Don't mix Anthropic Sans and Anthropic Serif within a single headline or label—maintain clear typographic roles to preserve visual clarity.
• Don't use the surface-container stack for text backgrounds; reserve it for card and input containers only to avoid visual confusion.