@hex-core/themes 0.1.0 → 0.2.0

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,3 @@
+declare 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";
+
+export { cohereBrief };

package/dist/presets/_briefs/cohere.js

@@ -0,0 +1,457 @@
+// src/presets/_briefs/cohere.ts
+var cohereBrief = `---
+version: alpha
+name: Cohere
+description: 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.
+
+colors:
+  primary: "#17171c"
+  cohere-black: "#000000"
+  ink: "#212121"
+  deep-green: "#003c33"
+  dark-navy: "#071829"
+  canvas: "#ffffff"
+  soft-stone: "#eeece7"
+  pale-green: "#edfce9"
+  pale-blue: "#f1f5ff"
+  hairline: "#d9d9dd"
+  border-light: "#e5e7eb"
+  card-border: "#f2f2f2"
+  muted: "#93939f"
+  slate: "#75758a"
+  body-muted: "#616161"
+  action-blue: "#1863dc"
+  focus-blue: "#4c6ee6"
+  coral: "#ff7759"
+  coral-soft: "#ffad9b"
+  form-focus: "#9b60aa"
+  on-primary: "#ffffff"
+  on-dark: "#ffffff"
+  error: "#b30000"
+
+typography:
+  hero-display:
+    fontFamily: CohereText
+    fontSize: 96px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: -1.92px
+  product-display:
+    fontFamily: CohereText
+    fontSize: 72px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: -1.44px
+  section-display:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 60px
+    fontWeight: 400
+    lineHeight: 1
+    letterSpacing: -1.2px
+  section-heading:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 48px
+    fontWeight: 400
+    lineHeight: 1.2
+    letterSpacing: -0.48px
+  card-heading:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 32px
+    fontWeight: 400
+    lineHeight: 1.2
+    letterSpacing: -0.32px
+  feature-heading:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 24px
+    fontWeight: 400
+    lineHeight: 1.3
+    letterSpacing: 0
+  body-large:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+  body:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  button:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.71
+    letterSpacing: 0
+  caption:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+  mono-label:
+    fontFamily: CohereMono
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0.28px
+  micro:
+    fontFamily: Unica77 Cohere Web
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+
+rounded:
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 22px
+  xl: 30px
+  pill: 32px
+  full: 9999px
+
+spacing:
+  xxs: 2px
+  xs: 6px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 24px
+  xxl: 32px
+  section: 80px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.pill}"
+    padding: 12px 24px
+  button-secondary:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.xs}"
+    padding: 8px 0
+  button-pill-outline:
+    backgroundColor: transparent
+    textColor: "{colors.primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.xl}"
+    padding: 6px 12px
+  announcement-bar:
+    backgroundColor: "{colors.cohere-black}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.micro}"
+    height: 36px
+  hero-photo-card:
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.lg}"
+  agent-console-card:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-dark}"
+    rounded: "{rounded.sm}"
+    padding: 24px
+  trust-logo-strip:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption}"
+  capability-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.xs}"
+    padding: 24px
+  dark-feature-band:
+    backgroundColor: "{colors.deep-green}"
+    textColor: "{colors.on-dark}"
+    rounded: "{rounded.lg}"
+    padding: 80px
+  product-card:
+    backgroundColor: "{colors.soft-stone}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.sm}"
+    padding: 32px
+  blog-filter-chip:
+    backgroundColor: transparent
+    textColor: "{colors.coral}"
+    typography: "{typography.card-heading}"
+    rounded: "{rounded.sm}"
+    padding: 8px 14px
+  research-table:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-large}"
+  contact-form-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  footer-newsletter:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.micro}"
+---
+
+## Overview
+
+Cohere'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.
+
+What 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.
+
+**Key Characteristics:**
+- Monumental display headlines with very tight line height and negative tracking.
+- White editorial canvases interrupted by deep green, dark navy, and image-led CTA bands.
+- Rounded media cards and product cards, usually 8px to 22px.
+- Pill CTAs in near-black or white, with most secondary actions rendered as underlined text links.
+- Trust-logo strips with monochrome partner marks and very wide vertical spacing.
+- Agent-console mockups using dark panels, small status chips, and product integration badges.
+- Blog and research surfaces with prominent taxonomy chips, long rule-separated lists, and search fields.
+
+## Colors
+
+### Brand & Accent
+
+- **Cohere Black** (\`#000000\`): Announcement bar, highest-contrast text, and the global brand anchor.
+- **Near-Black Primary** (\`#17171c\`): Primary CTA buttons, dark footer, and deep UI cards.
+- **Deep Enterprise Green** (\`#003c33\`): Product hero bands for North and Command-style dark sections.
+- **Dark Navy** (\`#071829\`): Financial-services and security-oriented solution bands.
+- **Action Blue** (\`#1863dc\`): Editorial links, pagination, and secondary action emphasis.
+- **Coral** (\`#ff7759\`): Blog category chips, taxonomy outlines, and warm product markers.
+- **Soft Coral** (\`#ffad9b\`): Pale chip borders and segmented article-label details.
+
+### Surface & Background
+
+- **Canvas White** (\`#ffffff\`): Dominant page background and form/card surface.
+- **Soft Stone** (\`#eeece7\`): Product cards, testimonial placeholders, and warm neutral surface blocks.
+- **Pale Green Wash** (\`#edfce9\`): North page section backdrop behind stacked dark capability panels.
+- **Pale Blue Wash** (\`#f1f5ff\`): Blog CTA surface behind abstract 3D imagery.
+- **Card Border** (\`#f2f2f2\`): Softest card containment line.
+
+### Text & Rules
+
+- **Ink** (\`#212121\`): Default body text and most link text on light backgrounds.
+- **Muted Slate** (\`#93939f\`): Footer links, dates, metadata, and de-emphasized labels.
+- **Slate** (\`#75758a\`): Research separators and tertiary text.
+- **Hairline** (\`#d9d9dd\`): Standard list rules and section dividers.
+- **Border Light** (\`#e5e7eb\`): Secondary divider and utility rule.
+
+### Semantic
+
+- **Focus Blue** (\`#4c6ee6\`): Keyboard focus and ring color.
+- **Form Focus Violet** (\`#9b60aa\`): Focus border for text inputs.
+- **Error Red** (\`#b30000\`): Extracted ring/shadow color associated with validation-like states.
+
+### Gradient System
+
+Cohere 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.
+
+## Typography
+
+### Font Family
+
+- **Display**: \`CohereText\`, falling back to \`Space Grotesk\`, \`Inter\`, \`ui-sans-serif\`, and \`system-ui\`.
+- **Body/UI**: \`Unica77 Cohere Web\`, falling back to \`Inter\`, \`Arial\`, \`ui-sans-serif\`, and \`system-ui\`.
+- **Technical labels**: \`CohereMono\`, falling back to \`Arial\`, \`ui-sans-serif\`, and \`system-ui\`.
+- **Icons**: Cohere uses custom icon fonts and thin-line geometric illustrations.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|---|---|---:|---:|---:|---:|---|
+| Hero Display | CohereText | 96px | 400 | 1.00 | -1.92px | Home page declaration scale. |
+| Product Display | CohereText | 72px | 400 | 1.00 | -1.44px | Product and research hero headlines. |
+| Section Display | Unica77 | 60px | 400 | 1.00 | -1.2px | Large product-page headings. |
+| Section Heading | Unica77 | 48px | 400 | 1.20 | -0.48px | Split hero and CTA headings. |
+| Card Heading | Unica77 | 32px | 400 | 1.20 | -0.32px | Feature card and list section titles. |
+| Feature Heading | Unica77 | 24px | 400 | 1.30 | 0 | Cards, filters, and article titles. |
+| Body Large | Unica77 | 18px | 400 | 1.40 | 0 | Lead text and larger paragraphs. |
+| Body | Unica77 | 16px | 400 | 1.50 | 0 | Default copy and link text. |
+| Button | Unica77 | 14px | 500 | 1.71 | 0 | Compact CTA labels. |
+| Caption | Unica77 | 14px | 400 | 1.40 | 0 | Metadata and small explanatory text. |
+| Mono Label | CohereMono | 14px | 400 | 1.40 | 0.28px | Uppercase technical labels. |
+| Micro | Unica77 | 12px | 400 | 1.40 | 0 | Footer, nav microcopy, and small links. |
+
+### Principles
+
+- Use massive type sparingly; Cohere pages often have one oversized headline and then settle into restrained 16px-24px UI copy.
+- Keep display type tight. Hero copy should feel compact and carved, not airy.
+- Avoid heavy bold weights. Size, spacing, and surface contrast do most of the hierarchy work.
+- Use uppercase mono labels for category and system markers, especially on product and research pages.
+- Editorial pages can use coral chips and blue links, but the base typography remains black and measured.
+
+## Layout
+
+### Spacing System
+
+The 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\`.
+
+Large 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.
+
+### Grid & Container
+
+- Global nav uses a three-zone layout: logo left, menu centered, sign-in/CTA right.
+- Home hero is centered text above a two-card media composition: a wide product mockup card beside a narrower photography card.
+- Feature sections commonly use 3-column cards on desktop.
+- Product pages alternate centered hero blocks, trust-logo strips, large single-feature bands, and 2- or 3-column card grids.
+- Research pages use full-width lists with date and chip columns instead of decorative cards.
+- Forms use two-column input rows inside a rounded white card on dark or stone section backgrounds.
+
+### Whitespace Philosophy
+
+Cohere 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.
+
+## Elevation & Depth
+
+Cohere is mostly flat. Depth comes from surface alternation, media contrast, rounded corners, and thin borders rather than drop shadows.
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat | No shadow, white or dark field | Hero copy, research lists, editorial surfaces |
+| Bordered | 1px \`#d9d9dd\`, \`#e5e7eb\`, or dark translucent rules | Research rows, forms, pale cards, footer inputs |
+| Media Lift | Rounded image or video over contrasting section color | Hero photo cards, product videos, CTA imagery |
+| Dark Product Field | Deep green or navy full-width band | Command, North, financial services, security sections |
+
+## Shapes
+
+### Radius Scale
+
+| Token | Value | Role |
+|---|---:|---|
+| \`xs\` | 4px | Small images, search fields, article thumbnails, utility elements |
+| \`sm\` | 8px | Blog chips, cards, small media, dialogs |
+| \`md\` | 16px | Medium product cards and grouped blocks |
+| \`lg\` | 22px | Signature media-card and soft placeholder radius |
+| \`xl\` | 30px | Research/topic filter pills |
+| \`pill\` | 32px | Primary CTA buttons |
+| \`full\` | 9999px | Round status elements and fully pill-shaped controls |
+
+### Image Treatment
+
+Images 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.
+
+## Components
+
+### **\`button-primary\`**
+
+Near-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.
+
+### **\`button-secondary\`**
+
+Text-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.
+
+### **\`button-pill-outline\`**
+
+Outlined pill control with transparent fill, 1px dark border, and 30px radius. Used for research filters, topic tags, and lightweight taxonomy controls.
+
+### **\`announcement-bar\`**
+
+Full-width black strip above the nav, 36px tall, centered microcopy with an underlined "Learn more" link and a close control at the far right.
+
+### **\`hero-photo-card\`**
+
+Rounded 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.
+
+### **\`agent-console-card\`**
+
+Dark 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.
+
+### **\`trust-logo-strip\`**
+
+Centered 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.
+
+### **\`capability-card\`**
+
+Content 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.
+
+### **\`dark-feature-band\`**
+
+Deep 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.
+
+### **\`product-card\`**
+
+Warm 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.
+
+### **\`blog-filter-chip\`**
+
+Large 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.
+
+### **\`research-table\`**
+
+Rule-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.
+
+### **\`contact-form-card\`**
+
+Rounded 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.
+
+### **\`footer-newsletter\`**
+
+Dark 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.
+
+## Do's and Don'ts
+
+### Do
+
+- Use white canvas as the default surface; introduce dark green or navy as full-width product bands.
+- Keep primary CTAs pill-shaped and near-black on light surfaces.
+- Use 22px radius on major media cards and placeholders.
+- Use coral for editorial taxonomy and small warm accents, not as the main CTA system.
+- Use monochrome trust logos with wide spacing.
+- Use thin-line geometric illustrations for research and capability icons.
+- Let photography and product mockups carry color, while the UI shell stays restrained.
+
+### Don't
+
+- Do not turn coral or blue into broad decorative surface colors.
+- Do not add heavy drop shadows to cards.
+- Do not make every section card-based; Cohere often uses unframed rows, rules, and open space.
+- Do not use rounded cards below 8px for major media.
+- Do not replace the display/body type split with one generic sans-serif voice.
+- Do not render undocumented interaction variants in documentation or previews.
+- Do not use saturated gradients as normal UI backgrounds; keep gradients media-led.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---:|---|
+| Small Mobile | <425px | Single-column cards, compact nav, reduced hero headline scale |
+| Mobile | 425-640px | Hero media stacks, card grids become one column, form rows stack |
+| Large Mobile | 640-768px | Wider one-column layouts with larger media cards |
+| Tablet | 768-1024px | Two-column cards begin, nav spacing tightens |
+| Desktop | 1024-1440px | Full nav, 3-column card grids, split hero compositions |
+| Large Desktop | 1440-2560px | Wide containers and large empty vertical intervals |
+
+### Touch Targets
+
+Primary 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.
+
+### Collapsing Strategy
+
+- Nav collapses from full horizontal links to a compact mobile menu.
+- Hero media moves from split cards to stacked cards.
+- Product and capability grids collapse from 3 columns to 2 and then 1.
+- Form fields collapse from paired rows to a single column.
+- Research rows preserve their rule-separated structure but stack metadata below titles on smaller widths.
+
+## Iteration Guide
+
+1. 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.
+2. Use \`button-primary\` for the single highest-priority action and \`button-secondary\` for the companion action.
+3. Use \`hero-photo-card\` or \`agent-console-card\` when a page needs visual energy; avoid invented dashboard data.
+4. For editorial pages, combine \`blog-filter-chip\`, \`button-pill-outline\`, and \`research-table\` instead of generic marketing cards.
+5. Keep component examples structurally honest: placeholder product frames are better than invented product content.
+
+## Known Gaps
+
+- Exact proprietary font files are not bundled; use the documented fallbacks when implementing externally.
+- Mobile screenshots were not regenerated in this public update, so mobile behavior is documented from the desktop system and existing responsive patterns.
+- Some live pages lazy-load content blocks late; blank testimonial placeholders are documented as placeholder skeleton surfaces rather than filled testimonial cards.
+`;
+export {
+  cohereBrief
+};
+//# sourceMappingURL=cohere.js.map

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

@@ -0,0 +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":[]}