claude.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: claude.com
description: "Light product system built on #faf9f5 with #faf9f5 as the primary CTA accent. Type anchored in anthropicSerif at 72px / weight 330. Extracted automatically from https://claude.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  claude.com is built on a warm, off-white canvas (rgb(250, 249, 245)).
  The system uses rgb(250, 249, 245) as a near-neutral accent (low saturation).
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside editorial serif type (anthropicSerif) — voice of authority.
  A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 19 keyframe animations plus transition-driven interactions.

colors:
  background: "#faf9f5"
  surface-1: "#ffffff"
  surface-2: "#f0eee6"
  ink: "#141413"
  ink-muted: "rgba(20, 20, 19, 0.65)"
  ink-subtle: "#30302e"
  primary: "#faf9f5"
  on-primary: "#111111"
  primary-hover: "#141413"
  hairline: "#30302e"
  primary-focus: "#2e2e2c"
  semantic-error: "#bf4d43"

typography:
  display-xl:
    fontFamily: "anthropicSerif, Georgia, 'Times New Roman', serif"
    fontSize: 72px
    fontWeight: 330
    lineHeight: 1.1
    letterSpacing: 0
  display-md:
    fontFamily: "anthropicSerif, Georgia, 'Times New Roman', serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0
  body:
    fontFamily: "anthropicSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  button:
    fontFamily: "anthropicSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: 0
  mono:
    fontFamily: "anthropicSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 32px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 16px
  sm: 24px
  md: 32px
  lg: 56px
  xl: 64px
  xxl: 80px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-light--invert:
    backgroundColor: "{colors.primary}"
    textColor: "#5e5d59"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  button-dark--solid:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  input-text-input:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.mono}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  status-badge-neutral-light:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
  tab-pill-tab:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 4px

extracted_at: "2026-06-11T05:00:08.013Z"
completeness: 86
scoreVersion: "v2"

---

# Design System — claude.com
> Extracted automatically by Prism from https://claude.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: sparse  |  **Motion**: expressive  |  **Weight**: medium  |  **Aesthetic**: editorial-minimal

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#faf9f5` |
| Type posture | serif-led (anthropicSerif) | "Think fast,build faster" |
| Color assertion | dual-accent | #faf9f5 |
| Whitespace | sparse | section rhythm 72px |
| Interaction | expressive | 19 keyframes, 22 transitions |
| Radius language | 8px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · serif-display · dual-accent · 8px-rounded · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(250, 249, 245)` is the page background. Every component composits against this.
> - **Accent**: `rgb(250, 249, 245)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 72px between major bands. Card padding: 56px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

claude.com's canvas is a warm, intentionally-tinted surface (`#faf9f5`) — a refusal of the default white that immediately signals editorial intent. This isn't sterility, it's an invitation to read. 

Headlines are set in **anthropicSerif**, a serif display face (the dominant type signature, e.g. "Think fast,build faster" at 72px). A second display voice — **anthropicSans** (sans) — appears in lower bands (e.g. "Brainstorm in chat, build in Cowork"), used for editorial accent. Body text is set in **anthropicSans** with OpenType utility features (`"liga", "lnum", "pnum"`) for data-dense contexts. The weight scale rejects the standard 100/200/.../900 ladder in favor of custom values (max **700** in this system) — a deliberate signal that this design system is precisely tuned, not assembled from defaults. 

Body text reads in Near-Black (`#141413`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Off-White** (`#faf9f5`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (6 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. The site uses a variable font with OPSZ axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Off-White (`#faf9f5`)
- Primary typeface: anthropicSans
- Primary text: Near-Black (`#141413`)
- Accent: Off-White (`#faf9f5`)
- Display: 72px weight 330
- Shadow system: 6 distinct elevation levels
- Custom fonts loaded: anthropicSans, anthropicSans Fallback, anthropicSerif, anthropicSerif Fallback, anthropicMono, anthropicMono Fallback

## 2. Color Palette & Roles

### Background & Surface
- **Off-White** (`#faf9f5`): Page background (primary)
- **Pure White** (`#ffffff`): Surface / elevated background
- **Beige** (`#e8e6dc`): Surface / elevated background
- **Whitesmoke** (`#f0eee6`): Surface / elevated background

### Text & Content
- **Near-Black** (`#141413`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Charcoal** (`#30302e`): Secondary text
- **Near-Black** (`#262624`): Secondary text
- **Charcoal** (`#3d3d3a`): Secondary text

### Accent & Interactive
- **Focus** (`#2c84db`): Interactive / accent
- **Clay** (`#d97757`): Interactive / accent
- **Ring Blue** (`#4285f4`): Interactive / accent
- **Success Green** (`#34a853`): Interactive / accent
- **Amber** (`#fbbc05`): Interactive / accent
- **Vermillion** (`#ea4335`): Interactive / accent
- **Terracotta** (`#c6613f`): Interactive / accent

### Border & Divider
- **Silver** (`#d1cfc5`): Borders / dividers

### Full Extracted Palette
**21 colors rendered on the page** + **16** more declared in design tokens (CSS custom properties — not necessarily painted). (17 categorized above + 20 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#5e5d59` — Slate Grey
- `#4d4c48` — Charcoal
- `#87867f` — Slate Grey
- `#b0aea5` — Cool Gray
- `#ebcece` — Coral *(token)*
- `#73726c` — Slate Grey *(token)*
- `#e3dacc` — Oat *(token)*
- `#f5f4ed` — Off-White *(token)*
- `#9c9a92` — Grey *(token)*
- `#bcd1ca` — Cactus *(token)*
- `#c46849` — Terracotta *(token)*
- `#6a9bcc` — Sky *(token)*
- `#c46686` — Fig *(token)*
- `#c2c0b6` — Silver *(token)*
- `#1a1918` — Near-Black *(token)*
- `#bf4d43` — Error *(token)*
- `#1f1e1d` — Near-Black *(token)*
- `#cbcadb` — Heather *(token)*
- `#dedcd1` — #dedcd1 *(token)*
- `#788c5d` — Olive *(token)*

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--gap-md`: `32px`
- `--gap-sm`: `24px`
- `--gap-xs`: `16px`
- `--section-spacing-md`: `96px`

**Font Weight Token**
- `--font-weight-bold`: `700`
- `--font-weight-light`: `300`
- `--font-weight-regular`: `400`
- `--theme-button-secondary-font-weight`: `500`

**Error / Destructive**
- `--color-error`: `#bf4d43`

**Motion Token**
- `--reveal-duration`: `1s`

**Other tokens**
- `--text-width-wide`: `70ch`
- `--theme-checkbox-bg-selected`: `#000`
- `--color-coral`: `#ebcece`
- `--color-gray-300`: `#d1cfc5`
- `--color-gray-550`: `#73726c`
- `--color-clay-hover`: `#c6613f`
- `--theme-background-primary`: `#faf9f5`
- `--color-gray-500`: `#87867f`

## 3. Typography Rules

### Font Families
- **Primary**: `anthropicSans`
- **Secondary**: `anthropicSerif`
- **Font 3**: `anthropicSans Fallback`
- **Font 4**: `anthropicSerif Fallback`
- **Font 5**: `anthropicMono`

### Custom Fonts Loaded
- **anthropicSans** weight normal (normal)
- **anthropicSans Fallback** weight normal (normal)
- **anthropicSerif** weight normal (normal)
- **anthropicSerif Fallback** weight normal (normal)
- **anthropicMono** weight normal (normal)
- **anthropicMono Fallback** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | anthropicSerif | 72px | 330 | 1.1 | normal | Main headline (h1) |
| Sub-heading | anthropicSerif | 30px | 400 | 1.2 | normal | Third-level heading (h3) |
| Button Large | anthropicSans | 17px | 600 | 1.15 | normal | Button label (17px) |
| Card Title | anthropicSans | 15px | 400 | 1.5 | normal | Card headings |
| Input | anthropicSans | 12px | 400 | 1.4 | normal | Form input (12px) |

### Font Weight Scale

CSS custom properties define 9 explicit weight steps:
- `--font-weight-light`: `300` — Light
- `--font-weight-regular`: `400` — Regular
- `--theme-button-primary-font-weight`: `480` — Medium (custom, ~500)
- `--theme-button-secondary-font-weight`: `500` — Medium
- `--theme-button-clay-font-weight`: `500` — Medium
- `--theme-button-tertiary-font-weight`: `500` — Medium
- `--font-weight-medium`: `500` — Medium
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-bold`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `72px`, `52.00px`, `30px`, `24px`, `23px`, `19px`, `17px`, `16px`, `15px`, `14px`, `12px`, `11px`

> 7 size(s) detected outside the sampled hierarchy (51.9978px, 24px, 23px, 19px, 16px, 14px, 11px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **tabular figures** (`tnum`) — numbers align vertically, essential for pricing tables and dashboards
- **lining figures** (`lnum`) — full-height numbers, more authoritative than old-style
- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "liga", "lnum", "pnum", "tnum";
}
```

**Variable font axes:**
- OPSZ axis

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#30302e` `{colors.hairline}`
- Padding: 8px 0px
- Radius: 0px
- Font: 15px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: color: `rgb(46, 46, 44)`, border: `0px none rgb(46, 46, 44)`, borderColor: `rgb(46, 46, 44)`

**Light / Invert**
- Background: `#faf9f5` `{colors.primary}`
- Text: `#5e5d59`
- Padding: 8px 12px
- Radius: 8px
- Shadow: `rgb(209, 207, 197) 0px 0px 0px 1px`
- Font: 15px weight 400
- Use: Bright CTA on dark sections
- Focus: color: `rgb(46, 46, 44)`, border: `0px none rgb(46, 46, 44)`, borderColor: `rgb(46, 46, 44)`

**Dark / Solid**
- Background: `#141413` `{colors.primary-hover}`
- Text: `#faf9f5` `{colors.primary}`
- Padding: 8px 12px
- Radius: 8px
- Font: 15px weight 400
- Use: Solid dark CTA
- Focus: color: `rgb(46, 46, 44)`, border: `0px none rgb(46, 46, 44)`, borderColor: `rgb(46, 46, 44)`

**Light / Invert**
- Background: `#faf9f5` `{colors.primary}`
- Text: `#141413` `{colors.primary-hover}`
- Padding: 0px 20px
- Radius: 9.6px
- Border: 1px solid rgb(209, 207, 197)
- Font: 17px weight 600
- Use: Bright CTA on dark sections
- Focus: color: `rgb(46, 46, 44)`, border: `0px none rgb(46, 46, 44)`, borderColor: `rgb(46, 46, 44)`

**Ghost**
- Background: `transparent`
- Text: `#141413` `{colors.primary-hover}`
- Padding: 0px 24px
- Radius: 8px
- Font: 14px weight 500
- Use: Subtle action, toolbar, nav button
- Focus: color: `rgb(46, 46, 44)`, border: `0px none rgb(46, 46, 44)`, borderColor: `rgb(46, 46, 44)`

**Dark / Solid**
- Background: `#141413` `{colors.primary-hover}`
- Text: `#faf9f5` `{colors.primary}`
- Padding: 8px 16px
- Radius: 8px
- Font: 16px weight 500
- Use: Solid dark CTA
- Focus: color: `rgb(46, 46, 44)`, border: `0px none rgb(46, 46, 44)`, borderColor: `rgb(46, 46, 44)`

**Icon Button**
- Background: `#c6613f`
- Text: `#ffffff` `{colors.surface-1}`
- Padding: 4px
- Radius: 8px
- Font: 12px weight 400
- Use: Toolbar/UI icons
- Focus: color: `rgb(46, 46, 44)`, border: `0px none rgb(46, 46, 44)`, borderColor: `rgb(46, 46, 44)`

### Inputs & Forms

**Text Input**
- Background: `transparent`
- Text: `#faf9f5` `{colors.primary}`
- Padding: 4px 0px
- Radius: 0px
- Border: 0px none rgb(250, 249, 245)
- Font: 12px weight 400
- Use: Text fields, search inputs

### Status Badges

**Neutral Light**
- Background: `#ffffff` `{colors.surface-1}`
- Text: `#141413` `{colors.primary-hover}`
- Padding: 0px
- Radius: 8px
- Font: 15px weight 400
- Use: Status indicator, label, pill

### Tabs

**Pill Tab**
- Background: `#f0eee6` `{colors.surface-2}`
- Text: `#141413` `{colors.primary-hover}`
- Padding: 4px
- Radius: 12px
- Font: 15px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **focus:** text #30302e → #2e2e2c, border changes

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(48, 48, 46)"
    focus:
      bg: "transparent"
      fg: "rgb(46, 46, 44)"
  link:
    default:
      bg: "rgb(250, 249, 245)"
      fg: "rgb(20, 20, 19)"
      border: "2px solid rgb(44, 132, 219)"
  card:
    default:
      bg: "rgb(250, 249, 245)"
      fg: "rgb(20, 20, 19)"
      border: "1px solid rgb(209, 207, 197)"
      shadow: "rgba(0, 0, 0, 0.016) 0px 4px 24px 0px, rgba(0, 0, 0, 0.016) "
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(20, 20, 19)"
    hover:
      bg: "transparent"
      fg: "inherit"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(20, 20, 19)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(250, 249, 245)"
    hover:
      bg: "transparent"
      fg: "inherit"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **4 shape(s)** in this system: `Ghost`, `Light / Invert`, `Dark / Solid`, `Icon Button`
- **DO NOT introduce new buttons variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Status Badges
- **1 shape(s)** in this system: `Neutral Light`
- **DO NOT introduce new status badges variants** without justification

### Tabs
- **1 shape(s)** in this system: `Pill Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

### Layout Type
**hero + sections**

### Grid
Single column, centered content

### Max Width
1440px

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 16px |
| sm | 24px |
| md | 32px |
| base | 48px |
| lg | 56px |
| xl | 64px |
| 2xl | 72px |
| 3xl | 80px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 16px | Large rounded elements, pill segments |
| Xl | 32px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Inputs & Forms | `0px` |
| Status Badges | `8px` |
| Tabs | `12px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `0px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 4px, 8px, 9.6px, 12px, 16px, 24px, 32px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~96px internal vertical padding (up to 128px) — **very airy / premium**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `80px` | Top/bottom of full-bleed hero sections |
| **section** | `64px` | Between major bands (color change, content shift) |
| **subsection** | `56px` | Within a section, between content groups |
| **card** | `32px` | Card padding, list-item spacing |
| **compact** | `24px` | Form fields, tight clusters, badge padding |
| **micro** | `16px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**6/8 structural patterns detected.**

### Hero Pattern

- **Composition:** split-left-text — Split layout, text-left/media-right — heading + body in left column, image/illustration in right column. Common for product showcases.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Think fast,build faster" — 72px center-aligned
- **Subheading:** "Brainstorm in chat, build in Cowork"
- **Media:** present, positioned right
- **CTAs:** 4 (primary: "Continue with Google")
- **Clone instruction:** Reproduce the **split-left-text** layout. Use the heading font-size token at the documented size. Place media right of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 88px
- **Logo:** ✓ present
- **Nav links:** 1 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 3 cards detected
- **Columns (desktop):** 3-up grid
- **Card dimensions:** 416×915px (aspect 0.45:1)
- **Gap:** 32px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 3-column grid (desktop) with cards at ~0.45:1 aspect ratio. Each card has an image at the top.

### Pricing Table Pattern

- **Tier count:** 3 pricing tiers
- **Layout:** side-by-side (horizontal comparison)
- **Columns (desktop):** 3-up
- **Feature list:** ✓ (median ~25 feature points per tier)
- **Clone instruction:** Build a 3-column side-by-side pricing comparison.

### FAQ Pattern

- **Item count:** 3 questions
- **Format:** accordion (expand/collapse)
- **Layout:** single-column
- **Avg question length:** 31 chars
- **Clone instruction:** Build 3 expandable accordion items in a single-column layout.

### Footer Pattern

- **Columns:** 1
- **Links:** 75 total
- **Height:** 1043px
- **Includes:** ✗ no newsletter | ✓ social icons | ✓ language switcher ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~75 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.1) 0px 4px 16px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgb(209, 207, 197) 0px 0px 0px 1px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.016) 0px 4px 24px 0px`,<br>`rgba(0, 0, 0, 0.016) 0px 4px 32px 0px`,<br>`rgba(0, 0, 0, 0.01) 0px 2px 64px 0px`,<br>`rgba(0, 0, 0, 0.01) 0px 16px 32px 0px` | Cards, elevated surfaces |
| Focus (Level 4) | `color(srgb 0.85098 0.466667 0.341177 / 0.1) 0px 4px 20px 0px` | Active/focus states, hover elevation |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--ease-in-out-quart` | `cubic-bezier(.77,0,.175,1)` | Ease Out — Decelerating |
| `--ease-out-quart` | `cubic-bezier(.165,.84,.44,1)` | Custom Ease — Balanced |
| `--ease-in-quart` | `cubic-bezier(.895,.03,.685,.22)` | Custom Ease — Balanced |
| `--ease-in-out-expo` | `cubic-bezier(1,0,0,1)` | Expo In-Out — Mechanical Snap |
| `--ease-in-out-power3` | `cubic-bezier(.645,.045,.355,1)` | Ease Out — Decelerating |
| `--ease-out-power2` | `cubic-bezier(.25,1,.5,1)` | Custom Ease — Balanced |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--reveal-duration` | `1s` | Cinematic |

### Copy-Paste Transition Snippets

**Opacity**
```css
transition: opacity 0.4s ease-in;
```

**Transform**
```css
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
```

**Opacity**
```css
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
```

**Background**
```css
transition: background-color 0.15s, color 0.2s;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `NavMobile-module-scss-module__twGYTa_...` | Custom | clip-path | UI transition |
| `NavMobile-module-scss-module__twGYTa_...` | Custom | clip-path | UI transition |
| `NavMobile-module-scss-module__twGYTa_...` | Fade + Move | opacity, transform | UI transition |
| `NavBar-module-scss-module__s3E3Dq__na...` | Fade + Move | opacity, transform | Panel / drawer enter |
| `PromptCards-module-scss-module__HcTne...` | Fade + Move | opacity, transform | UI transition |
| `MediaTabs-module-scss-module__M-mPca_...` | Fade + Move | opacity, transform | UI transition |
| `Pricing-module-scss-module__GLAe0a__c...` | Fade + Move | opacity, transform | UI transition |
| `Marquee-module-scss-module__-zurhq__m...` | Slide | transform | UI transition |
| `LetterGrid-module-scss-module__R6_SpW...` | Fade + Move | opacity, transform | Element entrance |
| `TypewriterWord-module-scss-module__sR...` | Fade | opacity | Attention / status |
| `AppShell-module-scss-module__F71GCG__...` | Fade | opacity | UI transition |
| `AppShell-module-scss-module__F71GCG__...` | Slide | transform | Loading indicator |
| `swipe-out-left` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-right` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-up` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-down` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `sonner-fade-in` | Fade + Move | opacity, transform | Element entrance |
| `sonner-fade-out` | Fade + Move | opacity, transform | Element exit |
| `sonner-spin` | Fade | opacity | Loading indicator |

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `400ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 19 unique animations (19 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use Off-White (`#faf9f5`) as the page background — it's intentionally not pure white
- Use Near-Black (`#141413`) for text — not pure black, it's warmer and more readable
- Use anthropicSans as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Off-White (`#faf9f5`) as the primary accent — it's the brand's signature interactive color
- Use 8px border-radius on buttons — the standard corner rounding for interactive elements
- Maintain nav height at 88px — consistent vertical space for the navigation bar
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Build the hero as a split layout with media on the left — text and visual share equal weight
- Include exactly 4 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Each card includes a top image — imagery is part of the card identity, not optional
- Use a 3-column grid on desktop — density matters for this content type
- Place 3 pricing tiers side-by-side on desktop — direct comparison is the value prop
- Use expandable accordion for the FAQ — saves vertical space and lets users self-navigate

### Don't
- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(250, 249, 245)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(250, 249, 245)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(250, 249, 245)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(250, 249, 245)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 349px | Single column, compact spacing |
| Mobile Large | 566px | Expanded mobile layout |
| Mobile Large | 600px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 833px | Multi-column grids begin |
| Tablet | 991px | Multi-column grids begin |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `72px` | `51px` |
| heading | line-height | `79.2px` | `61.2px` |
| nav | display | `flex` | `none` |
| nav | height | `88px` | `auto` |
| hero | padding | `104px 0px 0px` | `92px 0px 0px` |
| hero | height | `876px` | `820px` |
| button | width | `107px` | `auto` |
| card | width | `448px` | `321.922px` |

### Collapsing Strategy
- Headlines: 72px → 51px on mobile
- Navigation: flex → none on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 8px 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Hero collapses split-left-text → centered** — the side-by-side layout stacks vertically, with media moving above the text.
- **Hero CTAs:** 4 on desktop → 3 on mobile (secondary CTAs dropped on small screens).
- **Card grid: 3-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.
- **Pricing collapses to vertical stack** — desktop comparison becomes scrollable tier-by-tier on mobile.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (4) — animated custom properties.

> **Motion fingerprint**: CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://cdn.sanity.io/images/4zrzovbb/claude-com/6c36adaaf60ecdde313a93ad255eef573ea4de97-1200x630.jpg?rect=0,2,1200,627&w=1200&h=627&fit=crop (1200×627px)
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1:1 (square / portrait)
- Rendered size: 64×64px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 0 (0%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 3 (100%)

**Media Format Mix:**
- SVG: 3 (icons, illustrations, decorative geometry)

**Average rendered image size:** 64×64px
**Above-fold image count:** 0 / 3

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Off-White (`#faf9f5`)
- Primary text: Near-Black (`#141413`)
- Accent: Off-White (`#faf9f5`)
- Border: Charcoal (`#30302e`)
- Font: anthropicSans
- Body: 15px weight 400

### Example Component Prompts
- "Create a hero section on Off-White background (#faf9f5). Headline at 72px anthropicSans weight 330, line-height 1.1, color #141413."
- "Create the primary CTA button: `#faf9f5` background, `#ffffff` text, 8px border-radius, 4px padding, 600 weight, anthropicSans font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: static on `#faf9f5`. anthropicSans 15px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Off-White (`#faf9f5`) — every component is composited against this exact base.
2. **Typography**: All type in anthropicSans, weight range 300–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Off-White (`#faf9f5`) is the sole interactive color. On hover → Focus (`#2c84db`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.165,0.84,0.44,1)`. Timing: 1000ms for micro-interactions, 1000ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `0px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (16px–64px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-primary: #faf9f5;
  --ca-surface-1: #ffffff;
  --ca-surface-2: #f0eee6;
  --ca-primary-hover: #141413;
  --ca-hairline: #30302e;
  --ca-on-primary: #111111;
  --ca-primary-focus: #2e2e2c;
  --ca-semantic-error: #bf4d43;
}

/* Typography */
:root {
  --ca-font-primary: "anthropicSerif", system-ui, sans-serif;
  --ca-text-display: 72px;
  --ca-text-body: 12px;
  --ca-text-button: 17px;
  --ca-text-mono: 12px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 16px;
  --ca-space-sm: 24px;
  --ca-space-md: 32px;
  --ca-space-base: 48px;
  --ca-space-lg: 56px;
  --ca-space-xl: 64px;
  --ca-space-2xl: 72px;
  --ca-space-3xl: 80px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 32px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-in-out-quart: cubic-bezier(.77,0,.175,1);
  --ca-ease-out-quart: cubic-bezier(.165,.84,.44,1);
  --ca-ease-in-quart: cubic-bezier(.895,.03,.685,.22);
  --ca-ease-in-out-expo: cubic-bezier(1,0,0,1);
  --ca-ease-in-out-power3: cubic-bezier(.645,.045,.355,1);
  --ca-ease-out-power2: cubic-bezier(.25,1,.5,1);
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: navigation
    tag: nav
    height: 88px
    width: 584px
    layout: flex-row justify=normal
    children: 6
    vertical-padding: ~24px
    padding: "24px 0px"
  - section: header
    tag: header
    classes: ["theme-main"]
    height: 84px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(250, 249, 245)"
  - section: hero
    tag: div
    height: 2966px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: main
    height: 2966px
    width: full-bleed
    layout: block
    children: 6
    vertical-padding: ~128px (airy)
  - section: feature-section
    tag: section
    classes: ["theme-main"]
    height: 876px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(250, 249, 245)"
    vertical-padding: ~52px
    padding: "104px 0px 0px"
  - section: navigation
    tag: div
    classes: ["container"]
    height: 84px
    width: 1312px
    layout: flex-row justify=space-between
    children: 2
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 772px
    width: 1312px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 724px
    width: 632px
    layout: flex-row justify=center
    children: 1
  - section: unknown
    tag: div
    height: 313px
    width: 632px
    layout: flex-row justify=center
    children: 1
  - section: pricing
    tag: section
    classes: ["theme-main"]
    height: 1409px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(250, 249, 245)"
    vertical-padding: ~96px (airy)
    padding: "128px 0px 64px"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 1217px
    width: 1312px
    layout: block
    children: 4
  - section: feature-section
    tag: section
    classes: ["theme-main"]
    height: 681px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(250, 249, 245)"
    vertical-padding: ~128px (airy)
    padding: "128px 0px"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 425px
    width: 1312px
    layout: block
    children: 2
  - section: footer
    tag: footer
    classes: ["theme-dark"]
    height: 1043px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(20, 20, 19)"
    tone: dark
    vertical-padding: ~96px (airy)
    padding: "95.9999px 0px"
  - section: content-section
    tag: div
    classes: ["container"]
    height: 850px
    width: 1312px
    layout: block
    children: 2
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Explore plans"
    - "Products"
  sub-headings:
    - "Free"
    - "What is Claude and how does it work?"
  ctas:
    - "Meet Claude"
    - "Contact sales"
    - "Try Claude"
    - "Continue with Google"
    - "Continue with SSO"
    - "Individual"
    - "Team and Enterprise"
    - "What is Claude and how does it work?"
  navigation:
    - "Login"
    - "Contact sales"
    - "Try Claude"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  thumbnail:
    count: 3
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Meet Claude
</button>
```
_Source pattern detected: padding `8px 0px` · radius `0px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `28px` · radius `32px` · shadow `rgba(0, 0, 0, 0.016) 0px 4px 24px 0px, rgba(0, 0, 0, 0.016) `_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 2 · **cta** 4 · **auth** 3 · **product** 22 · **pricing** 3 · **docs** 1 · **blog** 2 · **social** 4 · **legal** 1 · **footer** 13 · **other** 5

**Primary actions (conversion path):**
- Primary call-to-action — "Try Claude" (the conversion path) → `https://claude.ai/login?plan=free`
- Primary call-to-action — "Try Claude" (the conversion path) → `https://claude.ai/login?plan=pro`
- Primary call-to-action — "Try Claude" (the conversion path) → `https://claude.ai/login?plan=max`
- Account access — "Login" (login/signup) → `https://claude.ai/login`
- Primary call-to-action — "Try Claude" (the conversion path) → `https://claude.ai/`
- Account access — "Log in" (login/signup) → `https://claude.ai/login`

**Signals:** 10/60 links carry a featured image · dominant link roles: footer-link (25), content-card (22), inline-link (10).


---
## Extraction Completeness: 86/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 24 | 25 | 17 named colors |
| Typography | 13 | 20 | 5 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 9 | 10 | 186 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 5 | 5 | OPSZ axes |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (anthropicSans, anthropicSerif, anthropicMono)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.
- **1 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

*✅ No critical extraction gaps detected — high-confidence reproduction expected.*

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 186 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 5 typography roles inferred |
| §4 Components | Medium | 4 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 22 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 3 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

12 font file(s) captured (711KB total). When running `prism add`, fonts are saved to `extractions/claude.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'anthropicSans';
  /* src: url('/fonts/anthropicSans.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'anthropicSans';
  /* src: url('/fonts/anthropicSans.woff2') format('woff2'); */
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'anthropicSans Fallback';
  /* src: url('/fonts/anthropicSans-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'anthropicSerif';
  /* src: url('/fonts/anthropicSerif.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'anthropicSerif';
  /* src: url('/fonts/anthropicSerif.woff2') format('woff2'); */
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'anthropicSerif Fallback';
  /* src: url('/fonts/anthropicSerif-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'anthropicMono';
  /* src: url('/fonts/anthropicMono.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'anthropicMono';
  /* src: url('/fonts/anthropicMono.woff2') format('woff2'); */
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'anthropicMono Fallback';
  /* src: url('/fonts/anthropicMono-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**12 @keyframes found** — these are the real animation definitions:

```
@keyframes LetterGrid-module-scss-module__R6_SpW__hudFadeIn { ... }
@keyframes TypewriterWord-module-scss-module__sRUGCG__blink { ... }
@keyframes AppShell-module-scss-module__F71GCG__row-dot-wave { ... }
@keyframes AppShell-module-scss-module__F71GCG__shell-spark-spin { ... }
@keyframes NavMobile-module-scss-module__twGYTa__panelOpen { ... }
@keyframes NavMobile-module-scss-module__twGYTa__panelClose { ... }
@keyframes NavMobile-module-scss-module__twGYTa__itemFadeUp { ... }
@keyframes NavBar-module-scss-module__s3E3Dq__navSlideDown { ... }
@keyframes PromptCards-module-scss-module__HcTnea__tabFadeUp { ... }
@keyframes MediaTabs-module-scss-module__M-mPca__tabFadeUp { ... }
@keyframes Pricing-module-scss-module__GLAe0a__cardRaise { ... }
@keyframes Marquee-module-scss-module__-zurhq__marquee { ... }
```

<details><summary>Full keyframes CSS (12 animations)</summary>

```css
@keyframes LetterGrid-module-scss-module__R6_SpW__hudFadeIn{0%{opacity:0;transform:translateY(-4px)}
@keyframes TypewriterWord-module-scss-module__sRUGCG__blink{0%,to{opacity:1}50%{opacity:0}}
@keyframes AppShell-module-scss-module__F71GCG__row-dot-wave{0%,60%,to{opacity:.25}30%{opacity:1}}
@keyframes AppShell-module-scss-module__F71GCG__shell-spark-spin{0%{transform:translateY(0)}
@keyframes NavMobile-module-scss-module__twGYTa__panelOpen{0%{clip-path:inset(0 0 100%)}
@keyframes NavMobile-module-scss-module__twGYTa__panelClose{0%{clip-path:inset(0 0 0%)}
@keyframes NavMobile-module-scss-module__twGYTa__itemFadeUp{0%{opacity:0;transform:translateY(20px)}
@keyframes NavBar-module-scss-module__s3E3Dq__navSlideDown{0%{opacity:0;transform:translateY(-20px)}
@keyframes PromptCards-module-scss-module__HcTnea__tabFadeUp{0%{opacity:0;transform:translateY(10px)}
@keyframes MediaTabs-module-scss-module__M-mPca__tabFadeUp{0%{opacity:0;transform:translateY(10px)}
@keyframes Pricing-module-scss-module__GLAe0a__cardRaise{0%{opacity:0;transform:translateY(16px)}
@keyframes Marquee-module-scss-module__-zurhq__marquee{to{transform:translate(-50%)}}
```
</details>

### Brand Gradient Palette

**1 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(to bottom,transparent 0%,white var(--container-margin);

```

### Hover State CSS (Intercepted)

**48 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.UseCaseDetail-module-scss-module__y4L2Uq__connectorChip:hover{border-color:var(--theme-foreground-tertiary);text-decoration:none}

a:hover{text-decoration:underline}

.text-rich-text a:hover{-webkit-text-decoration-color:var(--theme-foreground-primary);text-decoration-color:var(--theme-foreground-primary);color:var(--theme-foreground-primary)}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 1016 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**12 breakpoints** read from the live `@media` rules (not guessed):
`349px` · `566px` · `567px` · `600px` · `767px` · `768px` · `833px` · `834px` · `991px` · `1000px` · `1199px` · `1200px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `15px`×536 · `12px`×236 · `16px`×163 · `17px`×35 · `14px`×10 · `51.9978px`×9 · `30px`×6 · `24px`×6

**Radius scale** (× = paint count): `4px`×48 · `8px`×18 · `12px`×9 · `9.6px`×8 · `24px`×3 · `32px`×1 · `16px`×1

**Weights** (× = paint count): `400`×958 · `500`×25 · `600`×24 · `330`×4 · `700`×4

**Layout gaps** (× = paint count): `8px`×72 · `12px`×30 · `6px`×6 · `48px`×5 · `16px`×5 · `32px`×4 · `24px`×3 · `4px`×3

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.1) 0px 4px 16px 0px
rgb(209, 207, 197) 0px 0px 0px 1px
rgba(0, 0, 0, 0.016) 0px 4px 24px 0px, rgba(0, 0, 0, 0.016) 0px 4px 32px 0px, rgba(0, 0, 0, 0.01) 0px 2px 64px 0px, rgba(0, 0, 0, 0.01) 0px 16px 32px 0px
color(srgb 0.85098 0.466667 0.341177 / 0.1) 0px 4px 20px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { font-family:var(--font-anthropic-sans),system-ui,sans-serif; font-size:var(--body-3); color:var(--theme-foreground-primary); background-color:var(--theme-background-primary) }
header { color:var(--theme-foreground-primary); background-color:var(--theme-background-primary) }
header { background-color:var(--theme-background-primary) }
nav { gap:var(--sp-24) }
main { transition:opacity var(--reveal-duration,.75s)var(--ease-out-power2),transform var(--reveal-duration,.75s)var(--ease-out-power2) }
h1 { font-family:var(--font-anthropic-sans),system-ui,sans-serif; font-size:var(--display-1); font-weight:var(--font-weight-medium) }
h1 { font-family:var(--font-anthropic-serif),Georgia,serif }
h1 { font-weight:330 }
h2 { font-family:var(--font-anthropic-sans),system-ui,sans-serif; font-size:var(--headline-1); font-weight:var(--font-weight-medium) }
h2 { font-family:var(--font-anthropic-serif),Georgia,serif }
button { font-family:inherit; font-size:100% }
button { font-family:var(--font-anthropic-sans),system-ui,sans-serif; font-size:var(--body-3) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://claude.com | 2026-06-11T05:00:08.127Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*