Claude

# layout.md — claude.com Design System

---

## 0. Quick Reference

**Stack:** Webflow-built site · CSS custom properties (211 vars extracted) · Token source: `extracted-css-vars` (high confidence)
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.

```css
:root {
  /* Brand accent — the signature clay/terracotta colour */
  --swatch--clay: #d97757;
  --swatch--clay-interactive: #c96442; /* darker, used for interactive brand buttons */

  /* Backgrounds — warm off-white scale */
  --_theme---background-primary: var(--swatch--gray-050);   /* #faf9f5 — page background */
  --_theme---background-secondary: var(--swatch--gray-100); /* #f5f4ed — card/section bg */
  --_theme---background-tertiary: var(--swatch--gray-150);  /* #f0eee6 — hover states */

  /* Foreground */
  --_theme---foreground-primary: var(--swatch--gray-950);   /* #141413 — headings, body */
  --_theme---foreground-secondary: var(--swatch--gray-750); /* #30302e — secondary text */
  --_theme---foreground-tertiary: var(--swatch--gray-600);  /* #5e5d59 — muted/caption */

  /* Typography */
  --_typography---font--primary-family: "Anthropic Sans", Arial, sans-serif;
  --_typography---font--secondary-family: "Anthropic Serif", Georgia, sans-serif;
  --_typography---font--mono-family: "Anthropic Mono", Arial, sans-serif;
  --_typography---font--primary-regular: 400;
  --_typography---font--primary-medium: 500;
  --_typography---font--primary-bold: 700;

  /* Font sizes (fluid) — mobile min → desktop max */
  --_typography---font-size--display-1: clamp(2.625rem, ..., 4.5rem);   /* 42px→72px */
  --_typography---font-size--h1: clamp(2.125rem, ..., 3.25rem);         /* 34px→52px */
  --_typography---font-size--body-1: clamp(1.1875rem, ..., 1.25rem);    /* 19px→20px */
  --_typography---font-size--caption: 0.75rem;                           /* 12px */

  /* Spacing */
  --_spacing---space--1rem: 1rem;
  --_spacing---space--2rem: clamp(1.75rem, ..., 2rem);
  --_spacing---section-space--main: clamp(6rem, ..., 8rem);

  /* Radius */
  --radius--x-small: 0.25rem;
  --radius--small: 0.5rem;
  --radius--main: 0.75rem;
  --radius--large: 1rem;

  /* Layout */
  --max-width--main: calc(90 * 1rem); /* 90rem / 1440px */
  --max-width--medium: 74.5rem;
  --max-width--small: 60rem;
  --site--margin: clamp(2rem, ..., 4rem);
  --_grid---gutter: 2rem;
  --_grid---column-count: 12;

  /* Motion */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav--dropdown-duration: 300ms;
  --nav--dropdown-open-duration: 600ms;
}
```

```tsx
// Brand CTA button — correct token usage
<button className="btn-brand">Try Claude</button>
// CSS: background: var(--_theme---button-brand--background); /* --swatch--clay-interactive */
//      color: var(--_theme---button-brand--text);            /* --swatch--gray-050 */
//      border-radius: var(--radius--main);                   /* 0.75rem */
//      font-family: var(--_typography---font--primary-family);
```

**NEVER rules:**
1. **NEVER** use Inter, Roboto, or system-ui as the primary font — the brand font is `"Anthropic Sans"`, with `"Anthropic Serif"` for display headings.
2. **NEVER** hardcode `#d97757` or `#c96442` — always use `var(--swatch--clay)` / `var(--swatch--clay-interactive)`.
3. **NEVER** use warm colours for backgrounds other than the defined `--swatch--gray-*` scale (these are warm neutrals, not pure grays).
4. **NEVER** use border-radius > `--radius--large` (1rem) on standard UI components — pill buttons are NOT part of this design system.
5. **NEVER** skip the hover box-shadow ring on buttons — the brand hover uses `box-shadow` to simulate a doubled border, not a background fill.
6. **NEVER** use pure `#ffffff` as a page background — the brand white is `--swatch--gray-000` (white) only for surfaces inside warm-background pages; the page canvas is `--swatch--gray-050` (#faf9f5).
7. **NEVER** use heading fonts (`"Anthropic Serif"`) for body copy or UI labels — strictly for display/editorial headings only.

**Full design system → see layout.md**

---

## 1. Design Direction & Philosophy

### Character & Personality
Claude.com is **editorial-warm-minimal** — the aesthetic of a considered, intellectual brand that respects whitespace and craft. Think premium editorial publication meets thoughtful tech product. The palette is **warm neutrals with a terracotta accent**: creams, oats, and grays that read as organic rather than cold.

### Aesthetic Intent
- **Warmth without kitsch:** Off-white backgrounds (`#faf9f5`) and a full gray scale tinted warm give the site a paper/linen quality. Nothing feels sterile or corporate-blue.
- **Editorial typographic hierarchy:** `"Anthropic Serif"` handles display moments with medium weight (500) and generous fluid sizing. `"Anthropic Sans"` handles everything functional. The two fonts create clear role separation.
- **Fluid everything:** Font sizes, spacing, and section gaps all use `clamp()` between mobile min and desktop max — no abrupt breakpoint jumps.
- **Restraint in decoration:** The primary brand colour (`--swatch--clay`, #d97757) appears sparingly — as the hero illustration accent, the CTA button background, text accent, and selection highlight only.
- **Accessibility-visible but elegant:** Focus uses a `--focus--width: 0.125rem` ring with `--swatch--clay-interactive` as the outline colour.

### What This Design Explicitly Rejects
- **NO** pure white (`#ffffff`) as the default page background — everything lives on warm off-white
- **NO** blue as a primary brand colour (blue only appears on switch/toggle active state `#2c84db` and one focus fallback)
- **NO** rounded pill buttons — max radius is `--radius--large` (1rem) on cards; buttons use `--radius--main` (0.75rem)
- **NO** heavy drop shadows or card elevations — elevation is expressed through border colour contrast, not shadow blur
- **NO** gradient backgrounds or vibrant multi-colour interfaces
- **NO** dense, tight layouts — generous section padding (`6rem–8rem`) is the norm
- **NO** cold/neutral grays — every gray in the scale has a warm undertone (compare `#faf9f5` vs `#f9f9f9`)

---

## 2. Colour System

### Tier 1: Primitive Swatches

```css
:root {
  /* ── Warm Gray Scale ────────────────────────────────────────── */
  --swatch--gray-000: white;          /* Pure white — surface interiors only */
  --swatch--gray-050: #faf9f5;        /* Warm off-white — primary page background */
  --swatch--gray-100: #f5f4ed;        /* Slightly deeper warm cream — secondary bg */
  --swatch--gray-150: #f0eee6;        /* Warm stone — tertiary bg, hover surfaces */
  --swatch--gray-200: #e8e6dc;        /* Light warm gray — secondary button bg */
  --swatch--gray-250: #dedcd1;        /* Medium-light warm gray */
  --swatch--gray-300: #d1cfc5;        /* Warm gray — tertiary borders */
  --swatch--gray-350: #c2c0b6;        /* Mid-light warm gray */
  --swatch--gray-400: #b0aea5;        /* Warm gray — primary border colour */
  --swatch--gray-450: #9c9a92;        /* Medium warm gray */
  --swatch--gray-500: #87867f;        /* Mid gray */
  --swatch--gray-550: #73726c;        /* Dark-mid warm gray */
  --swatch--gray-600: #5e5d59;        /* Muted foreground — tertiary button text */
  --swatch--gray-650: #4d4c48;        /* Dark warm gray — secondary button text */
  --swatch--gray-700: #3d3d3a;        /* Dark gray */
  --swatch--gray-750: #30302e;        /* Near-dark — secondary foreground */
  --swatch--gray-800: #262624;        /* Very dark */
  --swatch--gray-850: #1f1e1d;        /* Near-black — primary button hover bg */
  --swatch--gray-900: #1a1918;        /* Almost black */
  --swatch--gray-950: #141413;        /* Primary foreground — headings and body text */
  --swatch--gray-1000: #000;          /* Pure black — reserved */

  /* ── Brand / Accent ─────────────────────────────────────────── */
  --swatch--clay: #d97757;            /* Brand terracotta — text accent, illustrations */
  --swatch--clay-interactive: #c96442; /* Darker clay — CTA button bg, focus outlines */

  /* ── Nature Palette (illustration/pictogram accents) ────────── */
  --swatch--oat: #e3dacc;             /* Warm oat — pictogram accent */
  --swatch--olive: #788c5d;           /* Muted olive green */
  --swatch--cactus: #bcd1ca;          /* Pale sage — feature card accent */
  --swatch--sky: #6a9bcc;             /* Muted sky blue */
  --swatch--heather: #cbcadb;         /* Dusty lavender */
  --swatch--fig: #c46686;             /* Rose pink */
  --swatch--coral: #ebcece;           /* Pale coral */

  /* ── Utility ────────────────────────────────────────────────── */
  --swatch--transparent: transparent;
}
```

### Tier 2: Semantic Aliases

```css
:root {
  /* ── Backgrounds ────────────────────────────────────────────── */
  --_theme---background-primary: var(--swatch--gray-050);   /* Page canvas #faf9f5 */
  --_theme---background-secondary: var(--swatch--gray-100); /* Card/section bg #f5f4ed */
  --_theme---background-tertiary: var(--swatch--gray-150);  /* Hover surface #f0eee6 */

  /* ── Foreground ─────────────────────────────────────────────── */
  --_theme---foreground-primary: var(--swatch--gray-950);   /* Main text #141413 */
  --_theme---foreground-secondary: var(--swatch--gray-750); /* Secondary text #30302e */
  --_theme---foreground-tertiary: var(--swatch--gray-600);  /* Muted text #5e5d59 */
  --_theme---white: var(--swatch--gray-000);                /* White — button text on dark bg */

  /* ── Borders ────────────────────────────────────────────────── */
  --_theme---border-primary: var(--swatch--gray-400);       /* #b0aea5 — strong borders */
  --_theme---border-secondary: var(--swatch--gray-300);     /* #d1cfc5 — standard borders */
  --_theme---border-tertiary: var(--swatch--gray-200);      /* #e8e6dc — subtle dividers */

  /* ── Text accents ───────────────────────────────────────────── */
  --_theme---text-accent: var(--swatch--clay);              /* #d97757 — inline accent text */
  --_theme---error-text: #b53333;                           /* Error/destructive text */
  --_theme---heroes-accent: var(--swatch--clay);            /* Hero section accent */
  --_theme---pictogram-accent: var(--swatch--oat);          /* Pictogram fills */

  /* ── Selection ──────────────────────────────────────────────── */
  --_theme---selection--background: color-mix(in srgb, var(--swatch--clay) 50%, transparent);
  --_theme---selection--text: var(--_theme---foreground-primary);

  /* ── Switch/Toggle ──────────────────────────────────────────── */
  --_theme---switch--border: var(--_theme---border-secondary);
  --_theme---switch--border-active: var(--swatch--transparent);
  --_theme---switch--background: var(--_theme---background-tertiary);
  --_theme---switch--background-active: #2c84db;            /* Blue — active switch only */
  --_theme---switch--dot-border: var(--_theme---border-primary);
  --_theme---switch--dot-border-active: var(--swatch--transparent);
  --_theme---switch--dot-background: var(--swatch--gray-000);
  --_theme---switch--dot-background-active: var(--swatch--gray-000);
}
```

### Tier 3: Component Tokens

```css
:root {
  /* ── Brand Button (clay CTA — "Try Claude") ─────────────────── */
  --_theme---button-brand--background: var(--swatch--clay-interactive);   /* #c96442 */
  --_theme---button-brand--text: var(--swatch--gray-050);                 /* #faf9f5 */
  --_theme---button-brand--border: var(--swatch--clay-interactive);
  --_theme---button-brand--background-hover: var(--swatch--clay-interactive); /* same — hover via box-shadow ring */
  --_theme---button-brand--text-hover: var(--swatch--gray-050);
  --_theme---button-brand--border-hover: var(--swatch--clay-interactive);
  --_theme---button-brand--icon: var(--swatch--gray-050);
  --_theme---button-brand--icon-hover: var(--swatch--gray-050);

  /* ── Primary Button (dark — "Contact sales") ────────────────── */
  --_theme---button-primary--background: var(--swatch--gray-950);         /* #141413 */
  --_theme---button-primary--text: var(--swatch--gray-050);               /* #faf9f5 */
  --_theme---button-primary--border: var(--_theme---foreground-secondary);
  --_theme---button-primary--background-hover: var(--swatch--gray-850);   /* #1f1e1d */
  --_theme---button-primary--text-hover: var(--_theme---button-primary--text);
  --_theme---button-primary--border-hover: var(--_theme---button-primary--border);
  --_theme---button-primary--icon: var(--_theme---button-primary--text);
  --_theme---button-primary--icon-hover: var(--_theme---background-primary);

  /* ── Secondary Button ───────────────────────────────────────── */
  --_theme---button-secondary--background: var(--swatch--gray-200);       /* #e8e6dc */
  --_theme---button-secondary--text: var(--swatch--gray-650);             /* #4d4c48 */
  --_theme---button-secondary--border: var(--_theme---border-secondary);
  --_theme---button-secondary--background-hover: var(--swatch--gray-000); /* white */
  --_theme---button-secondary--text-hover: var(--_theme---foreground-primary);
  --_theme---button-secondary--border-hover: var(--_theme---button-secondary--background);
  --_theme---button-secondary--icon: var(--_theme---button-secondary--text);
  --_theme---button-secondary--icon-hover: var(--_theme---foreground-secondary);

  /* ── Tertiary Button ────────────────────────────────────────── */
  --_theme---button-tertiary--background: var(--_theme---background-primary);
  --_theme---button-tertiary--text: var(--swatch--gray-600);              /* #5e5d59 */
  --_theme---button-tertiary--border: var(--_theme---border-secondary);
  --_theme---button-tertiary--background-hover: var(--_theme---button-tertiary--background);
  --_theme---button-tertiary--text-hover: var(--_theme---foreground-primary);
  --_theme---button-tertiary--border-hover: var(--_theme---button-tertiary--border);
  --_theme---button-tertiary--icon: var(--_theme---button-tertiary--text);
  --_theme---button-tertiary--icon-hover: var(--_theme---foreground-primary);

  /* ── Button style props (applied at component level) ────────── */
  --_button-style---background: var(--_theme---button-brand--background);
  --_button-style---text: var(--_theme---button-brand--text);
  --_button-style---border-width: var(--border-width--main);              /* 0.0625rem */
  --_button-style---border: var(--_theme---button-brand--border);
  --_button-style---border-hover: var(--_theme---button-brand--border-hover);
  --_button-style---text-hover: var(--_theme---button-brand--text-hover);
  --_button-style---background-hover: var(--_theme---button-brand--background-hover);
  --_button-style---border-width-hover: calc(var(--_button-style---border-width) * 2); /* 0.125rem */
  --_button-style---spacer-width: 0rem;
  --_button-style---spacer-width-hover: var(--border-width--main);
}
```

### Colour Palette Summary

| Token | Value | Purpose |
|---|---|---|
| `--swatch--clay` | `#d97757` | Brand accent — text, illustrations |
| `--swatch--clay-interactive` | `#c96442` | Brand CTA buttons, focus rings |
| `--swatch--gray-050` | `#faf9f5` | **Page background** |
| `--swatch--gray-950` | `#141413` | **Primary text / headings** |
| `--swatch--gray-750` | `#30302e` | Secondary text |
| `--swatch--gray-000` | `white` | Pure white — button text, dot fills |
| `--_theme---error-text` | `#b53333` | Error states |
| `--_theme---switch--background-active` | `#2c84db` | Active toggle only |

---

## 3. Typography System

### Font Families

```css
:root {
  --_typography---font--primary-family: "Anthropic Sans", Arial, sans-serif;    /* UI, body, buttons */
  --_typography---font--secondary-family: "Anthropic Serif", Georgia, sans-serif; /* Display, editorial headings */
  --_typography---font--mono-family: "Anthropic Mono", Arial, sans-serif;       /* Code blocks */
  --_typography---font--logographic-family: "Noto Sans", Arial, sans-serif;     /* CJK/logographic fallback */
}
```

### Weight Scale

```css
:root {
  --_typography---font--primary-light: 300;
  --_typography---font--primary-regular: 400;   /* Body default */
  --_typography---font--primary-medium: 500;    /* Subheadings, emphasis */
  --_typography---font--primary-semibold: 600;  /* Strong UI labels */
  --_typography---font--primary-bold: 700;      /* Bold emphasis */
}
```

### Composite Typography Groups

```css
:root {
  /* ── Display sizes (fluid, Anthropic Serif) ─────────────────── */
  /* display-1: 42px mobile → 72px desktop */
  --_typography---font-size--display-1: clamp(2.625rem, ((2.625 - ((4.5 - 2.625) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((4.5 - 2.625) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 4.5rem);

  /* display-2: 36px mobile → 64px desktop */
  --_typography---font-size--display-2: clamp(2.25rem, ((2.25 - ((4 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((4 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 4rem);

  /* ── Heading sizes (fluid, Anthropic Serif) ─────────────────── */
  --_typography---font-size--h1: clamp(2.125rem, ..., 3.25rem);   /* 34px → 52px */
  --_typography---font-size--h2: clamp(1.875rem, ..., 2.75rem);   /* 30px → 44px */
  --_typography---font-size--h3: clamp(1.75rem, ..., 2.25rem);    /* 28px → 36px */
  --_typography---font-size--h4: clamp(1.4375rem, ..., 2rem);     /* 23px → 32px */
  --_typography---font-size--h5: clamp(1.25rem, ..., 1.5625rem);  /* 20px → 25px */
  --_typography---font-size--h6: clamp(1rem, ..., 1.1875rem);     /* 16px → 19px */

  /* ── Body sizes (Anthropic Sans) ───────────────────────────── */
  --_typography---font-size--body-large-1: clamp(1.375rem, ..., 1.5rem);   /* 22px → 24px */
  --_typography---font-size--body-large-2: clamp(1.25rem, ..., 1.4375rem); /* 20px → 23px */
  --_typography---font-size--body-1: clamp(1.1875rem, ..., 1.25rem);       /* 19px → 20px — DEFAULT */
  --_typography---font-size--body-2: 1.0625rem;                             /* 17px — fixed */
  --_typography---font-size--body-3: 0.9375rem;                             /* 15px — fixed */
  --_typography---font-size--caption: 0.75rem;                              /* 12px — fixed */
  --_typography---font-size--micro: 0.625rem;                               /* 10px — fixed */

  /* ── Line heights ───────────────────────────────────────────── */
  --_typography---line-height--1:   1;
  --_typography---line-height--1-1: 1.1;
  --_typography---line-height--1-2: 1.2;
  --_typography---line-height--1-3: 1.3;
  --_typography---line-height--1-5: 1.5;
  --_typography---line-height--1-6: 1.6; /* Body default */
  --_typography---line-height--1-7: 1.7;

  /* ── Letter spacing ─────────────────────────────────────────── */
  --_typography---letter-spacing--0em:    0em;     /* Default — all body text */
  --_typography---letter-spacing--0-01em: 0.01em;  /* Subtle tracking */
  --_typography---letter-spacing--0-05em: 0.05em;  /* Caps/labels */

  /* ── Text trim (optical sizing for Anthropic fonts) ────────── */
  --_typography---font--text-trim-top:      0.39em;
  --_typography---font--text-trim-bottom:   0.38em;
  --_typography---font--mono-text-trim-top:    0.4em;
  --_typography---font--mono-text-trim-bottom: 0.37em;

  /* ── Text transforms ────────────────────────────────────────── */
  --_typography---text-transform--none:       none;
  --_typography---text-transform--uppercase:  uppercase;
  --_typography---text-transform--capitalize: capitalize;
  --_typography---text-transform--lowercase:  lowercase;
}
```

### Composite Style Groups (how to use)

| Style | Font family | Size token | Weight | Line height | Letter spacing | Use for |
|---|---|---|---|---|---|---|
| **Display 1** | Anthropic Serif | `--display-1` (42→72px) | 500 | 1.1 | 0em | Hero headlines |
| **Display 2** | Anthropic Serif | `--display-2` (36→64px) | 500 | 1.1 | 0em | Sub-hero display |
| **H1** | Anthropic Serif | `--h1` (34→52px) | 500 | 1.2 | 0em | Page titles |
| **H2** | Anthropic Serif | `--h2` (30→44px) | 500 | 1.2 | 0em | Section headings |
| **H3** | Anthropic Serif | `--h3` (28→36px) | 500 | 1.3 | 0em | Sub-section heads |
| **Body 1** | Anthropic Sans | `--body-1` (19→20px) | 400 | 1.6 | 0em | **Default body text** |
| **Body 2** | Anthropic Sans | `--body-2` (17px) | 400 | 1.6 | 0em | Secondary body |
| **Body 3** | Anthropic Sans | `--body-3` (15px) | 400 | 1.6 | 0em | Small body, nav links |
| **Caption** | Anthropic Sans | `--caption` (12px) | 400 | 1.5 | 0.01em | Labels, captions |
| **Micro** | Anthropic Sans | `--micro` (10px) | 400 | 1.5 | 0.05em | Badges, fine print |

**Pairing rules:**
- `"Anthropic Serif"` is strictly for **headings and display** — H1 through H6 and display levels
- `"Anthropic Sans"` handles **all body, UI, buttons, labels, captions**
- `"Anthropic Mono"` for **code only** — never for UI text
- Default body text size is **body-1** (~19–20px) — noticeably large, which creates the premium editorial feel
- **NEVER** use `"Anthropic Serif"` at weights below 500 or at body sizes

---

## 4. Spacing & Layout

```css
:root {
  /* ── Viewport bounds (used in all fluid clamp() calculations) ── */
  --site--viewport-min: 20;   /* 320px — minimum viewport in rem units */
  --site--viewport-max: 90;   /* 1440px — maximum viewport in rem units */

  /* ── Site margins (horizontal padding left/right of content) ─── */
  --site--margin: clamp(2rem, ((2 - ((4 - 2) / (90 - 20) * 20)) * 1rem + ((4 - 2) / (90 - 20)) * 100vw), 4rem);
  /* Resolves to: 2rem on mobile → 4rem on desktop */

  /* ── Container widths ──────────────────────────────────────── */
  --max-width--main:   calc(var(--site--viewport-max) * 1rem); /* 90rem = 1440px */
  --max-width--medium: 74.5rem;  /* ~1192px — content-heavy sections */
  --max-width--small:  60rem;    /* ~960px — narrow content, articles */
  --max-width--full:   100%;

  /* ── Grid ──────────────────────────────────────────────────── */
  --_grid---column-count: 12;
  --_column-count---value: 12;
  --_grid---gutter: 2rem;  /* 32px — gap between columns */

  /* Grid template definitions */
  --grid-breakout: [full-start] minmax(0, 1fr) [content-start] repeat(var(--_grid---column-count), minmax(0, var(--_grid---column-width))) [content-end] minmax(0, 1fr) [full-end];
  --grid-breakout-single: [full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - var(--site--margin) * 2)) [content-end] minmax(0, 1fr) [full-end];

  /* ── Spacing scale (fluid) ─────────────────────────────────── */
  --_spacing---space--0-25rem: 0.25rem;   /* 4px  — micro gaps */
  --_spacing---space--0-5rem:  0.5rem;    /* 8px  — tight gaps */
  --_spacing---space--0-75rem: 0.75rem;   /* 12px — small gaps */
  --_spacing---space--1rem:    1rem;      /* 16px — base unit */
  --_spacing---space--1-5rem:  1.5rem;    /* 24px — paragraph margins */
  --_spacing---space--2rem:    clamp(1.75rem, ..., 2rem);   /* ~28–32px */
  --_spacing---space--2-5rem:  clamp(2rem,   ..., 2.5rem);  /* ~32–40px */
  --_spacing---space--3rem:    clamp(2.5rem, ..., 3rem);    /* ~40–48px */
  --_spacing---space--4rem:    clamp(3.25rem,..., 4rem);    /* ~52–64px */

  /* ── Section spacing (the large vertical rhythm) ───────────── */
  --_spacing---section-space--none:    0px;
  --_spacing---section-space--small:   clamp(4rem, ..., 6rem);    /* 64px → 96px */
  --_spacing---section-space--main:    clamp(6rem, ..., 8rem);    /* 96px → 128px — DEFAULT section gap */
  --_spacing---section-space--large:   clamp(8rem, ..., 12.5rem); /* 128px → 200px */
  --_spacing---section-space--page-top: clamp(12rem, ..., 15rem); /* 192px → 240px — hero top padding */

  /* ── Gaps ──────────────────────────────────────────────────── */
  --_gap---size: var(--_grid---gutter); /* 2rem — used as component-level gap */

  /* ── Borders ───────────────────────────────────────────────── */
  --border-width--main: 0.0625rem; /* 1px — all borders */

  /* ── Focus ring ────────────────────────────────────────────── */
  --focus--width: 0.125rem;        /* 2px */
  --focus--offset-inner: -0.125rem;
  --focus--offset-outer: 0.25rem;
}
```

### Breakpoints

| Name | Value | Behaviour |
|---|---|---|
| Mobile XS | `479px` | Single column, minimal padding |
| Mobile S | `501px` | Minor layout adjustments |
| Mobile M | `640px` | Two-column possibilities |
| Tablet S | `767px` | Below this: mobile nav |
| Tablet | `768px` | Tablet layout begins |
| Desktop S | `991px` | Below this: condensed desktop |
| Desktop | `992px` | Full desktop layout |

**Grid decisions:**
- Use `display: grid` with `--grid-breakout` for full-bleed sections that need content containment
- Use `display: flex` with `flex-direction: row` + `gap: var(--_grid---gutter)` for horizontal card rows
- Content sections are contained at `--max-width--main` centered with `margin-inline: auto` and `padding-inline: var(--site--margin)`

---

## 5. Page Structure & Layout Patterns

### 5.1 Section Map

| # | Section Name | Layout Type | Approx Height | Key Elements |
|---|---|---|---|---|
| 1 | **Navigation** | Flex row, full-width | 64px | Logo left, nav links center, Login + Contact sales + Try Claude CTAs right |
| 2 | **Sub-nav bar** | Flex row, contained | 40px | "Product" breadcrumb left, "Explore here ↓" right |
| 3 | **Hero** | Two-column grid (asymmetric 55/45) | ~600px | Left: H1 + subhead + search input + tag chips; Right: organic illustration + floating news card |
| 4 | **Features / Benefits** | Two-column grid (50/50) + centered brand mark | ~700px | Left column: 3 stacked feature items (icon + heading + body); Right column: large centered "✳ Claude" wordmark |
| 5 | **Migration CTA Banner** | Full-width card, contained | ~100px | Single row — headline + CTA button ("Start importing"), white card on warm bg |
| 6 | **Capabilities Section** | Centered heading + tab navigation + full-width media | ~900px | Centered pictogram icon → section heading → tab row (Tasks/Learn/Code/Research/Analyse/Create) → large hero image |
| 7 | **Delegate Tasks** | Two-column (40/60), content left + image right | ~400px | Left: heading + body + "Explore Cowork" link; Right: feature illustration/screenshot |
| 8 | **Footer** | [TBD — extract manually] | ~300px | Multi-column links, social icons, legal |

### 5.2 Layout Patterns

**Navigation (Section 1):**
```
display: flex; flex-direction: row; align-items: center;
justify-content: space-between; padding-inline: var(--site--margin);
height: 64px; background: var(--_theme---background-primary);
border-bottom: var(--border-width--main) solid var(--_theme---border-tertiary);
```
- Logo (`✳ Claude`) anchored left
- Main nav links in center with dropdown chevrons (font: Anthropic Sans, body-3 size)
- Right cluster: `Login` (text link) → `Contact sales` (primary button, dark) → `Try Claude` (brand button, clay/terracotta)
- Both nav buttons use `--radius--main` (0.75rem), not pill radius

**Sub-nav bar (Section 2):**
```
display: flex; justify-content: space-between; align-items: center;
padding: var(--_spacing---space--0-75rem) var(--site--margin);
border-bottom: var(--border-width--main) solid var(--_theme---border-tertiary);
```
- Left: "Product" breadcrumb in `--_theme---foreground-tertiary` colour, caption size
- Right: "Explore here ↓" in matching style with dropdown affordance

**Hero Section (Section 3):**
```
display: grid; grid-template-columns: 55fr 45fr; gap: var(--_grid---gutter);
padding-block-start: var(--_spacing---section-space--page-top); /* 12–15rem */
padding-inline: var(--site--margin);
max-width: var(--max-width--main); margin-inline: auto;
background: var(--_theme---background-primary);
```
- Left column: vertically stacked — H1 display text (Anthropic Serif, ~52–60px on desktop) → subheadline (body-large-1) → input row → chip group
- Right column: decorative illustration (clay/terracotta organic shapes) positioned absolutely/floated right; overlapping "Latest news" floating card panel
- H1 text: `"Meet your thinking partner"` — Anthropic Serif, weight 500, line-height 1.1

**Hero Input Row:**
```
display: flex; flex-direction: row; gap: var(--_spacing---space--0-75rem);
border: var(--border-width--main) solid var(--_theme---border-secondary);
border-radius: var(--radius--main); background: var(--swatch--gray-000);
padding: var(--_spacing---space--0-75rem) var(--_spacing---space--1rem);
```
- Text input left + "Ask Claude →" brand button right
- Button: clay background (`--swatch--clay-interactive`), radius `--radius--main`

**Hero Tag Chips:**
```
display: flex; flex-direction: row; gap: var(--_spacing---space--0-5rem);
```
- Chips: "✎ Write", "☐ Learn", "</> Code"
- Each chip: `border: var(--border-width--main) solid var(--_theme---border-secondary)`, `border-radius: var(--radius--small)` (0.5rem), `padding: 0.25rem 0.75rem`, body-3 size

**Features Section (Section 4):**
```
display: grid; grid-template-columns: 1fr 1fr; gap: var(--_grid---gutter);
padding-block: var(--_spacing---section-space--main);
padding-inline: var(--site--margin);
background: var(--_theme---background-secondary); /* warm cream #f5f4ed */
```
- Left: 3 stacked feature rows (icon 24px + heading body-large-2 + body text body-3), gap between rows ~2rem
- Right: centered `✳ Claude` wordmark (large, Anthropic Sans, ~3rem), centered vertically and horizontally
- Feature icons are line-art style in `--_theme---foreground-tertiary` colour

**Migration Banner (Section 5):**
```
max-width: var(--max-width--medium); margin-inline: auto;
padding: var(--_spacing---space--2rem) var(--_spacing---space--3rem);
background: var(--swatch--gray-000); border-radius: var(--radius--large); /* 1rem */
display: flex; flex-direction: row; justify-content: space-between; align-items: center;
border: var(--border-width--main) solid var(--_theme---border-secondary);
```
- Headline text (Anthropic Serif, H3 size) left
- "Start importing" primary button (dark) right, `--radius--main`

**Capabilities Section (Section 6):**
```
padding-block: var(--_spacing---section-space--large);
background: var(--_theme---background-secondary);
```
- Centered pictogram icon at top (clay colour, ~48px)
- Section heading centered (Anthropic Serif, H2)
- Tab strip: flex row, centered, `gap: var(--_spacing---space--0-5rem)`
- Full-width hero image below tabs with `border-radius: var(--radius--x-large)` and heather/cactus tinted background

### 5.3 Visual Hierarchy

- **Primary CTA** is "Try Claude" (clay/terracotta) in the navigation — always visible
- **Hero H1** is the largest text on page: Anthropic Serif, weight 500, ~52–60px
- **Illustration** occupies the right 45% of hero — equal visual weight to the text
- **Section backgrounds alternate** between `--swatch--gray-050` and `--swatch--gray-100` to create rhythm without hard borders
- **Whitespace is aggressive** — the hero top padding (`12–15rem`) makes the page feel uncrowded and premium
- **The ✳ starburst logo** in the features section is a deliberate brand moment — large, centered, acting as a visual anchor
- **CTAs are spaced far apart** — only one primary action per visual section

### 5.4 Content Patterns

**Feature item pattern (repeated 3×):**
```
[Icon 24px] [Heading body-large-2, Anthropic Sans medium] 
[Body text body-3, Anthropic Sans regular, --foreground-secondary]
```

**Tab chip pattern:**
```
[Icon] [Label] — flex row, padding 0.5rem 1rem, border-radius --radius--small
Active state: background --foreground-primary, text --background-primary (inverted)
```

**News/notification card pattern:**
```
White card, border-radius --radius--large (1rem), padding --spacing-2rem
[Caption label row with icon] [Heading body-large-1 Anthropic Serif bold] 
[Body text body-3] [Dark CTA button] [Image thumbnail right]
```

---

## 6. Component Patterns

### 6.1 Brand Button (`button_main_wrap` — "Try Claude" variant)

**Anatomy:** Container (flex row) → [optional icon] + Label text

**Token mappings:**

| State | Background | Text | Border | Box-shadow |
|---|---|---|---|---|
| Default | `--_theme---button-brand--background` | `--_theme---button-brand--text` | `--_theme---button-brand--border` | `0 0 0 0 transparent` |
| Hover | `--_theme---button-brand--background-hover` (same) | same | `--_theme---button-brand--border-hover` | `0 0 0 1px var(--_button-style---background), 0 0 0 2px var(--_button-style---border)` |
| Active | same | same | same | `0 0 0 0 var(--_button-style---background), 0 0 0 1px var(--_button-style---border)` |
| Disabled | `--_theme---background-tertiary` | `--_theme---foreground-tertiary` | `--_theme---border-secondary` | none |

```tsx
// Production-ready brand button with all states
import React from 'react';

interface BrandButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  icon?: React.ReactNode;
  size?: 'default' | 'small';
}

export function BrandButton({ children, onClick, disabled, icon, size = 'default' }: BrandButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        // Layout
        display: 'inline-flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '4px',
        // Spacing
        padding: size === 'small' ? '0.5rem 1rem' : '0.75rem 1.5rem',
        // Typography
        fontFamily: 'var(--_typography---font--primary-family)',
        fontSize: size === 'small' ? 'var(--_typography---font-size--body-3)' : 'var(--_typography---font-size--body-2)',
        fontWeight: 'var(--_typography---font--primary-regular)',
        lineHeight: 'var(--_typography---line-height--1-5)',
        letterSpacing: 'var(--_typography---letter-spacing--0em)',
        // Colours — default state
        backgroundColor: disabled
          ? 'var(--_theme---background-tertiary)'
          : 'var(--_theme---button-brand--background)',
        color: disabled
          ? 'var(--_theme---foreground-tertiary)'
          : 'var(--_theme---button-brand--text)',
        // Border
        border: `var(--border-width--main) solid ${disabled ? 'var(--_theme---border-secondary)' : 'var(--_theme---button-brand--border)'}`,
        borderRadius: 'var(--radius--main)',
        // Reset
        cursor: disabled ? 'not-allowed' : 'pointer',
        textDecoration: 'none',
        outline: 'none',
        // Transition
        transition: `all 600ms var(--ease-expo-out)`,
        // Box shadow (spacer ring — animated on hover via CSS)
        boxShadow: `0 0 0 var(--_button-style---spacer-width, 0rem) var(--_button-style---background, transparent),
                    0 0 0 var(--_button-style---border-width, 0.0625rem) var(--_button-style---border, transparent)`,
        opacity: disabled ? 0.5 : 1,
      }}
      // Hover + active states require CSS classes for the box-shadow ring technique
      className="btn-brand"
    >
      {icon && <span className="btn-icon" aria-hidden="true">{icon}</span>}
      {children}
    </button>
  );
}

/* Required CSS (in global stylesheet or CSS module):
.btn-brand:hover:not(:disabled) {
  color: var(--_button-style---text-hover);
  border-color: var(--_button-style---border-hover);
  box-shadow:
    0 0 0 var(--_button-style---spacer-width-hover, 0.0625rem) var(--_button-style---background, transparent),
    0 0 0 var(--_button-style---border-width-hover, 0.125rem) var(--_button-style---border, transparent);
}
.btn-brand:active:not(:disabled) {
  box-shadow:
    0 0 0 var(--_button-style---spacer-width, 0rem) var(--_button-style---background, transparent),
    0 0 0 var(--_button-style---border-width, 0.0625rem) var(--_button-style---border, transparent);
}
.btn-brand:focus-visible {
  outline: var(--focus--width) solid var(--swatch--clay-interactive);
  outline-offset: var(--focus--offset-outer);
}
*/
```

---

### 6.2 Primary Button (dark — "Contact sales")

**Token mappings:**

| State | Background | Text | Border |
|---|---|---|---|
| Default | `--swatch--gray-950` (#141413) | `--swatch--gray-050` (#faf9f5) | `--_theme---foreground-secondary` |
| Hover | `--swatch--gray-850` (#1f1e1d) | same | same |
| Active | `--swatch--gray-950` | same | same |
| Disabled | `--_theme---background-tertiary` | `--_theme---foreground-tertiary` | `--_theme---border-secondary` |

```css
.btn-primary {
  background-color: var(--_theme---button-primary--background);
  color: var(--_theme---button-primary--text);
  border: var(--border-width--main) solid var(--_theme---button-primary--border);
  border-radius: var(--radius--main);
  font-family: var(--_typography---font--primary-family);
  padding: 0.75rem 1.5rem;
  transition: background-color 300ms var(--ease-expo-out);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--_theme---button-primary--background-hover);
}
.btn-primary:focus-visible {
  outline: var(--focus--width) solid var(--swatch--clay-interactive);
  outline-offset: var(--focus--offset-outer);
}
```

---

### 6.3 Secondary Button

| State | Background | Text | Border |
|---|---|---|---|
| Default | `--swatch--gray-200` (#e8e6dc) | `--swatch--gray-650` (#4d4c48) | `--_theme---border-secondary` |
| Hover | `--swatch--gray-000` (white) | `--_theme---foreground-primary` | `--swatch--gray-200` |
| Active | `--swatch--gray-200` | `--_theme---foreground-primary` | same |
| Disabled | `--_theme---background-tertiary` | `--_theme---foreground-tertiary` | `--_theme---border-secondary` |

---

### 6.4 Toggle/Switch

**Anatomy:** Track container → Dot (thumb)

```css
/* Track */
.switch-track {
  background: var(--_theme---switch--background);   /* --swatch--gray-150 */
  border: var(--border-width--main) solid var(--_theme---switch--border);
  border-radius: 100vmax; /* pill shape — switches are the ONLY pill shapes */
  width: 2.5rem; height: 1.25rem;
  transition: background-color 300ms var(--ease-expo-out);
}
.switch-track[data-active="true"] {
  background: var(--_theme---switch--background-active); /* #2c84db */
  border-color: var(--_theme---switch--border-active);   /* transparent */
}

/* Dot */
.switch-dot {
  background: var(--_theme---switch--dot-background);    /* white */
  border: var(--border-width--main) solid var(--_theme---switch--dot-border);
  border-radius: 50%;
}
.switch-dot[data-active="true"] {
  background: var(--_theme---switch--dot-background-active); /* white */
  border-color: var(--_theme---switch--dot-border-active);   /* transparent */
}
```

---

### 6.5 Navigation Dropdown

**Token mappings:**

| State | Background | Text |
|---|---|---|
| Default | `--_theme---background-primary` | `--_theme---foreground-secondary` |
| Hover | `--_theme---background-tertiary` | `--_theme---foreground-primary` |
| Focus-visible | outline: `--swatch--clay-interactive` 2px solid, offset 2px | — |

```css
.nav_dropdown_link:hover {
  background-color: var(--_theme---background-tertiary);
  color: var(--_theme---foreground-primary);
}
.nav_dropdown_link:focus-visible {
  outline: var(--focus--width) solid var(--swatch--clay-interactive);
  outline-offset: var(--focus--offset-outer);
}
```

Animation tokens: `--nav--dropdown-duration: 300ms`, `--nav--dropdown-open-duration: 600ms`, `--nav--dropdown-delay: 0ms`, easing: `var(--ease-expo-out)`.

---

### 6.6 Card (`card_blog_wrap`)

**Anatomy:** Container → [Media/image] → [Content area: tag + heading + body + meta]

| State | Background | Border | Shadow |
|---|---|---|---|
| Default | `--_theme---background-primary` | `--_theme---border-secondary` | none |
| Hover | `--_theme---background-primary` | `--_theme---border-secondary` | `rgba(0,0,0,0.04) 0px 4px 20px` |

```tsx
export function Card({ title, body, tag, href }: CardProps) {
  return (
    <a
      href={href}
      className="card-wrap"
      style={{
        display: 'block',
        background: 'var(--_theme---background-primary)',
        border: 'var(--border-width--main) solid var(--_theme---border-secondary)',
        borderRadius: 'var(--radius--large)',      /* 1rem */
        overflow: 'hidden',
        textDecoration: 'none',
        color: 'var(--_theme---foreground-primary)',
        transition: `box-shadow 300ms var(--ease-expo-out)`,
      }}
    >
      <div style={{ padding: 'var(--_spacing---space--2rem)' }}>
        {tag && (
          <span style={{
            fontFamily: 'var(--_typography---font--primary-family)',
            fontSize: 'var(--_typography---font-size--caption)',
            color: 'var(--_theme---foreground-tertiary)',
            letterSpacing: 'var(--_typography---letter-spacing--0-01em)',
          }}>
            {tag}
          </span>
        )}
        <h3 style={{
          fontFamily: 'var(--_typography---font--secondary-family)', /* Anthropic Serif */
          fontSize: 'var(--_typography---font-size--h5)',
          fontWeight: 'var(--_typography---font--primary-medium)',   /* 500 */
          lineHeight: 'var(--_typography---line-height--1-3)',
          color: 'var(--_theme---foreground-primary)',
          marginTop: 'var(--_spacing---space--0-5rem)',
        }}>
          {title}
        </h3>
        <p style={{
          fontFamily: 'var(--_typography---font--primary-family)',
          fontSize: 'var(--_typography---font-size--body-3)',
          lineHeight: 'var(--_typography---line-height--1-6)',
          color: 'var(--_theme---foreground-secondary)',
          marginTop: 'var(--_spacing---space--0-5rem)',
        }}>
          {body}
        </p>
      </div>
    </a>
    // CSS: .card-wrap:hover { box-shadow: rgba(0,0,0,0.04) 0px 4px 20px; }
  );
}
```

---

### 6.7 Text Input (Hero search)

| State | Border | Background |
|---|---|---|
| Default | `--_theme---border-secondary` | `--swatch--gray-000` |
| Focus | `rgb(56, 152, 236)` (Webflow default override) | `--swatch--gray-000` |
| Hover | `--swatch--gray-950` (1px solid) | `--swatch--gray-000` |

```css
.form-input {
  border: var(--border-width--main) solid var(--_theme---border-secondary);
  border-radius: var(--radius--main);
  background: var(--swatch--gray-000);
  font-family: var(--_typography---font--primary-family);
  font-size: var(--_typography---font-size--body-2);
  color: var(--_theme---foreground-primary);
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 300ms var(--ease-expo-out);
}
.form-input:hover { border-color: var(--_theme---foreground-primary); }
.form-input:focus { border-color: rgb(56, 152, 236); }
```

---

### 6.8 Breadcrumb

```css
.breadcrumb-text {
  font-family: var(--_typography---font--primary-family);
  font-size: var(--_typography---font-size--caption);
  color: var(--_theme---foreground-tertiary);
  line-height: var(--_typography---line-height--1-5);
}
.breadcrumb-text.is_linked:hover {
  text-decoration: underline;
  color: var(--_theme---foreground-primary);
}
```

---

## 7. Elevation & Depth

```css
:root {
  /* ── Borders ────────────────────────────────────────────────── */
  --border-width--main: 0.0625rem; /* 1px — universal border width */

  /* Border colours by tier */
  --_theme---border-primary:   var(--swatch--gray-400); /* #b0aea5 — strong, dividers */
  --_theme---border-secondary: var(--swatch--gray-300); /* #d1cfc5 — standard components */
  --_theme---border-tertiary:  var(--swatch--gray-200); /* #e8e6dc — subtle, nav */

  /* ── Shadows ────────────────────────────────────────────────── */
  /* No default shadow tokens — depth is expressed via border contrast */
  /* Only two shadow values appear in the system: */
  /* Card hover: rgba(0, 0, 0, 0.04) 0px 4px 20px — ultra-subtle lift */
  /* Focus ring: 0 0 0 2px white (slider dots only) */

  /* ── Button ring system (pseudo-shadow via box-shadow) ─────── */
  /* Hover state creates a double-border ring: */
  /* 0 0 0 [spacer-width] [bg-colour], 0 0 0 [border-width] [border-colour] */
  /* This simulates an outer glow ring without actual shadow */

  /* ── Focus ──────────────────────────────────────────────────── */
  --focus--width: 0.125rem;           /* 2px focus ring */
  --focus--offset-inner: -0.125rem;   /* -2px for inset rings */
  --focus--offset-outer: 0.25rem;     /* 4px for outset rings */
  /* Focus colour: var(--swatch--clay-interactive) #c96442 */
  /* Fallback focus colour: rgb(20, 110, 245) — some Webflow elements */

  /* ── Z-index scale ──────────────────────────────────────────── */
  /* Inferred from element context — not defined as CSS vars */
  /* z-1:  Page content (default) */
  /* z-10: Floating cards, news panels */
  /* z-50: Navigation bar */
  /* z-100: Dropdowns */
  /* z-200: Modals */
  /* z-9999: [TBD - extract manually] */

  /* ── Radius scale (also contributes to elevation perception) ── */
  --radius--x-small: 0.25rem; /* 4px  — chips, micro elements */
  --radius--small:   0.5rem;  /* 8px  — small cards, tags */
  --radius--main:    0.75rem; /* 12px — buttons, inputs — primary radius */
  --radius--large:   1rem;    /* 16px — cards, panels */
  --radius--x-large: clamp(1rem, ..., 1.5rem); /* 16px → 24px — large media containers */
  --radius--xx-large: clamp(1rem, ..., 2rem);  /* 16px → 32px — full sections/hero cards */
}
```

**Elevation principles:**
- **No shadows on resting state** — components sit flat on their backgrounds
- **Border contrast** creates visual separation (lighter bg + slightly darker border)
- **Background shift** on hover (e.g. `--gray-050` → `--gray-150`) signals interactivity
- **Only card hover adds a shadow** — and it's extremely subtle (4% black opacity)
- **Button rings** (`box-shadow` technique) communicate focus/press without depth

---

## 8. Motion

```css
:root {
  /* ── Easing ─────────────────────────────────────────────────── */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* Primary easing — fast-in, slow settle */

  /* ── Navigation durations ──────────────────────────────────── */
  --nav--dropdown-duration:      300ms; /* Nav dropdown close */
  --nav--dropdown-open-duration: 600ms; /* Nav dropdown open (slower = more intentional) */
  --nav--dropdown-delay:         0ms;   /* No delay on nav interactions */

  /* ── Body transition (extracted from computed styles) ─────── */
  /* body: transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1) */
  /* Used for potential dark/light mode colour transitions */

  /* ── Spin animation ────────────────────────────────────────── */
  /* @keyframes spin: 0% { transform: rotate(0deg) } → 100% { transform: rotate(360deg) } */
  /* Use for loading indicators only */
}
```

**Motion principles:**
- **One easing curve:** `--ease-expo-out` (`cubic-bezier(0.16, 1, 0.3, 1)`) is used universally — the characteristic "quick start, slow settle" feel
- **Asymmetric open/close:** Navigation opens at 600ms (deliberate, welcoming), closes at 300ms (snappy, non-blocking)
- **Short durations for UI feedback:** Hover states 150–300ms; colour transitions 300ms
- **Long durations for reveals:** Content animations 500–600ms with `--ease-expo-out`
- **NEVER animate layout properties** (`width`, `height`, `margin`) — animate `transform` and `opacity` only
- **Reduced motion:** All animations should respect `prefers-reduced-motion: reduce` — wrap in media query

```css
/* Standard transition template */
.interactive-element {
  transition:
    color 300ms var(--ease-expo-out),
    background-color 300ms var(--ease-expo-out),
    border-color 300ms var(--ease-expo-out),
    box-shadow 300ms var(--ease-expo-out);
}

@media (prefers-reduced-motion: reduce) {
  .interactive-element {
    transition: none;
  }
}
```

---

## 9. Anti-Patterns & Constraints

1. **Hardcoded colour values → AI defaults to #3B82F6 or #000000 → Use CSS variables exclusively**
   When asked to "make a button", AI agents without context default to Tailwind's blue-500 or a generic black button. This design uses `--swatch--clay-interactive` (#c96442) for brand CTAs and `--swatch--gray-950` (#141413) for primary actions. **Never write `background: #c96442` — always `background: var(--swatch--clay-interactive)`**. Hardcoded values break theming and lose the semantic chain.

2. **Using pure white (#ffffff) as background → Breaks the warm character → Use `--swatch--gray-050` (#faf9f5)**
   AI agents default to `bg-white` or `background: #fff` for page and card backgrounds. Claude.com's entire aesthetic rests on warm off-white (`#faf9f5`). Using pure white destroys the warm-neutral palette relationship and makes the interface feel cold and generic. All page surfaces use `var(--_theme---background

## Appendix A: Complete Token Reference

Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.

```css
/* Colours (70) */
--_theme---background-primary: var(--swatch--gray-050);
--_theme---background-secondary: var(--swatch--gray-100);
--swatch--transparent: transparent;
--_button-style---background: var(--_theme---button-brand--background);
--_button-style---background-hover: var(--_theme---button-brand--background-hover);
--swatch--gray-950: #141413;
--_theme---background-tertiary: var(--swatch--gray-150);
--swatch--oat: #e3dacc;
--swatch--olive: #788c5d;
--swatch--cactus: #bcd1ca;
--swatch--sky: #6a9bcc;
--swatch--heather: #cbcadb;
--swatch--fig: #c46686;
--swatch--coral: #ebcece;
--swatch--clay: #d97757;
--swatch--gray-1000: #000;
--_theme---switch--background: var(--_theme---background-tertiary);
--_theme---switch--background-active: #2c84db;
--_theme---switch--dot-background: var(--swatch--gray-000);
--_theme---switch--dot-background-active: var(--swatch--gray-000);
--swatch--gray-500: #87867f;
--swatch--gray-750: #30302e;
--swatch--gray-050: #faf9f5;
--swatch--gray-900: #1a1918;
--swatch--gray-350: #c2c0b6;
--swatch--gray-150: #f0eee6;
--swatch--gray-000: white;
--swatch--clay-interactive: #c96442;
--_theme---selection--background: color-mix(in srgb,var(--swatch--clay)50%,transparent);
--_theme---error-text: #b53333;
--swatch--gray-100: #f5f4ed;
--swatch--gray-200: #e8e6dc;
--swatch--gray-250: #dedcd1;
--swatch--gray-300: #d1cfc5;
--swatch--gray-400: #b0aea5;
--_theme---button-brand--background: var(--swatch--clay-interactive);
--swatch--gray-450: #9c9a92;
--swatch--gray-550: #73726c;
--swatch--gray-600: #5e5d59;
--swatch--gray-650: #4d4c48;
--_theme---button-brand--background-hover: var(--swatch--clay-interactive);
--swatch--gray-700: #3d3d3a;
--_theme---button-primary--background: var(--swatch--gray-950);
--_theme---button-primary--background-hover: var(--swatch--gray-850);
--_theme---button-secondary--background: var(--swatch--gray-200);
--_theme---button-secondary--background-hover: var(--swatch--gray-000);
--_theme---button-tertiary--background: var(--_theme---background-primary);
--_theme---button-tertiary--background-hover: var(--_theme---button-tertiary--background);
--swatch--gray-800: #262624;
--swatch--gray-850: #1f1e1d;
--_theme---border-primary: var(--swatch--gray-400);
--_theme---border-secondary: var(--swatch--gray-300);
--_theme---border-tertiary: var(--swatch--gray-200);
--_theme---switch--border: var(--_theme---border-secondary);
--_theme---switch--border-active: var(--swatch--transparent);
--_theme---switch--dot-border: var(--_theme---border-primary);
--_theme---switch--dot-border-active: var(--swatch--transparent);
--_theme---button-brand--border: var(--swatch--clay-interactive);
--_theme---button-brand--border-hover: var(--swatch--clay-interactive);
--_theme---button-primary--border: var(--_theme---foreground-secondary);
--_theme---button-primary--border-hover: var(--_theme---button-primary--border);
--_theme---button-secondary--border: var(--_theme---border-secondary);
--_theme---button-secondary--border-hover: var(--_theme---button-secondary--background);
--_theme---button-tertiary--border: var(--_theme---border-secondary);
--_theme---button-tertiary--border-hover: var(--_theme---button-tertiary--border);
--_button-style---border-width: var(--border-width--main);
--_button-style---border: var(--_theme---button-brand--border);
--_button-style---border-hover: var(--_theme---button-brand--border-hover);
--_button-style---border-width-hover: calc(var(--_button-style---border-width) * 2);
--border-width--main: 0.0625rem;

/* Typography (72) */
--_text-style---font-family: var(--_typography---font--primary-family);
--_text-style---font-size: var(--_typography---font-size--body-1);
--_text-style---line-height: var(--_typography---line-height--1-6);
--_typography---font--primary-regular: 400;
--_text-style---letter-spacing: var(--_typography---letter-spacing--0em);
--_text-style---font-weight: var(--_typography---font--primary-regular);
--_text-style---text-wrap: pretty;
--_text-style---logographic-family: var(--_typography---font--logographic-family);
--_typography---font--logographic-family: "Noto Sans", Arial, sans-serif;
--_typography---line-height--1-7: 1.7;
--_text-style---font-weight<deleted|variable-4b164c1c-8d1a-d4a3-2cae-137e7ca87326>: var(--_typography---font--primary-regular\<deleted\|variable-e2e11636-2778-b266-3d73-a7bb3f1f201f\>);
--_typography---font--primary-family: "Anthropic Sans", Arial, sans-serif;
--_typography---font--primary-medium: 500;
--_typography---font--primary-bold: 700;
--_typography---line-height--1: 1;
--_button-style---text: var(--_theme---button-brand--text);
--_button-style---text-hover: var(--_theme---button-brand--text-hover);
--_typography---font--mono-family: "Anthropic Mono", Arial, sans-serif;
--_typography---font-size--body-3: 0.9375rem;
--_typography---font--primary-semibold: 600;
--_typography---font--primary-light: 300;
--_typography---line-height--1-1: 1.1;
--_typography---font-size--display-1: clamp(2.625rem, ..., 4.5rem);
--_typography---font-size--h1: clamp(2.125rem, ..., 3.25rem);
--_typography---font--secondary-family: "Anthropic Serif", Georgia, sans-serif;
--_theme---text-accent: var(--swatch--clay);
--_typography---line-height--1-5: 1.5;
--_typography---font-size--body-1: clamp(1.1875rem, ..., 1.25rem);
--_typography---font-size--body-2: 1.0625rem;
--_typography---font-size--caption: 0.75rem;
--_typography---letter-spacing--0em: 0em;
--_grid---column-width: calc((min(var(--max-width--main),100% - var(--site--margin)*2) - (var(--site--gu… <0.3KB elided>;
--_text-style---text-transform: var(--_typography---text-transform--none);
--_text-style---trim-top: var(--_typography---font--text-trim-top);
--_text-style---trim-bottom: var(--_typography---font--text-trim-bottom);
--_theme---selection--text: var(--_theme---foreground-primary);
--_theme---button-brand--text: var(--swatch--gray-050);
--_theme---button-brand--text-hover: var(--swatch--gray-050);
--_theme---button-primary--text: var(--swatch--gray-050);
--_theme---button-primary--text-hover: var(--_theme---button-primary--text);
--_theme---button-secondary--text: var(--swatch--gray-650);
--_theme---button-secondary--text-hover: var(--_theme---foreground-primary);
--_theme---button-tertiary--text: var(--swatch--gray-600);
--_theme---button-tertiary--text-hover: var(--_theme---foreground-primary);
--_typography---font--text-trim-top: 0.39em;
--_typography---font--text-trim-bottom: 0.38em;
--_typography---font--mono-text-trim-top: 0.4em;
--_typography---font--mono-text-trim-bottom: 0.37em;
--_typography---letter-spacing--0-01em: 0.01em;
--_typography---letter-spacing--0-05em: 0.05em;
--_typography---line-height--1-2: 1.2;
--_typography---line-height--1-3: 1.3;
--_typography---line-height--1-6: 1.6;
--_typography---font-size--micro: 0.625rem;
--_typography---font-size--body-large-2: clamp(1.25rem, ..., 1.4375rem);
--_typography---font-size--body-large-1: clamp(1.375rem, ..., 1.5rem);
--_typography---font-size--h6: clamp(1rem, ..., 1.1875rem);
--_typography---font-size--h5: clamp(1.25rem, ..., 1.5625rem);
--_typography---font-size--h4: clamp(1.4375rem, ..., 2rem);
--_typography---font-size--h3: clamp(1.75rem, ..., 2.25rem);
--_typography---font-size--h2: clamp(1.875rem, ..., 2.75rem);
--_typography---font-size--display-2: clamp(2.25rem, ((2.25 - ((4 - 2.25) / (var(--site--viewport-max) - var(--site--v… <0.2KB elided>;
--_typography---text-transform--none: none;
--_typography---text-transform--uppercase: uppercase;
--_typography---text-transform--capitalize: capitalize;
--_typography---text-transform--lowercase: lowercase;
--_typography---font--primary-regular<deleted|variable-e2e11636-2778-b266-3d73-a7bb3f1f201f>: 400;
--_typography---font--primary-medium<deleted|variable-bf70a7c1-809a-4d78-48d8-6a700e801b65>: 500;
--swatch--brand-600<deleted|variable-f4848f9a-e1c5-5c7a-9707-4fe0d1542434>: color-mix(in srgb,var(--swatch--clay),black 20%);
--grid-breakout: [full-start] minmax(0, 1fr) [content-start] repeat(var(--_grid---column-count), minmax(0, var(--_grid---column-width))) [content-end] minmax(0, 1fr) [full-end];
--grid-breakout-single: [full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - var(--site--margin) * 2)) [content-end] minmax(0, 1fr) [full-end];
--ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);

/* Spacing (49) */
--_gap---size: var(--_grid---gutter);
--_text-style---margin-top: var(--_spacing---space--1rem);
--_text-style---margin-bottom: var(--_spacing---space--1-5rem);
--_spacing---space--2rem: clamp(1.75rem, ..., 2rem);
--_spacing---space--3rem: clamp(2.5rem, ..., 3rem);
--site--margin: clamp(2rem, ((2 - ((4 - 2) / (90 - 20) * 20)) * 1rem + ((4 - 2) / (90 - 20)) * 100vw), 4rem);
--max-width--small: 60rem;
--max-width--full: 100%;
--_spacing---section-space--none: 0px;
--_spacing---section-space--small: clamp(4rem, ..., 6rem);
--_spacing---section-space--main: clamp(6rem, ..., 8rem);
--_spacing---section-space--large: clamp(8rem, ..., 12.5rem);
--_spacing---section-space--page-top: clamp(12rem, ..., 15rem);
--_spacing---space--0-75rem: 0.75rem;
--_grid---gutter: 2rem;
--site--gutter<deleted|variable-19914bb2-08fa-8b60-b710-6beb999f4c42>: 2rem;
--_spacing---space--0-25rem: 0.25rem;
--_spacing---space--0-5rem: 0.5rem;
--_spacing---space--1rem: 1rem;
--_spacing---space--1-5rem: 1.5rem;
--_spacing---space--4rem: clamp(3.25rem,..., 4rem);
--border-width--main: .0625rem;
--_theme---border-primary: var(--swatch--gray-400);
--_theme---border-tertiary: var(--swatch--gray-200);
--_button-style---spacer-width: 0rem;
--_button-style---border-width: var(--border-width--main);
--_button-style---border: var(--_theme---button-brand--border);
--_button-style---border-hover: var(--_theme---button-brand--border-hover);
--_button-style---spacer-width-hover: var(--border-width--main);
--_button-style---border-width-hover: calc(var(--_button-style---border-width)*2);
--_theme---border-secondary: var(--swatch--gray-300);
--_spacing---space--2-5rem: clamp(2rem,   ..., 2.5rem);
--max-width--medium: 74.5rem;
--_theme---switch--border: var(--_theme---border-secondary);
--_theme---switch--border-active: var(--swatch--transparent);
--_theme---switch--dot-border: var(--_theme---border-primary);
--_theme---switch--dot-border-active: var(--swatch--transparent);
--focus--offset-inner: -.125rem;
--_theme---button-tertiary--border: var(--_theme---border-secondary);
--focus--width: 0.125rem;
--focus--offset-outer: 0.25rem;
--_theme---button-brand--border: var(--swatch--clay-interactive);
--_theme---button-brand--border-hover: var(--swatch--clay-interactive);
--_theme---button-primary--border: var(--_theme---foreground-secondary);
--_theme---button-primary--border-hover: var(--_theme---button-primary--border);
--_theme---button-secondary--border: var(--_theme---border-secondary);
--_theme---button-secondary--border-hover: var(--_theme---button-secondary--background);
--_theme---button-tertiary--border-hover: var(--_theme---button-tertiary--border);
--nav--hamburger-gap: var(--_spacing---space--0-25rem);

/* Radius (6) */
--radius--small: 0.5rem;
--radius--main: 0.75rem;
--radius--large: 1rem;
--radius--x-small: 0.25rem;
--radius--xx-large: clamp(1rem, ..., 2rem);
--radius--x-large: clamp(1rem, ..., 1.5rem);

/* Effects (34) */
--_theme---foreground-primary: var(--swatch--gray-950);
--_theme---foreground-tertiary: var(--swatch--gray-600);
--_column-count---value: 12;
--max-width--main: calc(var(--site--viewport-max)*1rem);
--_theme---heading-accent<deleted|variable-25bd0d95-1867-08bf-9f2f-eabc649f971e>: var(--swatch--brand-600\<deleted\|variable-f4848f9a-e1c5-5c7a-9707-4fe0d1542434\>);
--site--viewport-max: 90;
--site--viewport-min: 20;
--_trigger---on: 1;
--_trigger---off: 0;
--_grid---column-count: 12;
--_theme---foreground-secondary: var(--swatch--gray-750);
--_button-style---icon: var(--_theme---button-brand--icon);
--_theme---button-secondary--icon: var(--_theme---button-secondary--text);
--_theme---heroes-accent: var(--swatch--clay);
--_state---true: 1;
--_state---false: 0;
--_theme---white: var(--swatch--gray-000);
--_theme---pictogram-accent: var(--swatch--oat);
--_alignment---direction: start;
--_button-style---icon-hover: var(--_theme---button-brand--icon-hover);
--_theme---button-brand--icon: var(--swatch--gray-050);
--_theme---button-brand--icon-hover: var(--swatch--gray-050);
--_theme---button-primary--icon: var(--_theme---button-primary--text);
--_theme---button-primary--icon-hover: var(--_theme---background-primary);
--_theme---button-secondary--icon-hover: var(--_theme---foreground-secondary);
--_theme---button-tertiary--icon: var(--_theme---button-tertiary--text);
--_theme---button-tertiary--icon-hover: var(--_theme---foreground-primary);
--site--column-count<deleted|variable-85d23ac9-df16-3529-599c-7c03076ebe38>: 12;
--nav--icon-thickness: var(--border-width--main);
--nav--hamburger-thickness: var(--nav--icon-thickness);
--nav--hamburger-rotate: 45;
--nav--dropdown-duration: 300ms;
--nav--dropdown-open-duration: 600ms;
--nav--dropdown-delay: 0ms;

/* Motion (1) */
----motion-spin: @keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}; /* @keyframes spin */
```