@hex-core/themes 0.2.3 → 0.2.6

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

@@ -1 +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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/clay.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\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":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/clickhouse.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const clickhouseBrief = `---\nversion: alpha\nname: ClickHouse\ndescription: A high-performance database interface anchored on near-pure black canvas with electric yellow as the brand voltage. White typography in confident sans, yellow CTAs, and yellow-text stat numbers carry the brand voice across every page. Code blocks and product UI fragments embed directly in dark cards. The yellow + black pairing (and yellow used scarcely as accent) is the system's signature — brand identity without atmospheric decoration.\n\ncolors:\n  primary: \"#faff69\"\n  primary-active: \"#e6eb52\"\n  primary-disabled: \"#3a3a1f\"\n  ink: \"#ffffff\"\n  body: \"#cccccc\"\n  body-strong: \"#e6e6e6\"\n  muted: \"#888888\"\n  muted-soft: \"#5a5a5a\"\n  hairline: \"#2a2a2a\"\n  hairline-strong: \"#3a3a3a\"\n  canvas: \"#0a0a0a\"\n  surface-soft: \"#121212\"\n  surface-card: \"#1a1a1a\"\n  surface-elevated: \"#242424\"\n  surface-yellow-band: \"#faff69\"\n  on-primary: \"#0a0a0a\"\n  on-dark: \"#ffffff\"\n  on-yellow: \"#0a0a0a\"\n  accent-emerald: \"#22c55e\"\n  accent-rose: \"#ef4444\"\n  accent-blue: \"#3b82f6\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 72px\n    fontWeight: 700\n    lineHeight: 1.05\n    letterSpacing: -2.5px\n  display-lg:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 56px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -2px\n  display-md:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 1.15\n    letterSpacing: -1.5px\n  display-sm:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 32px\n    fontWeight: 700\n    lineHeight: 1.2\n    letterSpacing: -1px\n  title-lg:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 24px\n    fontWeight: 700\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  stat-display:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 56px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: -1.5px\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  code:\n    fontFamily: \"JetBrains Mono, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\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: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\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.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 40px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n  button-icon-circular:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\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.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  hero-stat-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.stat-display}\"\n  feature-card-yellow:\n    backgroundColor: \"{colors.surface-yellow-band}\"\n    textColor: \"{colors.on-yellow}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  feature-card-dark:\n    backgroundColor: \"{colors.surface-card}\"\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-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  product-mockup-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  stat-callout:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.stat-display}\"\n  cta-band-yellow:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 64px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 14px\n    height: 40px\n  text-input-focused:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.md}\"\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n    padding: 8px 14px\n  category-tab-active:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n  badge-pill:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  badge-yellow:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  events-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  customer-logo-strip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.body-md}\"\n    padding: 32px\n  footer:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nClickHouse's marketing surface is the highest-contrast interface in the database / data-platform category. The base atmosphere is **near-pure black canvas** (\\`{colors.canvas}\\` — #0a0a0a) with **electric yellow** (\\`{colors.primary}\\` — #faff69) as the singular brand voltage. The yellow handles every primary CTA, every stat-callout number, every \"GET STARTED\" badge — used scarcely on individual elements but generously on full-bleed yellow CTA cards. White typography in confident weight-700 sans-serif anchors the editorial body.\n\nThe yellow + black pairing is what makes ClickHouse instantly recognizable. Where Snowflake uses cool blue gradients and Databricks uses red + slate, ClickHouse leans hard into one electric yellow that does all the brand work. Code blocks, terminal output, and product UI fragments embed directly in dark \\`{colors.surface-card}\\` (#1a1a1a) cards across every page.\n\nType voice runs **Inter** at confident weights — 700 for display headlines (with negative letter-spacing -1 to -2.5px), 600 for sub-titles and buttons, 400 for body. The system has no display-serif counter-voice; everything is one geometric humanist sans, scaled and weighted for hierarchy.\n\n**Key Characteristics:**\n- Near-pure black canvas (\\`{colors.canvas}\\` — #0a0a0a) with white type. The system has no light-mode marketing surface.\n- Electric yellow primary (\\`{colors.primary}\\` — #faff69). Used on primary CTAs, large stat-callout numbers (\"2.8k+\", \"74k+\"), and full-bleed yellow CTA bands.\n- Inter at weight 700 for display, weight 600 for sub-titles + buttons, weight 400 for body. No serif counterpoint.\n- Dark surface cards (\\`{colors.surface-card}\\` — #1a1a1a) for feature cards, code windows, and product mockups. Cards barely lighter than canvas — color-block contrast is subtle.\n- Code blocks render in JetBrains Mono inside \\`{colors.surface-card}\\`. SQL syntax-highlighted in muted blues / yellows / grays.\n- Stat numbers in yellow + sans-700 + huge size carry the credibility moment (\"779+\", \"2.8k+\", \"47k+\" community / contributor / star counts).\n- Border radius is hierarchical: \\`{rounded.md}\\` (8px) for buttons, \\`{rounded.lg}\\` (12px) for content cards. No pill except in tag badges.\n- Section rhythm \\`{spacing.section}\\` (96px) between major editorial bands.\n\n## Colors\n\n### Brand & Accent\n- **Primary (Electric Yellow)** (\\`{colors.primary}\\` — #faff69): The signature brand color. All primary CTA backgrounds, large stat-callout numbers, full-bleed yellow CTA cards. The yellow is the brand.\n- **Primary Active** (\\`{colors.primary-active}\\` — #e6eb52): Press / hover-darker variant.\n- **Primary Disabled** (\\`{colors.primary-disabled}\\` — #3a3a1f): Desaturated dark-yellow on dark canvas.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #0a0a0a): The default page floor. Near-pure black.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #121212): Section dividers, very-soft band tints.\n- **Surface Card** (\\`{colors.surface-card}\\` — #1a1a1a): Feature cards, code windows, product mockups, pricing tier cards.\n- **Surface Elevated** (\\`{colors.surface-elevated}\\` — #242424): Nested cards inside larger dark cards.\n- **Surface Yellow Band** (\\`{colors.surface-yellow-band}\\` — #faff69): The yellow CTA card / band fill — same hex as primary.\n- **Hairline** (\\`{colors.hairline}\\` — #2a2a2a): 1px borders on cards.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #3a3a3a): Heavier divider on input underlines and emphasis.\n\n### Text\n- **Ink / On Dark** (\\`{colors.on-dark}\\` — #ffffff): All headline and primary text.\n- **Body** (\\`{colors.body}\\` — #cccccc): Default running-text color.\n- **Body Strong** (\\`{colors.body-strong}\\` — #e6e6e6): Emphasized paragraphs.\n- **Muted** (\\`{colors.muted}\\` — #888888): Footer links, captions, breadcrumbs.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #5a5a5a): Tertiary text — fine print.\n- **On Primary / On Yellow** (\\`{colors.on-primary}\\` / \\`{colors.on-yellow}\\` — #0a0a0a): Black text on yellow CTAs and yellow CTA bands. The high-contrast yellow + black combo is the brand action signal.\n\n### Semantic / Accent\n- **Accent Emerald** (\\`{colors.accent-emerald}\\` — #22c55e): Success states, \"active\" status indicators in product UI.\n- **Accent Rose** (\\`{colors.accent-rose}\\` — #ef4444): Error states, \"down\" indicators.\n- **Accent Blue** (\\`{colors.accent-blue}\\` — #3b82f6): Info states, code-syntax highlighting.\n\n## Typography\n\n### Font Family\nThe system runs **Inter** for everything — display, body, navigation, buttons, captions. **JetBrains Mono** handles code blocks. The fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe single-family approach is deliberate: Inter at weight 700 + 600 + 400 covers the entire hierarchy without needing a serif or display counter-voice. The geometric humanist character of Inter at confident bold weight gives ClickHouse a precise, engineered feel that matches the database's performance-first positioning.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 72px | 700 | 1.05 | -2.5px | Homepage h1 (\"The leading database for AI\") |\n| \\`{typography.display-lg}\\` | 56px | 700 | 1.1 | -2px | Section heads |\n| \\`{typography.display-md}\\` | 40px | 700 | 1.15 | -1.5px | Sub-section heads, CTA-band heads |\n| \\`{typography.display-sm}\\` | 32px | 700 | 1.2 | -1px | Card titles, pricing tier prices |\n| \\`{typography.title-lg}\\` | 24px | 700 | 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.stat-display}\\` | 56px | 700 | 1.0 | -1.5px | Stat callouts (\"779+\", \"47k+\") — ALWAYS yellow |\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, \"NEW\" badges |\n| \\`{typography.code}\\` | 14px | 400 | 1.55 | 0 | Code blocks — JetBrains Mono |\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\nDisplay weights stay at 700 across all sizes. Negative letter-spacing (-1 to -2.5px) is essential — Inter at weight 700 without negative tracking reads as too wide / Apple-marketing. The tightened tracking gives ClickHouse the precise, engineered feel.\n\nBody and labels stay at weights 400 / 500 / 600. The hierarchy is built on size + weight, not on family contrast.\n\n### Note on Font Substitutes\nInter is open-source and the documented choice. **Söhne** is a close commercial alternative if licensed. **Geist** is another modern alternative.\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 bands.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards, pricing tiers; \\`{spacing.lg}\\` (24px) for code-window cards and event 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, code mockup 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\nClickHouse uses dense, slightly-compressed whitespace appropriate for a developer-tooling brand — generous enough to read editorially, tight enough to feel \"engineering-grade\" rather than \"marketing-soft.\" Section rhythm at 96px is standard; card internal padding stays at 32px for feature cards.\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 | Code-window cards, content cards |\n| Surface card | \\`{colors.surface-card}\\` background — no shadow | Feature cards, pricing tiers, event cards |\n| Yellow band | \\`{colors.primary}\\` background — no shadow | Full-bleed yellow CTA cards / bands |\n\nThe system uses no drop shadows. Depth comes from the contrast between black canvas and \\`{colors.surface-card}\\` (a barely-lighter-than-canvas tone) — the contrast is subtle, more like an \"engineering-grade dim panel\" than an \"elevated card.\"\n\n### Decorative Depth\n- Code-window cards carry their own internal product chrome — line numbers, syntax highlighting, status bars at the bottom — adding visual density without external shadows.\n- The yellow-on-black contrast does most of the elevation work for CTAs.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 4px | Reserved for badge accents |\n| \\`{rounded.sm}\\` | 6px | Small inline buttons |\n| \\`{rounded.md}\\` | 8px | Standard CTA buttons, text inputs |\n| \\`{rounded.lg}\\` | 12px | Content cards, code-window cards, pricing tiers |\n| \\`{rounded.pill}\\` | 9999px | Badge pills |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatars, icon buttons |\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Black nav bar pinned to top. 64px tall, \\`{colors.canvas}\\` background. Carries the ClickHouse logo + wordmark at left, primary horizontal menu (Product, Use Cases, Pricing, Resources, Customers) center-left, right-side cluster with \"Sign in\" + \"Get Started\" \\`{component.button-primary}\\` (yellow). Menu items in \\`{typography.nav-link}\\` (Inter 14px / 500).\n\n### Buttons\n\n**\\`button-primary\\`** — The signature yellow CTA. Background \\`{colors.primary}\\` (#faff69), text \\`{colors.on-primary}\\` (black), type \\`{typography.button}\\` (Inter 14px / 600), padding 12px × 20px, height 40px, rounded \\`{rounded.md}\\` (8px). The yellow + black combination is iconic.\n\n**\\`button-secondary\\`** — Dark surface card button. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, same shape as primary.\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.primary}\\` (yellow on dark). Underlined.\n\n**\\`button-icon-circular\\`** — 36 × 36 circular icon button on dark.\n\n### Cards & Containers\n\n**\\`hero-band\\`** — Black-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, code-window or product mockup on the right. Vertical padding \\`{spacing.section}\\` (96px).\n\n**\\`hero-stat-card\\`** — Yellow stat-display numbers (\"779+\", \"47k+\") inline on the canvas. No card surface — just yellow text in \\`{typography.stat-display}\\` (56px / 700).\n\n**\\`feature-card-yellow\\`** — Full-bleed yellow card (\"Built for every modern data challenge\"). Background \\`{colors.primary}\\`, text \\`{colors.on-yellow}\\` (black), rounded \\`{rounded.lg}\\` (12px), padding \\`{spacing.xl}\\` (32px). The yellow card IS the visual emphasis.\n\n**\\`feature-card-dark\\`** — Standard dark feature card. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px).\n\n**\\`code-window-card\\`** — Dark card showing a SQL code block. Background \\`{colors.surface-card}\\`, code in JetBrains Mono with syntax highlighting, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). Often the hero's right-side artifact on developer-focused pages.\n\n**\\`product-mockup-card\\`** — Card showing actual ClickHouse product UI (query editor, dashboard, monitoring panel). Same shape as \\`{component.feature-card-dark}\\` but with embedded product chrome inside.\n\n**\\`pricing-tier-card\\`** — Standard tier card. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px).\n\n**\\`pricing-tier-card-featured\\`** — The featured tier flips to \\`{colors.primary}\\` (yellow). The yellow surface IS the featured signal.\n\n**\\`stat-callout\\`** — Inline yellow stat numbers (\"779+\", \"2.8k+\", \"47k+\"). Transparent background, text \\`{colors.primary}\\`, type \\`{typography.stat-display}\\`. Used as a flat layout block, not a card with surface.\n\n**\\`events-card\\`** — Used on /company/events. Dark card with event title, date in \\`{typography.caption-uppercase}\\`, location, and a \"Register\" CTA. Rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\`.\n\n**\\`customer-logo-strip\\`** — Horizontal monochrome customer-logo strip. Background \\`{colors.canvas}\\`, logos in \\`{colors.muted}\\`, vertical padding \\`{spacing.xl}\\` (32px).\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Dark text input. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.md}\\` (8px), padding 10px × 14px, height 40px.\n\n**\\`text-input-focused\\`** — Border thickens to \\`{colors.primary}\\` (yellow) for emphasis.\n\n### Tags / Badges\n\n**\\`badge-pill\\`** — Small dark pill label. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, type \\`{typography.caption}\\`, rounded \\`{rounded.pill}\\`.\n\n**\\`badge-yellow\\`** — Yellow pill for \"NEW\", \"GET STARTED\" emphasis. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`.\n\n### Tab / Filter\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Dark tab navigation. Inactive: transparent + muted text. Active: surface-card background + on-dark text. Padding 8px × 14px, rounded \\`{rounded.md}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-yellow\\`** — A pre-footer \"Deploy your way\" CTA band. Full yellow fill, black type, rounded \\`{rounded.lg}\\`, padding 64px. Carries an h2 in \\`{typography.display-md}\\` and a CTA — usually a black-button on the yellow surface.\n\n**\\`footer\\`** — Black footer that closes every page. Background \\`{colors.canvas}\\`, text \\`{colors.muted}\\`. 4-column link list at desktop covering Product / Use Cases / Resources / Company. Vertical padding 64px. The ClickHouse wordmark sits at the top in \\`{colors.on-dark}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page on the black canvas. The yellow + black pairing is the brand voltage.\n- Reserve \\`{colors.primary}\\` (yellow) for primary CTAs, stat-callout numbers, and full-bleed yellow CTA bands. The yellow's scarcity at the element level + abundance at the band level is what makes it powerful.\n- Use Inter at weight 700 for every display headline, with -1 to -2.5px letter-spacing.\n- Show actual SQL code blocks inside \\`{component.code-window-card}\\` — ClickHouse is a database; show the query, don't paint marketing illustrations of queries.\n- Use \\`{component.stat-callout}\\` numbers to establish credibility (community size, contributors, performance benchmarks). The yellow stat numbers are signature.\n- Anchor every band with \\`{spacing.section}\\` (96px) vertical rhythm.\n\n### Don't\n- Don't introduce a second brand color. ClickHouse is monochromatic + yellow.\n- Don't bold display weight beyond 700 or use weight 500 for headlines. The hierarchy depends on size, not on weight gradation.\n- Don't use yellow for body text or large surface fills outside of intentional yellow cards.\n- Don't use rounded buttons / pills outside of small badges. The standard button radius is 8px (md).\n- Don't repeat the same surface mode in two consecutive bands. Black canvas → dark feature card → yellow CTA card → black canvas → code-window card.\n- Don't replace SQL code mockups with abstract illustrations. The code IS the marketing voltage.\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; code-window-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-4 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 40 × 40px.\n- \\`{component.button-icon-circular}\\` at exactly 36 × 36 — slightly under WCAG 44, visually centered.\n- \\`{component.text-input}\\` height is 40px.\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- Code-window cards retain font-size; horizontal scroll inside the card on mobile.\n- Pricing tier cards collapse 4 → 2 → 1; featured tier yellow stays distinct.\n\n### Image Behavior\n- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.\n- Customer logos in monochrome strip retain native widths; row wraps on mobile.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.code-window-card}\\`, \\`{component.pricing-tier-card-featured}\\`).\n2. Variants of an existing component (\\`-active\\`, \\`-disabled\\`, \\`-focused\\`) live as separate entries.\n3. Use \\`{token.refs}\\` everywhere — never inline hex.\n4. Never document hover. Default and Active/Pressed states only.\n5. Display headlines stay Inter 700 with negative letter-spacing. Body stays Inter 400.\n6. The yellow + black pairing is the brand contract. Don't soften with secondary accents.\n7. When in doubt about emphasis: bigger Inter 700 before adding color.\n\n## Known Gaps\n\n- The exact yellow hex (#faff69) was sampled from the screenshot; ClickHouse may publish an official brand color slightly differently.\n- Inter weight axis values beyond 400 / 500 / 600 / 700 are not formalized — only the static weights observed are documented.\n- Animation and transition timings (code typewriter effects, stat counter animations) are not in scope.\n- Form validation states beyond \\`{component.text-input-focused}\\` are not extracted.\n- The actual ClickHouse Cloud product surface (query console, monitoring dashboards, table browser) shares some tokens with the marketing site but adds many product-specific components that are out of scope.\n- The customer logo strip's exact opacity / treatment varies — the muted gray is approximate.\n`;\n"],"mappings":";AACO,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/clickhouse.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const clickhouseBrief = `---\nversion: alpha\nname: ClickHouse\ndescription: A high-performance database interface anchored on near-pure black canvas with electric yellow as the brand voltage. White typography in confident sans, yellow CTAs, and yellow-text stat numbers carry the brand voice across every page. Code blocks and product UI fragments embed directly in dark cards. The yellow + black pairing (and yellow used scarcely as accent) is the system's signature — brand identity without atmospheric decoration.\n\ncolors:\n  primary: \"#faff69\"\n  primary-active: \"#e6eb52\"\n  primary-disabled: \"#3a3a1f\"\n  ink: \"#ffffff\"\n  body: \"#cccccc\"\n  body-strong: \"#e6e6e6\"\n  muted: \"#888888\"\n  muted-soft: \"#5a5a5a\"\n  hairline: \"#2a2a2a\"\n  hairline-strong: \"#3a3a3a\"\n  canvas: \"#0a0a0a\"\n  surface-soft: \"#121212\"\n  surface-card: \"#1a1a1a\"\n  surface-elevated: \"#242424\"\n  surface-yellow-band: \"#faff69\"\n  on-primary: \"#0a0a0a\"\n  on-dark: \"#ffffff\"\n  on-yellow: \"#0a0a0a\"\n  accent-emerald: \"#22c55e\"\n  accent-rose: \"#ef4444\"\n  accent-blue: \"#3b82f6\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 72px\n    fontWeight: 700\n    lineHeight: 1.05\n    letterSpacing: -2.5px\n  display-lg:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 56px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -2px\n  display-md:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 1.15\n    letterSpacing: -1.5px\n  display-sm:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 32px\n    fontWeight: 700\n    lineHeight: 1.2\n    letterSpacing: -1px\n  title-lg:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 24px\n    fontWeight: 700\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  stat-display:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 56px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: -1.5px\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  code:\n    fontFamily: \"JetBrains Mono, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\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: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\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.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 40px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n  button-icon-circular:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\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.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  hero-stat-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.stat-display}\"\n  feature-card-yellow:\n    backgroundColor: \"{colors.surface-yellow-band}\"\n    textColor: \"{colors.on-yellow}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  feature-card-dark:\n    backgroundColor: \"{colors.surface-card}\"\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-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  product-mockup-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  stat-callout:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.stat-display}\"\n  cta-band-yellow:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 64px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 14px\n    height: 40px\n  text-input-focused:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.md}\"\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n    padding: 8px 14px\n  category-tab-active:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n  badge-pill:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  badge-yellow:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  events-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  customer-logo-strip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.body-md}\"\n    padding: 32px\n  footer:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nClickHouse's marketing surface is the highest-contrast interface in the database / data-platform category. The base atmosphere is **near-pure black canvas** (\\`{colors.canvas}\\` — #0a0a0a) with **electric yellow** (\\`{colors.primary}\\` — #faff69) as the singular brand voltage. The yellow handles every primary CTA, every stat-callout number, every \"GET STARTED\" badge — used scarcely on individual elements but generously on full-bleed yellow CTA cards. White typography in confident weight-700 sans-serif anchors the editorial body.\n\nThe yellow + black pairing is what makes ClickHouse instantly recognizable. Where Snowflake uses cool blue gradients and Databricks uses red + slate, ClickHouse leans hard into one electric yellow that does all the brand work. Code blocks, terminal output, and product UI fragments embed directly in dark \\`{colors.surface-card}\\` (#1a1a1a) cards across every page.\n\nType voice runs **Inter** at confident weights — 700 for display headlines (with negative letter-spacing -1 to -2.5px), 600 for sub-titles and buttons, 400 for body. The system has no display-serif counter-voice; everything is one geometric humanist sans, scaled and weighted for hierarchy.\n\n**Key Characteristics:**\n- Near-pure black canvas (\\`{colors.canvas}\\` — #0a0a0a) with white type. The system has no light-mode marketing surface.\n- Electric yellow primary (\\`{colors.primary}\\` — #faff69). Used on primary CTAs, large stat-callout numbers (\"2.8k+\", \"74k+\"), and full-bleed yellow CTA bands.\n- Inter at weight 700 for display, weight 600 for sub-titles + buttons, weight 400 for body. No serif counterpoint.\n- Dark surface cards (\\`{colors.surface-card}\\` — #1a1a1a) for feature cards, code windows, and product mockups. Cards barely lighter than canvas — color-block contrast is subtle.\n- Code blocks render in JetBrains Mono inside \\`{colors.surface-card}\\`. SQL syntax-highlighted in muted blues / yellows / grays.\n- Stat numbers in yellow + sans-700 + huge size carry the credibility moment (\"779+\", \"2.8k+\", \"47k+\" community / contributor / star counts).\n- Border radius is hierarchical: \\`{rounded.md}\\` (8px) for buttons, \\`{rounded.lg}\\` (12px) for content cards. No pill except in tag badges.\n- Section rhythm \\`{spacing.section}\\` (96px) between major editorial bands.\n\n## Colors\n\n### Brand & Accent\n- **Primary (Electric Yellow)** (\\`{colors.primary}\\` — #faff69): The signature brand color. All primary CTA backgrounds, large stat-callout numbers, full-bleed yellow CTA cards. The yellow is the brand.\n- **Primary Active** (\\`{colors.primary-active}\\` — #e6eb52): Press / hover-darker variant.\n- **Primary Disabled** (\\`{colors.primary-disabled}\\` — #3a3a1f): Desaturated dark-yellow on dark canvas.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #0a0a0a): The default page floor. Near-pure black.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #121212): Section dividers, very-soft band tints.\n- **Surface Card** (\\`{colors.surface-card}\\` — #1a1a1a): Feature cards, code windows, product mockups, pricing tier cards.\n- **Surface Elevated** (\\`{colors.surface-elevated}\\` — #242424): Nested cards inside larger dark cards.\n- **Surface Yellow Band** (\\`{colors.surface-yellow-band}\\` — #faff69): The yellow CTA card / band fill — same hex as primary.\n- **Hairline** (\\`{colors.hairline}\\` — #2a2a2a): 1px borders on cards.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #3a3a3a): Heavier divider on input underlines and emphasis.\n\n### Text\n- **Ink / On Dark** (\\`{colors.on-dark}\\` — #ffffff): All headline and primary text.\n- **Body** (\\`{colors.body}\\` — #cccccc): Default running-text color.\n- **Body Strong** (\\`{colors.body-strong}\\` — #e6e6e6): Emphasized paragraphs.\n- **Muted** (\\`{colors.muted}\\` — #888888): Footer links, captions, breadcrumbs.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #5a5a5a): Tertiary text — fine print.\n- **On Primary / On Yellow** (\\`{colors.on-primary}\\` / \\`{colors.on-yellow}\\` — #0a0a0a): Black text on yellow CTAs and yellow CTA bands. The high-contrast yellow + black combo is the brand action signal.\n\n### Semantic / Accent\n- **Accent Emerald** (\\`{colors.accent-emerald}\\` — #22c55e): Success states, \"active\" status indicators in product UI.\n- **Accent Rose** (\\`{colors.accent-rose}\\` — #ef4444): Error states, \"down\" indicators.\n- **Accent Blue** (\\`{colors.accent-blue}\\` — #3b82f6): Info states, code-syntax highlighting.\n\n## Typography\n\n### Font Family\nThe system runs **Inter** for everything — display, body, navigation, buttons, captions. **JetBrains Mono** handles code blocks. The fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe single-family approach is deliberate: Inter at weight 700 + 600 + 400 covers the entire hierarchy without needing a serif or display counter-voice. The geometric humanist character of Inter at confident bold weight gives ClickHouse a precise, engineered feel that matches the database's performance-first positioning.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 72px | 700 | 1.05 | -2.5px | Homepage h1 (\"The leading database for AI\") |\n| \\`{typography.display-lg}\\` | 56px | 700 | 1.1 | -2px | Section heads |\n| \\`{typography.display-md}\\` | 40px | 700 | 1.15 | -1.5px | Sub-section heads, CTA-band heads |\n| \\`{typography.display-sm}\\` | 32px | 700 | 1.2 | -1px | Card titles, pricing tier prices |\n| \\`{typography.title-lg}\\` | 24px | 700 | 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.stat-display}\\` | 56px | 700 | 1.0 | -1.5px | Stat callouts (\"779+\", \"47k+\") — ALWAYS yellow |\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, \"NEW\" badges |\n| \\`{typography.code}\\` | 14px | 400 | 1.55 | 0 | Code blocks — JetBrains Mono |\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\nDisplay weights stay at 700 across all sizes. Negative letter-spacing (-1 to -2.5px) is essential — Inter at weight 700 without negative tracking reads as too wide / Apple-marketing. The tightened tracking gives ClickHouse the precise, engineered feel.\n\nBody and labels stay at weights 400 / 500 / 600. The hierarchy is built on size + weight, not on family contrast.\n\n### Note on Font Substitutes\nInter is open-source and the documented choice. **Söhne** is a close commercial alternative if licensed. **Geist** is another modern alternative.\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 bands.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards, pricing tiers; \\`{spacing.lg}\\` (24px) for code-window cards and event 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, code mockup 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\nClickHouse uses dense, slightly-compressed whitespace appropriate for a developer-tooling brand — generous enough to read editorially, tight enough to feel \"engineering-grade\" rather than \"marketing-soft.\" Section rhythm at 96px is standard; card internal padding stays at 32px for feature cards.\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 | Code-window cards, content cards |\n| Surface card | \\`{colors.surface-card}\\` background — no shadow | Feature cards, pricing tiers, event cards |\n| Yellow band | \\`{colors.primary}\\` background — no shadow | Full-bleed yellow CTA cards / bands |\n\nThe system uses no drop shadows. Depth comes from the contrast between black canvas and \\`{colors.surface-card}\\` (a barely-lighter-than-canvas tone) — the contrast is subtle, more like an \"engineering-grade dim panel\" than an \"elevated card.\"\n\n### Decorative Depth\n- Code-window cards carry their own internal product chrome — line numbers, syntax highlighting, status bars at the bottom — adding visual density without external shadows.\n- The yellow-on-black contrast does most of the elevation work for CTAs.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 4px | Reserved for badge accents |\n| \\`{rounded.sm}\\` | 6px | Small inline buttons |\n| \\`{rounded.md}\\` | 8px | Standard CTA buttons, text inputs |\n| \\`{rounded.lg}\\` | 12px | Content cards, code-window cards, pricing tiers |\n| \\`{rounded.pill}\\` | 9999px | Badge pills |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatars, icon buttons |\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Black nav bar pinned to top. 64px tall, \\`{colors.canvas}\\` background. Carries the ClickHouse logo + wordmark at left, primary horizontal menu (Product, Use Cases, Pricing, Resources, Customers) center-left, right-side cluster with \"Sign in\" + \"Get Started\" \\`{component.button-primary}\\` (yellow). Menu items in \\`{typography.nav-link}\\` (Inter 14px / 500).\n\n### Buttons\n\n**\\`button-primary\\`** — The signature yellow CTA. Background \\`{colors.primary}\\` (#faff69), text \\`{colors.on-primary}\\` (black), type \\`{typography.button}\\` (Inter 14px / 600), padding 12px × 20px, height 40px, rounded \\`{rounded.md}\\` (8px). The yellow + black combination is iconic.\n\n**\\`button-secondary\\`** — Dark surface card button. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, same shape as primary.\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.primary}\\` (yellow on dark). Underlined.\n\n**\\`button-icon-circular\\`** — 36 × 36 circular icon button on dark.\n\n### Cards & Containers\n\n**\\`hero-band\\`** — Black-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, code-window or product mockup on the right. Vertical padding \\`{spacing.section}\\` (96px).\n\n**\\`hero-stat-card\\`** — Yellow stat-display numbers (\"779+\", \"47k+\") inline on the canvas. No card surface — just yellow text in \\`{typography.stat-display}\\` (56px / 700).\n\n**\\`feature-card-yellow\\`** — Full-bleed yellow card (\"Built for every modern data challenge\"). Background \\`{colors.primary}\\`, text \\`{colors.on-yellow}\\` (black), rounded \\`{rounded.lg}\\` (12px), padding \\`{spacing.xl}\\` (32px). The yellow card IS the visual emphasis.\n\n**\\`feature-card-dark\\`** — Standard dark feature card. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px).\n\n**\\`code-window-card\\`** — Dark card showing a SQL code block. Background \\`{colors.surface-card}\\`, code in JetBrains Mono with syntax highlighting, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). Often the hero's right-side artifact on developer-focused pages.\n\n**\\`product-mockup-card\\`** — Card showing actual ClickHouse product UI (query editor, dashboard, monitoring panel). Same shape as \\`{component.feature-card-dark}\\` but with embedded product chrome inside.\n\n**\\`pricing-tier-card\\`** — Standard tier card. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px).\n\n**\\`pricing-tier-card-featured\\`** — The featured tier flips to \\`{colors.primary}\\` (yellow). The yellow surface IS the featured signal.\n\n**\\`stat-callout\\`** — Inline yellow stat numbers (\"779+\", \"2.8k+\", \"47k+\"). Transparent background, text \\`{colors.primary}\\`, type \\`{typography.stat-display}\\`. Used as a flat layout block, not a card with surface.\n\n**\\`events-card\\`** — Used on /company/events. Dark card with event title, date in \\`{typography.caption-uppercase}\\`, location, and a \"Register\" CTA. Rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\`.\n\n**\\`customer-logo-strip\\`** — Horizontal monochrome customer-logo strip. Background \\`{colors.canvas}\\`, logos in \\`{colors.muted}\\`, vertical padding \\`{spacing.xl}\\` (32px).\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Dark text input. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.md}\\` (8px), padding 10px × 14px, height 40px.\n\n**\\`text-input-focused\\`** — Border thickens to \\`{colors.primary}\\` (yellow) for emphasis.\n\n### Tags / Badges\n\n**\\`badge-pill\\`** — Small dark pill label. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, type \\`{typography.caption}\\`, rounded \\`{rounded.pill}\\`.\n\n**\\`badge-yellow\\`** — Yellow pill for \"NEW\", \"GET STARTED\" emphasis. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`.\n\n### Tab / Filter\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Dark tab navigation. Inactive: transparent + muted text. Active: surface-card background + on-dark text. Padding 8px × 14px, rounded \\`{rounded.md}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-yellow\\`** — A pre-footer \"Deploy your way\" CTA band. Full yellow fill, black type, rounded \\`{rounded.lg}\\`, padding 64px. Carries an h2 in \\`{typography.display-md}\\` and a CTA — usually a black-button on the yellow surface.\n\n**\\`footer\\`** — Black footer that closes every page. Background \\`{colors.canvas}\\`, text \\`{colors.muted}\\`. 4-column link list at desktop covering Product / Use Cases / Resources / Company. Vertical padding 64px. The ClickHouse wordmark sits at the top in \\`{colors.on-dark}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page on the black canvas. The yellow + black pairing is the brand voltage.\n- Reserve \\`{colors.primary}\\` (yellow) for primary CTAs, stat-callout numbers, and full-bleed yellow CTA bands. The yellow's scarcity at the element level + abundance at the band level is what makes it powerful.\n- Use Inter at weight 700 for every display headline, with -1 to -2.5px letter-spacing.\n- Show actual SQL code blocks inside \\`{component.code-window-card}\\` — ClickHouse is a database; show the query, don't paint marketing illustrations of queries.\n- Use \\`{component.stat-callout}\\` numbers to establish credibility (community size, contributors, performance benchmarks). The yellow stat numbers are signature.\n- Anchor every band with \\`{spacing.section}\\` (96px) vertical rhythm.\n\n### Don't\n- Don't introduce a second brand color. ClickHouse is monochromatic + yellow.\n- Don't bold display weight beyond 700 or use weight 500 for headlines. The hierarchy depends on size, not on weight gradation.\n- Don't use yellow for body text or large surface fills outside of intentional yellow cards.\n- Don't use rounded buttons / pills outside of small badges. The standard button radius is 8px (md).\n- Don't repeat the same surface mode in two consecutive bands. Black canvas → dark feature card → yellow CTA card → black canvas → code-window card.\n- Don't replace SQL code mockups with abstract illustrations. The code IS the marketing voltage.\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; code-window-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-4 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 40 × 40px.\n- \\`{component.button-icon-circular}\\` at exactly 36 × 36 — slightly under WCAG 44, visually centered.\n- \\`{component.text-input}\\` height is 40px.\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- Code-window cards retain font-size; horizontal scroll inside the card on mobile.\n- Pricing tier cards collapse 4 → 2 → 1; featured tier yellow stays distinct.\n\n### Image Behavior\n- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.\n- Customer logos in monochrome strip retain native widths; row wraps on mobile.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.code-window-card}\\`, \\`{component.pricing-tier-card-featured}\\`).\n2. Variants of an existing component (\\`-active\\`, \\`-disabled\\`, \\`-focused\\`) live as separate entries.\n3. Use \\`{token.refs}\\` everywhere — never inline hex.\n4. Never document hover. Default and Active/Pressed states only.\n5. Display headlines stay Inter 700 with negative letter-spacing. Body stays Inter 400.\n6. The yellow + black pairing is the brand contract. Don't soften with secondary accents.\n7. When in doubt about emphasis: bigger Inter 700 before adding color.\n\n## Known Gaps\n\n- The exact yellow hex (#faff69) was sampled from the screenshot; ClickHouse may publish an official brand color slightly differently.\n- Inter weight axis values beyond 400 / 500 / 600 / 700 are not formalized — only the static weights observed are documented.\n- Animation and transition timings (code typewriter effects, stat counter animations) are not in scope.\n- Form validation states beyond \\`{component.text-input-focused}\\` are not extracted.\n- The actual ClickHouse Cloud product surface (query console, monitoring dashboards, table browser) shares some tokens with the marketing site but adds many product-specific components that are out of scope.\n- The customer logo strip's exact opacity / treatment varies — the muted gray is approximate.\n`;\n"],"mappings":";AACO,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/cohere.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/cohere.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const cohereBrief = `---\nversion: alpha\nname: Cohere\ndescription: Cohere's 2026 web system is a controlled enterprise AI interface built from stark white editorial space, deep green-black product bands, soft mineral surfaces, rounded media cards, and a distinctive type split between monospaced-feeling display headlines and precise Unica77 UI text.\n\ncolors:\n  primary: \"#17171c\"\n  cohere-black: \"#000000\"\n  ink: \"#212121\"\n  deep-green: \"#003c33\"\n  dark-navy: \"#071829\"\n  canvas: \"#ffffff\"\n  soft-stone: \"#eeece7\"\n  pale-green: \"#edfce9\"\n  pale-blue: \"#f1f5ff\"\n  hairline: \"#d9d9dd\"\n  border-light: \"#e5e7eb\"\n  card-border: \"#f2f2f2\"\n  muted: \"#93939f\"\n  slate: \"#75758a\"\n  body-muted: \"#616161\"\n  action-blue: \"#1863dc\"\n  focus-blue: \"#4c6ee6\"\n  coral: \"#ff7759\"\n  coral-soft: \"#ffad9b\"\n  form-focus: \"#9b60aa\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  error: \"#b30000\"\n\ntypography:\n  hero-display:\n    fontFamily: CohereText\n    fontSize: 96px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: -1.92px\n  product-display:\n    fontFamily: CohereText\n    fontSize: 72px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: -1.44px\n  section-display:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 60px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: -1.2px\n  section-heading:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 48px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.48px\n  card-heading:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 32px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.32px\n  feature-heading:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 24px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 0\n  body-large:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 18px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  body:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.71\n    letterSpacing: 0\n  caption:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  mono-label:\n    fontFamily: CohereMono\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.28px\n  micro:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 4px\n  sm: 8px\n  md: 16px\n  lg: 22px\n  xl: 30px\n  pill: 32px\n  full: 9999px\n\nspacing:\n  xxs: 2px\n  xs: 6px\n  sm: 8px\n  md: 12px\n  lg: 16px\n  xl: 24px\n  xxl: 32px\n  section: 80px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 24px\n  button-secondary:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.xs}\"\n    padding: 8px 0\n  button-pill-outline:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.xl}\"\n    padding: 6px 12px\n  announcement-bar:\n    backgroundColor: \"{colors.cohere-black}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.micro}\"\n    height: 36px\n  hero-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    rounded: \"{rounded.lg}\"\n  agent-console-card:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.sm}\"\n    padding: 24px\n  trust-logo-strip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n  capability-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.xs}\"\n    padding: 24px\n  dark-feature-band:\n    backgroundColor: \"{colors.deep-green}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.lg}\"\n    padding: 80px\n  product-card:\n    backgroundColor: \"{colors.soft-stone}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.sm}\"\n    padding: 32px\n  blog-filter-chip:\n    backgroundColor: transparent\n    textColor: \"{colors.coral}\"\n    typography: \"{typography.card-heading}\"\n    rounded: \"{rounded.sm}\"\n    padding: 8px 14px\n  research-table:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-large}\"\n  contact-form-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  footer-newsletter:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.micro}\"\n---\n\n## Overview\n\nCohere's current web presence feels like a sober enterprise AI command center with editorial restraint. The home page opens on a huge typographic declaration over a white canvas, then uses photography, dark product mockups, trust logos, and generous empty space to make AI infrastructure feel controlled rather than speculative. Product pages invert the tone into deep green-black or dark navy bands, while blog and research pages move toward publishing-system clarity: large filters, thin rules, dense lists, and pale technical backgrounds.\n\nWhat makes the system distinctive is the mix of austere black-and-white UI with bursts of tactile brand imagery. The site avoids decorative chrome in the normal interface; color arrives through photography, abstract 3D media, coral blog taxonomy chips, blue research links, and dark product environments. Cards are rounded but not cute. Type is large, tight, and almost monospaced in spirit, creating a research-lab cadence across marketing, product, and editorial surfaces.\n\n**Key Characteristics:**\n- Monumental display headlines with very tight line height and negative tracking.\n- White editorial canvases interrupted by deep green, dark navy, and image-led CTA bands.\n- Rounded media cards and product cards, usually 8px to 22px.\n- Pill CTAs in near-black or white, with most secondary actions rendered as underlined text links.\n- Trust-logo strips with monochrome partner marks and very wide vertical spacing.\n- Agent-console mockups using dark panels, small status chips, and product integration badges.\n- Blog and research surfaces with prominent taxonomy chips, long rule-separated lists, and search fields.\n\n## Colors\n\n### Brand & Accent\n\n- **Cohere Black** (\\`#000000\\`): Announcement bar, highest-contrast text, and the global brand anchor.\n- **Near-Black Primary** (\\`#17171c\\`): Primary CTA buttons, dark footer, and deep UI cards.\n- **Deep Enterprise Green** (\\`#003c33\\`): Product hero bands for North and Command-style dark sections.\n- **Dark Navy** (\\`#071829\\`): Financial-services and security-oriented solution bands.\n- **Action Blue** (\\`#1863dc\\`): Editorial links, pagination, and secondary action emphasis.\n- **Coral** (\\`#ff7759\\`): Blog category chips, taxonomy outlines, and warm product markers.\n- **Soft Coral** (\\`#ffad9b\\`): Pale chip borders and segmented article-label details.\n\n### Surface & Background\n\n- **Canvas White** (\\`#ffffff\\`): Dominant page background and form/card surface.\n- **Soft Stone** (\\`#eeece7\\`): Product cards, testimonial placeholders, and warm neutral surface blocks.\n- **Pale Green Wash** (\\`#edfce9\\`): North page section backdrop behind stacked dark capability panels.\n- **Pale Blue Wash** (\\`#f1f5ff\\`): Blog CTA surface behind abstract 3D imagery.\n- **Card Border** (\\`#f2f2f2\\`): Softest card containment line.\n\n### Text & Rules\n\n- **Ink** (\\`#212121\\`): Default body text and most link text on light backgrounds.\n- **Muted Slate** (\\`#93939f\\`): Footer links, dates, metadata, and de-emphasized labels.\n- **Slate** (\\`#75758a\\`): Research separators and tertiary text.\n- **Hairline** (\\`#d9d9dd\\`): Standard list rules and section dividers.\n- **Border Light** (\\`#e5e7eb\\`): Secondary divider and utility rule.\n\n### Semantic\n\n- **Focus Blue** (\\`#4c6ee6\\`): Keyboard focus and ring color.\n- **Form Focus Violet** (\\`#9b60aa\\`): Focus border for text inputs.\n- **Error Red** (\\`#b30000\\`): Extracted ring/shadow color associated with validation-like states.\n\n### Gradient System\n\nCohere does not use gradients as a generic UI fill. Gradients and color fields are media-led: abstract 3D hero imagery, deep blue open-science particle fields, red-orange product video posters, and dark green-to-black product environments. Keep UI surfaces flat; reserve gradient richness for large media panels and CTA image bands.\n\n## Typography\n\n### Font Family\n\n- **Display**: \\`CohereText\\`, falling back to \\`Space Grotesk\\`, \\`Inter\\`, \\`ui-sans-serif\\`, and \\`system-ui\\`.\n- **Body/UI**: \\`Unica77 Cohere Web\\`, falling back to \\`Inter\\`, \\`Arial\\`, \\`ui-sans-serif\\`, and \\`system-ui\\`.\n- **Technical labels**: \\`CohereMono\\`, falling back to \\`Arial\\`, \\`ui-sans-serif\\`, and \\`system-ui\\`.\n- **Icons**: Cohere uses custom icon fonts and thin-line geometric illustrations.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|---|---|---:|---:|---:|---:|---|\n| Hero Display | CohereText | 96px | 400 | 1.00 | -1.92px | Home page declaration scale. |\n| Product Display | CohereText | 72px | 400 | 1.00 | -1.44px | Product and research hero headlines. |\n| Section Display | Unica77 | 60px | 400 | 1.00 | -1.2px | Large product-page headings. |\n| Section Heading | Unica77 | 48px | 400 | 1.20 | -0.48px | Split hero and CTA headings. |\n| Card Heading | Unica77 | 32px | 400 | 1.20 | -0.32px | Feature card and list section titles. |\n| Feature Heading | Unica77 | 24px | 400 | 1.30 | 0 | Cards, filters, and article titles. |\n| Body Large | Unica77 | 18px | 400 | 1.40 | 0 | Lead text and larger paragraphs. |\n| Body | Unica77 | 16px | 400 | 1.50 | 0 | Default copy and link text. |\n| Button | Unica77 | 14px | 500 | 1.71 | 0 | Compact CTA labels. |\n| Caption | Unica77 | 14px | 400 | 1.40 | 0 | Metadata and small explanatory text. |\n| Mono Label | CohereMono | 14px | 400 | 1.40 | 0.28px | Uppercase technical labels. |\n| Micro | Unica77 | 12px | 400 | 1.40 | 0 | Footer, nav microcopy, and small links. |\n\n### Principles\n\n- Use massive type sparingly; Cohere pages often have one oversized headline and then settle into restrained 16px-24px UI copy.\n- Keep display type tight. Hero copy should feel compact and carved, not airy.\n- Avoid heavy bold weights. Size, spacing, and surface contrast do most of the hierarchy work.\n- Use uppercase mono labels for category and system markers, especially on product and research pages.\n- Editorial pages can use coral chips and blue links, but the base typography remains black and measured.\n\n## Layout\n\n### Spacing System\n\nThe system uses an 8px base with many one-off alignment values: \\`2px\\`, \\`6px\\`, \\`8px\\`, \\`10px\\`, \\`12px\\`, \\`16px\\`, \\`20px\\`, \\`22px\\`, \\`24px\\`, \\`28px\\`, \\`32px\\`, \\`36px\\`, \\`40px\\`, \\`56px\\`, \\`60px\\`, \\`64px\\`, and \\`80px\\`.\n\nLarge sections rely on dramatic vertical breathing room. The home page places a trust-logo strip far below the hero media. Product pages often hold dark panels inside fields of empty white space, then transition to dense forms or footers only near the end.\n\n### Grid & Container\n\n- Global nav uses a three-zone layout: logo left, menu centered, sign-in/CTA right.\n- Home hero is centered text above a two-card media composition: a wide product mockup card beside a narrower photography card.\n- Feature sections commonly use 3-column cards on desktop.\n- Product pages alternate centered hero blocks, trust-logo strips, large single-feature bands, and 2- or 3-column card grids.\n- Research pages use full-width lists with date and chip columns instead of decorative cards.\n- Forms use two-column input rows inside a rounded white card on dark or stone section backgrounds.\n\n### Whitespace Philosophy\n\nCohere uses whitespace as a trust signal. Large empty intervals separate the brand claim, customer proof, product proof, and CTA. Dense content appears only where it serves the information architecture: research paper rows, blog card grids, and contact form fields.\n\n## Elevation & Depth\n\nCohere is mostly flat. Depth comes from surface alternation, media contrast, rounded corners, and thin borders rather than drop shadows.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, white or dark field | Hero copy, research lists, editorial surfaces |\n| Bordered | 1px \\`#d9d9dd\\`, \\`#e5e7eb\\`, or dark translucent rules | Research rows, forms, pale cards, footer inputs |\n| Media Lift | Rounded image or video over contrasting section color | Hero photo cards, product videos, CTA imagery |\n| Dark Product Field | Deep green or navy full-width band | Command, North, financial services, security sections |\n\n## Shapes\n\n### Radius Scale\n\n| Token | Value | Role |\n|---|---:|---|\n| \\`xs\\` | 4px | Small images, search fields, article thumbnails, utility elements |\n| \\`sm\\` | 8px | Blog chips, cards, small media, dialogs |\n| \\`md\\` | 16px | Medium product cards and grouped blocks |\n| \\`lg\\` | 22px | Signature media-card and soft placeholder radius |\n| \\`xl\\` | 30px | Research/topic filter pills |\n| \\`pill\\` | 32px | Primary CTA buttons |\n| \\`full\\` | 9999px | Round status elements and fully pill-shaped controls |\n\n### Image Treatment\n\nImages are not decorative backdrops for text except in CTA bands. Most imagery sits as rounded cards with visible corners: product videos, enterprise photography, article thumbnails, and abstract 3D renders. The dominant radii are 8px and 22px.\n\n## Components\n\n### **\\`button-primary\\`**\n\nNear-black or white pill CTA, depending on surface contrast. Uses 14px-16px Unica77, 12px 24px padding, and a 32px pill radius. This is the primary action style for \"Request a demo\", \"Submit\", and hero CTAs.\n\n### **\\`button-secondary\\`**\n\nText-only action link, usually underlined or rule-aligned, with no filled background. Used for \"Explore products\", \"Try the Playground\", newsletter signup, and secondary hero actions.\n\n### **\\`button-pill-outline\\`**\n\nOutlined pill control with transparent fill, 1px dark border, and 30px radius. Used for research filters, topic tags, and lightweight taxonomy controls.\n\n### **\\`announcement-bar\\`**\n\nFull-width black strip above the nav, 36px tall, centered microcopy with an underlined \"Learn more\" link and a close control at the far right.\n\n### **\\`hero-photo-card\\`**\n\nRounded media card used in the home hero and solution pages. It combines photography or abstract imagery with an overlaid dark agent-console module. Radius is usually 22px on large cards and 8px on smaller thumbnails.\n\n### **\\`agent-console-card\\`**\n\nDark product mockup panel showing agent names, status chips, integration badges, prompt fields, and generated response cards. Background is near-black, text is white or muted, and small accent chips use product colors.\n\n### **\\`trust-logo-strip\\`**\n\nCentered copy above a row of monochrome customer logos. It is intentionally quiet: no cards, no borders, just large horizontal spacing and black or white logos depending on the background.\n\n### **\\`capability-card\\`**\n\nContent block with thin-line geometric illustration, 24px heading, body copy, and a text link. On light backgrounds, cards often have only a top rule or a subtle image/card relationship rather than full boxing.\n\n### **\\`dark-feature-band\\`**\n\nDeep green or navy full-width section used for product capabilities, security claims, and feature breakdowns. Text turns white; cards use darker translucent surfaces, pale borders, and abstract line illustrations.\n\n### **\\`product-card\\`**\n\nWarm stone card used for product/model summaries. Typically 3-column on desktop, with 8px radius, generous padding, a small pill button, a divider line, and checkmark bullet rows.\n\n### **\\`blog-filter-chip\\`**\n\nLarge coral taxonomy chip used on the blog index. Active chips invert to coral fill with dark text; inactive chips use coral outline and pale fill. Typography is oversized relative to typical filters, making the taxonomy a hero-level control.\n\n### **\\`research-table\\`**\n\nRule-separated publication list with title left, topic pills centered, and date right. Rows are tall, white, and border-driven; filters above use many compact outlined pills.\n\n### **\\`contact-form-card\\`**\n\nRounded white form panel set against dark green or warm stone sections. Inputs are rectangular with thin gray borders, 12px-16px padding, and compact labels/placeholders. Submit uses the same near-black pill style as primary CTAs.\n\n### **\\`footer-newsletter\\`**\n\nDark footer subscription block with coral \"AI moves fast\" label, white headline, muted legal microcopy, a single-line email field, and arrow submit marker. Footer columns use white section labels and muted links.\n\n## Do's and Don'ts\n\n### Do\n\n- Use white canvas as the default surface; introduce dark green or navy as full-width product bands.\n- Keep primary CTAs pill-shaped and near-black on light surfaces.\n- Use 22px radius on major media cards and placeholders.\n- Use coral for editorial taxonomy and small warm accents, not as the main CTA system.\n- Use monochrome trust logos with wide spacing.\n- Use thin-line geometric illustrations for research and capability icons.\n- Let photography and product mockups carry color, while the UI shell stays restrained.\n\n### Don't\n\n- Do not turn coral or blue into broad decorative surface colors.\n- Do not add heavy drop shadows to cards.\n- Do not make every section card-based; Cohere often uses unframed rows, rules, and open space.\n- Do not use rounded cards below 8px for major media.\n- Do not replace the display/body type split with one generic sans-serif voice.\n- Do not render undocumented interaction variants in documentation or previews.\n- Do not use saturated gradients as normal UI backgrounds; keep gradients media-led.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---:|---|\n| Small Mobile | <425px | Single-column cards, compact nav, reduced hero headline scale |\n| Mobile | 425-640px | Hero media stacks, card grids become one column, form rows stack |\n| Large Mobile | 640-768px | Wider one-column layouts with larger media cards |\n| Tablet | 768-1024px | Two-column cards begin, nav spacing tightens |\n| Desktop | 1024-1440px | Full nav, 3-column card grids, split hero compositions |\n| Large Desktop | 1440-2560px | Wide containers and large empty vertical intervals |\n\n### Touch Targets\n\nPrimary CTAs and pills meet comfortable touch sizing through 12px-24px padding and pill radii. Research filter chips and blog category chips are larger than standard tags, making dense taxonomy surfaces usable on touch devices.\n\n### Collapsing Strategy\n\n- Nav collapses from full horizontal links to a compact mobile menu.\n- Hero media moves from split cards to stacked cards.\n- Product and capability grids collapse from 3 columns to 2 and then 1.\n- Form fields collapse from paired rows to a single column.\n- Research rows preserve their rule-separated structure but stack metadata below titles on smaller widths.\n\n## Iteration Guide\n\n1. Start from a white canvas or a full-width dark green/navy band; avoid mid-tone page backgrounds unless the screenshot shows a specific CTA/form section.\n2. Use \\`button-primary\\` for the single highest-priority action and \\`button-secondary\\` for the companion action.\n3. Use \\`hero-photo-card\\` or \\`agent-console-card\\` when a page needs visual energy; avoid invented dashboard data.\n4. For editorial pages, combine \\`blog-filter-chip\\`, \\`button-pill-outline\\`, and \\`research-table\\` instead of generic marketing cards.\n5. Keep component examples structurally honest: placeholder product frames are better than invented product content.\n\n## Known Gaps\n\n- Exact proprietary font files are not bundled; use the documented fallbacks when implementing externally.\n- Mobile screenshots were not regenerated in this public update, so mobile behavior is documented from the desktop system and existing responsive patterns.\n- Some live pages lazy-load content blocks late; blank testimonial placeholders are documented as placeholder skeleton surfaces rather than filled testimonial cards.\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/cohere.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const cohereBrief = `---\nversion: alpha\nname: Cohere\ndescription: Cohere's 2026 web system is a controlled enterprise AI interface built from stark white editorial space, deep green-black product bands, soft mineral surfaces, rounded media cards, and a distinctive type split between monospaced-feeling display headlines and precise Unica77 UI text.\n\ncolors:\n  primary: \"#17171c\"\n  cohere-black: \"#000000\"\n  ink: \"#212121\"\n  deep-green: \"#003c33\"\n  dark-navy: \"#071829\"\n  canvas: \"#ffffff\"\n  soft-stone: \"#eeece7\"\n  pale-green: \"#edfce9\"\n  pale-blue: \"#f1f5ff\"\n  hairline: \"#d9d9dd\"\n  border-light: \"#e5e7eb\"\n  card-border: \"#f2f2f2\"\n  muted: \"#93939f\"\n  slate: \"#75758a\"\n  body-muted: \"#616161\"\n  action-blue: \"#1863dc\"\n  focus-blue: \"#4c6ee6\"\n  coral: \"#ff7759\"\n  coral-soft: \"#ffad9b\"\n  form-focus: \"#9b60aa\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  error: \"#b30000\"\n\ntypography:\n  hero-display:\n    fontFamily: CohereText\n    fontSize: 96px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: -1.92px\n  product-display:\n    fontFamily: CohereText\n    fontSize: 72px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: -1.44px\n  section-display:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 60px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: -1.2px\n  section-heading:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 48px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.48px\n  card-heading:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 32px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.32px\n  feature-heading:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 24px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 0\n  body-large:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 18px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  body:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.71\n    letterSpacing: 0\n  caption:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  mono-label:\n    fontFamily: CohereMono\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.28px\n  micro:\n    fontFamily: Unica77 Cohere Web\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 4px\n  sm: 8px\n  md: 16px\n  lg: 22px\n  xl: 30px\n  pill: 32px\n  full: 9999px\n\nspacing:\n  xxs: 2px\n  xs: 6px\n  sm: 8px\n  md: 12px\n  lg: 16px\n  xl: 24px\n  xxl: 32px\n  section: 80px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 24px\n  button-secondary:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.xs}\"\n    padding: 8px 0\n  button-pill-outline:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.xl}\"\n    padding: 6px 12px\n  announcement-bar:\n    backgroundColor: \"{colors.cohere-black}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.micro}\"\n    height: 36px\n  hero-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    rounded: \"{rounded.lg}\"\n  agent-console-card:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.sm}\"\n    padding: 24px\n  trust-logo-strip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n  capability-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.xs}\"\n    padding: 24px\n  dark-feature-band:\n    backgroundColor: \"{colors.deep-green}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.lg}\"\n    padding: 80px\n  product-card:\n    backgroundColor: \"{colors.soft-stone}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.sm}\"\n    padding: 32px\n  blog-filter-chip:\n    backgroundColor: transparent\n    textColor: \"{colors.coral}\"\n    typography: \"{typography.card-heading}\"\n    rounded: \"{rounded.sm}\"\n    padding: 8px 14px\n  research-table:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-large}\"\n  contact-form-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  footer-newsletter:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.micro}\"\n---\n\n## Overview\n\nCohere's current web presence feels like a sober enterprise AI command center with editorial restraint. The home page opens on a huge typographic declaration over a white canvas, then uses photography, dark product mockups, trust logos, and generous empty space to make AI infrastructure feel controlled rather than speculative. Product pages invert the tone into deep green-black or dark navy bands, while blog and research pages move toward publishing-system clarity: large filters, thin rules, dense lists, and pale technical backgrounds.\n\nWhat makes the system distinctive is the mix of austere black-and-white UI with bursts of tactile brand imagery. The site avoids decorative chrome in the normal interface; color arrives through photography, abstract 3D media, coral blog taxonomy chips, blue research links, and dark product environments. Cards are rounded but not cute. Type is large, tight, and almost monospaced in spirit, creating a research-lab cadence across marketing, product, and editorial surfaces.\n\n**Key Characteristics:**\n- Monumental display headlines with very tight line height and negative tracking.\n- White editorial canvases interrupted by deep green, dark navy, and image-led CTA bands.\n- Rounded media cards and product cards, usually 8px to 22px.\n- Pill CTAs in near-black or white, with most secondary actions rendered as underlined text links.\n- Trust-logo strips with monochrome partner marks and very wide vertical spacing.\n- Agent-console mockups using dark panels, small status chips, and product integration badges.\n- Blog and research surfaces with prominent taxonomy chips, long rule-separated lists, and search fields.\n\n## Colors\n\n### Brand & Accent\n\n- **Cohere Black** (\\`#000000\\`): Announcement bar, highest-contrast text, and the global brand anchor.\n- **Near-Black Primary** (\\`#17171c\\`): Primary CTA buttons, dark footer, and deep UI cards.\n- **Deep Enterprise Green** (\\`#003c33\\`): Product hero bands for North and Command-style dark sections.\n- **Dark Navy** (\\`#071829\\`): Financial-services and security-oriented solution bands.\n- **Action Blue** (\\`#1863dc\\`): Editorial links, pagination, and secondary action emphasis.\n- **Coral** (\\`#ff7759\\`): Blog category chips, taxonomy outlines, and warm product markers.\n- **Soft Coral** (\\`#ffad9b\\`): Pale chip borders and segmented article-label details.\n\n### Surface & Background\n\n- **Canvas White** (\\`#ffffff\\`): Dominant page background and form/card surface.\n- **Soft Stone** (\\`#eeece7\\`): Product cards, testimonial placeholders, and warm neutral surface blocks.\n- **Pale Green Wash** (\\`#edfce9\\`): North page section backdrop behind stacked dark capability panels.\n- **Pale Blue Wash** (\\`#f1f5ff\\`): Blog CTA surface behind abstract 3D imagery.\n- **Card Border** (\\`#f2f2f2\\`): Softest card containment line.\n\n### Text & Rules\n\n- **Ink** (\\`#212121\\`): Default body text and most link text on light backgrounds.\n- **Muted Slate** (\\`#93939f\\`): Footer links, dates, metadata, and de-emphasized labels.\n- **Slate** (\\`#75758a\\`): Research separators and tertiary text.\n- **Hairline** (\\`#d9d9dd\\`): Standard list rules and section dividers.\n- **Border Light** (\\`#e5e7eb\\`): Secondary divider and utility rule.\n\n### Semantic\n\n- **Focus Blue** (\\`#4c6ee6\\`): Keyboard focus and ring color.\n- **Form Focus Violet** (\\`#9b60aa\\`): Focus border for text inputs.\n- **Error Red** (\\`#b30000\\`): Extracted ring/shadow color associated with validation-like states.\n\n### Gradient System\n\nCohere does not use gradients as a generic UI fill. Gradients and color fields are media-led: abstract 3D hero imagery, deep blue open-science particle fields, red-orange product video posters, and dark green-to-black product environments. Keep UI surfaces flat; reserve gradient richness for large media panels and CTA image bands.\n\n## Typography\n\n### Font Family\n\n- **Display**: \\`CohereText\\`, falling back to \\`Space Grotesk\\`, \\`Inter\\`, \\`ui-sans-serif\\`, and \\`system-ui\\`.\n- **Body/UI**: \\`Unica77 Cohere Web\\`, falling back to \\`Inter\\`, \\`Arial\\`, \\`ui-sans-serif\\`, and \\`system-ui\\`.\n- **Technical labels**: \\`CohereMono\\`, falling back to \\`Arial\\`, \\`ui-sans-serif\\`, and \\`system-ui\\`.\n- **Icons**: Cohere uses custom icon fonts and thin-line geometric illustrations.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|---|---|---:|---:|---:|---:|---|\n| Hero Display | CohereText | 96px | 400 | 1.00 | -1.92px | Home page declaration scale. |\n| Product Display | CohereText | 72px | 400 | 1.00 | -1.44px | Product and research hero headlines. |\n| Section Display | Unica77 | 60px | 400 | 1.00 | -1.2px | Large product-page headings. |\n| Section Heading | Unica77 | 48px | 400 | 1.20 | -0.48px | Split hero and CTA headings. |\n| Card Heading | Unica77 | 32px | 400 | 1.20 | -0.32px | Feature card and list section titles. |\n| Feature Heading | Unica77 | 24px | 400 | 1.30 | 0 | Cards, filters, and article titles. |\n| Body Large | Unica77 | 18px | 400 | 1.40 | 0 | Lead text and larger paragraphs. |\n| Body | Unica77 | 16px | 400 | 1.50 | 0 | Default copy and link text. |\n| Button | Unica77 | 14px | 500 | 1.71 | 0 | Compact CTA labels. |\n| Caption | Unica77 | 14px | 400 | 1.40 | 0 | Metadata and small explanatory text. |\n| Mono Label | CohereMono | 14px | 400 | 1.40 | 0.28px | Uppercase technical labels. |\n| Micro | Unica77 | 12px | 400 | 1.40 | 0 | Footer, nav microcopy, and small links. |\n\n### Principles\n\n- Use massive type sparingly; Cohere pages often have one oversized headline and then settle into restrained 16px-24px UI copy.\n- Keep display type tight. Hero copy should feel compact and carved, not airy.\n- Avoid heavy bold weights. Size, spacing, and surface contrast do most of the hierarchy work.\n- Use uppercase mono labels for category and system markers, especially on product and research pages.\n- Editorial pages can use coral chips and blue links, but the base typography remains black and measured.\n\n## Layout\n\n### Spacing System\n\nThe system uses an 8px base with many one-off alignment values: \\`2px\\`, \\`6px\\`, \\`8px\\`, \\`10px\\`, \\`12px\\`, \\`16px\\`, \\`20px\\`, \\`22px\\`, \\`24px\\`, \\`28px\\`, \\`32px\\`, \\`36px\\`, \\`40px\\`, \\`56px\\`, \\`60px\\`, \\`64px\\`, and \\`80px\\`.\n\nLarge sections rely on dramatic vertical breathing room. The home page places a trust-logo strip far below the hero media. Product pages often hold dark panels inside fields of empty white space, then transition to dense forms or footers only near the end.\n\n### Grid & Container\n\n- Global nav uses a three-zone layout: logo left, menu centered, sign-in/CTA right.\n- Home hero is centered text above a two-card media composition: a wide product mockup card beside a narrower photography card.\n- Feature sections commonly use 3-column cards on desktop.\n- Product pages alternate centered hero blocks, trust-logo strips, large single-feature bands, and 2- or 3-column card grids.\n- Research pages use full-width lists with date and chip columns instead of decorative cards.\n- Forms use two-column input rows inside a rounded white card on dark or stone section backgrounds.\n\n### Whitespace Philosophy\n\nCohere uses whitespace as a trust signal. Large empty intervals separate the brand claim, customer proof, product proof, and CTA. Dense content appears only where it serves the information architecture: research paper rows, blog card grids, and contact form fields.\n\n## Elevation & Depth\n\nCohere is mostly flat. Depth comes from surface alternation, media contrast, rounded corners, and thin borders rather than drop shadows.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, white or dark field | Hero copy, research lists, editorial surfaces |\n| Bordered | 1px \\`#d9d9dd\\`, \\`#e5e7eb\\`, or dark translucent rules | Research rows, forms, pale cards, footer inputs |\n| Media Lift | Rounded image or video over contrasting section color | Hero photo cards, product videos, CTA imagery |\n| Dark Product Field | Deep green or navy full-width band | Command, North, financial services, security sections |\n\n## Shapes\n\n### Radius Scale\n\n| Token | Value | Role |\n|---|---:|---|\n| \\`xs\\` | 4px | Small images, search fields, article thumbnails, utility elements |\n| \\`sm\\` | 8px | Blog chips, cards, small media, dialogs |\n| \\`md\\` | 16px | Medium product cards and grouped blocks |\n| \\`lg\\` | 22px | Signature media-card and soft placeholder radius |\n| \\`xl\\` | 30px | Research/topic filter pills |\n| \\`pill\\` | 32px | Primary CTA buttons |\n| \\`full\\` | 9999px | Round status elements and fully pill-shaped controls |\n\n### Image Treatment\n\nImages are not decorative backdrops for text except in CTA bands. Most imagery sits as rounded cards with visible corners: product videos, enterprise photography, article thumbnails, and abstract 3D renders. The dominant radii are 8px and 22px.\n\n## Components\n\n### **\\`button-primary\\`**\n\nNear-black or white pill CTA, depending on surface contrast. Uses 14px-16px Unica77, 12px 24px padding, and a 32px pill radius. This is the primary action style for \"Request a demo\", \"Submit\", and hero CTAs.\n\n### **\\`button-secondary\\`**\n\nText-only action link, usually underlined or rule-aligned, with no filled background. Used for \"Explore products\", \"Try the Playground\", newsletter signup, and secondary hero actions.\n\n### **\\`button-pill-outline\\`**\n\nOutlined pill control with transparent fill, 1px dark border, and 30px radius. Used for research filters, topic tags, and lightweight taxonomy controls.\n\n### **\\`announcement-bar\\`**\n\nFull-width black strip above the nav, 36px tall, centered microcopy with an underlined \"Learn more\" link and a close control at the far right.\n\n### **\\`hero-photo-card\\`**\n\nRounded media card used in the home hero and solution pages. It combines photography or abstract imagery with an overlaid dark agent-console module. Radius is usually 22px on large cards and 8px on smaller thumbnails.\n\n### **\\`agent-console-card\\`**\n\nDark product mockup panel showing agent names, status chips, integration badges, prompt fields, and generated response cards. Background is near-black, text is white or muted, and small accent chips use product colors.\n\n### **\\`trust-logo-strip\\`**\n\nCentered copy above a row of monochrome customer logos. It is intentionally quiet: no cards, no borders, just large horizontal spacing and black or white logos depending on the background.\n\n### **\\`capability-card\\`**\n\nContent block with thin-line geometric illustration, 24px heading, body copy, and a text link. On light backgrounds, cards often have only a top rule or a subtle image/card relationship rather than full boxing.\n\n### **\\`dark-feature-band\\`**\n\nDeep green or navy full-width section used for product capabilities, security claims, and feature breakdowns. Text turns white; cards use darker translucent surfaces, pale borders, and abstract line illustrations.\n\n### **\\`product-card\\`**\n\nWarm stone card used for product/model summaries. Typically 3-column on desktop, with 8px radius, generous padding, a small pill button, a divider line, and checkmark bullet rows.\n\n### **\\`blog-filter-chip\\`**\n\nLarge coral taxonomy chip used on the blog index. Active chips invert to coral fill with dark text; inactive chips use coral outline and pale fill. Typography is oversized relative to typical filters, making the taxonomy a hero-level control.\n\n### **\\`research-table\\`**\n\nRule-separated publication list with title left, topic pills centered, and date right. Rows are tall, white, and border-driven; filters above use many compact outlined pills.\n\n### **\\`contact-form-card\\`**\n\nRounded white form panel set against dark green or warm stone sections. Inputs are rectangular with thin gray borders, 12px-16px padding, and compact labels/placeholders. Submit uses the same near-black pill style as primary CTAs.\n\n### **\\`footer-newsletter\\`**\n\nDark footer subscription block with coral \"AI moves fast\" label, white headline, muted legal microcopy, a single-line email field, and arrow submit marker. Footer columns use white section labels and muted links.\n\n## Do's and Don'ts\n\n### Do\n\n- Use white canvas as the default surface; introduce dark green or navy as full-width product bands.\n- Keep primary CTAs pill-shaped and near-black on light surfaces.\n- Use 22px radius on major media cards and placeholders.\n- Use coral for editorial taxonomy and small warm accents, not as the main CTA system.\n- Use monochrome trust logos with wide spacing.\n- Use thin-line geometric illustrations for research and capability icons.\n- Let photography and product mockups carry color, while the UI shell stays restrained.\n\n### Don't\n\n- Do not turn coral or blue into broad decorative surface colors.\n- Do not add heavy drop shadows to cards.\n- Do not make every section card-based; Cohere often uses unframed rows, rules, and open space.\n- Do not use rounded cards below 8px for major media.\n- Do not replace the display/body type split with one generic sans-serif voice.\n- Do not render undocumented interaction variants in documentation or previews.\n- Do not use saturated gradients as normal UI backgrounds; keep gradients media-led.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---:|---|\n| Small Mobile | <425px | Single-column cards, compact nav, reduced hero headline scale |\n| Mobile | 425-640px | Hero media stacks, card grids become one column, form rows stack |\n| Large Mobile | 640-768px | Wider one-column layouts with larger media cards |\n| Tablet | 768-1024px | Two-column cards begin, nav spacing tightens |\n| Desktop | 1024-1440px | Full nav, 3-column card grids, split hero compositions |\n| Large Desktop | 1440-2560px | Wide containers and large empty vertical intervals |\n\n### Touch Targets\n\nPrimary CTAs and pills meet comfortable touch sizing through 12px-24px padding and pill radii. Research filter chips and blog category chips are larger than standard tags, making dense taxonomy surfaces usable on touch devices.\n\n### Collapsing Strategy\n\n- Nav collapses from full horizontal links to a compact mobile menu.\n- Hero media moves from split cards to stacked cards.\n- Product and capability grids collapse from 3 columns to 2 and then 1.\n- Form fields collapse from paired rows to a single column.\n- Research rows preserve their rule-separated structure but stack metadata below titles on smaller widths.\n\n## Iteration Guide\n\n1. Start from a white canvas or a full-width dark green/navy band; avoid mid-tone page backgrounds unless the screenshot shows a specific CTA/form section.\n2. Use \\`button-primary\\` for the single highest-priority action and \\`button-secondary\\` for the companion action.\n3. Use \\`hero-photo-card\\` or \\`agent-console-card\\` when a page needs visual energy; avoid invented dashboard data.\n4. For editorial pages, combine \\`blog-filter-chip\\`, \\`button-pill-outline\\`, and \\`research-table\\` instead of generic marketing cards.\n5. Keep component examples structurally honest: placeholder product frames are better than invented product content.\n\n## Known Gaps\n\n- Exact proprietary font files are not bundled; use the documented fallbacks when implementing externally.\n- Mobile screenshots were not regenerated in this public update, so mobile behavior is documented from the desktop system and existing responsive patterns.\n- Some live pages lazy-load content blocks late; blank testimonial placeholders are documented as placeholder skeleton surfaces rather than filled testimonial cards.\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/coinbase.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const coinbaseBrief = `---\nversion: alpha\nname: Coinbase\ndescription: An institutional-grade crypto exchange whose marketing surfaces read like a quietly-confident financial-services brand. The base canvas is pure white; Coinbase Blue (\\`#0052ff\\`) is the single brand voltage, used scarcely on primary CTAs, signature glyphs, and inline accent moments. Type runs Coinbase's licensed CoinbaseDisplay (display) and CoinbaseSans (body) at modest weights — display sits at weight 400 not 700, signaling editorial calm rather than fintech-bombastic. Page rhythm rotates between bright white sections, soft gray elevation bands, and full-bleed dark editorial heroes (\\`#0a0b0d\\`) carrying product-ui mockup cards. Iconography is geometric and minimal; depth comes from card-on-card layering, never decorative shadows.\n\ncolors:\n  primary: \"#0052ff\"\n  primary-active: \"#003ecc\"\n  primary-disabled: \"#a8b8cc\"\n  ink: \"#0a0b0d\"\n  body: \"#5b616e\"\n  body-strong: \"#0a0b0d\"\n  muted: \"#7c828a\"\n  muted-soft: \"#a8acb3\"\n  hairline: \"#dee1e6\"\n  hairline-soft: \"#eef0f3\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f7f7f7\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#eef0f3\"\n  surface-dark: \"#0a0b0d\"\n  surface-dark-elevated: \"#16181c\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#a8acb3\"\n  semantic-up: \"#05b169\"\n  semantic-down: \"#cf202f\"\n  accent-yellow: \"#f4b000\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Coinbase Display', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\"\n    fontSize: 80px\n    fontWeight: 400\n    lineHeight: 1.0\n    letterSpacing: -2px\n  display-xl:\n    fontFamily: \"'Coinbase Display', sans-serif\"\n    fontSize: 64px\n    fontWeight: 400\n    lineHeight: 1.0\n    letterSpacing: -1.6px\n  display-lg:\n    fontFamily: \"'Coinbase Display', sans-serif\"\n    fontSize: 52px\n    fontWeight: 400\n    lineHeight: 1.0\n    letterSpacing: -1.3px\n  display-md:\n    fontFamily: \"'Coinbase Display', sans-serif\"\n    fontSize: 44px\n    fontWeight: 400\n    lineHeight: 1.09\n    letterSpacing: -1px\n  display-sm:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 36px\n    fontWeight: 400\n    lineHeight: 1.11\n    letterSpacing: -0.5px\n  title-lg:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 32px\n    fontWeight: 400\n    lineHeight: 1.13\n    letterSpacing: -0.4px\n  title-md:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.33\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-strong:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 700\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption-strong:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 12px\n    fontWeight: 600\n    lineHeight: 1.5\n    letterSpacing: 0\n  number-display:\n    fontFamily: \"'Coinbase Mono', 'Coinbase Sans', monospace\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  button:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  none: 0px\n  xs: 4px\n  sm: 8px\n  md: 12px\n  lg: 16px\n  xl: 24px\n  pill: 100px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  base: 16px\n  md: 20px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  top-nav-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  top-nav-on-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 20px\n    height: 44px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.pill}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.pill}\"\n  button-secondary-light:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 20px\n    height: 44px\n  button-secondary-dark:\n    backgroundColor: \"{colors.surface-dark-elevated}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 20px\n    height: 44px\n  button-outline-on-dark:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 11px 19px\n    height: 44px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.button}\"\n  button-pill-cta:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 16px 32px\n    height: 56px\n  hero-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  hero-band-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  product-ui-card-dark:\n    backgroundColor: \"{colors.surface-dark-elevated}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  product-ui-card-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  feature-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  asset-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 16px 0\n  price-up-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.semantic-up}\"\n    typography: \"{typography.number-display}\"\n  price-down-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.semantic-down}\"\n    typography: \"{typography.number-display}\"\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  pricing-tier-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  cta-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 14px 16px\n    height: 48px\n  search-input-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 20px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-strong}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  asset-icon-circular:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.full}\"\n    size: 32px\n  footer-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px 48px\n  footer-link:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n  legal-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption}\"\n---\n\n## Overview\n\nCoinbase reads like an institutional financial brand that happens to trade crypto — the marketing surfaces are quiet, white-canvas, editorially-spaced, and almost monochromatic. The single brand voltage is **Coinbase Blue** (\\`{colors.primary}\\` — #0052ff), used scarcely: every primary CTA pill, the brand wordmark, and inline emphasis links. Beyond that one blue, the system is white canvas + ink + soft gray elevation bands + a deep near-black editorial canvas (\\`{colors.surface-dark}\\` — #0a0b0d) for full-bleed product-mockup heroes.\n\nType pairs **CoinbaseDisplay** for hero headlines with **CoinbaseSans** for body, captions, and navigation. Display sits at **weight 400** — not the 700+ typical of trading platforms. The choice signals editorial calm and institutional trust rather than fintech urgency.\n\nThe page rhythm rotates three modes: bright white editorial sections, soft-gray elevation bands, and **full-bleed dark editorial heroes** carrying layered product-UI mockup cards. The dark hero with floating dashboard mockups is the single most distinctive component.\n\n**Key Characteristics:**\n- Single accent color: \\`{colors.primary}\\` (#0052ff Coinbase Blue) carries every primary CTA, wordmark, and inline brand link. Used scarcely.\n- Modest display weights — CoinbaseDisplay at weight 400, never 700+.\n- Editorial pill geometry: every CTA is \\`{rounded.pill}\\` (100px), every asset glyph is \\`{rounded.full}\\`, every card is \\`{rounded.xl}\\` (24px). Sharp corners absent.\n- Full-bleed dark heroes with floating product-UI cards: \\`{component.hero-band-dark}\\` plus inline \\`{component.product-ui-card-dark}\\` mockups is the brand's strongest signature pattern.\n- Trading semantics: \\`{colors.semantic-up}\\` (#05b169) and \\`{colors.semantic-down}\\` (#cf202f) — text color only, never background fills.\n- 96px section rhythm — generous editorial pacing.\n\n## Colors\n\n### Brand & Accent\n- **Coinbase Blue** (\\`{colors.primary}\\` — #0052ff): The single brand color. Every primary CTA pill, the Coinbase wordmark, and inline brand links.\n- **Coinbase Blue Active** (\\`{colors.primary-active}\\` — #003ecc): Press-state darken on the primary pill.\n- **Coinbase Blue Disabled** (\\`{colors.primary-disabled}\\` — #a8b8cc): Faded-blue tint for disabled CTAs.\n- **Accent Yellow** (\\`{colors.accent-yellow}\\` — #f4b000): A small sub-brand accent used very sparingly on Bitcoin/asset glyph fills inside feature cards. Illustrative-only, not an action color.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): The default page floor.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f7f7f7): Subtle alternating band surface.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #eef0f3): The light-gray fill behind secondary buttons, search pills, asset-icon plates.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #0a0b0d): Deep near-black canvas for full-bleed dark heroes, CTA bands. Same hex as \\`{colors.ink}\\` — page-floor and text-color share the value.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #16181c): One step lighter, used for floating product-UI mockup cards inside dark heroes.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #dee1e6): Default 1px divider on white surfaces.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #eef0f3): Lighter divider — same hex as \\`{colors.surface-strong}\\`.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #0a0b0d): Display headings, primary nav, body emphasis.\n- **Body** (\\`{colors.body}\\` — #5b616e): Default running-text — slightly cool gray.\n- **Body Strong** (\\`{colors.body-strong}\\` — #0a0b0d): Same as ink, used for stronger emphasis.\n- **Muted** (\\`{colors.muted}\\` — #7c828a): Sub-titles, breadcrumbs, footer secondary.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #a8acb3): Disabled link text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on Coinbase Blue CTAs.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on dark heroes.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a8acb3): Muted off-white for secondary text on dark.\n\n### Trading Semantics\n- **Semantic Up** (\\`{colors.semantic-up}\\` — #05b169): \"Price up\" green, text color only.\n- **Semantic Down** (\\`{colors.semantic-down}\\` — #cf202f): \"Price down\" red, text color only.\n\n## Typography\n\n### Font Family\nThe system runs **CoinbaseDisplay** (display headlines), **CoinbaseSans** (body, navigation, captions, buttons), **CoinbaseIcons** (icon font), and **CoinbaseMono** for tabular numerical data. Fallback stack: \\`-apple-system, system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif\\`.\n\nThe display/body split is functional: CoinbaseDisplay carries hero headlines only; CoinbaseSans carries everything else.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 80px | 400 | 1.0 | -2px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 64px | 400 | 1.0 | -1.6px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 52px | 400 | 1.0 | -1.3px | Section heads |\n| \\`{typography.display-md}\\` | 44px | 400 | 1.09 | -1px | CTA-band headlines |\n| \\`{typography.display-sm}\\` | 36px | 400 | 1.11 | -0.5px | Sub-section heads — CoinbaseSans |\n| \\`{typography.title-lg}\\` | 32px | 400 | 1.13 | -0.4px | Card group titles |\n| \\`{typography.title-md}\\` | 18px | 600 | 1.33 | 0 | Component titles, asset row primary |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.25 | 0 | List labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default body |\n| \\`{typography.body-strong}\\` | 16px | 700 | 1.5 | 0 | Emphasized body |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.5 | 0 | Footer body |\n| \\`{typography.caption}\\` | 13px | 400 | 1.5 | 0 | Photo captions |\n| \\`{typography.caption-strong}\\` | 12px | 600 | 1.5 | 0 | Badge pill labels |\n| \\`{typography.number-display}\\` | 18px | 500 | 1.4 | 0 | Asset prices, percent changes — CoinbaseMono |\n| \\`{typography.button}\\` | 16px | 600 | 1.15 | 0 | Standard CTA pill |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu items |\n\n### Principles\n- **Display weight stays at 400.** The single most distinctive typographic choice — signals \"calm institutional brand\" rather than \"trading-platform urgency.\"\n- **Negative letter-spacing on display only.** Display uses -1px to -2px tracking; body stays at 0.\n- **CoinbaseMono on every number.** Asset prices, percent changes — anything tabular renders in CoinbaseMono.\n\n### Note on Font Substitutes\nCoinbaseDisplay, CoinbaseSans, and CoinbaseMono are licensed Coinbase typefaces.\n- **CoinbaseDisplay → Inter** at weight 400, letter-spacing -1.5%.\n- **CoinbaseSans → Inter** at weight 400/600.\n- **CoinbaseMono → JetBrains Mono** or **Geist Mono** at weight 500.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.base}\\` 16px · \\`{spacing.md}\\` 20px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 96px.\n- **Section padding:** \\`{spacing.section}\\` (96px) for every major editorial band.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards and product-UI mockups.\n\n### Grid & Container\n- **Max content width:** ~1200px centered. Hero photography full-bleed.\n- **Editorial body:** Single 12-column grid.\n- **Feature card grids:** 2-up at desktop for hero splits, 3-up for benefit grids.\n- **Footer:** 6-column link list at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing — closer to Bloomberg or the Financial Times than to a trading dashboard. 96px between bands; cards inside bands sit 24px apart. Density lives behind login walls, not on marketing.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | 80% of surfaces |\n| Hairline border | 1px \\`{colors.hairline}\\` | Feature card outlines on white |\n| Soft drop | \\`0 4px 12px rgba(0, 0, 0, 0.04)\\` | Single shadow tier — hovered cards |\n| Photographic | Full-bleed product-UI mockups | Hero depth |\n\n### Decorative Depth\n- **Layered product-UI cards inside dark heroes** is the most distinctive decorative pattern — a \\`{component.product-ui-card-dark}\\` floats above a darker base canvas, often with a second smaller card overlapping at an angle.\n- **Geometric brand illustrations** carry illustrative depth where shadows would otherwise.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Reserved (essentially unused) |\n| \\`{rounded.xs}\\` | 4px | Inline tags |\n| \\`{rounded.sm}\\` | 8px | Compact rows |\n| \\`{rounded.md}\\` | 12px | Form inputs |\n| \\`{rounded.lg}\\` | 16px | Mid-size cards |\n| \\`{rounded.xl}\\` | 24px | Feature cards, product-UI mockups, pricing tiers |\n| \\`{rounded.pill}\\` | 100px | All CTA buttons, search pills, badges |\n| \\`{rounded.full}\\` | 9999px | Asset icon circles, avatars |\n\nPill for interactive, card-radius (24px) for containers, full circle for icons. Sharp corners absent.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav-light\\`** — Default top nav on white pages. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Coinbase wordmark left, primary horizontal menu (Cryptocurrencies / Individuals / Businesses / Institutions / Developers / Company), search-icon + globe + Sign In + Sign Up CTAs right.\n\n**\\`top-nav-on-dark\\`** — Top nav over a dark hero band. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same layout.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature Coinbase Blue pill. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (16px / 600), padding 12px × 20px, height 44px, rounded \\`{rounded.pill}\\` (100px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`, deeper blue.\n\n**\\`button-primary-disabled\\`** — Faded blue tint. Background \\`{colors.primary-disabled}\\`. Cursor not-allowed.\n\n**\\`button-secondary-light\\`** — Soft-gray secondary on white surfaces. Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, same pill geometry.\n\n**\\`button-secondary-dark\\`** — Used on dark heroes. Background \\`{colors.surface-dark-elevated}\\`, text \\`{colors.on-dark}\\`, same pill geometry.\n\n**\\`button-outline-on-dark\\`** — Transparent pill with white outline. Background transparent, text \\`{colors.on-dark}\\`, 1px white border.\n\n**\\`button-tertiary-text\\`** — Inline text link. Background transparent, text \\`{colors.primary}\\`, type \\`{typography.button}\\`.\n\n**\\`button-pill-cta\\`** — Larger pill CTA used on the homepage hero (\"Get started\"). Same Coinbase Blue palette but with 56px height and 16px × 32px padding for a prouder stance.\n\n### Hero Bands\n\n**\\`hero-band-dark\\`** — The signature full-bleed dark hero. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, full-bleed layered product-UI mockup cards. Display headline left in \\`{typography.display-mega}\\` (80px / 400), subhead in \\`{typography.body-md}\\`, two CTAs.\n\n**\\`hero-band-light\\`** — White-canvas variant used on Wealth and Explore. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`. Same skeleton, light palette.\n\n### Cards\n\n**\\`product-ui-card-dark\\`** — The floating product-UI mockup. Background \\`{colors.surface-dark-elevated}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.xl}\\` (24px), padding 32px. Often shown as 2-3 stacked cards at slight rotation, mimicking a layered dashboard.\n\n**\\`product-ui-card-light\\`** — Light-canvas variant used on Explore for asset cards. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, same geometry, 1px hairline border.\n\n**\\`feature-card\\`** — Used in 3-up and 2-up grids. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.xl}\\`, padding 32px.\n\n### Trading Surfaces\n\n**\\`asset-row\\`** — Horizontal row in asset lists (Explore, Wealth). Background transparent, 1px hairline divider. Layout: 32px circular asset icon left, asset name + ticker, price column in \\`{typography.number-display}\\`, 24h change column with \\`{component.price-up-cell}\\` or \\`{component.price-down-cell}\\`.\n\n**\\`price-up-cell\\`** + **\\`price-down-cell\\`** — Inline price-change cells. Color only — green or red text in \\`{typography.number-display}\\`, no background fill.\n\n**\\`asset-icon-circular\\`** — Circular plate behind asset glyphs. Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.full}\\`, 32px diameter.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Standard pricing tier on Developer Platform. Background \\`{colors.canvas}\\`, rounded \\`{rounded.xl}\\`, padding 32px, 1px hairline border. Layout: tier name + price + feature checklist + CTA pill.\n\n**\\`pricing-tier-featured\\`** — The featured tier. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same skeleton, dark palette — visual inversion signals \"highlighted choice\" without colored ribbons.\n\n### Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (12px), padding 14px × 16px, height 48px, 1px hairline border. On focus, border thickens to 2px Coinbase Blue.\n\n**\\`search-input-pill\\`** — Pill-shaped search bar. Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.pill}\\`, padding 12px × 20px, height 44px.\n\n### Tags & Badges\n\n**\\`badge-pill\\`** — Small uppercase pill used as section labels (\"INSTITUTIONAL\", \"REGULATED\"). Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-strong}\\`, rounded \\`{rounded.pill}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-dark\\`** — Pre-footer \"Take control of your money\" band. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, vertical padding 96px. Centered headline + two CTAs.\n\n**\\`footer-light\\`** — Closing white-canvas footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 6-column link list.\n\n**\\`footer-link\\`** — Individual footer link. Background transparent, text \\`{colors.body}\\`.\n\n**\\`legal-band\\`** — Bottom strip beneath footer columns. All text \\`{colors.muted}\\` at \\`{typography.caption}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (Coinbase Blue) for primary CTAs, wordmark, brand-glyph illustrations, inline accent links.\n- Set every CTA as \\`{rounded.pill}\\` (100px); every asset glyph as \\`{rounded.full}\\`.\n- Keep CoinbaseDisplay headlines at weight 400.\n- Use the dark/light band rotation as page rhythm.\n- Render every numerical value in CoinbaseMono via \\`{typography.number-display}\\`.\n- Pair every dark hero with a layered product-UI mockup card stack.\n\n### Don't\n- Don't introduce a secondary brand color. Coinbase Blue is the only action color; trading green/red are semantic-only.\n- Don't bold display copy — display sits at weight 400; bolding shifts the brand voice.\n- Don't add drop shadow tiers — system has one shadow tier.\n- Don't use sharp \\`{rounded.none}\\` (0px) on CTAs.\n- Don't mix CoinbaseDisplay and CoinbaseSans inside the same headline.\n- Don't use trading green/red as a button background.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 80→40px; feature card grid 1-up; asset row stacks; nav collapses to hamburger; layered product-UI cards collapse to single card. |\n| Tablet | 640–1024px | Hero h1 64px; feature card grid 2-up; asset rows stay horizontal but compress columns. |\n| Desktop | 1024–1280px | Full hero h1 80px; feature card grid 3-up; full asset row layout. |\n| Wide | > 1280px | Content caps at 1200px; hero photography full-bleed. |\n\n### Touch Targets\n- Primary CTA pill at 44px height — at WCAG AAA.\n- Larger hero pill (\\`{component.button-pill-cta}\\`) at 56px — well above AAA.\n- Asset icon circles at 32px — borderline; padded 8px row creates effective 48px tap zone.\n- Search pill at 44px height — at AAA.\n\n### Collapsing Strategy\n- Top nav switches to hamburger sheet below 768px. Sign Up CTA stays visible.\n- Hero h1 steps down: 80 → 64 → 52 → 44 → 36px on smallest screens.\n- Layered product-UI mockup cards collapse from 2-3 stacked into a single card on mobile.\n- Pricing tier rows: 3-up → 2-up → 1-up.\n- Asset rows on mobile stack vertically: ticker line on top, price + change line beneath.\n\n## Iteration Guide\n\n1. Focus on a single component at a time. Reference YAML keys directly.\n2. New CTAs default to \\`{rounded.pill}\\` (100px); new icon plates default to \\`{rounded.full}\\`. Cards use \\`{rounded.xl}\\`.\n3. Variants live as separate entries inside the \\`components:\\` block.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented. Only Default and Active/Pressed.\n6. CoinbaseDisplay 400 for display, CoinbaseSans 400/600/700 for body. CoinbaseMono on every number.\n7. Coinbase Blue stays scarce — one or two blue moments per band.\n\n## Known Gaps\n\n- CoinbaseDisplay, CoinbaseSans, CoinbaseMono are licensed; Inter and JetBrains Mono are documented substitutes.\n- In-product trading surfaces (order book, charts, order forms) are behind login walls — this document covers marketing only.\n- Animation timings out of scope.\n- Form validation states beyond focus not visible on captured surfaces.\n- Accent yellow appears only inside Bitcoin asset glyph illustrations; documented as illustrative-only.\n`;\n"],"mappings":";AACO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/coinbase.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const coinbaseBrief = `---\nversion: alpha\nname: Coinbase\ndescription: An institutional-grade crypto exchange whose marketing surfaces read like a quietly-confident financial-services brand. The base canvas is pure white; Coinbase Blue (\\`#0052ff\\`) is the single brand voltage, used scarcely on primary CTAs, signature glyphs, and inline accent moments. Type runs Coinbase's licensed CoinbaseDisplay (display) and CoinbaseSans (body) at modest weights — display sits at weight 400 not 700, signaling editorial calm rather than fintech-bombastic. Page rhythm rotates between bright white sections, soft gray elevation bands, and full-bleed dark editorial heroes (\\`#0a0b0d\\`) carrying product-ui mockup cards. Iconography is geometric and minimal; depth comes from card-on-card layering, never decorative shadows.\n\ncolors:\n  primary: \"#0052ff\"\n  primary-active: \"#003ecc\"\n  primary-disabled: \"#a8b8cc\"\n  ink: \"#0a0b0d\"\n  body: \"#5b616e\"\n  body-strong: \"#0a0b0d\"\n  muted: \"#7c828a\"\n  muted-soft: \"#a8acb3\"\n  hairline: \"#dee1e6\"\n  hairline-soft: \"#eef0f3\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f7f7f7\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#eef0f3\"\n  surface-dark: \"#0a0b0d\"\n  surface-dark-elevated: \"#16181c\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#a8acb3\"\n  semantic-up: \"#05b169\"\n  semantic-down: \"#cf202f\"\n  accent-yellow: \"#f4b000\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Coinbase Display', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\"\n    fontSize: 80px\n    fontWeight: 400\n    lineHeight: 1.0\n    letterSpacing: -2px\n  display-xl:\n    fontFamily: \"'Coinbase Display', sans-serif\"\n    fontSize: 64px\n    fontWeight: 400\n    lineHeight: 1.0\n    letterSpacing: -1.6px\n  display-lg:\n    fontFamily: \"'Coinbase Display', sans-serif\"\n    fontSize: 52px\n    fontWeight: 400\n    lineHeight: 1.0\n    letterSpacing: -1.3px\n  display-md:\n    fontFamily: \"'Coinbase Display', sans-serif\"\n    fontSize: 44px\n    fontWeight: 400\n    lineHeight: 1.09\n    letterSpacing: -1px\n  display-sm:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 36px\n    fontWeight: 400\n    lineHeight: 1.11\n    letterSpacing: -0.5px\n  title-lg:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 32px\n    fontWeight: 400\n    lineHeight: 1.13\n    letterSpacing: -0.4px\n  title-md:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.33\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-strong:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 700\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption-strong:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 12px\n    fontWeight: 600\n    lineHeight: 1.5\n    letterSpacing: 0\n  number-display:\n    fontFamily: \"'Coinbase Mono', 'Coinbase Sans', monospace\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  button:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'Coinbase Sans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  none: 0px\n  xs: 4px\n  sm: 8px\n  md: 12px\n  lg: 16px\n  xl: 24px\n  pill: 100px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  base: 16px\n  md: 20px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  top-nav-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  top-nav-on-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 20px\n    height: 44px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.pill}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.pill}\"\n  button-secondary-light:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 20px\n    height: 44px\n  button-secondary-dark:\n    backgroundColor: \"{colors.surface-dark-elevated}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 20px\n    height: 44px\n  button-outline-on-dark:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 11px 19px\n    height: 44px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.button}\"\n  button-pill-cta:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 16px 32px\n    height: 56px\n  hero-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  hero-band-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  product-ui-card-dark:\n    backgroundColor: \"{colors.surface-dark-elevated}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  product-ui-card-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  feature-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  asset-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 16px 0\n  price-up-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.semantic-up}\"\n    typography: \"{typography.number-display}\"\n  price-down-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.semantic-down}\"\n    typography: \"{typography.number-display}\"\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  pricing-tier-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  cta-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 14px 16px\n    height: 48px\n  search-input-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 20px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-strong}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  asset-icon-circular:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.full}\"\n    size: 32px\n  footer-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px 48px\n  footer-link:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n  legal-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption}\"\n---\n\n## Overview\n\nCoinbase reads like an institutional financial brand that happens to trade crypto — the marketing surfaces are quiet, white-canvas, editorially-spaced, and almost monochromatic. The single brand voltage is **Coinbase Blue** (\\`{colors.primary}\\` — #0052ff), used scarcely: every primary CTA pill, the brand wordmark, and inline emphasis links. Beyond that one blue, the system is white canvas + ink + soft gray elevation bands + a deep near-black editorial canvas (\\`{colors.surface-dark}\\` — #0a0b0d) for full-bleed product-mockup heroes.\n\nType pairs **CoinbaseDisplay** for hero headlines with **CoinbaseSans** for body, captions, and navigation. Display sits at **weight 400** — not the 700+ typical of trading platforms. The choice signals editorial calm and institutional trust rather than fintech urgency.\n\nThe page rhythm rotates three modes: bright white editorial sections, soft-gray elevation bands, and **full-bleed dark editorial heroes** carrying layered product-UI mockup cards. The dark hero with floating dashboard mockups is the single most distinctive component.\n\n**Key Characteristics:**\n- Single accent color: \\`{colors.primary}\\` (#0052ff Coinbase Blue) carries every primary CTA, wordmark, and inline brand link. Used scarcely.\n- Modest display weights — CoinbaseDisplay at weight 400, never 700+.\n- Editorial pill geometry: every CTA is \\`{rounded.pill}\\` (100px), every asset glyph is \\`{rounded.full}\\`, every card is \\`{rounded.xl}\\` (24px). Sharp corners absent.\n- Full-bleed dark heroes with floating product-UI cards: \\`{component.hero-band-dark}\\` plus inline \\`{component.product-ui-card-dark}\\` mockups is the brand's strongest signature pattern.\n- Trading semantics: \\`{colors.semantic-up}\\` (#05b169) and \\`{colors.semantic-down}\\` (#cf202f) — text color only, never background fills.\n- 96px section rhythm — generous editorial pacing.\n\n## Colors\n\n### Brand & Accent\n- **Coinbase Blue** (\\`{colors.primary}\\` — #0052ff): The single brand color. Every primary CTA pill, the Coinbase wordmark, and inline brand links.\n- **Coinbase Blue Active** (\\`{colors.primary-active}\\` — #003ecc): Press-state darken on the primary pill.\n- **Coinbase Blue Disabled** (\\`{colors.primary-disabled}\\` — #a8b8cc): Faded-blue tint for disabled CTAs.\n- **Accent Yellow** (\\`{colors.accent-yellow}\\` — #f4b000): A small sub-brand accent used very sparingly on Bitcoin/asset glyph fills inside feature cards. Illustrative-only, not an action color.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): The default page floor.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f7f7f7): Subtle alternating band surface.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #eef0f3): The light-gray fill behind secondary buttons, search pills, asset-icon plates.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #0a0b0d): Deep near-black canvas for full-bleed dark heroes, CTA bands. Same hex as \\`{colors.ink}\\` — page-floor and text-color share the value.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #16181c): One step lighter, used for floating product-UI mockup cards inside dark heroes.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #dee1e6): Default 1px divider on white surfaces.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #eef0f3): Lighter divider — same hex as \\`{colors.surface-strong}\\`.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #0a0b0d): Display headings, primary nav, body emphasis.\n- **Body** (\\`{colors.body}\\` — #5b616e): Default running-text — slightly cool gray.\n- **Body Strong** (\\`{colors.body-strong}\\` — #0a0b0d): Same as ink, used for stronger emphasis.\n- **Muted** (\\`{colors.muted}\\` — #7c828a): Sub-titles, breadcrumbs, footer secondary.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #a8acb3): Disabled link text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on Coinbase Blue CTAs.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on dark heroes.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a8acb3): Muted off-white for secondary text on dark.\n\n### Trading Semantics\n- **Semantic Up** (\\`{colors.semantic-up}\\` — #05b169): \"Price up\" green, text color only.\n- **Semantic Down** (\\`{colors.semantic-down}\\` — #cf202f): \"Price down\" red, text color only.\n\n## Typography\n\n### Font Family\nThe system runs **CoinbaseDisplay** (display headlines), **CoinbaseSans** (body, navigation, captions, buttons), **CoinbaseIcons** (icon font), and **CoinbaseMono** for tabular numerical data. Fallback stack: \\`-apple-system, system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif\\`.\n\nThe display/body split is functional: CoinbaseDisplay carries hero headlines only; CoinbaseSans carries everything else.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 80px | 400 | 1.0 | -2px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 64px | 400 | 1.0 | -1.6px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 52px | 400 | 1.0 | -1.3px | Section heads |\n| \\`{typography.display-md}\\` | 44px | 400 | 1.09 | -1px | CTA-band headlines |\n| \\`{typography.display-sm}\\` | 36px | 400 | 1.11 | -0.5px | Sub-section heads — CoinbaseSans |\n| \\`{typography.title-lg}\\` | 32px | 400 | 1.13 | -0.4px | Card group titles |\n| \\`{typography.title-md}\\` | 18px | 600 | 1.33 | 0 | Component titles, asset row primary |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.25 | 0 | List labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default body |\n| \\`{typography.body-strong}\\` | 16px | 700 | 1.5 | 0 | Emphasized body |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.5 | 0 | Footer body |\n| \\`{typography.caption}\\` | 13px | 400 | 1.5 | 0 | Photo captions |\n| \\`{typography.caption-strong}\\` | 12px | 600 | 1.5 | 0 | Badge pill labels |\n| \\`{typography.number-display}\\` | 18px | 500 | 1.4 | 0 | Asset prices, percent changes — CoinbaseMono |\n| \\`{typography.button}\\` | 16px | 600 | 1.15 | 0 | Standard CTA pill |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu items |\n\n### Principles\n- **Display weight stays at 400.** The single most distinctive typographic choice — signals \"calm institutional brand\" rather than \"trading-platform urgency.\"\n- **Negative letter-spacing on display only.** Display uses -1px to -2px tracking; body stays at 0.\n- **CoinbaseMono on every number.** Asset prices, percent changes — anything tabular renders in CoinbaseMono.\n\n### Note on Font Substitutes\nCoinbaseDisplay, CoinbaseSans, and CoinbaseMono are licensed Coinbase typefaces.\n- **CoinbaseDisplay → Inter** at weight 400, letter-spacing -1.5%.\n- **CoinbaseSans → Inter** at weight 400/600.\n- **CoinbaseMono → JetBrains Mono** or **Geist Mono** at weight 500.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.base}\\` 16px · \\`{spacing.md}\\` 20px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 96px.\n- **Section padding:** \\`{spacing.section}\\` (96px) for every major editorial band.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards and product-UI mockups.\n\n### Grid & Container\n- **Max content width:** ~1200px centered. Hero photography full-bleed.\n- **Editorial body:** Single 12-column grid.\n- **Feature card grids:** 2-up at desktop for hero splits, 3-up for benefit grids.\n- **Footer:** 6-column link list at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing — closer to Bloomberg or the Financial Times than to a trading dashboard. 96px between bands; cards inside bands sit 24px apart. Density lives behind login walls, not on marketing.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | 80% of surfaces |\n| Hairline border | 1px \\`{colors.hairline}\\` | Feature card outlines on white |\n| Soft drop | \\`0 4px 12px rgba(0, 0, 0, 0.04)\\` | Single shadow tier — hovered cards |\n| Photographic | Full-bleed product-UI mockups | Hero depth |\n\n### Decorative Depth\n- **Layered product-UI cards inside dark heroes** is the most distinctive decorative pattern — a \\`{component.product-ui-card-dark}\\` floats above a darker base canvas, often with a second smaller card overlapping at an angle.\n- **Geometric brand illustrations** carry illustrative depth where shadows would otherwise.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Reserved (essentially unused) |\n| \\`{rounded.xs}\\` | 4px | Inline tags |\n| \\`{rounded.sm}\\` | 8px | Compact rows |\n| \\`{rounded.md}\\` | 12px | Form inputs |\n| \\`{rounded.lg}\\` | 16px | Mid-size cards |\n| \\`{rounded.xl}\\` | 24px | Feature cards, product-UI mockups, pricing tiers |\n| \\`{rounded.pill}\\` | 100px | All CTA buttons, search pills, badges |\n| \\`{rounded.full}\\` | 9999px | Asset icon circles, avatars |\n\nPill for interactive, card-radius (24px) for containers, full circle for icons. Sharp corners absent.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav-light\\`** — Default top nav on white pages. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Coinbase wordmark left, primary horizontal menu (Cryptocurrencies / Individuals / Businesses / Institutions / Developers / Company), search-icon + globe + Sign In + Sign Up CTAs right.\n\n**\\`top-nav-on-dark\\`** — Top nav over a dark hero band. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same layout.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature Coinbase Blue pill. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (16px / 600), padding 12px × 20px, height 44px, rounded \\`{rounded.pill}\\` (100px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`, deeper blue.\n\n**\\`button-primary-disabled\\`** — Faded blue tint. Background \\`{colors.primary-disabled}\\`. Cursor not-allowed.\n\n**\\`button-secondary-light\\`** — Soft-gray secondary on white surfaces. Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, same pill geometry.\n\n**\\`button-secondary-dark\\`** — Used on dark heroes. Background \\`{colors.surface-dark-elevated}\\`, text \\`{colors.on-dark}\\`, same pill geometry.\n\n**\\`button-outline-on-dark\\`** — Transparent pill with white outline. Background transparent, text \\`{colors.on-dark}\\`, 1px white border.\n\n**\\`button-tertiary-text\\`** — Inline text link. Background transparent, text \\`{colors.primary}\\`, type \\`{typography.button}\\`.\n\n**\\`button-pill-cta\\`** — Larger pill CTA used on the homepage hero (\"Get started\"). Same Coinbase Blue palette but with 56px height and 16px × 32px padding for a prouder stance.\n\n### Hero Bands\n\n**\\`hero-band-dark\\`** — The signature full-bleed dark hero. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, full-bleed layered product-UI mockup cards. Display headline left in \\`{typography.display-mega}\\` (80px / 400), subhead in \\`{typography.body-md}\\`, two CTAs.\n\n**\\`hero-band-light\\`** — White-canvas variant used on Wealth and Explore. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`. Same skeleton, light palette.\n\n### Cards\n\n**\\`product-ui-card-dark\\`** — The floating product-UI mockup. Background \\`{colors.surface-dark-elevated}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.xl}\\` (24px), padding 32px. Often shown as 2-3 stacked cards at slight rotation, mimicking a layered dashboard.\n\n**\\`product-ui-card-light\\`** — Light-canvas variant used on Explore for asset cards. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, same geometry, 1px hairline border.\n\n**\\`feature-card\\`** — Used in 3-up and 2-up grids. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.xl}\\`, padding 32px.\n\n### Trading Surfaces\n\n**\\`asset-row\\`** — Horizontal row in asset lists (Explore, Wealth). Background transparent, 1px hairline divider. Layout: 32px circular asset icon left, asset name + ticker, price column in \\`{typography.number-display}\\`, 24h change column with \\`{component.price-up-cell}\\` or \\`{component.price-down-cell}\\`.\n\n**\\`price-up-cell\\`** + **\\`price-down-cell\\`** — Inline price-change cells. Color only — green or red text in \\`{typography.number-display}\\`, no background fill.\n\n**\\`asset-icon-circular\\`** — Circular plate behind asset glyphs. Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.full}\\`, 32px diameter.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Standard pricing tier on Developer Platform. Background \\`{colors.canvas}\\`, rounded \\`{rounded.xl}\\`, padding 32px, 1px hairline border. Layout: tier name + price + feature checklist + CTA pill.\n\n**\\`pricing-tier-featured\\`** — The featured tier. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same skeleton, dark palette — visual inversion signals \"highlighted choice\" without colored ribbons.\n\n### Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (12px), padding 14px × 16px, height 48px, 1px hairline border. On focus, border thickens to 2px Coinbase Blue.\n\n**\\`search-input-pill\\`** — Pill-shaped search bar. Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.pill}\\`, padding 12px × 20px, height 44px.\n\n### Tags & Badges\n\n**\\`badge-pill\\`** — Small uppercase pill used as section labels (\"INSTITUTIONAL\", \"REGULATED\"). Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-strong}\\`, rounded \\`{rounded.pill}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-dark\\`** — Pre-footer \"Take control of your money\" band. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, vertical padding 96px. Centered headline + two CTAs.\n\n**\\`footer-light\\`** — Closing white-canvas footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 6-column link list.\n\n**\\`footer-link\\`** — Individual footer link. Background transparent, text \\`{colors.body}\\`.\n\n**\\`legal-band\\`** — Bottom strip beneath footer columns. All text \\`{colors.muted}\\` at \\`{typography.caption}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (Coinbase Blue) for primary CTAs, wordmark, brand-glyph illustrations, inline accent links.\n- Set every CTA as \\`{rounded.pill}\\` (100px); every asset glyph as \\`{rounded.full}\\`.\n- Keep CoinbaseDisplay headlines at weight 400.\n- Use the dark/light band rotation as page rhythm.\n- Render every numerical value in CoinbaseMono via \\`{typography.number-display}\\`.\n- Pair every dark hero with a layered product-UI mockup card stack.\n\n### Don't\n- Don't introduce a secondary brand color. Coinbase Blue is the only action color; trading green/red are semantic-only.\n- Don't bold display copy — display sits at weight 400; bolding shifts the brand voice.\n- Don't add drop shadow tiers — system has one shadow tier.\n- Don't use sharp \\`{rounded.none}\\` (0px) on CTAs.\n- Don't mix CoinbaseDisplay and CoinbaseSans inside the same headline.\n- Don't use trading green/red as a button background.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 80→40px; feature card grid 1-up; asset row stacks; nav collapses to hamburger; layered product-UI cards collapse to single card. |\n| Tablet | 640–1024px | Hero h1 64px; feature card grid 2-up; asset rows stay horizontal but compress columns. |\n| Desktop | 1024–1280px | Full hero h1 80px; feature card grid 3-up; full asset row layout. |\n| Wide | > 1280px | Content caps at 1200px; hero photography full-bleed. |\n\n### Touch Targets\n- Primary CTA pill at 44px height — at WCAG AAA.\n- Larger hero pill (\\`{component.button-pill-cta}\\`) at 56px — well above AAA.\n- Asset icon circles at 32px — borderline; padded 8px row creates effective 48px tap zone.\n- Search pill at 44px height — at AAA.\n\n### Collapsing Strategy\n- Top nav switches to hamburger sheet below 768px. Sign Up CTA stays visible.\n- Hero h1 steps down: 80 → 64 → 52 → 44 → 36px on smallest screens.\n- Layered product-UI mockup cards collapse from 2-3 stacked into a single card on mobile.\n- Pricing tier rows: 3-up → 2-up → 1-up.\n- Asset rows on mobile stack vertically: ticker line on top, price + change line beneath.\n\n## Iteration Guide\n\n1. Focus on a single component at a time. Reference YAML keys directly.\n2. New CTAs default to \\`{rounded.pill}\\` (100px); new icon plates default to \\`{rounded.full}\\`. Cards use \\`{rounded.xl}\\`.\n3. Variants live as separate entries inside the \\`components:\\` block.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented. Only Default and Active/Pressed.\n6. CoinbaseDisplay 400 for display, CoinbaseSans 400/600/700 for body. CoinbaseMono on every number.\n7. Coinbase Blue stays scarce — one or two blue moments per band.\n\n## Known Gaps\n\n- CoinbaseDisplay, CoinbaseSans, CoinbaseMono are licensed; Inter and JetBrains Mono are documented substitutes.\n- In-product trading surfaces (order book, charts, order forms) are behind login walls — this document covers marketing only.\n- Animation timings out of scope.\n- Form validation states beyond focus not visible on captured surfaces.\n- Accent yellow appears only inside Bitcoin asset glyph illustrations; documented as illustrative-only.\n`;\n"],"mappings":";AACO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}