@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/clay.js

@@ -0,0 +1,547 @@
+// src/presets/_briefs/clay.ts
+var clayBrief = `---
+version: alpha
+name: Clay
+description: 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.
+
+colors:
+  primary: "#0a0a0a"
+  primary-active: "#1f1f1f"
+  primary-disabled: "#e5e5e5"
+  ink: "#0a0a0a"
+  body: "#3a3a3a"
+  body-strong: "#1a1a1a"
+  muted: "#6a6a6a"
+  muted-soft: "#9a9a9a"
+  hairline: "#e5e5e5"
+  hairline-soft: "#f0f0f0"
+  canvas: "#fffaf0"
+  surface-soft: "#faf5e8"
+  surface-card: "#f5f0e0"
+  surface-strong: "#ebe6d6"
+  surface-dark: "#0a1a1a"
+  surface-dark-elevated: "#1a2a2a"
+  on-primary: "#ffffff"
+  on-dark: "#ffffff"
+  on-dark-soft: "#a0a0a0"
+  brand-pink: "#ff4d8b"
+  brand-teal: "#1a3a3a"
+  brand-lavender: "#b8a4ed"
+  brand-peach: "#ffb084"
+  brand-ochre: "#e8b94a"
+  brand-mint: "#a4d4c5"
+  brand-coral: "#ff6b5a"
+  success: "#22c55e"
+  warning: "#f59e0b"
+  error: "#ef4444"
+
+typography:
+  display-xl:
+    fontFamily: "Plain Black, Inter, sans-serif"
+    fontSize: 72px
+    fontWeight: 500
+    lineHeight: 1
+    letterSpacing: -2.5px
+  display-lg:
+    fontFamily: "Plain Black, Inter, sans-serif"
+    fontSize: 56px
+    fontWeight: 500
+    lineHeight: 1.05
+    letterSpacing: -2px
+  display-md:
+    fontFamily: "Plain Black, Inter, sans-serif"
+    fontSize: 40px
+    fontWeight: 500
+    lineHeight: 1.1
+    letterSpacing: -1px
+  display-sm:
+    fontFamily: "Plain Black, Inter, sans-serif"
+    fontSize: 32px
+    fontWeight: 500
+    lineHeight: 1.15
+    letterSpacing: -0.5px
+  title-lg:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 24px
+    fontWeight: 600
+    lineHeight: 1.3
+    letterSpacing: -0.3px
+  title-md:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0
+  title-sm:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 16px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0
+  body-md:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.55
+    letterSpacing: 0
+  body-sm:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.55
+    letterSpacing: 0
+  caption:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 13px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  caption-uppercase:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 12px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 1.5px
+  button:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 1
+    letterSpacing: 0
+  nav-link:
+    fontFamily: "Inter, sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+
+rounded:
+  xs: 6px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 24px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+  section: 96px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+    height: 44px
+  button-primary-active:
+    backgroundColor: "{colors.primary-active}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.md}"
+  button-primary-disabled:
+    backgroundColor: "{colors.primary-disabled}"
+    textColor: "{colors.muted}"
+    rounded: "{rounded.md}"
+  button-secondary:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+    height: 44px
+  button-on-color:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+    height: 44px
+  button-text-link:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+  text-link:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+  top-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.nav-link}"
+    height: 64px
+  hero-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-xl}"
+    padding: 96px
+  hero-illustration-card:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+  feature-card-pink:
+    backgroundColor: "{colors.brand-pink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  feature-card-teal:
+    backgroundColor: "{colors.brand-teal}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  feature-card-lavender:
+    backgroundColor: "{colors.brand-lavender}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  feature-card-peach:
+    backgroundColor: "{colors.brand-peach}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  feature-card-ochre:
+    backgroundColor: "{colors.brand-ochre}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  feature-card-cream:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  product-mockup-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  testimonial-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  pricing-tier-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-lg}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  pricing-tier-card-featured:
+    backgroundColor: "{colors.brand-teal}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.title-lg}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 16px
+    height: 44px
+  text-input-focused:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+  category-tab:
+    backgroundColor: transparent
+    textColor: "{colors.muted}"
+    typography: "{typography.nav-link}"
+    rounded: "{rounded.pill}"
+    padding: 8px 16px
+  category-tab-active:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.nav-link}"
+    rounded: "{rounded.pill}"
+  badge-pill:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.pill}"
+    padding: 4px 12px
+  expert-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  cta-band-illustrated:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-md}"
+    rounded: "{rounded.xl}"
+    padding: 80px
+  footer:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+    padding: 80px
+---
+
+## Overview
+
+Clay.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.
+
+Type 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.
+
+Component 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.
+
+**Key Characteristics:**
+- Cream-tinted white canvas (\`{colors.canvas}\` \u2014 #fffaf0). The warmth differentiates Clay from cool-gray competitor sites.
+- Dark navy/black primary CTAs (\`{colors.primary}\` \u2014 #0a0a0a). Buttons rounded \`{rounded.md}\` (12px) \u2014 friendly modern but not pill.
+- 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).
+- 3D claymation illustrations (mountains, characters, abstract shapes) as full-bleed hero artifacts \u2014 the brand's most-recognized visual element.
+- Custom rounded Plain Black display typeface at 500 weight with -1 to -2.5px letter-spacing on display sizes.
+- 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.
+- Product UI fragments embedded inside colored cards at small scale \u2014 agent run logs, sequencer flows, enrichment results.
+- Section rhythm \`{spacing.section}\` (96px) between major bands.
+- Footer is cream-tinted (\`{colors.surface-soft}\`) \u2014 Clay does NOT use a dark footer. Even the closing band stays warm-light.
+
+## Colors
+
+### Brand & Accent
+- **Primary** (\`{colors.primary}\` \u2014 #0a0a0a): All primary CTAs, h1/h2 ink type. Near-black with slight warmth.
+- **Brand Pink** (\`{colors.brand-pink}\` \u2014 #ff4d8b): Hot-pink feature card surface. Sequencer / outbound feature pages.
+- **Brand Teal** (\`{colors.brand-teal}\` \u2014 #1a3a3a): Deep teal-green feature card. Often the featured pricing tier.
+- **Brand Lavender** (\`{colors.brand-lavender}\` \u2014 #b8a4ed): Soft lavender feature card.
+- **Brand Peach** (\`{colors.brand-peach}\` \u2014 #ffb084): Warm peach feature card.
+- **Brand Ochre** (\`{colors.brand-ochre}\` \u2014 #e8b94a): Mustard / ochre feature card and illustration accents.
+- **Brand Mint** (\`{colors.brand-mint}\` \u2014 #a4d4c5): Mint accent on illustrations and small badges.
+- **Brand Coral** (\`{colors.brand-coral}\` \u2014 #ff6b5a): Coral accent for highlights.
+
+### Surface
+- **Canvas** (\`{colors.canvas}\` \u2014 #fffaf0): The default page floor. Cream-tinted white.
+- **Surface Soft** (\`{colors.surface-soft}\` \u2014 #faf5e8): Footer and CTA-band background.
+- **Surface Card** (\`{colors.surface-card}\` \u2014 #f5f0e0): Cream feature cards, testimonial cards.
+- **Surface Strong** (\`{colors.surface-strong}\` \u2014 #ebe6d6): Stronger cream for emphasized bands.
+- **Surface Dark** (\`{colors.surface-dark}\` \u2014 #0a1a1a): Dark teal-tinted near-black for occasional dark cards (rare).
+- **Surface Dark Elevated** (\`{colors.surface-dark-elevated}\` \u2014 #1a2a2a): Elevated dark cards.
+- **Hairline** (\`{colors.hairline}\` \u2014 #e5e5e5): 1px borders on cards and inputs.
+
+### Text
+- **Ink** (\`{colors.ink}\` \u2014 #0a0a0a): Headlines and primary text.
+- **Body Strong** (\`{colors.body-strong}\` \u2014 #1a1a1a): Emphasized body, lead paragraphs.
+- **Body** (\`{colors.body}\` \u2014 #3a3a3a): Default running-text.
+- **Muted** (\`{colors.muted}\` \u2014 #6a6a6a): Sub-headings, breadcrumbs, footer body.
+- **Muted Soft** (\`{colors.muted-soft}\` \u2014 #9a9a9a): Captions, fine-print.
+- **On Primary / On Dark** (\`{colors.on-primary}\` \u2014 #ffffff): Text on primary buttons + dark feature cards (teal).
+
+### Semantic
+- **Success** (\`{colors.success}\` \u2014 #22c55e): Success states.
+- **Warning** (\`{colors.warning}\` \u2014 #f59e0b): Warning callouts.
+- **Error** (\`{colors.error}\` \u2014 #ef4444): Validation errors.
+
+## Typography
+
+### Font Family
+The 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.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| \`{typography.display-xl}\` | 72px | 500 | 1.0 | -2.5px | Homepage h1 ("Go to market with unique data") \u2014 Plain Black |
+| \`{typography.display-lg}\` | 56px | 500 | 1.05 | -2px | Section heads \u2014 Plain Black |
+| \`{typography.display-md}\` | 40px | 500 | 1.1 | -1px | Sub-section heads, product names |
+| \`{typography.display-sm}\` | 32px | 500 | 1.15 | -0.5px | CTA-band heads, feature card titles |
+| \`{typography.title-lg}\` | 24px | 600 | 1.3 | -0.3px | Pricing plan names, larger feature titles |
+| \`{typography.title-md}\` | 18px | 600 | 1.4 | 0 | Card titles, intro paragraphs |
+| \`{typography.title-sm}\` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |
+| \`{typography.body-md}\` | 16px | 400 | 1.55 | 0 | Default running-text |
+| \`{typography.body-sm}\` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |
+| \`{typography.caption}\` | 13px | 500 | 1.4 | 0 | Badge labels, captions |
+| \`{typography.caption-uppercase}\` | 12px | 600 | 1.4 | 1.5px | Section labels, "FEATURED" badges |
+| \`{typography.button}\` | 14px | 600 | 1.0 | 0 | Standard button labels |
+| \`{typography.nav-link}\` | 14px | 500 | 1.4 | 0 | Top-nav menu items |
+
+### Principles
+Plain 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.
+
+The 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.
+
+### Note on Font Substitutes
+If Plain Black is unavailable, **Inter** at weight 500 with -0.05em letter-spacing is a usable approximation. **S\xF6hne Breit** at weight Buch is an alternative if licensed. **Recoleta** at weight 500 carries similar rounded-display warmth.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 4px.
+- **Tokens:** \`{spacing.xxs}\` 4px \xB7 \`{spacing.xs}\` 8px \xB7 \`{spacing.sm}\` 12px \xB7 \`{spacing.md}\` 16px \xB7 \`{spacing.lg}\` 24px \xB7 \`{spacing.xl}\` 32px \xB7 \`{spacing.xxl}\` 48px \xB7 \`{spacing.section}\` 96px.
+- **Section padding:** \`{spacing.section}\` (96px) between major editorial bands.
+- **Card internal padding:** \`{spacing.xl}\` (32px) for feature cards and pricing tiers; \`{spacing.lg}\` (24px) for testimonial and product mockup cards.
+
+### Grid & Container
+- **Max content width:** ~1280px centered.
+- **Editorial body:** Single 12-column grid; hero often uses 7/5 split (h1 left, illustration right).
+- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
+- **Pricing grid:** 3-4 up at desktop, 1-up at mobile.
+
+### Whitespace Philosophy
+Clay 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.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat | No shadow, no border | Body sections, top nav, hero |
+| Soft hairline | 1px \`{colors.hairline}\` border | Inputs, small content cards |
+| Saturated card | Brand pink/teal/lavender/peach/ochre fill \u2014 no shadow | Feature cards |
+| Cream card | \`{colors.surface-card}\` background \u2014 no shadow | Testimonial, secondary cards |
+| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (rare) |
+
+The system uses no heavy shadows. Depth comes from the saturated color contrast between cream canvas and bright feature cards.
+
+### Decorative Depth
+- **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.
+- **Mascot characters** appear as inline figures in feature cards and CTAs.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| \`{rounded.xs}\` | 6px | Small badges, dropdown items |
+| \`{rounded.sm}\` | 8px | Small buttons, hairline-border accent |
+| \`{rounded.md}\` | 12px | Standard CTA buttons, text inputs |
+| \`{rounded.lg}\` | 16px | Content cards, testimonial cards, pricing tiers |
+| \`{rounded.xl}\` | 24px | Feature cards (the saturated brand-color cards) |
+| \`{rounded.pill}\` | 9999px | Category tabs, badge pills |
+| \`{rounded.full}\` | 9999px / 50% | Avatars, icon buttons |
+
+## Components
+
+### Top Navigation
+
+**\`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).
+
+### Buttons
+
+**\`button-primary\`** \u2014 Background \`{colors.primary}\` (near-black), text \`{colors.on-primary}\` (white), type \`{typography.button}\` (Inter 14px / 600), padding 12px \xD7 20px, height 44px, rounded \`{rounded.md}\` (12px).
+
+**\`button-secondary\`** \u2014 Cream button with hairline outline. Background \`{colors.canvas}\`, text \`{colors.ink}\`, 1px hairline border.
+
+**\`button-on-color\`** \u2014 White button used over saturated brand-color feature cards. Same shape as primary but inverted (white background, ink text).
+
+**\`button-text-link\`** \u2014 Inline text button, no background. Used for "Sign in" and inline link CTAs.
+
+**\`text-link\`** \u2014 Inline body links in \`{colors.ink}\` with underline.
+
+### Cards & Containers
+
+**\`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).
+
+**\`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.
+
+**\`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).
+
+**\`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.
+
+**\`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).
+
+**\`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}\`.
+
+**\`pricing-tier-card\`** \u2014 Standard tier card. Background \`{colors.canvas}\` with hairline, rounded \`{rounded.lg}\`, padding \`{spacing.xl}\` (32px).
+
+**\`pricing-tier-card-featured\`** \u2014 The featured tier flips to \`{colors.brand-teal}\` (deep teal-green). The teal surface IS the featured signal.
+
+**\`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.
+
+### Inputs & Forms
+
+**\`text-input\`** \u2014 Background \`{colors.canvas}\`, text \`{colors.ink}\`, type \`{typography.body-md}\`, rounded \`{rounded.md}\` (12px), padding 12px \xD7 16px, height 44px. 1px hairline border.
+
+**\`text-input-focused\`** \u2014 Border thickens to ink for emphasis.
+
+### Tabs / Badges
+
+**\`category-tab\`** + **\`category-tab-active\`** \u2014 Pill-shaped tabs in sub-nav. Inactive: transparent + muted text. Active: cream-card background + ink text. Padding 8px \xD7 16px.
+
+**\`badge-pill\`** \u2014 Small cream-fill pill labels in \`{typography.caption}\` (13px / 500), rounded \`{rounded.pill}\`.
+
+### CTA / Footer
+
+**\`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.
+
+**\`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.
+
+## Do's and Don'ts
+
+### Do
+- Anchor every page on the cream canvas (\`{colors.canvas}\` \u2014 #fffaf0). The warm tint differentiates Clay from cool-gray data sites.
+- Use 3D claymation illustrations as hero artifacts. Hand-crafted 3D characters and mountains ARE the brand.
+- 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.
+- Use Plain Black at weight 500 with negative letter-spacing on every display headline.
+- Show product UI fragments inside saturated feature cards. The brand voltage is product-driven, not abstract.
+- Use cream footer (NOT dark). Clay deliberately closes pages with warm cream rather than the standard dark-footer SaaS template.
+- Anchor every band with \`{spacing.section}\` (96px) vertical rhythm.
+
+### Don't
+- Don't use cool grays for canvas. The cream tint is non-negotiable.
+- Don't use a 7th brand-color card. The 6-color palette is saturated enough.
+- Don't bold display weight beyond 500. Plain Black at 700 reads as bombastic.
+- Don't repeat the same brand-color card twice in a row.
+- Don't replace claymation illustrations with flat vector art. The hand-crafted 3D character IS the brand voice.
+- Don't use a dark footer. The cream footer is part of the system's warm-throughout pacing.
+- Don't add hover state styling beyond what the system already encodes.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 768px | Hamburger nav; hero h1 72\u219236px; hero-illustration-card stacks below; feature grids 1-up; pricing 1-up |
+| Tablet | 768\u20131024px | Top nav tightens; feature cards 2-up; pricing 2-up |
+| Desktop | 1024\u20131440px | Full top-nav; 3-up feature cards; 3-up pricing tiers |
+| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |
+
+### Touch Targets
+- \`{component.button-primary}\` at minimum 44 \xD7 44px (matches WCAG AAA).
+- \`{component.text-input}\` height is 44px.
+
+### Collapsing Strategy
+- Top nav collapses to hamburger at < 768px.
+- Hero 7-5 grid \u2192 single-column on mobile.
+- Feature card grids reduce columns rather than scaling.
+- Saturated feature cards retain their colored fill at every breakpoint.
+- Pricing tier cards collapse 4 \u2192 2 \u2192 1.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time. Reference its YAML key (\`{component.feature-card-pink}\`, \`{component.pricing-tier-card-featured}\`).
+2. 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.
+3. Variants of an existing component (\`-active\`, \`-disabled\`) live as separate entries.
+4. Use \`{token.refs}\` everywhere \u2014 never inline hex.
+5. Never document hover.
+6. Display headlines stay Plain Black 500 with negative letter-spacing. Body stays Inter 400.
+7. The cream-throughout palette is a system contract \u2014 don't add a dark footer.
+
+## Known Gaps
+
+- 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.
+- 3D claymation illustrations are commissioned assets, not system tokens \u2014 they're rendered per-page.
+- The mascot characters (named characters that recur across the site) are illustrated assets; their exact lineage and naming are not formalized in tokens.
+- Animation and transition timings (3D illustration parallax on scroll, feature card entrance animations) are not in scope.
+- Form validation states beyond \`{component.text-input-focused}\` are not extracted.
+- 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.
+`;
+export {
+  clayBrief
+};
+//# sourceMappingURL=clay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/clay.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport 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 — hot pink, deep teal, lavender, peach, ochre — 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}\\` — #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) — 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 — 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 — 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}\\` — #fffaf0). The warmth differentiates Clay from cool-gray competitor sites.\n- Dark navy/black primary CTAs (\\`{colors.primary}\\` — #0a0a0a). Buttons rounded \\`{rounded.md}\\` (12px) — 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 — 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 — agent run logs, sequencer flows, enrichment results.\n- Section rhythm \\`{spacing.section}\\` (96px) between major bands.\n- Footer is cream-tinted (\\`{colors.surface-soft}\\`) — 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}\\` — #0a0a0a): All primary CTAs, h1/h2 ink type. Near-black with slight warmth.\n- **Brand Pink** (\\`{colors.brand-pink}\\` — #ff4d8b): Hot-pink feature card surface. Sequencer / outbound feature pages.\n- **Brand Teal** (\\`{colors.brand-teal}\\` — #1a3a3a): Deep teal-green feature card. Often the featured pricing tier.\n- **Brand Lavender** (\\`{colors.brand-lavender}\\` — #b8a4ed): Soft lavender feature card.\n- **Brand Peach** (\\`{colors.brand-peach}\\` — #ffb084): Warm peach feature card.\n- **Brand Ochre** (\\`{colors.brand-ochre}\\` — #e8b94a): Mustard / ochre feature card and illustration accents.\n- **Brand Mint** (\\`{colors.brand-mint}\\` — #a4d4c5): Mint accent on illustrations and small badges.\n- **Brand Coral** (\\`{colors.brand-coral}\\` — #ff6b5a): Coral accent for highlights.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #fffaf0): The default page floor. Cream-tinted white.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #faf5e8): Footer and CTA-band background.\n- **Surface Card** (\\`{colors.surface-card}\\` — #f5f0e0): Cream feature cards, testimonial cards.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #ebe6d6): Stronger cream for emphasized bands.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #0a1a1a): Dark teal-tinted near-black for occasional dark cards (rare).\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1a2a2a): Elevated dark cards.\n- **Hairline** (\\`{colors.hairline}\\` — #e5e5e5): 1px borders on cards and inputs.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #0a0a0a): Headlines and primary text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #1a1a1a): Emphasized body, lead paragraphs.\n- **Body** (\\`{colors.body}\\` — #3a3a3a): Default running-text.\n- **Muted** (\\`{colors.muted}\\` — #6a6a6a): Sub-headings, breadcrumbs, footer body.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #9a9a9a): Captions, fine-print.\n- **On Primary / On Dark** (\\`{colors.on-primary}\\` — #ffffff): Text on primary buttons + dark feature cards (teal).\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #22c55e): Success states.\n- **Warning** (\\`{colors.warning}\\` — #f59e0b): Warning callouts.\n- **Error** (\\`{colors.error}\\` — #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\") — Plain Black |\n| \\`{typography.display-lg}\\` | 56px | 500 | 1.05 | -2px | Section heads — 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öhne 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 · \\`{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) 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 — no shadow | Feature cards |\n| Cream card | \\`{colors.surface-card}\\` background — 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** — mountains, characters, mascots rendered in a hand-crafted 3D style. The brand's most-recognized depth element. Not a token — 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\\`** — 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\\`** — Background \\`{colors.primary}\\` (near-black), text \\`{colors.on-primary}\\` (white), type \\`{typography.button}\\` (Inter 14px / 600), padding 12px × 20px, height 44px, rounded \\`{rounded.md}\\` (12px).\n\n**\\`button-secondary\\`** — Cream button with hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px hairline border.\n\n**\\`button-on-color\\`** — White button used over saturated brand-color feature cards. Same shape as primary but inverted (white background, ink text).\n\n**\\`button-text-link\\`** — Inline text button, no background. Used for \"Sign in\" and inline link CTAs.\n\n**\\`text-link\\`** — Inline body links in \\`{colors.ink}\\` with underline.\n\n### Cards & Containers\n\n**\\`hero-band\\`** — 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\\`** — 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\\`** — 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\\`** — 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\\`** — 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\\`** — 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\\`** — Standard tier card. Background \\`{colors.canvas}\\` with hairline, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px).\n\n**\\`pricing-tier-card-featured\\`** — The featured tier flips to \\`{colors.brand-teal}\\` (deep teal-green). The teal surface IS the featured signal.\n\n**\\`expert-card\\`** — 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\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.md}\\` (12px), padding 12px × 16px, height 44px. 1px hairline border.\n\n**\\`text-input-focused\\`** — Border thickens to ink for emphasis.\n\n### Tabs / Badges\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Pill-shaped tabs in sub-nav. Inactive: transparent + muted text. Active: cream-card background + ink text. Padding 8px × 16px.\n\n**\\`badge-pill\\`** — Small cream-fill pill labels in \\`{typography.caption}\\` (13px / 500), rounded \\`{rounded.pill}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-illustrated\\`** — 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}\\` — usually paired with a 3D illustration of a mascot or scene.\n\n**\\`footer\\`** — 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 — 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}\\` — #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 — pink → teal → lavender → peach → ochre → 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→36px; hero-illustration-card stacks below; feature grids 1-up; pricing 1-up |\n| Tablet | 768–1024px | Top nav tightens; feature cards 2-up; pricing 2-up |\n| Desktop | 1024–1440px | 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 × 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 → 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 → 2 → 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 — 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 — 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 — 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`;\n"],"mappings":";AACO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}