Anthropic Design System

Overview

Anthropic's digital presence is defined by a deliberate tension between warmth and rigor—a research-grade aesthetic that feels simultaneously academic and approachable. The canvas is not white but a carefully calibrated warm ivory ({colors.canvas}), evoking aged paper or museum walls, while the ink sits at a dense near-black ({colors.ink}) that reads as authoritative without harshness. This is not the cold minimalism of a SaaS dashboard; it is the considered restraint of a publisher whose subject matter demands gravity but whose audience includes curious generalists.

Brand voltage lives almost entirely in the inversion pattern: {component.signature-card} surfaces flip to {colors.surface-dark} backgrounds with {colors.on-dark} cream text, creating moments of graphic punctuation against the otherwise light environment. The primary CTA ({component.button-primary}) adopts the same dark treatment, making it visually identical to the signature cards and establishing a cohesive language of "important things are dark rectangles." There is no accent color in the traditional sense—no violet pulse or electric blue. The brand trusts scale, weight, and the proprietary typefaces to carry emphasis.

The typography system rests on a dramatic dual-family architecture: {typography.title-md} and {typography.body-lg} render in Anthropic Serif at sizes that would be headline-scale elsewhere (90.78px for the hero, 24px for body copy), while structural elements—navigation, UI chrome, section headings—use Anthropic Sans in weights ranging from 400 to 700. The result is a voice that sounds like a serious journal edited by people who care about readability: the serif carries narrative warmth, the sans delivers information cleanly. Notably, display text never exceeds weight 700; the system prefers size over brawn.

Shape language is restrained but intentional: {rounded.lg} (24px) applies only to the signature cards, giving them a softened geometry that contrasts with the otherwise sharp ({rounded.sm}, 8px) or square ({rounded.none}) treatment of buttons and inputs. This creates a subtle visual hierarchy where "containers breathe, interfaces stay precise."

Key Characteristics

• Warm ivory canvas ({colors.canvas} — #faf9f5) replacing pure white, establishing a scholarly atmosphere across all non-inverted surfaces.
• Near-black ink ({colors.ink} — #141413) for all primary text, creating high-contrast legibility without the harshness of #000000.
• Inverted signature cards ({component.signature-card}) using {colors.surface-dark} backgrounds with cream {colors.on-dark} typography at dramatic serif scale.
• Proprietary dual-typeface system: Anthropic Serif for narrative/display roles, Anthropic Sans for structural/UI roles.
• Generous vertical rhythm with {spacing.section} (76px) and {spacing.section-xl} (78px) padding between major bands.
• Restrained radius vocabulary: {rounded.lg} reserved exclusively for signature card containers; buttons use {rounded.sm} or remain square.
• Body text at unusually large size ({typography.body-lg}, 24px), prioritizing readability and editorial presence.
• No accent color—brand emphasis carried through inversion (dark surfaces), scale (90+px headlines), and weight contrast (serif vs. sans).

Colors

Brand & Accent

• Primary ({colors.primary} — #141413): Near-black used for CTAs ({component.button-primary}), navigation text, and all primary interactive elements. Functions as the "active" state of the brand.
• Primary Hover ({colors.primary-hover} — #2a2927): Slightly lifted black for hover states on primary buttons and links.
• Accent ({colors.accent} — #d4a574): Warm terracotta used sparingly for decorative highlights and callout elements (inferred from brand language).

Surface

• Canvas ({colors.canvas} — #faf9f5): Primary page background—a warm ivory that replaces pure white throughout the system. Used in {component.hero-band}, {component.top-nav}, and all default section backgrounds.
• Surface Warm ({colors.surface-warm} — #f0eee6): Slightly deeper ivory for card containers ({component.card-surface}), footer backgrounds ({component.footer}), and subtle elevation differentiation.
• Surface Tan ({colors.surface-tan} — #e3daccent): Medium warmth for tag backgrounds ({component.label-tag}), elevated cards ({component.card-surface-elevated}), and form field fills.
• Surface Dark ({colors.surface-dark} — #141413): Deep charcoal-black used for inverted signature cards ({component.signature-card}) and CTA sections ({component.cta-section}). Carries maximum brand weight.
• Surface Elevated ({colors.surface-elevated} — #1e1e1c): Slightly lifted dark for hover states on dark surfaces.

Text

• Ink ({colors.ink} — #141413): Primary text color on light backgrounds—used for headlines, navigation, body copy, and all default text states.
• Body ({colors.body} — #b0aea5): Muted warm gray for secondary descriptive text, hero subtitles, and de-emphasized content. Creates clear hierarchy from ink without resorting to small sizing.
• Body Strong ({colors.body-strong} — #6e6c65): Mid-tone gray for tertiary text, metadata, captions, and supporting information below body importance.
• Muted ({colors.muted} — rgba(20, 20, 19, 0.6)): Semi-transparent ink for disabled states, placeholder text, and very de-emphasized UI labels.
• Muted Soft ({colors.muted-soft} — #8a887f): Light warm gray for footer links, copyright lines, and lowest-priority text.
• On Primary ({colors.on-primary} — #ffffff): Pure white text on dark primary buttons and dark surfaces.
• On Dark ({colors.on-dark} — #faf9f5): Cream-white text matching the canvas color, used on {colors.surface-dark} signature cards for optical harmony.

Hairlines & Borders

• Hairline ({colors.hairline} — #e8e6dc): Subtle ivory-adjacent line for dividers ({component.divider}), input borders, and card outlines. Nearly invisible at a glance.
• Hairline Strong ({colors.hairline-strong} — #d4d1c5): Visible warm-gray line for focused input borders and active element outlines.
• Border Dark ({colors.border-dark} — #2a2927): Dark line for borders on dark surfaces and high-contrast separators.

Semantic

• Link ({colors.link} — #141413): Inline links inherit ink color, distinguished by underline treatment rather than hue shift.
• Link Active ({colors.link-active} — #3d3c39): Slightly lighter shade for visited or active link states.
• Error ({colors.error} — #c14444): Red for validation errors and destructive actions.
• Success ({colors.success} — #4a7c59): Forest green for confirmation states and positive indicators.

Typography

Font Family

The system is built on three proprietary typefaces served as WOFF2 from Anthropic's CDN:

• Anthropic Sans: A geometric humanist sans-serif (variable weight 300–800) serving all structural, navigational, and UI-text roles. Used for {typography.display-lg}, {typography.heading-md}, {typography.nav-link}, {typography.button}, and all interface chrome. Falls back to Arial.
• Anthropic Serif: A transitional serif face (variable weight 300–800) carrying all narrative, display, and body-copy roles. Used for {typography.title-md}, {typography.body-lg}, {typography.body-md}, and the dramatic hero headline. Falls back to Georgia.
• Anthropic Mono (with JetBrains Mono fallback): A monospaced face for code snippets, technical annotations, and data displays. Used for {typography.mono}.

All three families include italic variants loaded as separate font-face declarations. The font-display: swap setting ensures text renders immediately with fallbacks before custom faces finish loading.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 90.78px | 700 | 1.1 | -0.02em | Hero headline (sans-serif, though serif appears at same scale) | | {typography.display-lg} | 60.87px | 700 | 1.1 | -0.01em | Section headlines, major statements | | {typography.title-md} | 90.78px | 400 | 1.1 | 0 | Signature card titles, display serif | | {typography.heading-md} | 24px | 600 | 1.3 | 0 | Section headings, card titles (sans) | | {typography.body-lg} | 24px | 400 | 1.4 | 0 | Hero description, lead paragraphs (serif) | | {typography.body-md} | 18px | 400 | 1.5 | 0 | Standard body copy (serif) | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Secondary body text, UI descriptions (sans) | | {typography.nav-link} | 20px | 400 | 1.4 | 0 | Navigation items, top-level links | | {typography.button} | 16px | 500 | 1.25 | 0 | Button labels, CTAs | | {typography.caption} | 14px | 400 | 1.4 | 0 | Footnotes, metadata, legal text | | {typography.mono} | 13px | 400 | 1.5 | 0 | Code blocks, technical strings | | {typography.label} | 12px | 600 | 1.3 | 0.05em | Tags, category labels, badges |

Principles

The typography system makes two unconventional choices that define its character. First, size carries hierarchy more than weight: body copy runs at 24px ({typography.body-lg})—a size most systems reserve for display—while the headline scales to 90.78px. Weight stays within a narrow band (400–700); there is no 900 black, no delicate 100 hairline. The system trusts the reader's attention to follow scale, reserving weight shifts for the sans/serif boundary (structural headings at 600, narrative headings at 400).

Second, the serif/sans split is semantic, not decorative: Anthropic Serif always signals "this is content to be read"—narrative, explanation, argument. Anthropic Sans always signals "this is structure to be navigated"—menus, buttons, section labels, metadata. You will never find a paragraph set in the sans, nor a navigation item in the serif. This rigid separation creates a reliable scanning rhythm: users learn that serifs demand attention while sans-serifs can be skimmed.

Letter spacing is nearly invisible across the system (0 or negative hundredths of an em). Only {typography.label} uses expanded tracking (+0.05em), treating category tags as almost-logotype elements. Line heights are generous throughout (1.1–1.5), reflecting the editorial ambition of long-form readability.

Note on Font Substitutes

Anthropic Sans maps closely to Inter or DM Sans for open-source substitution—geometric, neutral, with similar x-height and aperture proportions. Anthropic Serif substitutes well with Source Serif 4, Lora, or Crimson Pro—transitional serifs with moderate contrast and readable at large sizes. Anthropic Mono can drop to JetBrains Mono (already declared as fallback) or IBM Plex Mono.

For implementation via Google Fonts:

--font-sans: 'Inter', 'Anthropic Sans', Arial, sans-serif;
--font-serif: 'Source Serif 4', 'Anthropic Serif', Georgia, serif;
--font-mono: 'JetBrains Mono', 'Anthropic Mono', monospace;

Layout

Spacing System

• Base unit: 4px (derived from {spacing.xxs}).
• Tokens: {spacing.xxs} (4px — icon gaps, tight internals), {spacing.xs} (8px — inline spacing, small gaps), {spacing.sm} (12px — compact padding), {spacing.md} (16px — standard padding), {spacing.lg} (22px — comfortable padding), {spacing.xl} (31px — card internal spacing), {spacing.xxl} (46px — large component gaps), {spacing.section} (76px — vertical band spacing), {spacing.section-xl} (78px — extended band spacing), {spacing.container} (642px — max content width).
• Section padding (vertical): {spacing.section} (76px) used between hero and content bands; {spacing.section-xl} (78px) for major sectional breaks.
• Card internal padding: {spacing.xl} (31px) for {component.signature-card} and {component.card-surface} variants.
• Gutters: Implicit gutter of ~32px derived from container margin patterns; responsive clamp-based margins per the detected --site--margin CSS variable.

Grid & Container

Max content width is approximately 1129px for the navigation wrapper and 1440px for main/page containers, suggesting a wide-format editorial layout that breathes on large monitors. The system does not appear to use a strict column grid; instead, it relies on fluid containers with generous margins and asymmetric column splits (hero text left, illustration right).

Hero layouts use an approximate 45/55 or 50/50 split between text and visual columns. Below the fold, content likely flows in single-column editorial width (~642px per the {spacing.container} token) or full-width band treatments.

Whitespace Philosophy

This is an airy, editorial whitespace system. Vertical padding between sections (76–78px) exceeds typical SaaS density by 2–3×. Body text at 24px with 1.4 line-height consumes significant vertical real estate, and the system embraces that cost. Whitespace is not empty space; it is the medium that gives the serif display type room to resonate.

Header Architecture

|-----------------------------------------------------------------|
| [ANTHROPIC logo]     Research   Economic Futures   Commitments v  |
|                                Learn v        News   [Try Claude v]|
|-----------------------------------------------------------------
|  max-width: ~1129px (nav) / 1440px (page)                        |
|  height: 72px                                                     |
|  background: {colors.canvas}                                      |
|  text: {typography.nav-link} @ {colors.ink}                       |

Navigation is a single-row horizontal bar with flush-left logo, centered-spaced navigation links with dropdown toggles (Commitments, Learn), and flush-right utility items (News link, Try Claude CTA button). The "Try Claude" button appears as a pill-shaped dark container with dropdown chevron.

Hero Section

|-----------------------------------------------------------------|
|                                                                 |
|  AI research and products                                        |
|  that put safety at the frontier            [Project Glasswing    |
|                                               signature card]    |
|                                                                 |
|  AI will have a vast impact on the world.                        |
|  Anthropic is a public benefit corporation...                     |
|                                                                 |
|-----------------------------------------------------------------|
|  padding-top: 76px ({spacing.section})                           |
|  padding-bottom: 76px ({spacing.section})                        |
|  background: {colors.canvas}                                     |
|  headline: {typography.display-xl} @ {colors.ink}                |
|  description: {typography.body-lg} @ {colors.body}               |

The hero follows a classic editorial layout: oversized sans-serif headline (or serif per context) at left, with a secondary description column beneath it in the warmer {colors.body} color. To the right (or below on narrower viewports) sits the {component.signature-card}—a dark rounded rectangle containing the "Project Glasswing" title in massive cream serif and a generative hexagonal-mesh illustration.

Signature Card Component

|-----------------------------------------------------------|
|                                                           |
|  Project                                                  |
|  Glasswing                    [hexagonal mesh             |
|                               generative artwork]          |
|                                                           |
|-----------------------------------------------------------|
|  background: {colors.surface-dark}                         |
|  text: {typography.title-md} (serif) @ {colors.on-dark}   |
|  rounded: {rounded.lg} (24px)                              |
|  padding: {spacing.xl} (31px)                              |

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} background | Base page surface, hero band | | 1 — Hairline | 1px {colors.hairline} border | Dividers, input defaults | | 2 — Soft lift | {extensions.shadows.sm} | Cards on canvas, hover states | | 3 — Elevated | {extensions.shadows.md} | Dropdowns, modals, sticky elements | | 4 — Modal | {extensions.shadows lg} | Dialog overlays, signature card lift | | 5 — Color block | {colors.surface-dark} background | Signature cards, CTA sections |

The depth philosophy here is color-over-shadow. Rather than layering surfaces through progressive shadow stacks, the system creates elevation primarily through background-color shifts: {colors.canvas} → {colors.surface-warm} → {colors.surface-tan} → {colors.surface-dark}. Shadows are present but subtle (the strongest, {extensions.shadows.lg}, uses only 18% opacity black), ensuring they never compete with the warm color story. The deepest "elevation" is the full inversion to {colors.surface-dark}, which reads as heavier than any shadow could convey.

Decorative Depth

The signature card contains generative artwork—a hexagonal wireframe mesh rendered in white lines against the dark surface. This imagery functions as decorative depth, providing texture and visual interest within the inverted container. The mesh appears algorithmic/geometric, reinforcing the AI-research positioning.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.none} | 0px | Nav links, secondary buttons, sharp-edged containers | | {rounded.sm} | 8px | Buttons, inputs, tags, standard rounded corners | | {rounded.DEFAULT} | 8px | Default/fallback radius | | {rounded.md} | 16px | Surface cards (warm/tan variants) | | {rounded.lg} | 24px | Signature dark cards only |

The radius vocabulary is intentionally limited. Only the {component.signature-card} earns the generous 24px treatment, marking it as a special architectural element distinct from functional UI components. Everything else clusters at 8px (standard) or 0px (sharp), maintaining a precise, technical feel for interactive elements.

Photography Geometry

The visible imagery in the screenshot is generative/algorithmic (hexagonal mesh pattern) rather than photographic. It occupies the right portion of the signature card with no apparent border-radius clipping (it fills the rounded container naturally). Aspect ratio appears roughly 4:3 or 16:10. If photography is used elsewhere on the site, it would likely follow the same container-rounded approach—images clipped to their parent's {rounded.lg} or {rounded.md} radius.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Navigation

{component.top-nav} — Fixed-height (72px) horizontal navigation bar spanning full viewport width. Background {colors.canvas}, text rendered in {typography.nav-link} at {colors.ink}. Contains the Anthropic wordmark at left, navigation links with optional dropdown chevrons at center-right, and the Try Claude CTA at far right. No visible border or shadow; separation from content relies solely on spacing. Transitions on dropdown reveals use the {extensions.motion.scroll-easing} cubic-bezier.

{component.nav-logo} — The "ANTHROPIC" wordmark in uppercase, rendered in {typography.body-sm} (16px) weight 400 at {colors.ink}. Uses the sans-serif family despite being a brand mark. Transparent background, clickable, flush-left in nav.

{component.nav-link} — Individual navigation items ("Research", "Economic Futures", "News"). Transparent background, {typography.nav-link} (20px) at {colors.ink}, padding 22.4px 12px. No underline at rest; underline or background treatment appears on hover/active per transition tokens showing text-decoration-color 0.2s.

{component.nav-dropdown-toggle} — Navigation items with dropdown functionality ("Commitments", "Learn"). Same styling as {component.nav-link} with additional chevron icon (down-arrow SVG, inferred). Triggers dropdown panel on click/hover.

Buttons

{component.button-primary} — The principal call-to-action. Background {colors.primary} (near-black), text {colors.on-primary} (white) in {typography.button} (16px weight 500). Rounded {rounded.sm} (8px), padding 12px 24px. Appears in navigation as "Try Claude" and in content sections as primary conversion target. Transition: background-color 0.2s, color 0.2s.

{component.button-primary-active} — Pressed/active state of primary button. Background lifts to {colors.primary-hover} (#2a2927). All other properties identical.

{component.button-secondary} — Ghost-style secondary action. Transparent background, text {colors.ink} in {typography.button}. Square corners ({rounded.none}), padding 12px 24px. Likely gains underline or background fill on hover.

{component.button-ghost} — Light-on-dark variant used within {component.signature-card} or {component.cta-section} contexts. Transparent background, text {colors.on-dark} (cream), rounded {rounded.sm}. Ensures visibility against dark surfaces.

Content Containers

{component.hero-band} — Full-width vertical section containing the above-the-fold hero content. Background {colors.canvas}, vertical padding {spacing.section} (76px). Wraps the headline, description, and signature card in a flex/grid layout.

{component.hero-headline} — The primary headline "AI research and products that put safety at the frontier." Rendered in {typography.display-xl} (90.78px weight 700) at {colors.ink}. Note: the pre-assigned {typography.title-md} uses serif at the same size; the actual hero may alternate between sans and serif depending on page context. Underlined words ("research", "products") appear to use text-decoration-thickness or a pseudo-element border for emphasis.

{component.hero-subhead} — Secondary text beneath headline, if present. Would use {colors.body} (muted warm gray).

{component.hero-description} — The explanatory paragraph beginning "AI will have a vast impact on the world..." Set in {typography.body-lg} (24px serif) at {colors.body} (#b0aea5). This is notably larger than conventional body copy and uses the warmer color to establish clear hierarchy beneath the headline.

{component.signature-card} — The defining visual element: a dark rounded rectangle containing project-specific content. Background {colors.surface-dark} (#141413), text in {typography.title-md} (90.78px serif) at {colors.on-dark} (#faf9f5 cream). Rounded {rounded.lg} (24px), padding {spacing.xl} (31px). Contains a title ("Project Glasswing") and generative artwork. This component establishes the "inverted brand moment" pattern.

{component.signature-card-title} — Title text within the signature card. Inherits card's dark background and cream text color. Renders in the dramatic serif display size.

{component.card-surface} — Standard content card on light background. Background {colors.surface-warm} (#f0eee6), text {colors.ink} in {typography.body-md}. Rounded {rounded.md} (16px), padding {spacing.xl}. Used for feature cards, article previews, or content blocks below the hero.

{component.card-surface-elevated} — Elevated variant of content card with deeper background. Background {colors.surface-tan} (#e3dacc), same text and radius treatment as {component.card-surface}. Provides subtle stacking when multiple cards appear together.

Forms & Inputs

{component.text-input} — Standard text input field. Background {colors.canvas}, text {colors.ink} in {typography.body-md}. Border 1px {colors.hairline}, rounded {rounded.sm} (8px), padding 12px 16px. Height approximately 48px (derived from padding + font size + line-height). Focus state transitions border to {colors.hairline-strong} per border-color 0.2s transition token.

{component.text-input-focus} — Focused state of text input. Border color strengthens to {colors.hairline-strong} (#d4d1c5). May also show subtle ring/shadow enhancement (not explicitly detected).

Links & Text

{component.link-inline} — Inline text link within body copy or navigation. Transparent background, text {colors.link} (same as ink) in appropriate body typography. Distinguished by underline that animates in per text-decoration-color 0.2s token—likely an underline that fades in or extends on hover.

{component.link-inline-active} — Active/visited state. Text color shifts to {colors.link-active} (#3d3c39), a subtly lighter shade.

Sections & Layout

{component.section-container} — Inner content wrapper constraining width to ~642px ({spacing.container}) for editorial reading columns. Transparent background, centers content horizontally.

{component.label-tag} — Category or taxonomy label badge. Background {colors.surface-tan} (#e3daccent), text {colors.ink} in {typography.label} (12px weight 600, letter-spacing +0.05em). Rounded {rounded.sm}, padding 6px 12px. Used for tagging articles, projects, or topics.

{component.divider} — Horizontal rule separating content sections. Full-width, height 1px, background {colors.hairline} (#e8e6dc). Nearly invisible, serving as rhythmic breathing room rather than strong separator.

{component.footer} — Page footer section. Background {colors.surface-warm} (#f0eee6), text {colors.muted-soft} in {typography.caption} (14px). Padding {spacing.section-xl} vertically. Contains links, legal text, and utility navigation.

{component.footer-link} — Individual link within footer. Text {colors.ink} or {colors.muted-soft} depending on prominence, {typography.caption} sizing.

{component.cta-section} — Full-width call-to-action band, typically appearing lower on page. Background {colors.surface-dark} (inverted), text {colors.on-dark} in {typography.display-lg} (60.87px). Padding {spacing.section-xl} vertically. Creates bookend symmetry with the hero's signature card.

Do's and Don'ts

Do

• Do use {colors.canvas} (#faf9f5) as your page background instead of #ffffff—the warmth is foundational to the brand's scholarly feel.
• Do set body copy at {typography.body-lg} (24px serif) for editorial sections; the system prioritizes readability over information density.
• Do apply {rounded.lg} (24px) only to {component.signature-card} instances—all other components should use {rounded.sm} (8px) or {rounded.none}.
• Do use the serif/sans split semantically: serif for narrative content ({typography.body-lg}, {typography.body-md}, {typography.title-md}), sans for structural UI ({typography.nav-link}, {typography.heading-md}, {typography.button}).
• Do leverage color inversion for emphasis—dark {colors.surface-dark} cards with {colors.on-dark} cream text are the brand's primary "loud" moment.
• Do maintain {spacing.section} (76px) minimum vertical padding between major bands; this airiness defines the editorial rhythm.
• Do use {colors.body} (#b0aea5) for secondary/de-emphasized text rather than reducing font size—the warm gray carries hierarchy at any scale.
• Do apply transition: color 0.2s, background-color 0.2s to all interactive elements for consistent motion feel.
• Do treat the "Try Claude" button as {component.button-primary} even when it contains a dropdown—it shares the dark-background, light-text, rounded-corner DNA.

Don't

• Don't introduce an accent color (violet, blue, green) into the interface—the brand deliberately operates in a near-monochrome warm palette with inversion as its only "color" move.
• Don't round navigation links or secondary buttons—{rounded.none} (0px) is intentional for nav items, creating a sharp, technical frame around the soft interior.
• Don't set headlines above weight 700—the system caps at bold, trusting scale (90.78px) rather than weight (900) for impact.
• Don't use {typography.mono} for anything except code, data, or technical strings—it's a specialized face, not a design texture.
• Don't add gradients, glows, or backdrop-blur effects to cards or overlays; the depth system is color-and-shadow-only, flat in its layering logic.
• Don't reduce body text below 18px ({typography.body-md}) except for true micro-copy ({typography.caption} at 14px, {typography.label} at 12px); 24px body copy is a feature, not a bug.
• Don't apply shadows darker than {extensions.shadows.md} to any element outside of modal/dropdown contexts—heavy shadows fight the warm, paper-like quality of the surfaces.
• Don't mix serif and sans within the same text block (e.g., a paragraph starting in serif and switching mid-sentence); the families have strictly divided semantic territories.
• Don't use pure black (#000000) anywhere—always {colors.primary} (#141413) for dark elements; the slight warmth prevents screen-harshness.

Motion & Animation

Transition Tokens

/* Core interaction transitions */
--transition-color: color 0.2s ease, background-color 0.2s ease;
--transition-transform: transform 0.2s ease;
--transition-border: border-color 0.2s ease;
--transition-decoration: text-decoration-color 0.2s ease;
--transition-all: all 0.2s ease;

/* Scroll-triggered entrance animations */
--entrance-fade: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.38s,
                 transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.38s;
--entrance-fade-early: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
                       transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;

Keyframe Animations

• spin — Continuous 360° rotation, likely for loading indicators or decorative elements.
• marquee — Horizontal scrolling text/content strip for news tickers or testimonial carousels.
• fadein — Opacity 0→1 entrance, used for scroll-triggered content reveals.
• menuOpen — Mobile menu reveal animation (dropdown/slide-down).
• menuClose — Mobile menu dismiss animation (reverse of open).

Interaction Patterns

• Hover lifts: Buttons and cards likely gain subtle Y-axis translation (-2px) combined with shadow deepening on hover, per the transform 0.2s transition token.
• Scroll-triggered fade-up: Content sections animate in from slightly below with opacity transition using the cubic-bezier(0.16, 1, 0.3, 1) ease (an "overshoot" curve that feels organic). Staggered delays (0.18s, 0.38s) create sequential reveal of adjacent elements.
• Underline reveal: Inline links animate their text-decoration-color from transparent to {colors.ink} over 0.2s, creating a smooth underline-draw effect on hover.
• Dropdown panels: Navigation dropdowns animate via menuOpen/menuClose keyframes, likely a combination of opacity fade and Y-axis slide.
• Focus rings: Form inputs transition their border color (not an outline shadow) over 0.2s, maintaining the flat-depth philosophy.
• Marquee scrolling: Auto-scrolling content strips (news, logos, testimonials) run continuously via the marquee keyframe, likely with animation-direction: reverse variants for visual variety.

Imagery Style

• Generative/algorithmic art: The signature card features a hexagonal wireframe mesh pattern—white lines on dark ground—suggesting computational or network visualization themes aligned with AI research positioning.
• Geometric abstraction: Imagery favors mathematical, structured forms over photographic realism. The mesh implies connectivity, systems, and emergent behavior.
• High contrast monochrome: Within dark containers, artwork uses {colors.on-dark} (cream/white) lines against {colors.surface-dark}, maintaining the inverted palette discipline.
• Textural over pictorial: Images function as atmospheric texture supporting the card's textual message, not as independent visual narratives.
• Container-bound: Artwork clips to parent container radius ({rounded.lg}) without floating outside or bleeding to edges.
• No photography detected in viewport: If photographs exist elsewhere, expect them to be treated with similar restraint—possibly desaturated, warmly toned, or overlaid with semi-transparent color blocks to integrate with the palette.
• Illustration style: Clean, vector-like linework; no gradients, soft-shading, or painterly textures visible.
• Scale relationship: Image area is substantial (roughly 40–50% of signature card area), giving visual weight comparable to the large typography it accompanies.

Icon System

• Library: Custom SVG icons (no external icon library detected—no Lucide, Heroicons, Material, or FontAwesome classes present in DOM).
• Specific icons observed: Down-chevron/arrows (dropdown toggles on "Commitments", "Learn", "Try Claude", language selector); hamburger menu (mobile nav, inferred); Anthropic logo wordmark (SVG, inferred).
• Treatment: Stroke-based icons (consistent with geometric, linear aesthetic), colored currentColor to inherit parent text color (typically {colors.ink} or {colors.on-dark}).
• Size: Approximately 16–20px for navigation chevrons, proportional to {typography.nav-link} (20px) text size. Aligned baseline or center with accompanying text.
• Weight: Consistent stroke width (likely 1.5–2px), matching the precise, technical feel of the sans-serif UI type.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Astro — static-leaning with partial hydration
- Styling:        Vanilla CSS or CSS Modules with custom properties (detected vanilla patterns)
- Fonts:          Self-hosted WOFF2 from Anthropic CDN; fallback stack defined in @font-face
- Animation:      CSS transitions + keyframes (detected); JS intersectionObserver for scroll triggers
- Icons:          Custom inline SVGs (currentIcon library)
- Component lib:  None (custom components)
- Build:          Webflow export or custom pipeline (Webflow classes detected: w-dropdown, w-nav)

Note: The presence of w-dropdown, w-nav, and w-embed class prefixes strongly suggests the site was built in Webflow and exported. Implementation should either continue in Webflow or replicate its output conventions (BEM-ish naming, utility-class augmentation, embed slots for custom code).

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column layout, stacked hero (headline → description → signature card), hamburger menu replaces horizontal nav, reduced type scale | | Tablet | 768px – 1024px | Two-column hero begins (text + card side-by-side), condensed spacing, nav may collapse to icons | | Desktop | 1024px – 1440px | Full layout as shown in screenshot, max-content containers active, all nav items visible | | Wide | > 1440px | Container maxes at 1440px with auto margins, additional horizontal breathing room |

Touch Targets

• {component.button-primary}: ~48px height (padding 12px × 2 + 16px text + line-height), exceeds WCAG AAA 44×44 minimum ✓
• {component.text-input}: ~48px height (padding 12px × 2 + 18px text), meets AAA minimum ✓
• {component.nav-link}: Touch area extends via 22.4px vertical padding, creating ~56px touch height ✓
• {component.signature-card}: Large tap target inherently; entire card may be clickable for project navigation

Collapsing Strategy

• Navigation: Horizontal desktop nav collapses to hamburger menu (is-mobile w-nav class detected) with full-screen overlay drawer triggered by {component.nav-logo} area or dedicated toggle. Menu uses menuOpen/menuClose keyframe animations for reveal.
• Hero layout: Two-column split (headline-left, card-right) stacks vertically on mobile: headline → description paragraph → signature card full-width below.
• Signature card: Maintains {rounded.lg} radius and {colors.surface-dark} background at all breakpoints; internal text scales down proportionally (90.78px → ~48–56px on mobile via clamp() or media query).
• Type scale: Display text ({typography.display-xl} at 90.78px) likely reduces to ~48–56px on mobile via fluid typography (clamp() detected in --site--margin CSS variable, suggesting fluid patterns throughout).
• Section padding: {spacing.section} (76px) likely compresses to 48–56px on mobile, maintaining proportional rhythm.
• Containers: {spacing.container} (642px) expands to near-full-width on mobile with comfortable gutters (16–24px).

Image Behavior

• Signature card artwork: Scales proportionally within card container, maintains aspect ratio, may crop or recenter on narrower views. Hexagonal mesh pattern is resolution-independent (vector/SVG preferred).
• Hero illustration: If additional hero imagery exists beyond the signature card, it would stack below text on mobile or become full-bleed background with text overlay.
• Avatars/team photos: Not detected in viewport; if present, would likely use {rounded.full} or {rounded.md} with consistent {colors.hairline} border treatment.

Iteration Guide

1. Build a landing page that closely mimics the design system in this DESIGN.md. Use Next.js/Astro with vanilla CSS or CSS Modules, respecting the Webflow-export patterns (embed slots for custom code, BEM-adjacent class naming).
2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Define CSS custom properties (:root { --color-canvas: #faf9f5; ... }) mapping every token, then reference variables throughout—never hardcode a value that has a token.
3. Add state variants (-hover, -disabled, -focus) per your stack's conventions; the spec documents Default and Active/Pressed only for buttons, Focus for inputs. Hover transitions should use 0.2s ease timing.
4. When adding a new component, decide first which sub-system it belongs to: editorial (serif type, warm surface colors, generous padding) vs. interface (sans type, sharp or lightly rounded corners, compact padding). Never mix the two within a single component.
5. Variants of an existing component live as separate frontmatter entries (button-primary-active, text-input-focus, never nested objects). Each gets its own YAML key and prose entry.
6. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically.
7. When in doubt about emphasis: larger serif text before bolder sans text, inverted dark surface before solid accent color, {spacing.xl} padding before adding borders.
8. Implement scroll-triggered entrance animations using Intersection Observer with the cubic-bezier(0.16, 1, 0.3, 1) ease and 800ms duration. Stagger children by ~200ms delay for sequential reveal.
9. Font setup: self-host the Anthropic fonts from the provided CDN URLs, or substitute Inter/Source Serif 4/JetBrains Mono via Google Fonts with the CSS variable mappings provided in the Typography section.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover treatments (background color shifts, underline animation details, transform values) are inferred from transition tokens but not directly observable from a static screenshot.
• Loading skeletons/pending states: Not visible in the DOM snapshot; recommended implementation uses {colors.surface-tan} background with pulsing opacity at {colors.muted} transparency.
• Form validation states beyond focus: Error ({colors.error}) and success ({colors.success}) tokens are defined but no corresponding input/error-message components were observed.
• Dropdown panel contents: The navigation has dropdown toggles ("Commitments ▾", "Learn ▾"), but the panel interiors (link lists, illustrations, descriptions) were not captured in the viewport.
• Mobile navigation anatomy: The is-mobile w-nav container exists in the DOM but collapsed; its hamburger icon design, menu panel layout, and close-button treatment are unobserved.
• Below-fold content sections: Only the hero and top of a CTA section are visible; pricing, team, research, careers, and other content bands are undocumented.
• Dark mode: extensions.mode is "light" based on the warm canvas; no dark mode variant was detectable. A hypothetical dark mode would invert {colors.canvas} ↔ {colors.surface-dark} with adjusted surface tokens.
• Pixel-exact values for pastel surfaces: Colors like {colors.surface-tan} (#e3daccent) and {colors.body} (#b0aea5) were extracted from computed RGB values; minor perceptual variation may occur across displays due to the warm palette's subtlety.
• Accessibility markup: ARIA labels, focus management, skip-links (class nav_skip_wrap detected but behavior unverified), and screen-reader-only text are partially present but not fully audited.
• Webflow-specific behaviors: Classes like w-dropdown-toggle, g_clickable_btn, and u-bg-ivory-medium suggest framework-dependent JavaScript interactions (dropdown logic, CMS-driven content, embed injection) that cannot be replicated from CSS alone.