glyph-ai 0.1.0

package/bundled/server/data/design-systems/claude-ai-design-system.md

@@ -0,0 +1,1443 @@
+# Claude.ai Design System & Section Boilerplate
+
+> Source: https://claude.ai (login/marketing page)
+> Scraped: 2026-03-22
+
+---
+
+## Design System
+
+### Colors
+
+#### Primary
+| Token | Value | Usage |
+|---|---|---|
+| Primary / Brand Clay | `hsl(14.8, 63.1%, 59.6%)` / approx `#D4805A` | Brand accent, warm clay tone |
+| Primary Emphasized | `hsl(15.1, 54.2%, 51.2%)` / approx `#C46A42` | Hover/active states of brand clay |
+| Primary Button BG (::before) | `rgb(20, 20, 19)` / `#141413` | Primary CTA fill (near-black) |
+| Primary Button Text | `rgb(255, 255, 255)` / `#FFFFFF` | White text on primary buttons |
+
+#### Secondary
+| Token | Value | Usage |
+|---|---|---|
+| Secondary Button BG | `rgba(0, 0, 0, 0)` (transparent) | Ghost/outline buttons |
+| Secondary Button Border | `0.5px solid rgba(31, 30, 29, 0.3)` | Outline button border |
+| Secondary Button Text | `rgb(20, 20, 19)` / `#141413` | Dark text on outline buttons |
+
+#### Neutral
+| Token | Value | Usage |
+|---|---|---|
+| Page Background | `rgb(250, 249, 245)` / `#FAF9F5` | Warm off-white, page bg |
+| Surface / Card | `rgb(255, 255, 255)` / `#FFFFFF` | Cards, inputs, dropdowns |
+| Surface Muted | `rgb(245, 244, 237)` / `#F5F4ED` | Subtle backgrounds, toggles |
+| Surface Hover | `rgb(240, 238, 230)` / `#F0EEE6` | Hover states |
+| Text Primary | `rgb(20, 20, 19)` / `#141413` | Headings, body text |
+| Text Secondary | `rgb(61, 61, 58)` / `#3D3D3A` | Nav links, less prominent text |
+| Text Tertiary | `rgb(115, 114, 108)` / `#73726C` | Subtitles, section headers, muted text |
+| Text Quaternary | `rgb(156, 154, 146)` / `#9C9A92` | Placeholder-like text |
+| Border Default | `rgba(31, 30, 29, 0.15)` | Card borders, input borders |
+| Border Emphasis | `rgba(31, 30, 29, 0.3)` | Outline button borders |
+| Footer BG | `rgb(0, 0, 0)` / `#000000` | Footer background |
+| Footer Text Muted | `rgb(194, 192, 182)` / `#C2C0B6` | Footer headings, meta text |
+| Max Card Accent Border | `rgba(27, 103, 178, 0.2)` | Blue-tinted border for featured card |
+| Max Card Accent Shadow | `rgba(27, 103, 178, 0.1) 0px 4px 24px` | Blue glow on featured card |
+
+### Typography
+
+#### Fonts
+| Role | Family | Fallback Stack |
+|---|---|---|
+| Headlines / Display | `"Anthropic Serif"` | `Georgia, "Times New Roman", serif` |
+| Body / UI | `"Anthropic Sans"` | `system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif` |
+
+#### Scale
+| Level | Font | Size | Weight | Line Height | Usage |
+|---|---|---|---|---|---|
+| Display / Hero H2 | Anthropic Serif | 56px | 330 | 67.2px (1.2) | Hero headline |
+| H1 | Anthropic Serif | 36px | 400 | 40px (1.11) | Section titles ("Meet Cowork") |
+| H2 Section | Anthropic Serif | 30px | 400 | 36px (1.2) | Section headings ("Explore plans", "FAQ") |
+| H3 Card Title | Anthropic Serif | 30px | 400 | 36px (1.2) | Pricing card titles |
+| Subtitle (H2) | Anthropic Sans | 20px | 400 | 28px (1.4) | Section subtitles |
+| Subtitle (H3) | Anthropic Serif | 18px | 400 | 28px (1.56) | Hero subtitle |
+| Body | Anthropic Sans | 16px | 400 | 24px (1.5) | Default body text |
+| Nav Link | Anthropic Sans | 15px | 400 | — | Navigation items |
+| Button Label | Anthropic Sans | 14px | 500 | — | CTA buttons |
+| Label / Small | Anthropic Sans | 14px | 430 | — | Menu items |
+| Caption / Footer Heading | Anthropic Sans | 12px | 400 | — | Footer category headers |
+
+### Buttons
+
+#### Primary (Filled)
+```
+background: rgb(20, 20, 19) via ::before pseudo-element
+color: #FFFFFF
+font: "Anthropic Sans", 14px, weight 500
+height: 36px (nav) / 44px (hero/card)
+padding: 8px 20px
+border-radius: 8px (nav) / 9.6px (hero/card)
+border: none
+hover: scale-y(1.015) scale-x(1.005)
+hover-overlay: radial-gradient(at bottom, rgba(255,255,255,0.2), transparent) via ::after
+transition: transform 150ms cubic-bezier(0.165, 0.85, 0.45, 1)
+min-width: 5rem
+```
+
+#### Secondary (Outline)
+```
+background: transparent
+color: rgb(20, 20, 19)
+font: "Anthropic Sans", 14px, weight 500
+height: 36px
+padding: 8px 20px
+border: 0.5px solid rgba(31, 30, 29, 0.3)
+border-radius: 8px
+```
+
+#### Auth Button (Google / SSO)
+```
+background: transparent
+color: rgb(20, 20, 19)
+font: "Anthropic Sans", 16px, weight 500
+height: 44px
+padding: 0 20px
+border: 0.5px solid rgba(31, 30, 29, 0.3)
+border-radius: 9.6px
+```
+
+#### Ghost / Nav Link Button
+```
+background: transparent
+color: rgb(61, 61, 58)
+font: "Anthropic Sans", 15px, weight 400
+padding: 0
+border: none
+```
+
+### Input Fields
+```
+background: rgb(255, 255, 255)
+color: rgb(20, 20, 19)
+font: "Anthropic Sans", 16px
+height: 44px
+padding: 0 12px
+border: 1px solid rgba(31, 30, 29, 0.15)
+border-radius: 9.6px
+placeholder-color: (inherits muted text)
+```
+
+### Spacing
+| Token | Value | Usage |
+|---|---|---|
+| Nav Height | 84px | Fixed top navigation |
+| Section Padding (vertical) | 24px | Hero section top/bottom padding |
+| Section Horizontal Padding | 32px | Outer content padding |
+| Card Padding | 32px | Pricing card internal padding |
+| Card Border Radius | 24px | Pricing cards |
+| Dropdown Padding | 12px 8px | Nav dropdown menu |
+| Dropdown Border Radius | 12px | Nav dropdown menu |
+| Button Border Radius (sm) | 8px | Nav buttons |
+| Button Border Radius (lg) | 9.6px | Hero/card buttons |
+| Footer Padding (vertical) | ~89px | Footer top/bottom |
+
+---
+
+## Section Boilerplates
+
+### Navigation
+
+**Structure:**
+```
+<nav> (fixed, height: 84px, bg: #FAF9F5)
+├── Logo (link, left-aligned, Anthropic asterisk + "Claude" wordmark)
+├── Center Menu
+│   ├── Button "Meet Claude" (dropdown trigger, chevron icon)
+│   ├── Button "Platform" (dropdown trigger, chevron icon)
+│   ├── Button "Solutions" (dropdown trigger, chevron icon)
+│   ├── Button "Pricing" (dropdown trigger, chevron icon)
+│   └── Button "Resources" (dropdown trigger, chevron icon)
+└── Right Actions
+    ├── Button "Contact sales" (secondary/outline, links to /contact-sales)
+    └── Button "Try Claude" (primary/filled, near-black bg)
+```
+
+**Dropdown Interactions:**
+- Trigger: hover on nav button
+- Button gets `[expanded]` state
+- Dropdown appears as `<menu>` role element positioned below nav
+- Dropdown style: bg white, border-radius 12px, padding 12px 8px, shadow rgba(0,0,0,0.08) 0px 2px 8px
+- Transition: appears on hover, disappears on mouse leave
+
+**Dropdown: "Meet Claude"** (3-column, ~669px wide)
+```
+<menu>
+├── Column: "Products" (section header, 12px, muted)
+│   ├── menuitem "Claude"
+│   ├── menuitem "Claude Code"
+│   └── menuitem "Cowork"
+├── Column: "Features"
+│   ├── menuitem "Claude for Chrome"
+│   ├── menuitem "Claude for Excel"
+│   ├── menuitem "Claude for Powerpoint"
+│   ├── menuitem "Claude for Slack"
+│   └── menuitem "Skills"
+└── Column: "Models"
+    ├── menuitem "Opus" (with external arrow icon)
+    ├── menuitem "Sonnet" (with external arrow icon)
+    └── menuitem "Haiku" (with external arrow icon)
+```
+- Section headers: 12px, weight 400, color rgb(115, 114, 108)
+- Menu items: 14px, weight 430, color rgb(20, 20, 19), padding 8px 24px, border-radius 8px
+- External links show arrow icon
+
+**Dropdown: "Platform"** (single column, narrower)
+```
+<menu>
+├── Group
+│   ├── menuitem "Overview"
+│   ├── menuitem "Developer docs" (external icon)
+│   └── menuitem "Pricing"
+├── <separator> (horizontal rule)
+└── Group
+    └── menuitem "Console login" (external icon)
+```
+
+**Dropdown: "Solutions"** (2-section)
+```
+<menu>
+├── Section: "Use cases"
+│   ├── menuitem "AI agents"
+│   ├── menuitem "Claude Code Security"
+│   └── menuitem "Coding"
+└── Section: "Industries" (2-column grid)
+    ├── menuitem "Customer support"
+    ├── menuitem "Education"
+    ├── menuitem "Financial services"
+    ├── menuitem "Government"
+    ├── menuitem "Healthcare"
+    ├── menuitem "Life sciences"
+    └── menuitem "Nonprofits"
+```
+
+**Dropdown: "Pricing"** (single column)
+```
+<menu>
+├── Group
+│   ├── menuitem "Overview"
+│   └── menuitem "API"
+├── <separator>
+└── Group: "Plans" (label)
+    ├── menuitem "Max plan"
+    ├── menuitem "Team plan"
+    └── menuitem "Enterprise plan"
+```
+
+**Dropdown: "Resources"** (4-section)
+```
+<menu>
+├── Section: "Insights"
+│   ├── menuitem "Blog"
+│   ├── menuitem "Customer stories"
+│   └── menuitem "Anthropic news" (external icon)
+├── Section: "Learn"
+│   ├── menuitem "Anthropic Academy" (external icon)
+│   ├── menuitem "Courses" (external icon)
+│   ├── menuitem "Tutorials"
+│   └── menuitem "Use cases"
+├── Section: "Tools"
+│   ├── menuitem "Connectors"
+│   └── menuitem "Plugins"
+└── Section: "Connect"
+    ├── menuitem "Community"
+    └── menuitem "Events" (external icon)
+```
+
+---
+
+### Hero
+
+**Structure:**
+```
+<main>
+└── <div> (padding: 24px 0)
+    ├── <h2> "Think fast, build faster"
+    │   Font: Anthropic Serif, 56px, weight 330, line-height 67.2px
+    │   Color: #141413
+    │   Text is on two lines (line break between "fast," and "build")
+    │
+    ├── <h3> "Brainstorm in Claude, build in Cowork"
+    │   Font: Anthropic Serif, 18px, weight 400, line-height 28px
+    │   Color: #141413
+    │
+    ├── Auth Form (white card area, centered)
+    │   ├── Button "Continue with Google" (outline, Google logo left, 44px tall)
+    │   ├── "or" divider text
+    │   ├── Input[email] "Enter your email" (44px tall, rounded 9.6px)
+    │   ├── Button "Continue with email" (primary filled, 44px tall)
+    │   └── Button "Continue with SSO" (text link style)
+    │   └── Legal text: "By continuing, you acknowledge..." with Privacy Policy link
+    │
+    └── Button "Download desktop app" (ghost, with download icon, below auth form)
+```
+
+**Right Side Panel (Chat/Cowork toggle demo):**
+```
+├── RadioGroup toggle (pill switcher)
+│   ├── Radio "Chat"
+│   └── Radio "Cowork" (selected/checked)
+│
+└── Interactive Demo Panel (shows Cowork UI mockup)
+    ├── File browser panel (left)
+    │   ├── Search bar with icon
+    │   └── File list: Analysis, Meeting Transcripts, Quarterly Reports, Expenses
+    │   └── Actions: Cancel | Open
+    ├── Progress panel (center)
+    │   └── Task checklist:
+    │       Read meeting transcripts, Pull out key points, Find action items,
+    │       Check Google Calendar, Build standup deck, Write summary
+    └── Context panel (right)
+        └── Source list: Meeting Transcripts, SKILL.md, Claude in Chrome, Notion, Linear
+```
+
+---
+
+### Features (Meet Cowork)
+
+**Structure:**
+```
+<section> (padding: 0 32px)
+├── <h1> "Meet Cowork"
+│   Font: Anthropic Serif, 36px, weight 400, line-height 40px
+│   Text-align: center
+│
+├── <h2> "Let Claude power through tasks so you can focus on what matters most"
+│   Font: Anthropic Sans, 20px, weight 400, line-height 28px
+│   Color: rgb(115, 114, 108) — muted subtitle
+│   Text-align: center
+│
+└── Video Embed (clickable)
+    ├── Warm brown/clay background container
+    ├── Text overlay: "Now available as [play button] search preview"
+    └── Play button (centered, triggers video modal)
+```
+
+---
+
+### Pricing
+
+**Structure:**
+```
+<section>
+├── <h2> "Explore plans"
+│   Font: Anthropic Serif, 30px, weight 400, line-height 36px
+│   Text-align: center
+│
+├── Toggle (RadioGroup, pill-style switcher)
+│   ├── Radio "Individual" (selected by default)
+│   └── Radio "Team and Enterprise"
+│
+└── Card Grid (3 columns, horizontal scroll on mobile)
+    ├── Card: Free
+    ├── Card: Pro (highlighted with clay accent)
+    └── Card: Max (blue accent border + shadow)
+```
+
+**Pricing Card Template:**
+```
+<div> (bg: #FFF, border-radius: 24px, padding: 32px, border: 0.5px solid rgba(31,30,29,0.15))
+├── Icon (product illustration, top)
+├── <h3> Plan Name (Anthropic Serif, 30px, weight 400)
+├── <p> Tagline (e.g., "Try Claude" / "For everyday productivity" / "5-20x more usage than Pro")
+├── Price block
+│   ├── Price value (large, e.g., "$0" / "$17" / "From $100")
+│   └── Price subtitle (small text, billing details)
+├── Button "Try Claude" (primary filled, 44px tall, full-width, border-radius 9.6px)
+├── Optional: "Everything in [tier], plus:" label
+└── Feature list (<ul>)
+    └── <li> (each with checkmark icon + text)
+        Icon: small check/tick SVG, left-aligned
+        Text: Anthropic Sans, 16px
+```
+
+**Max Card Variant:**
+- Border: `0.5px solid rgba(27, 103, 178, 0.2)` (blue tint)
+- Box-shadow: `rgba(27, 103, 178, 0.1) 0px 4px 24px` (blue glow)
+
+**Footer note:**
+```
+<p> "Prices shown do not include applicable tax. *"
+    <a> "Usage limits apply." (link)
+```
+
+---
+
+### FAQ
+
+**Structure:**
+```
+<section> (text-align: center for heading)
+├── <h2> "Frequently asked questions"
+│   Font: Anthropic Serif, 30px, weight 400, line-height 36px
+│   Centered
+│
+└── Accordion List
+    ├── Accordion Item
+    │   └── <h3>
+    │       └── <button> "What is Claude and how does it work?"
+    │           Font: Anthropic Sans, 16px, weight 400
+    │           Icon: collapse/expand chevron (right-aligned, minus "−" when open)
+    │           Padding: (minimal, flush)
+    │           No visible border between items (clean minimal look)
+    ├── Accordion Item
+    │   └── <button> "What should I use Claude for?"
+    └── Accordion Item
+        └── <button> "How much does it cost to use?"
+```
+
+**Interaction:**
+- Click to expand/collapse
+- Chevron rotates or switches between +/− icon
+- Content slides open below the question
+- Only one item open at a time (accordion behavior)
+
+---
+
+### Footer
+
+**Structure:**
+```
+<footer> (bg: #000000, padding: ~89px 0, text color: white)
+├── Top Row
+│   ├── Left: Anthropic asterisk logo (large, white)
+│   └── Bottom-left:
+│       ├── Anthropic wordmark + "© 2026 ANTHROPIC PBC"
+│       └── Social Icons Row
+│           ├── X/Twitter
+│           ├── LinkedIn
+│           ├── YouTube
+│           └── Instagram
+│
+└── Link Grid (4 rows × multi-column)
+    Row 1:
+    ├── "Products" — Claude, Claude Code, Claude Code for Enterprise, Cowork, Max plan, Team plan, Enterprise plan, Download app, Pricing, Log in
+    ├── "Features" — Claude for Chrome, Claude for Excel, Claude for Powerpoint, Claude for Slack, Skills
+    └── "Models" — Opus, Sonnet, Haiku
+
+    Row 2:
+    ├── "Solutions" — AI agents, Claude Code Security, Code modernization, Coding, Customer support, Education, Financial services, Government, Healthcare, Life sciences, Nonprofits
+    └── "Claude Platform" — Overview, Developer docs, Pricing, Marketplace, Amazon Bedrock, Google Cloud's Vertex AI, Microsoft Foundry, Regional compliance, Console login
+
+    Row 3:
+    ├── "Resources" — Blog, Claude partner network, Connectors, Courses, Customer stories, Engineering at Anthropic, Events, Plugins, Powered by Claude, Service partners, Community, Campus Program, Startups program, Tutorials, Use cases
+    └── "Company" — Anthropic, Careers, Economic Futures, Research, Anthropic news, Responsible Scaling Policy, Security and compliance, Transparency
+
+    Row 4:
+    ├── "Help and security" — Availability, Status, Support center
+    └── "Terms and policies" — Privacy choices, Privacy policy, Responsible disclosure policy, Terms of service: Commercial, Terms of service: Consumer, Usage policy
+```
+
+**Footer Typography:**
+- Category headings: Anthropic Sans, 12px, weight 400, color rgb(194, 192, 182)
+- Links: ~13-14px, white/light color, no underline
+- Copyright: muted text below logo
+
+---
+
+### Downloads (CTA)
+
+**Structure:**
+```
+<div> (below auth form in hero)
+└── <button> "Download desktop app"
+    Style: ghost/text button with download icon (left)
+    Font: Anthropic Sans
+    No fill, no border
+    Icon: platform-specific download icon (macOS detected)
+```
+
+---
+
+### CTA (Auth / Sign-up)
+
+**Structure:**
+```
+<div> (centered card, within hero)
+├── <button> "Continue with Google"
+│   Style: outline, 44px, Google logo icon left
+│   Border-radius: 9.6px
+│
+├── <p> "or" (divider text, centered)
+│
+├── <input type="email"> "Enter your email"
+│   Height: 44px, border-radius: 9.6px
+│   Border: 1px solid rgba(31,30,29,0.15)
+│   Bg: white
+│
+├── <button> "Continue with email"
+│   Style: primary filled (near-black), 44px, border-radius: 9.6px
+│
+├── <button> "Continue with SSO"
+│   Style: text/ghost link
+│
+└── <p> Legal disclaimer
+    "By continuing, you acknowledge Anthropic's Privacy Policy
+     and agree to get occasional product update and promotional emails."
+```
+
+---
+
+## Additional Section Boilerplates (from Subpages)
+
+> Sources: /product/overview, /customers, /blog, /product/cowork, /contact-sales
+> Scraped: 2026-03-22
+
+---
+
+### Hero (Product Page Variant)
+
+> Source: /product/overview, /product/cowork
+
+**Structure:**
+```
+<section> (bg: #FAF9F5 ivory)
+├── Section heading area
+│   ├── <h1> "Meet your thinking partner" / "Go from answers to action with Claude Cowork"
+│   │   Font: Anthropic Serif, 57.575px, weight 500, line-height 63.33px
+│   │   Color: rgb(20, 20, 19)
+│   │   Words individually wrapped in <span> for staggered reveal animation
+│   │
+│   ├── <p> Subtitle description
+│   │   Font: Anthropic Sans, 19.77px, weight 400, line-height 31.63px
+│   │   Color: rgb(94, 93, 89) — tertiary text
+│   │
+│   └── CTA Button Group (flex row, gap 12px)
+│       ├── Primary Button (solid dark)
+│       │   bg: rgb(20, 20, 19), color: #FAF9F5, border-radius: 8.5px
+│       │   padding: 8px 16px, font: 17px weight 500
+│       │   Box-shadow: inset ring 1px rgb(48, 48, 46)
+│       └── Secondary Button (ghost with arrow icon)
+│           bg: transparent, color: rgb(61, 61, 58)
+│           border-radius: 8.5px, same sizing
+│
+├── Video Embed / Hero Visual (optional)
+│   ├── Thumbnail image with play button overlay
+│   │   Play button: centered, border-radius 16px
+│   └── YouTube iframe (hidden until play triggered)
+│
+└── Illustration / Graphic (positioned right on desktop)
+    ├── Anthropic brand illustration (line art style)
+    └── Clay-colored accent dot (rgb(201, 100, 66))
+```
+
+**Product Page H1 vs Login Page:**
+- Product pages use 57.575px / weight 500 (bolder, larger)
+- Login page uses 56px / weight 330 (lighter, more delicate)
+- Both use Anthropic Serif
+
+---
+
+### Features (Deep / Tabbed)
+
+> Source: /product/overview, /product/cowork
+
+**Structure:**
+```
+<section> (bg: alternates between #FFFFFF white and #F0EEE6 warm gray)
+├── Section Header
+│   ├── Lottie animation icon (decorative, centered)
+│   ├── <h2> "The AI for problem solvers" / "How you can use Claude" / "Power through tedious tasks"
+│   │   Font: Anthropic Serif, 47.87px, weight 500, line-height 57.44px
+│   │   Color: rgb(20, 20, 19)
+│
+├── Feature Cards Grid (3-column, gap 32px)
+│   Layout: CSS Grid, gridTemplateColumns: repeat(3, 1fr), gap: 61.25px 32px
+│   Container: max-width 1440px, centered
+│
+│   └── Feature Card
+│       ├── Icon (product illustration, centered in card)
+│       │   Small decorative image
+│       ├── <h3> "Break down problems together"
+│       │   Font: Anthropic Serif, 18.31px, weight 500, line-height 21.97px
+│       │   Color: rgb(61, 61, 58) — secondary text
+│       └── <p> Description
+│           Font: Anthropic Sans, 15px, weight 400, line-height 24px
+│           Color: rgb(94, 93, 89) — tertiary text
+│
+└── Optional: Import/Switch CTA Banner
+    ├── Dark card (bg: rgb(20, 20, 19), border-radius: 8.5px)
+    ├── Text: "Switching to Claude from another AI provider?"
+    │   Color: rgb(250, 249, 245)
+    └── Link: "Start importing" (light text, arrow icon)
+```
+
+**Tabbed Feature Variant:**
+```
+<section> (bg: #FFFFFF)
+├── Section Header (same as above)
+│
+├── Tab Bar
+│   ├── Container (bg: rgb(245, 244, 237), border-radius: 16px, padding: 4px)
+│   │   Acts as "pill" wrapper
+│   └── Tab Items (6 tabs in a row: Tasks, Learn, Code, Research, Analyze, Create)
+│       ├── Active Tab
+│       │   bg: rgb(255, 255, 255), border-radius: 12px
+│       │   padding: 8px 16px
+│       │   border: 1px solid rgb(240, 238, 230)
+│       │   Icon (left) + Label text
+│       └── Inactive Tab
+│           bg: transparent
+│           Same padding, no border
+│
+└── Tab Panel Content
+    ├── Left: Demo/Artifact area
+    │   ├── Dark code panel (bg: rgb(20, 20, 19), border-radius: 12px)
+    │   │   ├── Top bar (bg: rgb(48, 48, 46), border-radius: 12px 12px 0 0)
+    │   │   │   padding: 6px 6px 6px 12px
+    │   │   └── Content area (code/prompt display)
+    │   │       padding: 16px, font: 15px
+    │   └── Light result panel (bg: #FFFFFF, border-radius: 12px)
+    │       border: 1px solid rgb(240, 238, 230)
+    │       padding: 8px
+    │
+    └── Right: Description
+        ├── <h3> "Delegate tasks"
+        │   Font: Anthropic Serif, 23.85px, weight 500, line-height 28.62px
+        │   Color: rgb(20, 20, 19)
+        ├── <p> Description text (quoted in UI)
+        │   Font: Anthropic Sans, 17px, weight 400, line-height 27.2px
+        │   Color: rgb(94, 93, 89)
+        └── Link: "Explore Cowork" (text link with arrow)
+            Font: 12px, color: rgb(77, 76, 72)
+            border-radius: 6px
+```
+
+---
+
+### How It Works (Step-by-Step)
+
+> Source: /product/cowork
+
+**Structure:**
+```
+<section> (bg: rgb(250, 249, 245) ivory)
+├── Section Header
+│   ├── Lottie animation icon (decorative, centered)
+│   └── <h2> "How it works"
+│       Font: Anthropic Serif, 47.87px, weight 500, line-height 57.44px
+│       Color: rgb(20, 20, 19)
+│
+└── Steps Container (vertical layout, each step is a row)
+    ├── Step 1
+    │   ├── Text Column
+    │   │   ├── <h3> "Share what you want to achieve"
+    │   │   │   Font: Anthropic Serif, 23.85px, weight 500, line-height 28.62px
+    │   │   │   Color: rgb(20, 20, 19)
+    │   │   ├── <p> Description paragraph
+    │   │   │   Font: Anthropic Sans, 17px, weight 400, line-height 27.2px
+    │   │   │   Color: rgb(94, 93, 89)
+    │   │   └── <ul> Bullet list (optional)
+    │   │       ├── <li> <strong>"Desktop files:"</strong> description
+    │   │       ├── <li> <strong>"Connectors:"</strong> description
+    │   │       └── <li> <strong>"Claude in Chrome:"</strong> description
+    │   └── Visual Column
+    │       └── Screenshot / product UI image
+    │           Contained in rounded container
+    │
+    ├── Step 2 (layout mirrors/alternates)
+    │   ├── Text: <h3> "Claude figures it out and executes"
+    │   └── Visual: product screenshot
+    │
+    └── Step 3
+        ├── Text: <h3> "You're in control, from approving to reviewing"
+        └── Visual: product screenshot
+```
+
+**Step Layout Pattern:**
+- Each step is a 2-column layout (text + visual)
+- Steps alternate visual position (left/right) or stack vertically
+- Subtitle paragraph uses the standard `22.31px / line-height 33.47px` intro style for the first line, then `17px / 27.2px` for body text
+- Step headings are consistently Anthropic Serif at 23.85px / weight 500
+
+---
+
+### Social Proof / Testimonials
+
+> Source: /product/cowork
+
+**Structure:**
+```
+<ul> (horizontal scrolling carousel, direct child of <main>)
+├── <li> Testimonial Card
+│   └── <div> Card Container
+│       ├── Logo Area (top)
+│       │   ├── Company logo image
+│       │   │   Alt: "Zapier (Cowork)" / "Thomson Reuters (Cowork)" / "Jamf (Cowork)"
+│       │   └── Contained in padded header region
+│       │
+│       └── Quote Area (bottom)
+│           ├── <p> Quote text (in curly quotes)
+│           │   Font: Anthropic Sans, ~17px, weight 400
+│           │   Color: rgb(20, 20, 19)
+│           │   Long-form text, multi-sentence
+│           │
+│           ├── <div> Author Name + Title
+│           │   Format: "Name, Title"
+│           │   Font: Anthropic Sans, ~12-15px
+│           │   Color: rgb(94, 93, 89) — tertiary
+│           │
+│           └── Optional: "Read story" link
+│               Text link with arrow, border-radius 6px
+│
+├── <li> Testimonial Card (repeat)
+└── <li> Testimonial Card (repeat)
+```
+
+**Testimonial Card Styling Notes:**
+- Cards scroll horizontally (carousel pattern)
+- Each card is a self-contained unit with company logo + quote + attribution
+- No background color on the cards themselves (transparent on ivory page)
+- Clean, minimal — no quotation mark decorations or special borders
+- Some cards include a CTA link ("Read story") to the full customer story
+
+---
+
+### Customer Stories / Showcase Grid
+
+> Source: /customers
+
+**Structure:**
+```
+<section> (bg: #FAF9F5 ivory)
+├── Hero Header
+│   ├── <p> styled as H1: "Meet the teams building what's next"
+│   │   Font: Anthropic Serif (actually rendered as <p>), 57.575px, weight 500
+│   │   line-height: 63.33px
+│   │   Color: rgb(20, 20, 19)
+│   │
+│   ├── <p> Subtitle
+│   │   Font: Anthropic Sans, 22.31px, weight 400, line-height 33.47px
+│   │   Color: rgb(94, 93, 89)
+│   │
+│   ├── CTA Button: "Contact sales"
+│   │   Primary dark style (rgb(20, 20, 19)), border-radius: 8.5px
+│   │
+│   └── Marginalia Sidebar (right side, 216px wide)
+│       ├── Swiper/carousel of customer profile cards
+│       │   Small cards with headshot images + brief descriptions
+│       └── Navigation dots + prev/next arrows
+│           Arrow buttons: bg: rgb(250, 249, 245), circular
+
+├── Filter/Search Bar
+│   ├── Sticky navigation bar (bg: #FFFFFF, border: 1px solid rgb(240, 238, 230))
+│   │   Acts as filter controls bar
+│   ├── Search Input
+│   │   placeholder: "Search stories"
+│   │   Font: 15px, bg: transparent, no border
+│   │   height: 32px
+│   ├── Filter Dropdowns (Industry, Use case, etc.)
+│   │   Dropdown toggle: height 36px, padding: 0 8px 0 12px
+│   │   Dropdown menu: border-radius 12px
+│   └── Layout toggle (grid/list view icons)
+
+└── Customer Stories CMS Grid
+    ├── Grid Layout
+    │   display: grid
+    │   gridTemplateColumns: repeat(2, 1fr) (~381px per column)
+    │   gap: 46.16px (row) 32px (column)
+    │   15 items per page
+    │
+    └── Story Card (per item)
+        ├── Company Logo (large, centered)
+        │   <img> class="logo_light is-customer-story-grid"
+        │   Container: ~227px wide, max-height 25%
+        │   Light and dark logo variants
+        │
+        ├── Card Title
+        │   <div> "How Pressmaster turns a 10-minute conversation..."
+        │   Font: Anthropic Sans, 17px, weight 400, line-height 27.2px
+        │   Color: rgb(20, 20, 19)
+        │
+        └── Tag/Category icon (small, with category label)
+            Icon SVG + label text
+            Color: rgb(94, 93, 89) — tertiary
+
+    Pagination:
+    └── "View more" button
+        bg: rgb(232, 230, 220), color: rgb(77, 76, 72)
+        border-radius: 8.5px, padding: 8px 16px
+        height: 40px, font: 17px
+```
+
+---
+
+### Blog Section
+
+> Source: /blog
+
+**Structure:**
+```
+<section class="hero_blog_wrap"> (bg: transparent on #FAF9F5)
+├── Header Area
+│   ├── <h1> "Blog"
+│   │   Font: Anthropic Sans, 19.77px, weight 600, line-height 31.63px
+│   │   Color: rgb(20, 20, 19)
+│   │   (Note: small/label-style H1, not display size)
+│   │
+│   ├── Category Tag Cloud (animated, large text)
+│   │   Category names as <h2> elements displayed in a stacked/animated list:
+│   │   "Agents", "Claude Code", "Enterprise AI", "Product announcements"
+│   │   Font: Anthropic Serif, 47.87px, weight 500, line-height 57.44px
+│   │   Color: rgb(20, 20, 19)
+│   │   Arrow icon (↗) after each, indicating clickable filter
+│   │
+│   └── Featured Posts Row (horizontal, 3 cards across top)
+│       Grid: 12-column grid layout, gap 32px
+│       Featured cards showing hero blog posts
+
+├── Blog Post Grid
+│   ├── Grid Layout
+│   │   display: grid
+│   │   gridTemplateColumns: repeat(2, 1fr) (~381px per column)
+│   │   gap: 31.08px (row) 32px (column)
+│   │   15 items per page
+│   │
+│   └── Blog Card
+│       ├── Outer Wrapper
+│       │   bg: rgb(240, 238, 230) — warm gray
+│       │   border-radius: 22.16px
+│       │   No explicit border
+│       │
+│       ├── Visual Area (top)
+│       │   ├── Background color block (varies per card)
+│       │   │   Colors seen: rgb(188, 209, 202) sage green,
+│       │   │   rgb(203, 202, 219) lavender, rgb(235, 206, 206) blush,
+│       │   │   rgb(196, 102, 134) mauve, rgb(106, 155, 204) blue,
+│       │   │   rgb(120, 140, 93) olive, rgb(217, 119, 87) clay/terracotta
+│       │   │   border-radius: 12px 12px 0 0 (top corners only)
+│       │   │   aspect-ratio: 3 / 2
+│       │   │
+│       │   └── Illustration image
+│       │       aspect-ratio: 1 / 1 (centered within 3:2 container)
+│       │       Object-fit: contain
+│       │
+│       └── Content Area (bottom)
+│           padding: 31.08px all sides
+│           ├── <div> Date: "Mar 19, 2026"
+│           │   Font: 12px (caption style)
+│           │   Color: rgb(94, 93, 89) — tertiary
+│           │   margin-bottom: ~1.5rem
+│           │
+│           ├── <div> Title: "Product management on the AI exponential"
+│           │   Font: Anthropic Serif, 18.31px, weight 500
+│           │   Color: rgb(20, 20, 19)
+│           │
+│           └── <div> Category tag with icon
+│               Color: rgb(94, 93, 89)
+│               SVG icon + category text
+
+└── Pagination
+    display: flex
+    margin-top: ~4rem
+    "View more" button same as customers page
+```
+
+**Blog Card Color Palette (illustration backgrounds):**
+| Color | RGB | Hex | Usage |
+|---|---|---|---|
+| Sage green | `rgb(188, 209, 202)` | `#BCD1CA` | Subtle, nature-toned cards |
+| Lavender | `rgb(203, 202, 219)` | `#CBCADB` | Soft purple-tinted cards |
+| Blush | `rgb(235, 206, 206)` | `#EBCECE` | Warm pink cards |
+| Clay/Terracotta | `rgb(217, 119, 87)` | `#D97757` | Brand-adjacent warm accent |
+| Mauve | `rgb(196, 102, 134)` | `#C46686` | Deep pink accent |
+| Blue | `rgb(106, 155, 204)` | `#6A9BCC` | Cool accent |
+| Olive | `rgb(120, 140, 93)` | `#788C5D` | Earthy green |
+| Light warm gray | `rgb(240, 238, 230)` | `#F0EEE6` | Default card wrapper bg |
+
+---
+
+### Newsletter (Email Signup)
+
+> Source: /blog (in footer CTA section)
+
+**Structure:**
+```
+<div> (inside dark CTA section, right column)
+├── <p> "Get the blog newsletter"
+│   Font: Anthropic Sans, ~15px, weight 500
+│   Color: rgb(250, 249, 245) — light on dark
+│
+├── <p> Privacy disclaimer
+│   Font: 12px
+│   Color: rgb(156, 154, 146) — muted gray on dark
+│
+├── <form class="form_newsletter_list">
+│   ├── <input type="email">
+│   │   placeholder: "Enter your email"
+│   │   Font: 15px
+│   │   Color: rgb(250, 249, 245)
+│   │   bg: transparent (on dark background)
+│   │   border: none
+│   │   height: ~27px
+│   │   padding: 1.6px 12px
+│   │
+│   └── Submit button (arrow icon)
+│       Circular, minimal
+│
+└── Located within the dark CTA banner (rgb(20, 20, 19))
+```
+
+**Newsletter Integration Notes:**
+- Minimal inline form — just email input + submit arrow
+- No separate card/container; embedded in the dark CTA section
+- Light text on dark background inverts the normal color scheme
+
+---
+
+### CTA Banner (Dark)
+
+> Source: /customers, /blog, /contact-sales (bottom of all subpages)
+
+**Structure:**
+```
+<section> (bg: rgb(20, 20, 19) — near-black)
+├── Section container (max-width: 1440px, centered)
+│
+├── Left Column
+│   ├── <h2> "Transform how your organization operates with Claude"
+│   │   Font: Anthropic Serif, 57.575px (customers/contact) or 40.79px (blog), weight 500
+│   │   line-height: ~1.2
+│   │   Color: rgb(250, 249, 245) — ivory on dark
+│   │
+│   └── CTA Buttons (flex row)
+│       ├── Primary Button (inverted: light bg on dark)
+│       │   bg: rgb(250, 249, 245), color: rgb(20, 20, 19)
+│       │   border-radius: 8.5px, padding: 8px 16px
+│       │   text: "Get started" / "Contact sales"
+│       │   Font: 17px, weight 500
+│       └── Secondary Button (outline on dark)
+│           bg: transparent, color: rgb(250, 249, 245)
+│           Same sizing
+│
+└── Right Column (optional, varies by page)
+    ├── Newsletter signup form (on /blog)
+    └── Empty / decorative (on /customers)
+```
+
+**Dark CTA Button Variants:**
+| Variant | Background | Text Color | Border |
+|---|---|---|---|
+| Primary (on dark) | `rgb(250, 249, 245)` ivory | `rgb(20, 20, 19)` dark | none |
+| Secondary (on dark) | transparent | `rgb(250, 249, 245)` ivory | `1px solid rgb(250, 249, 245)` |
+| "View more" (neutral) | `rgb(232, 230, 220)` | `rgb(77, 76, 72)` | none |
+
+---
+
+### Contact Form
+
+> Source: /contact-sales
+
+**Structure:**
+```
+<section> (bg: rgb(250, 249, 245) ivory)
+├── Section container (max-width: 1440px)
+│
+├── Header
+│   ├── <h1> "Contact sales"
+│   │   Font: Anthropic Serif, 57.575px, weight 500
+│   │   Color: rgb(20, 20, 19)
+│   │
+│   └── <p> "Our sales team can provide additional resources and support
+│        for the Claude API and Claude for Work."
+│       Font: Anthropic Sans, 22.31px, weight 400
+│       Color: rgb(94, 93, 89)
+│
+├── Marginalia Sidebar (left, 216px wide)
+│   ├── Header: "More help, right this way"
+│   │   Font: 12px, weight 600 (semibold)
+│   │   Color: rgb(20, 20, 19)
+│   ├── Description: "Browse articles, see product details..."
+│   │   Font: 12px, Color: rgb(94, 93, 89)
+│   └── Link: "Visit support center"
+│       Font: 12px, color: rgb(77, 76, 72)
+│       Styled as small button/chip
+│
+└── HubSpot Form Container
+    ├── Form Wrapper
+    │   bg: rgb(245, 244, 237) — surface muted
+    │   border-radius: 22.16px (x-large)
+    │   border: 1px solid rgb(232, 230, 220)
+    │   padding: 46.16px all sides
+    │   width: ~519px
+    │
+    ├── Form Fields
+    │   ├── <label>
+    │   │   Font: 15px, weight 500
+    │   │   Color: rgb(20, 20, 19)
+    │   │   display: block
+    │   │
+    │   ├── <input> / <select> / <textarea>
+    │   │   bg: rgb(250, 249, 245) — page background color
+    │   │   border-radius: 16px (large)
+    │   │   border: 1px solid rgb(232, 230, 220)
+    │   │   font: 15px, line-height 1.2
+    │   │   min-height: 56px (3.5rem)
+    │   │   padding: 16px 24px
+    │   │   Focus state: border-color transitions to rgb(194, 192, 182)
+    │   │
+    │   └── <textarea>
+    │       min-height: 120px
+    │       resize: vertical
+    │
+    └── Submit Button
+        bg: rgb(20, 20, 19), color: rgb(250, 249, 245)
+        border-radius: 7.5px
+        border: 1px solid rgb(48, 48, 46)
+        padding: 8px 24px
+        font: 15px, weight 400
+        height: 37px
+        cursor: pointer
+```
+
+**Contact Form Design Tokens (from embedded CSS):**
+```css
+/* Form container */
+--radius--x-large:         22.16px
+--border-width--main:      1px
+--border-color:            var(--_theme---border-tertiary)
+
+/* Input fields */
+--radius--large:           16px
+--input-min-height:        3.5rem (56px)
+--input-padding:           1rem 1.5rem (16px 24px)
+--input-font-size:         0.9375rem (15px)
+
+/* Labels */
+--label-font-weight:       var(--_typography---font--primary-medium) (500)
+--label-font-size:         0.9375rem (15px)
+
+/* Submit button */
+--submit-radius:           7.5px
+--submit-padding:          8px 24px
+```
+
+---
+
+### Pricing Cards (Expanded)
+
+> Source: /product/cowork
+
+**Structure:**
+```
+<section> (bg: rgb(250, 249, 245) ivory)
+├── Section Header
+│   ├── Lottie icon (decorative)
+│   └── <h2> "Get started with Claude"
+│       Font: Anthropic Serif, 47.87px, weight 500
+│
+├── Tab Switcher (same as Features tabbed component)
+│   ├── Tab: "Individual" (selected)
+│   └── Tab: "Team & Enterprise"
+│
+└── Pricing Card Grid (3 columns)
+    └── Pricing Card
+        ├── Card Container
+        │   bg: rgb(255, 255, 255) white
+        │   border-radius: 22.16px
+        │   border: 1px solid rgb(240, 238, 230)
+        │   padding: 31.08px all sides
+        │   Featured variant: border: 1px solid color(srgb 0.416 0.608 0.8 / 0.2) — blue accent
+        │
+        ├── Plan Icon (top, product illustration)
+        │
+        ├── <h3> Plan Name: "Pro" / "Max 5x" / "Max 20x"
+        │   Font: Anthropic Serif, 29.93px, weight 500
+        │   Color: rgb(20, 20, 19)
+        │
+        ├── <p> Description
+        │   Font: Anthropic Sans, ~17px
+        │   Color: rgb(94, 93, 89)
+        │
+        ├── Price Block
+        │   ├── Price: "$17" / "$100" / "$200"
+        │   │   Font: large display size
+        │   └── Billing note: "Per month" or detailed billing text
+        │       Font: small, muted
+        │
+        └── CTA Button: "Try Claude"
+            Links to claude.ai/login?plan=pro (etc.)
+            Standard primary dark button
+```
+
+---
+
+### FAQ Accordion (Expanded)
+
+> Source: /product/cowork
+
+**Structure:**
+```
+<section> (bg: rgb(255, 255, 255) white)
+├── Section Header
+│   ├── Lottie icon
+│   └── <h2> "FAQ"
+│       Font: Anthropic Serif, 47.87px, weight 500
+│
+├── Accordion List
+│   display: flex, flex-direction: column
+│   gap: 18.7px between items
+│
+│   └── Accordion Item <li>
+│       ├── <h3>
+│       │   └── <button> "What's the difference between Cowork and regular chat?"
+│       │       Font: Anthropic Sans (inherited), ~16-18px
+│       │       Full-width, text-align: left
+│       │       Expand/collapse chevron icon (right-aligned)
+│       │       Color: rgb(20, 20, 19)
+│       │
+│       └── Collapsible Content (hidden by default)
+│           <p> Answer text
+│           Font: Anthropic Sans, 17px, line-height 27.2px
+│           Color: rgb(94, 93, 89)
+│
+│   10 FAQ items on /product/cowork
+│
+└── Bottom CTA Card
+    ├── Claude logo/icon image
+    ├── Text: "Get started with Claude Cowork"
+    └── Button Group
+        ├── "Download Claude" (primary dark)
+        └── "Upgrade plan" (secondary)
+```
+
+---
+
+### Industry/Use Case Feature Grid
+
+> Source: /product/cowork ("Supports every industry")
+
+**Structure:**
+```
+<section> (bg: rgb(255, 255, 255) white)
+├── Section Header
+│   ├── Lottie icon
+│   └── <h2> "Supports every industry"
+│       Font: Anthropic Serif, 47.87px, weight 500
+│
+└── Use Case Cards (4 cards, 2x2 grid or stacked)
+    └── Use Case Card
+        ├── Category Badge (top)
+        │   ├── Icon (small SVG)
+        │   └── Category Label: "Administrative" / "Research and Analysis" /
+        │       "Sales and GTM" / "Legal and Compliance"
+        │       Font: small label style
+        │
+        ├── <h3> Title: "Create a daily briefing"
+        │   Font: Anthropic Serif, ~18-24px, weight 500
+        │   Color: rgb(20, 20, 19)
+        │
+        ├── <p> Description
+        │   Font: Anthropic Sans, 17px
+        │   Color: rgb(94, 93, 89)
+        │
+        └── "Learn more" link
+            Font: 12px, color: rgb(61, 61, 58)
+            Text link with arrow, border-radius: 6px
+            Links to /resources/use-cases/...
+```
+
+---
+
+### Model Comparison Cards
+
+> Source: /product/overview ("Claude models")
+
+**Structure:**
+```
+<section> (bg: implicit, on white/ivory page)
+├── Section Header
+│   ├── Lottie icon
+│   └── <h2> "Claude models"
+│       Font: Anthropic Serif, 47.87px, weight 500
+│
+└── Model Cards (3 cards, 2-column grid: 416px x 416px, gap 32px)
+    └── Model Card
+        ├── <h3> "Opus 4.6" / "Sonnet 4.6" / "Haiku 4.5"
+        │   Font: Anthropic Serif, weight 500
+        │   Color: rgb(20, 20, 19)
+        │
+        ├── <p> Tagline: "Most powerful model for your most ambitious projects"
+        │   Color: rgb(94, 93, 89)
+        │
+        ├── <p> Use cases: "Docs, slides, spreadsheets • Complex analysis • Deep research"
+        │   Color: rgb(94, 93, 89)
+        │
+        └── "Model details" link (external, arrow icon)
+            Font: 12px, color: rgb(61, 61, 58)
+            border-radius: 6px
+            Links to anthropic.com/claude/[model]
+```
+
+---
+
+### Video Embed Section
+
+> Source: /product/overview ("Keep thinking with Claude"), /product/cowork
+
+**Structure:**
+```
+<section> (bg: varies)
+├── Section Header
+│   ├── Lottie icon
+│   └── <h2> "Keep thinking with Claude"
+│       Font: Anthropic Serif, 47.87px, weight 500
+│
+├── Video Container
+│   ├── Thumbnail wrapper (cursor: pointer)
+│   │   ├── Background image (video thumbnail)
+│   │   └── Play Button overlay
+│   │       <button> "Play video"
+│   │       Centered, rounded (border-radius: 16px)
+│   │       Semi-transparent background
+│   │
+│   └── YouTube iframe (lazy-loaded on play click)
+│
+├── Caption Area
+│   ├── <p> "Your curiosity's collaborator"
+│   │   Prominent caption text
+│   └── <p> "There's never been a worse time to be a problem..."
+│       Smaller supporting text
+│
+└── Inline Prompt/CTA
+    ├── Text: "What problem are you up against?"
+    ├── Text input: "How can I help you today?"
+    │   Standard input field style
+    └── "Ask Claude" button (primary dark, small)
+```
+
+---
+
+### Footer Prompt Input
+
+> Source: All pages (global footer component)
+
+**Structure:**
+```
+<div> (inside footer, before link grid)
+├── Claude logo + "Homepage" link
+│
+├── Prompt Input Form
+│   ├── <input> "How can I help you today?"
+│   │   Standard text input with submit arrow button
+│   └── Submit icon button (circular, arrow)
+│
+└── Quick Action Chips (3 pills)
+    ├── "Write" (with icon)
+    ├── "Learn" (with icon)
+    └── "Code" (with icon)
+    Each: ghost button style, small, with left icon
+```
+
+---
+
+## Sections Not Present on claude.com
+
+| Section | Status | Notes |
+|---|---|---|
+| About | Not present | Company info lives on anthropic.com; no dedicated section on claude.com |
+| Comparison | Not present | No competitor comparison tables found on any subpage |
+| Stats / Metrics | Not present | No standalone statistics/numbers sections with large metric displays |
+| Store | Not present | No e-commerce or store section |
+| Logo Bar / Marquee | Not present | Customer logos appear within story cards but no scrolling logo bar |
+| Downloads (dedicated) | Minimal | Only ghost button "Download desktop app" in hero; no dedicated downloads page section |
+
+---
+
+## Additional Design Tokens (from Subpages)
+
+### Colors (newly observed)
+
+| Token | Value | Hex | Usage |
+|---|---|---|---|
+| Section Warm Gray | `rgb(240, 238, 230)` | `#F0EEE6` | Alternate section background, blog card wrapper |
+| Section White | `rgb(255, 255, 255)` | `#FFFFFF` | Alternate section background |
+| CTA Dark BG | `rgb(20, 20, 19)` | `#141413` | Dark CTA banner, dark cards, code panels |
+| CTA Dark Surface | `rgb(48, 48, 46)` | `#30302E` | Code panel header bar, dark card secondary |
+| CTA Light Text | `rgb(250, 249, 245)` | `#FAF9F5` | Text on dark backgrounds |
+| Border Tertiary | `rgb(232, 230, 220)` | `#E8E6DC` | Form borders, section dividers |
+| Border Secondary | `rgb(209, 207, 197)` | `#D1CFC5` | Card outline shadows |
+| Text Primary | `rgb(20, 20, 19)` | `#141413` | Headings, strong text |
+| Text Secondary | `rgb(61, 61, 58)` | `#3D3D3A` | Feature card headings |
+| Text Tertiary | `rgb(94, 93, 89)` | `#5E5D59` | Body text, descriptions |
+| Text Quaternary | `rgb(77, 76, 72)` | `#4D4C48` | Secondary button text |
+| Muted Caption | `rgb(176, 174, 165)` | `#B0AEA5` | Disabled/very muted text |
+| Newsletter Muted | `rgb(156, 154, 146)` | `#9C9A92` | Privacy disclaimer on dark |
+| Clay Accent | `rgb(201, 100, 66)` | `#C96442` | Brand dot/accent element |
+| Featured Card Border | `color(srgb 0.416 0.608 0.8 / 0.2)` | ~`rgba(106,155,204,0.2)` | Blue-tinted pricing card border |
+| Filter Neutral BG | `rgb(232, 230, 220)` | `#E8E6DC` | "View more" pagination button |
+
+### Typography (newly observed sizes)
+
+| Element | Font | Size | Weight | Line Height | Context |
+|---|---|---|---|---|---|
+| Product H1 | Anthropic Serif | 57.575px | 500 | 63.33px | Product page hero headlines |
+| Section H2 | Anthropic Serif | 47.87px | 500 | 57.44px | All subpage section headings |
+| Content H3 | Anthropic Serif | 23.85px | 500 | 28.62px | Feature/step titles |
+| Card H3 (small) | Anthropic Serif | 18.31px | 500 | 21.97px | Feature card titles, blog card titles |
+| Pricing H3 | Anthropic Serif | 29.93px | 500 | ~36px | Pricing plan names |
+| Intro Paragraph | Anthropic Sans | 22.31px | 400 | 33.47px | Section intro/subtitle text |
+| Body (subpage) | Anthropic Sans | 17px | 400 | 27.2px | Standard body text on subpages |
+| Body (overview) | Anthropic Sans | 15px | 400 | 24px | Smaller body on overview page |
+| Caption | Various | 12px | 400-600 | 19.2px | Dates, labels, sidebar text |
+| Blog H1 (label) | Anthropic Sans | 19.77px | 600 | 31.63px | Blog page title (small/label) |
+| CTA H2 (dark) | Anthropic Serif | 40.79-57.58px | 500 | ~1.2 | Dark CTA banner headlines |
+
+### Spacing & Layout Tokens (newly observed)
+
+| Token | Value | Usage |
+|---|---|---|
+| Container Max Width | 1440px | Global content container |
+| Container Margin | ~57px (auto) | Horizontal margin on container |
+| Section Spacer (page-top) | Large (~120px estimated) | Top of page content area |
+| Card Border Radius (large) | 22.16px | Blog cards, pricing cards, form containers |
+| Card Border Radius (medium) | 16px | Tab bar wrapper, form input radius |
+| Card Border Radius (small) | 12px | Tab content panels, dropdown menus, code panels |
+| Card Padding (large) | 46.16px | Form containers, feature card containers |
+| Card Padding (medium) | 31.08px | Pricing cards, blog card content |
+| Grid Gap (standard) | 32px | All grid layouts |
+| Grid Gap (row, large) | 61.25px | Feature grids with vertical space |
+| Grid Gap (row, medium) | 46.16px | Customer/blog story grids |
+| Grid Gap (row, small) | 31.08px | Blog card grid |
+| Tab Bar Padding | 4px | Outer pill container |
+| Tab Item Padding | 8px 16px | Individual tab buttons |
+| FAQ Item Gap | 18.7px | Between accordion items |
+| Button Padding (standard) | 8px 16px | Most CTA buttons on subpages |
+| Button Border Radius | 8.5px | Standard button border-radius on subpages |
+
+### Button Variants (subpage patterns)
+
+| Variant | Background | Text | Border | Radius | Padding | Font |
+|---|---|---|---|---|---|---|
+| Primary Dark | `rgb(20, 20, 19)` | `rgb(250, 249, 245)` | 1px solid `rgb(48, 48, 46)` | 8.5px | 8px 16px | 17px/500 |
+| Primary Light (on dark) | `rgb(250, 249, 245)` | `rgb(20, 20, 19)` | none | 8.5px | 8px 16px | 17px/500 |
+| Secondary Ghost | transparent | `rgb(61, 61, 58)` | none | 8.5px | 8px 16px | 17px/400 |
+| Pagination/Neutral | `rgb(232, 230, 220)` | `rgb(77, 76, 72)` | none | 8.5px | 8px 16px | 17px |
+| Tiny Link | transparent | `rgb(77, 76, 72)` | none | 6px | minimal | 12px |
+| Submit (form) | `rgb(20, 20, 19)` | `rgb(250, 249, 245)` | 1px solid `rgb(48, 48, 46)` | 7.5px | 8px 24px | 15px |
+
+---
+
+## Common Patterns
+
+### Section Header Pattern
+
+Most subpage sections follow this consistent header structure:
+
+```
+<div> Section header
+├── Lottie animation icon (decorative, centered, plays on scroll-into-view)
+│   Small animated illustration above heading
+│
+├── <h2> Section heading
+│   Font: Anthropic Serif, 47.87px, weight 500, line-height 57.44px
+│   Color: rgb(20, 20, 19)
+│   Text-align: center
+│
+└── Optional: <p> Supporting subtitle
+    Font: Anthropic Sans, 22.31px, weight 400, line-height 33.47px
+    Color: rgb(94, 93, 89)
+```
+
+### Card Pattern
+
+```
+Background:     rgb(255, 255, 255) white (or rgb(240, 238, 230) warm gray)
+Border radius:  22.16px
+Border:         1px solid rgb(240, 238, 230) or rgba(31, 30, 29, 0.15)
+Shadow:         none (differentiated by bg color or subtle border)
+Padding:        31.08px (standard) or 46.16px (large)
+Overflow:       hidden
+
+Internal structure:
+├── Icon / visual area (top)
+├── <h3> Title — Anthropic Serif, 18.31px, weight 500
+├── <p> Description — Anthropic Sans, 17px, weight 400, color rgb(94, 93, 89)
+└── Optional: link ("Learn more" / "Model details") — 12px, arrow icon, border-radius 6px
+```
+
+### Tab / Toggle Pattern
+
+```
+<div> Tab container
+├── Outer wrapper (bg: rgb(245, 244, 237), border-radius: 16px, padding: 4px)
+│   Acts as "pill track"
+│
+├── Active Tab
+│   bg: rgb(255, 255, 255) white, border-radius: 12px
+│   padding: 8px 16px, border: 1px solid rgb(240, 238, 230)
+│
+└── Inactive Tab
+    bg: transparent, same padding, no border
+    Color: rgb(94, 93, 89)
+```
+
+### Dual CTA Button Pattern
+
+Used in Hero, CTA Banner, and section CTAs:
+
+```
+Light sections:
+├── Primary: dark fill rgb(20, 20, 19), light text, border-radius 8.5px
+└── Secondary: transparent, dark text, optional arrow icon
+
+Dark sections (inverted):
+├── Primary: ivory fill rgb(250, 249, 245), dark text
+└── Secondary: transparent, ivory text
+```
+
+### Dark Section Inversion Pattern
+
+```
+bg:             rgb(20, 20, 19) — near-black
+Text:           rgb(250, 249, 245) — ivory
+Muted text:     rgb(156, 154, 146)
+Primary button: rgb(250, 249, 245) bg, rgb(20, 20, 19) text (inverted)
+Secondary btn:  transparent, ivory text
+Code surfaces:  rgb(48, 48, 46) bg
+```
+
+### Link with Arrow Pattern
+
+```
+<a> "Learn more" / "Model details" / "Read story"
+├── Text: 12px, color: rgb(61, 61, 58) or rgb(77, 76, 72)
+├── Arrow icon: ↗ (diagonal external) or → (internal)
+├── border-radius: 6px (hover highlight area)
+└── Used consistently in cards, feature panels, sidebars
+```
+
+### Marginalia Sidebar Pattern
+
+```
+<aside> (width: 216px, positioned alongside main content)
+├── Header (12px, weight 600, color: rgb(20, 20, 19))
+├── Description (12px, color: rgb(94, 93, 89))
+└── Small CTA link (12px, chip style)
+Pages: /customers, /contact-sales
+```
+
+---
+
+## Design Principles Observed
+
+1. **Warm minimalism** — Off-white (#FAF9F5) background with warm neutral tones throughout, never cold grays
+2. **Serif + Sans pairing** — Anthropic Serif for display/headlines, Anthropic Sans for everything functional
+3. **Near-black, not black** — Primary text is #141413, not pure black, for softer contrast
+4. **Subtle borders** — Hairline borders at 1px with muted warm grays (rgb(232,230,220) or rgb(240,238,230))
+5. **Generous radius** — Cards at 22.16px, buttons at 8.5px, tabs at 16px, form inputs at 16px
+6. **Micro-interactions** — Primary buttons use subtle scale transform on hover; Lottie animations before each section heading
+7. **Fixed nav** — Navigation stays at top with page background color, no border-bottom
+8. **Black footer** — High contrast footer against the warm page creates clear termination
+9. **Alternating section backgrounds** — Sections alternate between ivory (#FAF9F5) and white (#FFFFFF) to create visual rhythm
+10. **Consistent section header pattern** — Lottie icon + H2 (Anthropic Serif, 47.87px/500) appears before every major section
+11. **Marginalia pattern** — Narrow sidebars (216px) with small helper content appear on certain pages (customers, contact)
+12. **Dark CTA inversion** — Dark sections invert the entire color scheme: bg becomes near-black, text becomes ivory, buttons flip
+13. **Blog illustration palette** — Each blog card gets a unique muted color (sage, lavender, blush, terracotta, etc.) for visual variety within constraints