@hex-core/themes 0.1.1 → 0.2.0

package/dist/presets/_briefs/claude.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/claude.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const claudeBrief = `---\nversion: alpha\nname: Claude\ndescription: A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display (\"Copernicus\" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark.\n\ncolors:\n  primary: \"#cc785c\"\n  primary-active: \"#a9583e\"\n  primary-disabled: \"#e6dfd8\"\n  ink: \"#141413\"\n  body: \"#3d3d3a\"\n  body-strong: \"#252523\"\n  muted: \"#6c6a64\"\n  muted-soft: \"#8e8b82\"\n  hairline: \"#e6dfd8\"\n  hairline-soft: \"#ebe6df\"\n  canvas: \"#faf9f5\"\n  surface-soft: \"#f5f0e8\"\n  surface-card: \"#efe9de\"\n  surface-cream-strong: \"#e8e0d2\"\n  surface-dark: \"#181715\"\n  surface-dark-elevated: \"#252320\"\n  surface-dark-soft: \"#1f1e1b\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#faf9f5\"\n  on-dark-soft: \"#a09d96\"\n  accent-teal: \"#5db8a6\"\n  accent-amber: \"#e8a55a\"\n  success: \"#5db872\"\n  warning: \"#d4a017\"\n  error: \"#c64545\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 64px\n    fontWeight: 400\n    lineHeight: 1.05\n    letterSpacing: -1.5px\n  display-lg:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 48px\n    fontWeight: 400\n    lineHeight: 1.1\n    letterSpacing: -1px\n  display-md:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 36px\n    fontWeight: 400\n    lineHeight: 1.15\n    letterSpacing: -0.5px\n  display-sm:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 28px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.3px\n  title-lg:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 22px\n    fontWeight: 500\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\n  caption:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 13px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 12px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 1.5px\n  code:\n    fontFamily: \"JetBrains Mono, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.6\n    letterSpacing: 0\n  button:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.md}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.muted}\"\n    rounded: \"{rounded.md}\"\n  button-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 40px\n  button-secondary-on-dark:\n    backgroundColor: \"{colors.surface-dark-elevated}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  button-icon-circular:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    size: 36px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.body-md}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  hero-illustration-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  product-mockup-card-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  code-window-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  model-comparison-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  callout-card-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  connector-tile:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 14px\n    height: 40px\n  text-input-focused:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.md}\"\n  cookie-consent-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n    padding: 8px 14px\n    rounded: \"{rounded.md}\"\n  category-tab-active:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n  badge-pill:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  badge-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  cta-band-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 64px\n  cta-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 64px\n  footer:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark-soft}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nClaude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a **tinted cream canvas** (\\`{colors.canvas}\\` — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a **slab-serif display** (\"Copernicus\" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with **StyreneB / Inter** body sans. The combination feels like a literary publication, not a SaaS marketing page.\n\nBrand voltage comes from the **cream + coral pairing** — coral (\\`{colors.primary}\\` — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.\n\nThe system has three surface modes that alternate page-by-page:\n1. **Cream canvas** (\\`{colors.canvas}\\`) — default body floor\n2. **Light cream cards** (\\`{colors.surface-card}\\`) — feature card backgrounds\n3. **Dark navy product surfaces** (\\`{colors.surface-dark}\\`) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself\n\nThe dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.\n\n**Key Characteristics:**\n- Warm cream canvas (\\`{colors.canvas}\\` — #faf9f5) with dark warm-ink text (\\`{colors.ink}\\` — #141413). The brand's defining color choice.\n- Coral primary CTA (\\`{colors.primary}\\` — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards.\n- Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice.\n- Dark navy product mockup cards (\\`{colors.surface-dark}\\` — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations.\n- Light cream feature cards (\\`{colors.surface-card}\\` — #efe9de) — slightly darker than canvas, used for content-driven feature explanations.\n- Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker.\n- Border radius is hierarchical: \\`{rounded.md}\\` (8px) for buttons + inputs, \\`{rounded.lg}\\` (12px) for content + product cards, \\`{rounded.xl}\\` (16px) for the hero illustration container, \\`{rounded.pill}\\` for badges.\n- Section rhythm \\`{spacing.section}\\` (96px) — modern-SaaS standard. Internal card padding stays generous at \\`{spacing.xl}\\` (32px).\n\n## Colors\n\n### Brand & Accent\n- **Coral / Primary** (\\`{colors.primary}\\` — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.\n- **Coral Active** (\\`{colors.primary-active}\\` — #a9583e): The press / hover-darker variant.\n- **Coral Disabled** (\\`{colors.primary-disabled}\\` — #e6dfd8): A desaturated cream-tinted disabled state.\n- **Accent Teal** (\\`{colors.accent-teal}\\` — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, \"active connection\" dots in connectors page).\n- **Accent Amber** (\\`{colors.accent-amber}\\` — #e8a55a): A small companion warm-tone used on category badges and inline highlights.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f5f0e8): Section dividers, very-soft band backgrounds.\n- **Surface Card** (\\`{colors.surface-card}\\` — #efe9de): Feature cards, content cards. One step darker than canvas.\n- **Surface Cream Strong** (\\`{colors.surface-cream-strong}\\` — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #252320): Elevated cards inside dark bands (settings panels in mockups).\n- **Surface Dark Soft** (\\`{colors.surface-dark-soft}\\` — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.\n- **Hairline** (\\`{colors.hairline}\\` — #e6dfd8): The 1px border tone on cream surfaces. Same hex as \\`{colors.primary-disabled}\\` — borders feel like one elevation step rather than ink lines.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #ebe6df): Barely-visible divider used inside the same band.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.\n- **Body Strong** (\\`{colors.body-strong}\\` — #252523): Emphasized paragraphs, lead text.\n- **Body** (\\`{colors.body}\\` — #3d3d3a): Default running-text color.\n- **Muted** (\\`{colors.muted}\\` — #6c6a64): Sub-headings, breadcrumbs, footer-adjacent secondary text.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #8e8b82): Captions, fine-print, copyright lines.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): Text on coral buttons.\n- **On Dark** (\\`{colors.on-dark}\\` — #faf9f5): Cream-tinted white used on dark surfaces (echoes the canvas tone).\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a09d96): Footer body text, secondary labels in dark mockups.\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #5db872): Green status dots, \"available\" indicators.\n- **Warning** (\\`{colors.warning}\\` — #d4a017): Warning callouts (rare on marketing surfaces).\n- **Error** (\\`{colors.error}\\` — #c64545): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **Copernicus** (or **Tiempos Headline** as substitute) as the slab-serif display face for headlines, and **StyreneB** (or **Inter** as substitute) as the humanist sans for body, navigation, and UI labels. **JetBrains Mono** handles code blocks. The fallback stack walks \\`Tiempos Headline, Garamond, \"Times New Roman\", serif\\` for display and \\`Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\` for body.\n\nThe display/body split is editorial:\n- Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display\n- StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels\n- JetBrains Mono → all code blocks and terminal text\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 400 | 1.05 | -1.5px | Homepage h1 (\"Meet your thinking partner\") — Copernicus serif |\n| \\`{typography.display-lg}\\` | 48px | 400 | 1.1 | -1px | Section heads — Copernicus |\n| \\`{typography.display-md}\\` | 36px | 400 | 1.15 | -0.5px | Sub-section heads, model names — Copernicus |\n| \\`{typography.display-sm}\\` | 28px | 400 | 1.2 | -0.3px | Pricing tier names, callout headlines — Copernicus |\n| \\`{typography.title-lg}\\` | 22px | 500 | 1.3 | 0 | Pricing plan size labels — StyreneB |\n| \\`{typography.title-md}\\` | 18px | 500 | 1.4 | 0 | Feature card titles, intro paragraphs |\n| \\`{typography.title-sm}\\` | 16px | 500 | 1.4 | 0 | Connector tile titles, list labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.55 | 0 | Default running-text — StyreneB |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |\n| \\`{typography.caption}\\` | 13px | 500 | 1.4 | 0 | Badge labels, captions |\n| \\`{typography.caption-uppercase}\\` | 12px | 500 | 1.4 | 1.5px | Category tags, \"NEW\" badges |\n| \\`{typography.code}\\` | 14px | 400 | 1.6 | 0 | Code blocks — JetBrains Mono |\n| \\`{typography.button}\\` | 14px | 500 | 1.0 | 0 | Standard button labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu items |\n\n### Principles\nDisplay sizes use weight 400 (regular), never bold. Negative letter-spacing (-0.3 to -1.5px) is essential — Copernicus without it reads as off-brand. The serif character is what gives Anthropic its literary, considered voice; switching to a sans-serif display would make Claude feel like every other AI tool.\n\nBody type stays at weight 400 for paragraphs, weight 500 for labels and emphasized phrases. The sans body is humanist (StyreneB) — never geometric. Inter is an acceptable substitute because of its similar humanist proportions; Helvetica or Arial would be too neutral and break the warm-editorial feel.\n\n### Note on Font Substitutes\nIf Copernicus / Tiempos Headline is unavailable, **Cormorant Garamond** at weight 500 with -0.02em letter-spacing is the closest open-source approximation. **EB Garamond** is a fallback. For StyreneB, **Inter** is the closest match — both are humanist sans designed for screen reading. **Söhne** is another close alternative if licensed.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.md}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 96px.\n- **Section padding:** \\`{spacing.section}\\` (96px) — modern-SaaS rhythm.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards, pricing tier cards, model comparison cards; \\`{spacing.lg}\\` (24px) for code-window cards and connector tiles.\n- **Callout / CTA bands:** \\`{spacing.xxl}\\` (48px) inside coral callout cards; 64px inside the larger dark CTA band.\n\n### Grid & Container\n- **Max content width:** ~1200px centered.\n- **Editorial body:** Single 12-column grid; hero often uses 6/6 split (h1 left, illustration right).\n- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Connector tile grids:** 4-up or 6-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Pricing grid:** 3-up at desktop (Free / Pro / Team / Enterprise often), 1-up at mobile.\n\n### Whitespace Philosophy\nThe cream canvas + serif display + generous internal padding create an editorial pacing — Claude reads like a long-form magazine column rather than a marketing template. Whitespace between bands stays uniform at 96px; whitespace inside cards is generous (32px), letting type breathe.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, hero bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Inputs, sub-nav, occasionally on cards |\n| Cream card | \\`{colors.surface-card}\\` background — no shadow | Feature cards, content cards |\n| Dark surface card | \\`{colors.surface-dark}\\` background — no shadow | Code editor mockups, model showcase cards |\n| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (the system uses \\`0 1px 3px rgba(20,20,19,0.08)\\` rarely) |\n\nThe elevation philosophy is **color-block first, shadow rare**. Most depth comes from the cream-vs-dark surface contrast. Shadows are minimal. The dark surface mockups have their own internal product chrome (code editor scrollbars, line numbers, syntax highlighting) which adds detail without needing external shadows.\n\n### Decorative Depth\n- The Anthropic spike-mark glyph (4-spoke radial asterisk) appears as a small black mark in the brand wordmark and inline as a content marker.\n- Code editor mockups carry their own internal depth: syntax-highlighted text in muted blues / oranges / grays, line numbers in \\`{colors.muted-soft}\\`, status bars at the bottom in \\`{colors.surface-dark-elevated}\\`.\n- Some hero illustrations use simple line-art with coral and dark-navy strokes on cream — minimal, hand-drawn-feeling, never photorealistic.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 4px | Reserved for badge accents and tiny dropdowns |\n| \\`{rounded.sm}\\` | 6px | Small inline buttons, dropdown items |\n| \\`{rounded.md}\\` | 8px | Standard CTA buttons, text inputs, category tabs |\n| \\`{rounded.lg}\\` | 12px | Content cards (feature, pricing, code-window, model-comparison) |\n| \\`{rounded.xl}\\` | 16px | Hero illustration container, the larger marquee components |\n| \\`{rounded.pill}\\` | 9999px | Badge pills, \"NEW\" tags |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatar substitutes, icon buttons |\n\n### Photography & Illustrations\nClaude's hero rarely uses photography. Instead it uses:\n- Simple line-art illustrations with coral + dark-navy strokes on the cream canvas\n- Code editor mockups (the dominant \"hero\" treatment on developer-focused pages)\n- Terminal output mockups with monospace text on dark\n- Model comparison cards (Opus / Sonnet / Haiku) with abstract geometric thumbnails\n\nWhen photography is used (rare — mostly testimonials), avatars crop to perfect circles at 40px diameter.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Cream nav bar pinned to the top of every page. 64px tall, \\`{colors.canvas}\\` background. Carries the Anthropic spike-mark + \"Claude\" wordmark at left, primary horizontal menu (Product, Solutions, Use Cases, Pricing, Research, Company) center-left, right-side cluster with \"Sign in\" text-link, \"Try Claude\" \\`{component.button-primary}\\` (coral). Menu items in \\`{typography.nav-link}\\` (StyreneB 14px / 500).\n\n### Buttons\n\n**\\`button-primary\\`** — The signature coral CTA. Background \\`{colors.primary}\\` (#cc785c), text \\`{colors.on-primary}\\` (white), type \\`{typography.button}\\` (StyreneB 14px / 500), padding 12px × 20px, height 40px, rounded \\`{rounded.md}\\` (8px). Active state \\`button-primary-active\\` darkens to \\`{colors.primary-active}\\` (#a9583e).\n\n**\\`button-secondary\\`** — Cream button with hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px hairline border, same padding + height + radius as primary.\n\n**\\`button-secondary-on-dark\\`** — Used over \\`{colors.surface-dark}\\` cards. Background \\`{colors.surface-dark-elevated}\\` (#252320), text \\`{colors.on-dark}\\`. Stays dark — the system never inverts to a light secondary on dark surfaces.\n\n**\\`button-text-link\\`** — Inline text button, no background. Used for \"Sign in\" in the top nav and inline CTA links.\n\n**\\`button-icon-circular\\`** — 36px circular icon button. Background \\`{colors.canvas}\\`, hairline border, ink-color icon. Used for carousel arrows, share, \"view more\".\n\n**\\`text-link\\`** — Inline body links in \\`{colors.primary}\\` (the coral). Underlined on press; the coral inline link is one of the system's most distinctive small details.\n\n### Cards & Containers\n\n**\\`hero-band\\`** — Cream-canvas hero with a 6-6 grid: h1 + sub-headline + button row on the left, hero illustration card or product mockup card on the right. Vertical padding \\`{spacing.section}\\` (96px).\n\n**\\`hero-illustration-card\\`** — A larger card holding the hero's right-side artifact — sometimes a coral-stroke line illustration on cream background, sometimes a dark code editor mockup. Background \\`{colors.canvas}\\` or \\`{colors.surface-dark}\\` depending on context, rounded \\`{rounded.xl}\\` (16px).\n\n**\\`feature-card\\`** — Used in 3-up feature grids. Background \\`{colors.surface-card}\\` (#efe9de — slightly darker cream), rounded \\`{rounded.lg}\\` (12px), internal padding \\`{spacing.xl}\\` (32px). Carries a small icon at top, an \\`{typography.title-md}\\` headline, and a body description in \\`{typography.body-md}\\`.\n\n**\\`product-mockup-card-dark\\`** — Dark navy card showing actual Claude product chrome (chat interface, code editor, agent controls). Background \\`{colors.surface-dark}\\`, rounded \\`{rounded.lg}\\`, internal padding \\`{spacing.xl}\\` (32px). Carries text labels in \\`{colors.on-dark}\\` and product UI fragments below.\n\n**\\`code-window-card\\`** — A specialized dark card showing a code editor with line numbers, syntax-highlighted code in \\`{typography.code}\\` (JetBrains Mono), and sometimes a \"Run\" button or terminal output panel below. Background \\`{colors.surface-dark}\\` with \\`{colors.surface-dark-soft}\\` for the inner code block, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). The signature visual element of Claude Code product pages.\n\n**\\`model-comparison-card\\`** — Used on the homepage's \"Which problem are you up against?\" section comparing Opus / Sonnet / Haiku. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, internal padding \\`{spacing.xl}\\` (32px). Carries the model name, a short capability blurb, and a \\`{component.text-link}\\` to learn more.\n\n**\\`pricing-tier-card\\`** — Standard tier card. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px). Carries the plan name in \\`{typography.title-lg}\\` (StyreneB), price in \\`{typography.display-sm}\\` (Copernicus serif!), feature checklist in \\`{typography.body-md}\\`, and a \\`{component.button-primary}\\` at the bottom.\n\n**\\`pricing-tier-card-featured\\`** — The featured tier (typically \"Pro\" or \"Team\"). Background flips to \\`{colors.surface-dark}\\`, text inverts to \\`{colors.on-dark}\\`. The dark surface IS the featured-tier signal.\n\n**\\`callout-card-coral\\`** — A full-bleed coral card carrying a major call-to-action. Background \\`{colors.primary}\\` (#cc785c), text \\`{colors.on-primary}\\` (white), rounded \\`{rounded.lg}\\`, padding \\`{spacing.xxl}\\` (48px). The coral surface IS the voltage; the CTA inside uses an inverted button style (cream/canvas button on coral).\n\n**\\`connector-tile\\`** — Used on the connectors page's integration grid. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, padding 20px. Each tile carries a logo at top, a \\`{typography.title-sm}\\` connector name, and a short description.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.md}\\` (8px), padding 10px × 14px, height 40px. 1px hairline border in \\`{colors.hairline}\\`.\n\n**\\`text-input-focused\\`** — Focus state. Border thickens or shifts to \\`{colors.primary}\\` (coral) for emphasis. Carries a 3px coral-at-15%-alpha outer ring.\n\n**\\`cookie-consent-card\\`** — Bottom-right floating dark cookie banner. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). One of the few places dark surface appears at small scale on cream pages.\n\n### Tags / Badges\n\n**\\`badge-pill\\`** — Small pill label used for category tags. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption}\\` (13px / 500), rounded \\`{rounded.pill}\\`, padding 4px × 12px.\n\n**\\`badge-coral\\`** — Coral-fill badge for \"NEW\", \"BETA\", featured highlights. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.caption-uppercase}\\` (12px / 500 / 1.5px tracking), rounded \\`{rounded.pill}\\`, padding 4px × 12px.\n\n### Tab / Filter\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Used in sub-nav rows on solutions / connectors pages. Inactive: transparent background, \\`{colors.muted}\\` text. Active: \\`{colors.surface-card}\\` background, \\`{colors.ink}\\` text. Padding 8px × 14px, rounded \\`{rounded.md}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-coral\\`** — A pre-footer \"Try Claude\" CTA card. Full-width coral fill, white type, rounded \\`{rounded.lg}\\`, padding 64px. Carries an h2 in \\`{typography.display-sm}\\` (still serif!), a sub-line, and a cream-button CTA.\n\n**\\`cta-band-dark\\`** — Alternative pre-footer band on developer-focused pages. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\`, padding 64px. Often pairs with a code-window card.\n\n**\\`footer\\`** — Dark navy footer that closes every page. Background \\`{colors.surface-dark}\\` (#181715), text \\`{colors.on-dark-soft}\\`. 4-column link list at desktop covering Product / Company / Resources / Legal. Vertical padding 64px. The Anthropic spike-mark + \"Anthropic\" wordmark sits at the top in \\`{colors.on-dark}\\`. The footer never inverts.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page on the cream canvas. Pure white reads as \"any other AI tool\"; the warm tint is the brand differentiator.\n- Use Copernicus serif for every display headline. Pair with StyreneB sans body. Negative letter-spacing on display sizes is non-negotiable.\n- Reserve \\`{colors.primary}\\` (coral) for primary CTAs and full-bleed \\`{component.callout-card-coral}\\` moments. Don't paint accent moments coral elsewhere.\n- Use \\`{component.product-mockup-card-dark}\\` and \\`{component.code-window-card}\\` to show actual Claude product chrome. Don't paint marketing illustrations of code when you can show real code.\n- Pair \\`{component.feature-card}\\` (cream) with \\`{component.product-mockup-card-dark}\\` (navy) in alternating bands. The cream-to-dark rhythm is the brand's pacing mechanism.\n- Use the Anthropic spike-mark glyph as the brand wordmark prefix. Never invert the mark to white-on-dark within the wordmark itself.\n- Apply \\`{spacing.section}\\` (96px) between major bands.\n\n### Don't\n- Don't use cool grays or pure white for canvas. Cream is the brand.\n- Don't bold serif display weight. Copernicus at 700 reads as bombastic; the system stays at 400.\n- Don't use cool blue or saturated cyan as a brand accent. The coral is the brand voltage.\n- Don't put coral everywhere. The coral is scarce on individual elements and generous only on full-bleed coral callout cards.\n- Don't use Inter for display headlines. The serif character is the brand voice.\n- Don't repeat the same surface mode in two consecutive bands. The pacing alternates: cream → cream-card → dark-mockup → cream → coral-callout → dark-footer.\n- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-illustration-card stacks below content; feature grids 1-up; connector tiles 2-up; pricing 1-up; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens; feature cards 2-up; connector tiles 3-up; pricing 2-up |\n| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up or 6-up connector tiles; 3-up pricing tiers |\n| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` at minimum 40 × 40px.\n- \\`{component.button-icon-circular}\\` at exactly 36 × 36 — slightly under WCAG 44 but visually centered.\n- \\`{component.text-input}\\` height is 40px.\n- Connector tile entire card area is tappable; effective tap area >> 44px.\n\n### Collapsing Strategy\n- Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.\n- Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.\n- Feature grids reduce columns rather than scaling cards down.\n- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.\n- Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.\n\n### Image Behavior\n- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.\n- Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.\n- Avatar photos in testimonials crop to circles at every breakpoint.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.feature-card}\\`, \\`{component.code-window-card}\\`).\n2. Variants of an existing component (\\`-active\\`, \\`-disabled\\`, \\`-focused\\`) live as separate entries in \\`components:\\`.\n3. Use \\`{token.refs}\\` everywhere — never inline hex.\n4. Never document hover. Default and Active/Pressed states only.\n5. Display headlines stay Copernicus serif 400 with negative tracking. Body stays StyreneB / Inter 400. The split is unbreakable.\n6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections).\n7. When in doubt about emphasis: bigger Copernicus serif before bolder weight.\n\n## Known Gaps\n\n- Copernicus and StyreneB are licensed Anthropic typefaces and not available as public web fonts. Substitutes (Tiempos Headline / Cormorant Garamond / EB Garamond for serif; Inter / Söhne for sans) are documented in the typography section.\n- The Anthropic radial-spike-mark is a brand glyph rendered as inline SVG; it's not formalized as a system token here. Treat it as a logo asset.\n- Animation and transition timings (chat message reveal, code block typewriter effect on the homepage, agentic-flow diagram animations) are not in scope.\n- Form validation states beyond \\`{component.text-input-focused}\\` are not extracted — error / success states would need a sign-up or feedback flow to confirm.\n- The actual Claude product surface (claude.ai chat interface) shares some tokens with the marketing site but adds many product-specific components (chat bubbles, message tools, file upload chips, conversation history sidebar) that are out of scope for this marketing-surface document.\n- The \"agent\" / \"computer use\" demo cards on certain pages display animated Claude controlling a browser — the static screenshot doesn't fully capture the animation chrome.\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/presets/_briefs/clay.d.ts

@@ -0,0 +1,3 @@
+declare const clayBrief = "---\nversion: alpha\nname: Clay\ndescription: A vibrant claymation-meets-data interface for Clay.com (GTM data-orchestration platform). Anchors on white canvas with dark-navy primary CTAs, custom rounded display type, and saturated single-color feature cards \u2014 hot pink, deep teal, lavender, peach, ochre \u2014 that punctuate long-scroll explainer pages. Brand voltage comes from 3D-rendered claymation illustrations (mountains, characters, mascots) used as full-bleed hero artifacts and the bright multi-color card surfaces showing product UI fragments.\n\ncolors:\n  primary: \"#0a0a0a\"\n  primary-active: \"#1f1f1f\"\n  primary-disabled: \"#e5e5e5\"\n  ink: \"#0a0a0a\"\n  body: \"#3a3a3a\"\n  body-strong: \"#1a1a1a\"\n  muted: \"#6a6a6a\"\n  muted-soft: \"#9a9a9a\"\n  hairline: \"#e5e5e5\"\n  hairline-soft: \"#f0f0f0\"\n  canvas: \"#fffaf0\"\n  surface-soft: \"#faf5e8\"\n  surface-card: \"#f5f0e0\"\n  surface-strong: \"#ebe6d6\"\n  surface-dark: \"#0a1a1a\"\n  surface-dark-elevated: \"#1a2a2a\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#a0a0a0\"\n  brand-pink: \"#ff4d8b\"\n  brand-teal: \"#1a3a3a\"\n  brand-lavender: \"#b8a4ed\"\n  brand-peach: \"#ffb084\"\n  brand-ochre: \"#e8b94a\"\n  brand-mint: \"#a4d4c5\"\n  brand-coral: \"#ff6b5a\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Plain Black, Inter, sans-serif\"\n    fontSize: 72px\n    fontWeight: 500\n    lineHeight: 1\n    letterSpacing: -2.5px\n  display-lg:\n    fontFamily: \"Plain Black, Inter, sans-serif\"\n    fontSize: 56px\n    fontWeight: 500\n    lineHeight: 1.05\n    letterSpacing: -2px\n  display-md:\n    fontFamily: \"Plain Black, Inter, sans-serif\"\n    fontSize: 40px\n    fontWeight: 500\n    lineHeight: 1.1\n    letterSpacing: -1px\n  display-sm:\n    fontFamily: \"Plain Black, Inter, sans-serif\"\n    fontSize: 32px\n    fontWeight: 500\n    lineHeight: 1.15\n    letterSpacing: -0.5px\n  title-lg:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 24px\n    fontWeight: 600\n    lineHeight: 1.3\n    letterSpacing: -0.3px\n  title-md:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\n  caption:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 13px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 12px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 1.5px\n  button:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 600\n    lineHeight: 1\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 6px\n  sm: 8px\n  md: 12px\n  lg: 16px\n  xl: 24px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 44px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.md}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.muted}\"\n    rounded: \"{rounded.md}\"\n  button-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 44px\n  button-on-color:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 44px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  hero-illustration-card:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n  feature-card-pink:\n    backgroundColor: \"{colors.brand-pink}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  feature-card-teal:\n    backgroundColor: \"{colors.brand-teal}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  feature-card-lavender:\n    backgroundColor: \"{colors.brand-lavender}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  feature-card-peach:\n    backgroundColor: \"{colors.brand-peach}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  feature-card-ochre:\n    backgroundColor: \"{colors.brand-ochre}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  feature-card-cream:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  product-mockup-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  testimonial-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.brand-teal}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  text-input-focused:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.md}\"\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.pill}\"\n    padding: 8px 16px\n  category-tab-active:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.pill}\"\n  badge-pill:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  expert-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  cta-band-illustrated:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 80px\n  footer:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 80px\n---\n\n## Overview\n\nClay.com is the most playful B2B SaaS interface in the GTM-data category. The base atmosphere is **cream-tinted white canvas** (`{colors.canvas}` \u2014 #fffaf0) holding dark-navy ink type and **3D-rendered claymation illustrations** (mountains, mascot characters, peach/ochre/lavender landscapes) as the dominant brand voltage. Where most data-platform brands play it cool with grids and gradients, Clay leans hard into hand-crafted-looking 3D illustrations and saturated single-color feature cards.\n\nType voice runs **Plain Black** (or substituted with Inter weight 500-600) \u2014 a custom rounded display face used at very large sizes (72px hero) with negative letter-spacing. Body type uses Inter at standard weights. The display weight stays at 500, never bolder \u2014 the rounded character of the typeface gives it warmth without needing weight.\n\nComponent voltage comes from **saturated single-color feature cards** in a 6-color palette: hot pink, deep teal, lavender, peach, ochre, and cream-card. Each card shows product UI fragments at small scale \u2014 Claygent agent runs, sequencer flows, CRM enrichment outputs. The colored card IS the primary visual element on every long-scroll page.\n\n**Key Characteristics:**\n- Cream-tinted white canvas (`{colors.canvas}` \u2014 #fffaf0). The warmth differentiates Clay from cool-gray competitor sites.\n- Dark navy/black primary CTAs (`{colors.primary}` \u2014 #0a0a0a). Buttons rounded `{rounded.md}` (12px) \u2014 friendly modern but not pill.\n- 6-color saturated feature card palette: `{colors.brand-pink}`, `{colors.brand-teal}`, `{colors.brand-lavender}`, `{colors.brand-peach}`, `{colors.brand-ochre}`, `{colors.surface-card}` (cream).\n- 3D claymation illustrations (mountains, characters, abstract shapes) as full-bleed hero artifacts \u2014 the brand's most-recognized visual element.\n- Custom rounded Plain Black display typeface at 500 weight with -1 to -2.5px letter-spacing on display sizes.\n- Border radius is generous: `{rounded.md}` (12px) for buttons + inputs, `{rounded.lg}` (16px) for content cards, `{rounded.xl}` (24px) for feature cards. The bigger radius matches the rounded display type's character.\n- Product UI fragments embedded inside colored cards at small scale \u2014 agent run logs, sequencer flows, enrichment results.\n- Section rhythm `{spacing.section}` (96px) between major bands.\n- Footer is cream-tinted (`{colors.surface-soft}`) \u2014 Clay does NOT use a dark footer. Even the closing band stays warm-light.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (`{colors.primary}` \u2014 #0a0a0a): All primary CTAs, h1/h2 ink type. Near-black with slight warmth.\n- **Brand Pink** (`{colors.brand-pink}` \u2014 #ff4d8b): Hot-pink feature card surface. Sequencer / outbound feature pages.\n- **Brand Teal** (`{colors.brand-teal}` \u2014 #1a3a3a): Deep teal-green feature card. Often the featured pricing tier.\n- **Brand Lavender** (`{colors.brand-lavender}` \u2014 #b8a4ed): Soft lavender feature card.\n- **Brand Peach** (`{colors.brand-peach}` \u2014 #ffb084): Warm peach feature card.\n- **Brand Ochre** (`{colors.brand-ochre}` \u2014 #e8b94a): Mustard / ochre feature card and illustration accents.\n- **Brand Mint** (`{colors.brand-mint}` \u2014 #a4d4c5): Mint accent on illustrations and small badges.\n- **Brand Coral** (`{colors.brand-coral}` \u2014 #ff6b5a): Coral accent for highlights.\n\n### Surface\n- **Canvas** (`{colors.canvas}` \u2014 #fffaf0): The default page floor. Cream-tinted white.\n- **Surface Soft** (`{colors.surface-soft}` \u2014 #faf5e8): Footer and CTA-band background.\n- **Surface Card** (`{colors.surface-card}` \u2014 #f5f0e0): Cream feature cards, testimonial cards.\n- **Surface Strong** (`{colors.surface-strong}` \u2014 #ebe6d6): Stronger cream for emphasized bands.\n- **Surface Dark** (`{colors.surface-dark}` \u2014 #0a1a1a): Dark teal-tinted near-black for occasional dark cards (rare).\n- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` \u2014 #1a2a2a): Elevated dark cards.\n- **Hairline** (`{colors.hairline}` \u2014 #e5e5e5): 1px borders on cards and inputs.\n\n### Text\n- **Ink** (`{colors.ink}` \u2014 #0a0a0a): Headlines and primary text.\n- **Body Strong** (`{colors.body-strong}` \u2014 #1a1a1a): Emphasized body, lead paragraphs.\n- **Body** (`{colors.body}` \u2014 #3a3a3a): Default running-text.\n- **Muted** (`{colors.muted}` \u2014 #6a6a6a): Sub-headings, breadcrumbs, footer body.\n- **Muted Soft** (`{colors.muted-soft}` \u2014 #9a9a9a): Captions, fine-print.\n- **On Primary / On Dark** (`{colors.on-primary}` \u2014 #ffffff): Text on primary buttons + dark feature cards (teal).\n\n### Semantic\n- **Success** (`{colors.success}` \u2014 #22c55e): Success states.\n- **Warning** (`{colors.warning}` \u2014 #f59e0b): Warning callouts.\n- **Error** (`{colors.error}` \u2014 #ef4444): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **Plain Black** (a custom rounded display face) for headlines and **Inter** for body, navigation, and UI. Plain Black at weight 500 with negative letter-spacing handles every display headline; Inter handles the rest. The fallback stack walks `Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif` for both.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| `{typography.display-xl}` | 72px | 500 | 1.0 | -2.5px | Homepage h1 (\"Go to market with unique data\") \u2014 Plain Black |\n| `{typography.display-lg}` | 56px | 500 | 1.05 | -2px | Section heads \u2014 Plain Black |\n| `{typography.display-md}` | 40px | 500 | 1.1 | -1px | Sub-section heads, product names |\n| `{typography.display-sm}` | 32px | 500 | 1.15 | -0.5px | CTA-band heads, feature card titles |\n| `{typography.title-lg}` | 24px | 600 | 1.3 | -0.3px | Pricing plan names, larger feature titles |\n| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Card titles, intro paragraphs |\n| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |\n| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text |\n| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |\n| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |\n| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 1.5px | Section labels, \"FEATURED\" badges |\n| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button labels |\n| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |\n\n### Principles\nPlain Black at weight 500 + negative letter-spacing IS the brand voice. Going to weight 700 reads as bombastic; the rounded character of the typeface adds warmth that bolder weight would flatten.\n\nThe body-vs-display split is functional: Plain Black for Plain Black moments (headlines), Inter for everything else (running text, UI, buttons). Mixing them is a system violation.\n\n### Note on Font Substitutes\nIf Plain Black is unavailable, **Inter** at weight 500 with -0.05em letter-spacing is a usable approximation. **S\u00F6hne Breit** at weight Buch is an alternative if licensed. **Recoleta** at weight 500 carries similar rounded-display warmth.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** `{spacing.xxs}` 4px \u00B7 `{spacing.xs}` 8px \u00B7 `{spacing.sm}` 12px \u00B7 `{spacing.md}` 16px \u00B7 `{spacing.lg}` 24px \u00B7 `{spacing.xl}` 32px \u00B7 `{spacing.xxl}` 48px \u00B7 `{spacing.section}` 96px.\n- **Section padding:** `{spacing.section}` (96px) between major editorial bands.\n- **Card internal padding:** `{spacing.xl}` (32px) for feature cards and pricing tiers; `{spacing.lg}` (24px) for testimonial and product mockup cards.\n\n### Grid & Container\n- **Max content width:** ~1280px centered.\n- **Editorial body:** Single 12-column grid; hero often uses 7/5 split (h1 left, illustration right).\n- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Pricing grid:** 3-4 up at desktop, 1-up at mobile.\n\n### Whitespace Philosophy\nClay uses generous whitespace around big rounded display headlines and saturated feature cards. The cream canvas + colored cards + 3D illustrations create a playful warmth that competing data-platform sites lack.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, hero |\n| Soft hairline | 1px `{colors.hairline}` border | Inputs, small content cards |\n| Saturated card | Brand pink/teal/lavender/peach/ochre fill \u2014 no shadow | Feature cards |\n| Cream card | `{colors.surface-card}` background \u2014 no shadow | Testimonial, secondary cards |\n| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (rare) |\n\nThe system uses no heavy shadows. Depth comes from the saturated color contrast between cream canvas and bright feature cards.\n\n### Decorative Depth\n- **3D claymation illustrations** \u2014 mountains, characters, mascots rendered in a hand-crafted 3D style. The brand's most-recognized depth element. Not a token \u2014 these are illustrated assets.\n- **Mascot characters** appear as inline figures in feature cards and CTAs.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| `{rounded.xs}` | 6px | Small badges, dropdown items |\n| `{rounded.sm}` | 8px | Small buttons, hairline-border accent |\n| `{rounded.md}` | 12px | Standard CTA buttons, text inputs |\n| `{rounded.lg}` | 16px | Content cards, testimonial cards, pricing tiers |\n| `{rounded.xl}` | 24px | Feature cards (the saturated brand-color cards) |\n| `{rounded.pill}` | 9999px | Category tabs, badge pills |\n| `{rounded.full}` | 9999px / 50% | Avatars, icon buttons |\n\n## Components\n\n### Top Navigation\n\n**`top-nav`** \u2014 Cream nav bar pinned to top. 64px tall, `{colors.canvas}` background. Carries the Clay logo + wordmark at left, primary horizontal menu (Product, Solutions, Resources, Pricing, Customers) center, right-side cluster with \"Sign in\" + \"Try free\" `{component.button-primary}`. Menu items in `{typography.nav-link}` (Inter 14px / 500).\n\n### Buttons\n\n**`button-primary`** \u2014 Background `{colors.primary}` (near-black), text `{colors.on-primary}` (white), type `{typography.button}` (Inter 14px / 600), padding 12px \u00D7 20px, height 44px, rounded `{rounded.md}` (12px).\n\n**`button-secondary`** \u2014 Cream button with hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px hairline border.\n\n**`button-on-color`** \u2014 White button used over saturated brand-color feature cards. Same shape as primary but inverted (white background, ink text).\n\n**`button-text-link`** \u2014 Inline text button, no background. Used for \"Sign in\" and inline link CTAs.\n\n**`text-link`** \u2014 Inline body links in `{colors.ink}` with underline.\n\n### Cards & Containers\n\n**`hero-band`** \u2014 Cream-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, 3D claymation illustration on the right. Vertical padding `{spacing.section}` (96px).\n\n**`hero-illustration-card`** \u2014 Right-side artifact holding 3D claymation illustration (mountains, mascot character, abstract shapes). Background `{colors.surface-soft}`, rounded `{rounded.xl}` (24px). The illustration IS the artifact.\n\n**`feature-card-pink`** / **`feature-card-teal`** / **`feature-card-lavender`** / **`feature-card-peach`** / **`feature-card-ochre`** \u2014 Saturated single-color feature cards. Background varies per variant; rounded `{rounded.xl}` (24px); padding `{spacing.xl}` (32px). Each card carries an h3 in `{typography.title-md}`, a body description, and a product UI fragment or mascot illustration. Text color flips to `{colors.on-dark}` (white) on pink and teal cards, `{colors.ink}` (dark) on lavender/peach/ochre cards (the lighter saturations have enough contrast for dark text).\n\n**`feature-card-cream`** \u2014 Lower-key feature card variant on `{colors.surface-card}`. Used for less-emphasized features that don't warrant a saturated color.\n\n**`product-mockup-card`** \u2014 Card showing actual Clay product UI (Claygent agent runs, sequencer flows, CRM enrichment tables). Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px).\n\n**`testimonial-card`** \u2014 Customer quote cards. Background `{colors.surface-card}` (cream), rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Top row has avatar + name + role; below sits the testimonial in `{typography.body-md}`.\n\n**`pricing-tier-card`** \u2014 Standard tier card. Background `{colors.canvas}` with hairline, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).\n\n**`pricing-tier-card-featured`** \u2014 The featured tier flips to `{colors.brand-teal}` (deep teal-green). The teal surface IS the featured signal.\n\n**`expert-card`** \u2014 Used on /experts page. Background `{colors.canvas}` with hairline, rounded `{rounded.lg}`, padding `{spacing.lg}`. Carries an avatar at top, expert name, specialization, and a \"Book session\" link.\n\n### Inputs & Forms\n\n**`text-input`** \u2014 Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (12px), padding 12px \u00D7 16px, height 44px. 1px hairline border.\n\n**`text-input-focused`** \u2014 Border thickens to ink for emphasis.\n\n### Tabs / Badges\n\n**`category-tab`** + **`category-tab-active`** \u2014 Pill-shaped tabs in sub-nav. Inactive: transparent + muted text. Active: cream-card background + ink text. Padding 8px \u00D7 16px.\n\n**`badge-pill`** \u2014 Small cream-fill pill labels in `{typography.caption}` (13px / 500), rounded `{rounded.pill}`.\n\n### CTA / Footer\n\n**`cta-band-illustrated`** \u2014 Pre-footer \"Turn your growth ideas into reality today\" band. Background `{colors.surface-soft}`, rounded `{rounded.xl}`, padding 80px. Carries an h2 in `{typography.display-md}`, a sub-line, and a `{component.button-primary}` \u2014 usually paired with a 3D illustration of a mascot or scene.\n\n**`footer`** \u2014 Cream-tinted footer (NOT dark navy unlike most SaaS sites). Background `{colors.surface-soft}`, text `{colors.body}`. 4-column link list. Vertical padding 80px. Often features a horizon-style 3D mountain illustration at the very bottom \u2014 Clay's signature footer mountain.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page on the cream canvas (`{colors.canvas}` \u2014 #fffaf0). The warm tint differentiates Clay from cool-gray data sites.\n- Use 3D claymation illustrations as hero artifacts. Hand-crafted 3D characters and mountains ARE the brand.\n- Cycle saturated feature cards across the page \u2014 pink \u2192 teal \u2192 lavender \u2192 peach \u2192 ochre \u2192 cream. Repeating the same color twice in a row reads as off-rhythm.\n- Use Plain Black at weight 500 with negative letter-spacing on every display headline.\n- Show product UI fragments inside saturated feature cards. The brand voltage is product-driven, not abstract.\n- Use cream footer (NOT dark). Clay deliberately closes pages with warm cream rather than the standard dark-footer SaaS template.\n- Anchor every band with `{spacing.section}` (96px) vertical rhythm.\n\n### Don't\n- Don't use cool grays for canvas. The cream tint is non-negotiable.\n- Don't use a 7th brand-color card. The 6-color palette is saturated enough.\n- Don't bold display weight beyond 500. Plain Black at 700 reads as bombastic.\n- Don't repeat the same brand-color card twice in a row.\n- Don't replace claymation illustrations with flat vector art. The hand-crafted 3D character IS the brand voice.\n- Don't use a dark footer. The cream footer is part of the system's warm-throughout pacing.\n- Don't add hover state styling beyond what the system already encodes.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 72\u219236px; hero-illustration-card stacks below; feature grids 1-up; pricing 1-up |\n| Tablet | 768\u20131024px | Top nav tightens; feature cards 2-up; pricing 2-up |\n| Desktop | 1024\u20131440px | Full top-nav; 3-up feature cards; 3-up pricing tiers |\n| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |\n\n### Touch Targets\n- `{component.button-primary}` at minimum 44 \u00D7 44px (matches WCAG AAA).\n- `{component.text-input}` height is 44px.\n\n### Collapsing Strategy\n- Top nav collapses to hamburger at < 768px.\n- Hero 7-5 grid \u2192 single-column on mobile.\n- Feature card grids reduce columns rather than scaling.\n- Saturated feature cards retain their colored fill at every breakpoint.\n- Pricing tier cards collapse 4 \u2192 2 \u2192 1.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (`{component.feature-card-pink}`, `{component.pricing-tier-card-featured}`).\n2. Pick the right brand-color card for the feature: pink for outbound/sequencer, teal for enterprise/featured, lavender for AI-agent products, peach for general SaaS warmth, ochre for community / experts.\n3. Variants of an existing component (`-active`, `-disabled`) live as separate entries.\n4. Use `{token.refs}` everywhere \u2014 never inline hex.\n5. Never document hover.\n6. Display headlines stay Plain Black 500 with negative letter-spacing. Body stays Inter 400.\n7. The cream-throughout palette is a system contract \u2014 don't add a dark footer.\n\n## Known Gaps\n\n- Plain Black is licensed to Clay and not available as a public web font; Inter weight 500 with negative letter-spacing is the closest substitute.\n- 3D claymation illustrations are commissioned assets, not system tokens \u2014 they're rendered per-page.\n- The mascot characters (named characters that recur across the site) are illustrated assets; their exact lineage and naming are not formalized in tokens.\n- Animation and transition timings (3D illustration parallax on scroll, feature card entrance animations) are not in scope.\n- Form validation states beyond `{component.text-input-focused}` are not extracted.\n- The actual Clay product surface (in-app data tables, formula editor, agent builder) shares some tokens with the marketing site but adds many product-specific components that are out of scope.\n";
+
+export { clayBrief };