@hex-core/themes 0.1.1 → 0.2.0

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

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

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

@@ -0,0 +1,3 @@
+declare const composioBrief = "---\nversion: alpha\nname: Composio\ndescription: A developer-tools brand for AI-agent tool integration whose marketing surfaces lean into a dark, technical aesthetic with a single deep-electric-blue voltage (`#0007cd`). The page floor is near-black (`#0f0f0f`); cards float above on subtle gray-tinted surfaces. abcDiatype carries display and body in a single sans family with weights 400-600. The brand's strongest visual signature is a four-pane terminal-style mockup (a 2\u00D72 grid of dark code/output panels) with a central blue spotlight glow \u2014 used as the homepage hero anchor.\n\ncolors:\n  primary: \"#0007cd\"\n  primary-active: \"#0005a3\"\n  primary-glow: \"#1a26ff\"\n  ink: \"#ffffff\"\n  body: \"#a8a8a8\"\n  body-strong: \"#ffffff\"\n  muted: \"#888888\"\n  muted-soft: \"#666666\"\n  hairline: \"#222222\"\n  hairline-soft: \"#1a1a1a\"\n  hairline-strong: \"#333333\"\n  canvas: \"#0f0f0f\"\n  canvas-deep: \"#000000\"\n  surface-card: \"#181818\"\n  surface-card-elevated: \"#222222\"\n  surface-strong: \"#2a2a2a\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  accent-cyan: \"#00d4ff\"\n  accent-violet: \"#7b3aed\"\n  semantic-error: \"#ff4d4d\"\n  semantic-success: \"#33d17a\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 72px\n    fontWeight: 500\n    lineHeight: 1.05\n    letterSpacing: -2.16px\n  display-xl:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 56px\n    fontWeight: 500\n    lineHeight: 1.05\n    letterSpacing: -1.68px\n  display-lg:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 44px\n    fontWeight: 500\n    lineHeight: 1.1\n    letterSpacing: -1.32px\n  display-md:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 32px\n    fontWeight: 500\n    lineHeight: 1.15\n    letterSpacing: -0.96px\n  display-sm:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 24px\n    fontWeight: 500\n    lineHeight: 1.25\n    letterSpacing: -0.5px\n  title-md:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 11px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.88px\n    textTransform: uppercase\n  code:\n    fontFamily: \"'JetBrains Mono', 'Fira Code', monospace\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'abcDiatype', ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  none: 0px\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  base: 16px\n  md: 20px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  top-nav-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 18px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.md}\"\n  button-secondary-dark:\n    backgroundColor: \"{colors.surface-card-elevated}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 18px\n    height: 40px\n  button-outline:\n    backgroundColor: transparent\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 9px 17px\n    height: 40px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.button}\"\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  terminal-mockup-grid:\n    backgroundColor: \"{colors.canvas-deep}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  terminal-pane:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 28px\n  toolkit-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  toolkit-icon:\n    backgroundColor: \"{colors.surface-card-elevated}\"\n    rounded: \"{rounded.md}\"\n    size: 40px\n  spotlight-glow-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 48px\n  code-block:\n    backgroundColor: \"{colors.canvas-deep}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  badge-pill:\n    backgroundColor: \"{colors.surface-card-elevated}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  search-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 16px\n    height: 40px\n  cta-band-spotlight:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body-strong}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  testimonial-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  footer-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px 48px\n  footer-link:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n---\n\n## Overview\n\nComposio's marketing site reads like a serious developer-infrastructure brand \u2014 closer to Vercel or Stripe Docs in atmosphere than to a typical AI-tools startup. The base canvas is a near-black `{colors.canvas}` (#0f0f0f) holding white type and a single voltage of **deep electric blue** (`{colors.primary}` \u2014 #0007cd) carrying every primary CTA, brand wordmark, and atmospheric spotlight glow that backs the homepage hero.\n\nType runs **abcDiatype** as the single sans family across display, body, navigation, and captions. Display sits at weight 500 \u2014 confident but not bombastic. Code blocks and terminal mockups switch to JetBrains Mono.\n\nThe page rhythm is monolithic: dark canvas top to bottom with subtle elevation steps via card surfaces. The brand's strongest visual signature is a **four-pane terminal-style mockup** \u2014 a 2\u00D72 grid of dark code/output panels with a central blue spotlight glow behind them.\n\n**Key Characteristics:**\n- Single accent: `{colors.primary}` (#0007cd) for primary CTAs, wordmark, spotlight glows.\n- Single sans family: abcDiatype carries everything except code (JetBrains Mono).\n- Dark monolithic canvas: `{colors.canvas}` runs top to bottom; depth from `{colors.surface-card}` and `{colors.surface-card-elevated}` brightness steps.\n- Terminal-mockup hero: 2\u00D72 grid of code/output panes is the brand signature.\n- Compact pill geometry: CTAs sit at `{rounded.md}` (8px), not full pills \u2014 developer-tool dialect.\n- Spotlight-glow atmospheric backdrop: a radial blue glow centered behind hero content.\n- 96px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Composio Blue** (`{colors.primary}` \u2014 #0007cd): Primary CTAs, wordmark, spotlight glow center.\n- **Composio Blue Active** (`{colors.primary-active}` \u2014 #0005a3): Press state.\n- **Spotlight Glow Tone** (`{colors.primary-glow}` \u2014 #1a26ff): Brighter blue used inside radial atmospheric glows.\n- **Accent Cyan** (`{colors.accent-cyan}` \u2014 #00d4ff): Sparingly on data-flow visualizations.\n- **Accent Violet** (`{colors.accent-violet}` \u2014 #7b3aed): Inside specific product illustrations only.\n\n### Surface\n- **Canvas** (`{colors.canvas}` \u2014 #0f0f0f): Page floor \u2014 near-black.\n- **Canvas Deep** (`{colors.canvas-deep}` \u2014 #000000): Pure black for terminal mockup grids and code blocks.\n- **Surface Card** (`{colors.surface-card}` \u2014 #181818): Default content card.\n- **Surface Card Elevated** (`{colors.surface-card-elevated}` \u2014 #222222): Terminal panes, secondary buttons.\n- **Surface Strong** (`{colors.surface-strong}` \u2014 #2a2a2a): Dropdown menus.\n\n### Hairlines\n- **Hairline** (`{colors.hairline}` \u2014 #222222): Default 1px divider.\n- **Hairline Soft** (`{colors.hairline-soft}` \u2014 #1a1a1a): Lighter divider.\n- **Hairline Strong** (`{colors.hairline-strong}` \u2014 #333333): Stronger panel outline.\n\n### Text\n- **Ink** (`{colors.ink}` \u2014 #ffffff): Display headlines.\n- **Body** (`{colors.body}` \u2014 #a8a8a8): Default running-text \u2014 soft gray.\n- **Body Strong** (`{colors.body-strong}` \u2014 #ffffff): Same as ink.\n- **Muted** (`{colors.muted}` \u2014 #888888): Sub-titles, breadcrumbs.\n- **Muted Soft** (`{colors.muted-soft}` \u2014 #666666): Disabled text.\n- **On Primary** (`{colors.on-primary}` \u2014 #ffffff): White text on blue CTAs.\n\n### Semantic\n- **Success** (`{colors.semantic-success}` \u2014 #33d17a): \"Online\", \"active\" indicators.\n- **Error** (`{colors.semantic-error}` \u2014 #ff4d4d): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **abcDiatype** (Lineto) across every text role. Code blocks switch to **JetBrains Mono**. Fallback: `ui-sans-serif, system-ui, sans-serif`.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| `{typography.display-mega}` | 72px | 500 | 1.05 | -2.16px | Homepage hero h1 |\n| `{typography.display-xl}` | 56px | 500 | 1.05 | -1.68px | Subsidiary heroes |\n| `{typography.display-lg}` | 44px | 500 | 1.1 | -1.32px | Section heads |\n| `{typography.display-md}` | 32px | 500 | 1.15 | -0.96px | Sub-section heads |\n| `{typography.display-sm}` | 24px | 500 | 1.25 | -0.5px | Card group titles |\n| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |\n| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Toolkit card titles |\n| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |\n| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |\n| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |\n| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, badge pills |\n| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks \u2014 JetBrains Mono |\n| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA pill labels |\n| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |\n\n### Principles\n- **Display weight stays at 500.** Confident but not display-bold.\n- **abcDiatype across every role.** No display/body family split.\n- **JetBrains Mono on every code surface.**\n\n### Note on Font Substitutes\nabcDiatype is a Lineto licensed typeface. Open-source substitute: **Inter** at weight 500 with letter-spacing -1.5%.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** `{spacing.xxs}` 4px \u00B7 `{spacing.xs}` 8px \u00B7 `{spacing.sm}` 12px \u00B7 `{spacing.base}` 16px \u00B7 `{spacing.md}` 20px \u00B7 `{spacing.lg}` 24px \u00B7 `{spacing.xl}` 32px \u00B7 `{spacing.xxl}` 48px \u00B7 `{spacing.section}` 96px.\n- **Section padding:** `{spacing.section}` (96px) for major bands.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Terminal mockup grid: 2\u00D72 equal-size panes.\n- Toolkit grid: 4-up at desktop, 2-up tablet, 1-up mobile.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nThe dark canvas creates its own depth \u2014 whitespace can stay tight without feeling crowded. 96px between bands; 24px between cards inside a band.\n\n## Elevation & Depth\n\nThe system uses **brightness-step elevation**: surfaces step up in brightness instead of casting drop shadows. Combined with subtle radial blue glows, this creates a focused dark-mode atmosphere.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | `{colors.canvas}` (#0f0f0f) | Body bands, footer |\n| Recessed | `{colors.canvas-deep}` (#000000) | Terminal mockup grid background, code blocks |\n| Card | `{colors.surface-card}` (#181818) | Default content cards |\n| Card elevated | `{colors.surface-card-elevated}` (#222222) | Terminal panes, secondary buttons |\n| Atmospheric glow | Radial gradient using `{colors.primary-glow}` | Hero spotlight backdrop |\n\n### Decorative Depth\n- **Spotlight glow backdrops** \u2014 radial blue gradient centered behind hero content.\n- **Terminal-pane brightness ladder** \u2014 2\u00D72 mockup uses canvas-deep outer + surface-card-elevated panes.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| `{rounded.none}` | 0px | Reserved |\n| `{rounded.xs}` | 4px | Inline tags |\n| `{rounded.sm}` | 6px | Compact rows |\n| `{rounded.md}` | 8px | CTA buttons, form inputs |\n| `{rounded.lg}` | 12px | Toolkit cards, code blocks, terminal panes |\n| `{rounded.xl}` | 16px | Feature cards, terminal mockup grids |\n| `{rounded.pill}` | 9999px | Section-label badges |\n| `{rounded.full}` | 9999px | Avatar plates (rare) |\n\nCompact developer-ergonomic radii \u2014 8px CTAs, 12-16px cards. Signals \"developer tool\" rather than \"consumer brand.\"\n\n## Components\n\n### Top Navigation\n\n**`top-nav-dark`** \u2014 Default top nav. Background `{colors.canvas}`, text `{colors.body-strong}`, height 64px. Layout: Composio wordmark left, primary horizontal menu (Product / Toolkits / Docs / Pricing / Customers / Blog), GitHub stars + Sign In + \"Get started\" right.\n\n### Buttons\n\n**`button-primary`** \u2014 The signature Composio Blue CTA. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px \u00D7 18px, height 40px, rounded `{rounded.md}` (8px).\n\n**`button-primary-active`** \u2014 Press state. Background `{colors.primary-active}`.\n\n**`button-secondary-dark`** \u2014 Surface-elevated secondary. Background `{colors.surface-card-elevated}`, text `{colors.body-strong}`.\n\n**`button-outline`** \u2014 Transparent with 1px hairline-strong border.\n\n**`button-tertiary-text`** \u2014 Inline text link.\n\n### Hero & Atmospheric\n\n**`hero-band`** \u2014 Homepage hero. Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (72px / 500), subhead, two CTAs, and a spotlight-glow backdrop emanating from behind the centered terminal-mockup grid.\n\n**`terminal-mockup-grid`** \u2014 The brand's strongest visual signature. 2\u00D72 grid of dark code/output panels inside a `{rounded.xl}` (16px) container. Background `{colors.canvas-deep}`, padding 32px, gap 16px.\n\n**`terminal-pane`** \u2014 Individual code/output panel inside the mockup grid. Background `{colors.surface-card}`, text `{colors.body}` in `{typography.code}`, rounded `{rounded.lg}` (12px), padding 20px.\n\n**`spotlight-glow-card`** \u2014 Large feature card with centered display headline and a radial blue glow behind it. Background `{colors.surface-card}`, text `{colors.body-strong}` in `{typography.display-md}`, rounded `{rounded.xl}`, padding 48px.\n\n### Cards\n\n**`feature-card`** \u2014 3-up benefit grid. Background `{colors.surface-card}`, text `{colors.body}`, type `{typography.title-md}`, rounded `{rounded.xl}`, padding 28px.\n\n**`toolkit-card`** \u2014 4-up toolkit grid (Slack, GitHub, Stripe, Notion, Linear, etc.). Background `{colors.surface-card}`, text `{colors.body-strong}`, type `{typography.title-sm}`, rounded `{rounded.lg}`, padding 20px. 40px square `{component.toolkit-icon}` top, toolkit name, one-line description.\n\n**`toolkit-icon`** \u2014 Square icon plate. Background `{colors.surface-card-elevated}`, rounded `{rounded.md}`, 40px size.\n\n**`testimonial-card`** \u2014 Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.\n\n### Code\n\n**`code-block`** \u2014 Inline code/terminal block. Background `{colors.canvas-deep}`, text `{colors.body}` in `{typography.code}`, rounded `{rounded.lg}`, padding 20px.\n\n### Forms\n\n**`text-input`** \u2014 Background `{colors.surface-card}`, text `{colors.body-strong}`, rounded `{rounded.md}` (8px), padding 12px \u00D7 16px, height 44px.\n\n**`search-input`** \u2014 Compact search field. Same surface and radius, smaller padding, 40px height.\n\n### Tags & Badges\n\n**`badge-pill`** \u2014 Small uppercase pill. Background `{colors.surface-card-elevated}`, text `{colors.body-strong}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px \u00D7 10px.\n\n### CTA / Footer\n\n**`cta-band-spotlight`** \u2014 Pre-footer band. Background `{colors.canvas}` with centered radial spotlight glow. Display headline + single primary CTA pill. 96px padding.\n\n**`footer-dark`** \u2014 Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64\u00D748px padding.\n\n**`footer-link`** \u2014 Background transparent, text `{colors.body}`, type `{typography.body-sm}`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve `{colors.primary}` for primary CTAs, wordmark, and spotlight glows.\n- Use `{rounded.md}` (8px) for every CTA \u2014 not full pills.\n- Use brightness-step ladder for elevation; avoid drop shadows.\n- Pair every hero with a centered radial blue spotlight glow.\n- Render code, CLI commands in JetBrains Mono via `{typography.code}`.\n- Use the 2\u00D72 terminal-mockup grid as the homepage hero anchor.\n\n### Don't\n- Don't introduce a secondary brand color. Cyan and violet are illustrative-only.\n- Don't use full pills on CTAs.\n- Don't drop display weight to 400.\n- Don't add drop shadow tiers.\n- Don't use canvas-deep (#000000) outside terminal/code surfaces.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual page CTAs.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 72\u219236px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |\n| Tablet | 640\u20131024px | Hero h1 56px; terminal mockup grid stays 2\u00D72; toolkit grid 2-up. |\n| Desktop | 1024\u20131280px | Full hero h1 72px; full 2\u00D72 terminal mockup; toolkit grid 4-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height \u2014 at WCAG AA, padded for AAA.\n- Search input at 40px.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Terminal mockup 2\u00D72 grid collapses to a single pane on mobile.\n- Toolkit grid: 4-up \u2192 2-up \u2192 1-up.\n- Hero spotlight glow stays at every breakpoint.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` or `{rounded.xl}`.\n3. Variants live as separate entries inside `components:`.\n4. Use `{token.refs}` everywhere \u2014 never inline hex.\n5. Hover state never documented.\n6. abcDiatype 500 for display, 400/600 for body. JetBrains Mono on every code surface.\n7. Composio Blue stays scarce.\n\n## Known Gaps\n\n- abcDiatype is licensed; Inter is the substitute.\n- Animation timings out of scope.\n- In-product surfaces (toolkit dashboards, agent playground) are behind login walls.\n- Form validation states beyond focus not visible on captured surfaces.\n";
+
+export { composioBrief };

package/dist/presets/_briefs/composio.js

@@ -0,0 +1,512 @@
+// src/presets/_briefs/composio.ts
+var composioBrief = `---
+version: alpha
+name: Composio
+description: A developer-tools brand for AI-agent tool integration whose marketing surfaces lean into a dark, technical aesthetic with a single deep-electric-blue voltage (\`#0007cd\`). The page floor is near-black (\`#0f0f0f\`); cards float above on subtle gray-tinted surfaces. abcDiatype carries display and body in a single sans family with weights 400-600. The brand's strongest visual signature is a four-pane terminal-style mockup (a 2\xD72 grid of dark code/output panels) with a central blue spotlight glow \u2014 used as the homepage hero anchor.
+
+colors:
+  primary: "#0007cd"
+  primary-active: "#0005a3"
+  primary-glow: "#1a26ff"
+  ink: "#ffffff"
+  body: "#a8a8a8"
+  body-strong: "#ffffff"
+  muted: "#888888"
+  muted-soft: "#666666"
+  hairline: "#222222"
+  hairline-soft: "#1a1a1a"
+  hairline-strong: "#333333"
+  canvas: "#0f0f0f"
+  canvas-deep: "#000000"
+  surface-card: "#181818"
+  surface-card-elevated: "#222222"
+  surface-strong: "#2a2a2a"
+  on-primary: "#ffffff"
+  on-dark: "#ffffff"
+  accent-cyan: "#00d4ff"
+  accent-violet: "#7b3aed"
+  semantic-error: "#ff4d4d"
+  semantic-success: "#33d17a"
+
+typography:
+  display-mega:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 72px
+    fontWeight: 500
+    lineHeight: 1.05
+    letterSpacing: -2.16px
+  display-xl:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 56px
+    fontWeight: 500
+    lineHeight: 1.05
+    letterSpacing: -1.68px
+  display-lg:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 44px
+    fontWeight: 500
+    lineHeight: 1.1
+    letterSpacing: -1.32px
+  display-md:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 32px
+    fontWeight: 500
+    lineHeight: 1.15
+    letterSpacing: -0.96px
+  display-sm:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 24px
+    fontWeight: 500
+    lineHeight: 1.25
+    letterSpacing: -0.5px
+  title-md:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0
+  title-sm:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 16px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0
+  body-md:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  body-sm:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  caption:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+  caption-uppercase:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 11px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0.88px
+    textTransform: uppercase
+  code:
+    fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  button:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  nav-link:
+    fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+
+rounded:
+  none: 0px
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  base: 16px
+  md: 20px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+  section: 96px
+
+components:
+  top-nav-dark:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.nav-link}"
+    height: 64px
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+    height: 40px
+  button-primary-active:
+    backgroundColor: "{colors.primary-active}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.md}"
+  button-secondary-dark:
+    backgroundColor: "{colors.surface-card-elevated}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+    height: 40px
+  button-outline:
+    backgroundColor: transparent
+    textColor: "{colors.body-strong}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 9px 17px
+    height: 40px
+  button-tertiary-text:
+    backgroundColor: transparent
+    textColor: "{colors.body}"
+    typography: "{typography.button}"
+  hero-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.display-mega}"
+    padding: 96px
+  terminal-mockup-grid:
+    backgroundColor: "{colors.canvas-deep}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.code}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  terminal-pane:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body}"
+    typography: "{typography.code}"
+    rounded: "{rounded.lg}"
+    padding: 20px
+  feature-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.xl}"
+    padding: 28px
+  toolkit-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.title-sm}"
+    rounded: "{rounded.lg}"
+    padding: 20px
+  toolkit-icon:
+    backgroundColor: "{colors.surface-card-elevated}"
+    rounded: "{rounded.md}"
+    size: 40px
+  spotlight-glow-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.display-md}"
+    rounded: "{rounded.xl}"
+    padding: 48px
+  code-block:
+    backgroundColor: "{colors.canvas-deep}"
+    textColor: "{colors.body}"
+    typography: "{typography.code}"
+    rounded: "{rounded.lg}"
+    padding: 20px
+  badge-pill:
+    backgroundColor: "{colors.surface-card-elevated}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.caption-uppercase}"
+    rounded: "{rounded.pill}"
+    padding: 4px 10px
+  text-input:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 16px
+    height: 44px
+  search-input:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 10px 16px
+    height: 40px
+  cta-band-spotlight:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body-strong}"
+    typography: "{typography.display-lg}"
+    padding: 96px
+  testimonial-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  footer-dark:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+    padding: 64px 48px
+  footer-link:
+    backgroundColor: transparent
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+---
+
+## Overview
+
+Composio's marketing site reads like a serious developer-infrastructure brand \u2014 closer to Vercel or Stripe Docs in atmosphere than to a typical AI-tools startup. The base canvas is a near-black \`{colors.canvas}\` (#0f0f0f) holding white type and a single voltage of **deep electric blue** (\`{colors.primary}\` \u2014 #0007cd) carrying every primary CTA, brand wordmark, and atmospheric spotlight glow that backs the homepage hero.
+
+Type runs **abcDiatype** as the single sans family across display, body, navigation, and captions. Display sits at weight 500 \u2014 confident but not bombastic. Code blocks and terminal mockups switch to JetBrains Mono.
+
+The page rhythm is monolithic: dark canvas top to bottom with subtle elevation steps via card surfaces. The brand's strongest visual signature is a **four-pane terminal-style mockup** \u2014 a 2\xD72 grid of dark code/output panels with a central blue spotlight glow behind them.
+
+**Key Characteristics:**
+- Single accent: \`{colors.primary}\` (#0007cd) for primary CTAs, wordmark, spotlight glows.
+- Single sans family: abcDiatype carries everything except code (JetBrains Mono).
+- Dark monolithic canvas: \`{colors.canvas}\` runs top to bottom; depth from \`{colors.surface-card}\` and \`{colors.surface-card-elevated}\` brightness steps.
+- Terminal-mockup hero: 2\xD72 grid of code/output panes is the brand signature.
+- Compact pill geometry: CTAs sit at \`{rounded.md}\` (8px), not full pills \u2014 developer-tool dialect.
+- Spotlight-glow atmospheric backdrop: a radial blue glow centered behind hero content.
+- 96px section rhythm.
+
+## Colors
+
+### Brand & Accent
+- **Composio Blue** (\`{colors.primary}\` \u2014 #0007cd): Primary CTAs, wordmark, spotlight glow center.
+- **Composio Blue Active** (\`{colors.primary-active}\` \u2014 #0005a3): Press state.
+- **Spotlight Glow Tone** (\`{colors.primary-glow}\` \u2014 #1a26ff): Brighter blue used inside radial atmospheric glows.
+- **Accent Cyan** (\`{colors.accent-cyan}\` \u2014 #00d4ff): Sparingly on data-flow visualizations.
+- **Accent Violet** (\`{colors.accent-violet}\` \u2014 #7b3aed): Inside specific product illustrations only.
+
+### Surface
+- **Canvas** (\`{colors.canvas}\` \u2014 #0f0f0f): Page floor \u2014 near-black.
+- **Canvas Deep** (\`{colors.canvas-deep}\` \u2014 #000000): Pure black for terminal mockup grids and code blocks.
+- **Surface Card** (\`{colors.surface-card}\` \u2014 #181818): Default content card.
+- **Surface Card Elevated** (\`{colors.surface-card-elevated}\` \u2014 #222222): Terminal panes, secondary buttons.
+- **Surface Strong** (\`{colors.surface-strong}\` \u2014 #2a2a2a): Dropdown menus.
+
+### Hairlines
+- **Hairline** (\`{colors.hairline}\` \u2014 #222222): Default 1px divider.
+- **Hairline Soft** (\`{colors.hairline-soft}\` \u2014 #1a1a1a): Lighter divider.
+- **Hairline Strong** (\`{colors.hairline-strong}\` \u2014 #333333): Stronger panel outline.
+
+### Text
+- **Ink** (\`{colors.ink}\` \u2014 #ffffff): Display headlines.
+- **Body** (\`{colors.body}\` \u2014 #a8a8a8): Default running-text \u2014 soft gray.
+- **Body Strong** (\`{colors.body-strong}\` \u2014 #ffffff): Same as ink.
+- **Muted** (\`{colors.muted}\` \u2014 #888888): Sub-titles, breadcrumbs.
+- **Muted Soft** (\`{colors.muted-soft}\` \u2014 #666666): Disabled text.
+- **On Primary** (\`{colors.on-primary}\` \u2014 #ffffff): White text on blue CTAs.
+
+### Semantic
+- **Success** (\`{colors.semantic-success}\` \u2014 #33d17a): "Online", "active" indicators.
+- **Error** (\`{colors.semantic-error}\` \u2014 #ff4d4d): Validation errors.
+
+## Typography
+
+### Font Family
+The system runs **abcDiatype** (Lineto) across every text role. Code blocks switch to **JetBrains Mono**. Fallback: \`ui-sans-serif, system-ui, sans-serif\`.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| \`{typography.display-mega}\` | 72px | 500 | 1.05 | -2.16px | Homepage hero h1 |
+| \`{typography.display-xl}\` | 56px | 500 | 1.05 | -1.68px | Subsidiary heroes |
+| \`{typography.display-lg}\` | 44px | 500 | 1.1 | -1.32px | Section heads |
+| \`{typography.display-md}\` | 32px | 500 | 1.15 | -0.96px | Sub-section heads |
+| \`{typography.display-sm}\` | 24px | 500 | 1.25 | -0.5px | Card group titles |
+| \`{typography.title-md}\` | 18px | 600 | 1.4 | 0 | Component titles |
+| \`{typography.title-sm}\` | 16px | 600 | 1.4 | 0 | Toolkit card titles |
+| \`{typography.body-md}\` | 16px | 400 | 1.5 | 0 | Default body |
+| \`{typography.body-sm}\` | 14px | 400 | 1.5 | 0 | Footer body |
+| \`{typography.caption}\` | 13px | 400 | 1.4 | 0 | Photo captions |
+| \`{typography.caption-uppercase}\` | 11px | 600 | 1.4 | 0.88px | Section labels, badge pills |
+| \`{typography.code}\` | 13px | 400 | 1.5 | 0 | Code blocks \u2014 JetBrains Mono |
+| \`{typography.button}\` | 14px | 500 | 1.0 | 0 | CTA pill labels |
+| \`{typography.nav-link}\` | 14px | 500 | 1.4 | 0 | Top-nav menu |
+
+### Principles
+- **Display weight stays at 500.** Confident but not display-bold.
+- **abcDiatype across every role.** No display/body family split.
+- **JetBrains Mono on every code surface.**
+
+### Note on Font Substitutes
+abcDiatype is a Lineto licensed typeface. Open-source substitute: **Inter** at weight 500 with letter-spacing -1.5%.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 4px.
+- **Tokens:** \`{spacing.xxs}\` 4px \xB7 \`{spacing.xs}\` 8px \xB7 \`{spacing.sm}\` 12px \xB7 \`{spacing.base}\` 16px \xB7 \`{spacing.md}\` 20px \xB7 \`{spacing.lg}\` 24px \xB7 \`{spacing.xl}\` 32px \xB7 \`{spacing.xxl}\` 48px \xB7 \`{spacing.section}\` 96px.
+- **Section padding:** \`{spacing.section}\` (96px) for major bands.
+
+### Grid & Container
+- Max content width: ~1200px.
+- Editorial body: 12-column grid.
+- Terminal mockup grid: 2\xD72 equal-size panes.
+- Toolkit grid: 4-up at desktop, 2-up tablet, 1-up mobile.
+- Footer: 5-column at desktop.
+
+### Whitespace Philosophy
+The dark canvas creates its own depth \u2014 whitespace can stay tight without feeling crowded. 96px between bands; 24px between cards inside a band.
+
+## Elevation & Depth
+
+The system uses **brightness-step elevation**: surfaces step up in brightness instead of casting drop shadows. Combined with subtle radial blue glows, this creates a focused dark-mode atmosphere.
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat (canvas) | \`{colors.canvas}\` (#0f0f0f) | Body bands, footer |
+| Recessed | \`{colors.canvas-deep}\` (#000000) | Terminal mockup grid background, code blocks |
+| Card | \`{colors.surface-card}\` (#181818) | Default content cards |
+| Card elevated | \`{colors.surface-card-elevated}\` (#222222) | Terminal panes, secondary buttons |
+| Atmospheric glow | Radial gradient using \`{colors.primary-glow}\` | Hero spotlight backdrop |
+
+### Decorative Depth
+- **Spotlight glow backdrops** \u2014 radial blue gradient centered behind hero content.
+- **Terminal-pane brightness ladder** \u2014 2\xD72 mockup uses canvas-deep outer + surface-card-elevated panes.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| \`{rounded.none}\` | 0px | Reserved |
+| \`{rounded.xs}\` | 4px | Inline tags |
+| \`{rounded.sm}\` | 6px | Compact rows |
+| \`{rounded.md}\` | 8px | CTA buttons, form inputs |
+| \`{rounded.lg}\` | 12px | Toolkit cards, code blocks, terminal panes |
+| \`{rounded.xl}\` | 16px | Feature cards, terminal mockup grids |
+| \`{rounded.pill}\` | 9999px | Section-label badges |
+| \`{rounded.full}\` | 9999px | Avatar plates (rare) |
+
+Compact developer-ergonomic radii \u2014 8px CTAs, 12-16px cards. Signals "developer tool" rather than "consumer brand."
+
+## Components
+
+### Top Navigation
+
+**\`top-nav-dark\`** \u2014 Default top nav. Background \`{colors.canvas}\`, text \`{colors.body-strong}\`, height 64px. Layout: Composio wordmark left, primary horizontal menu (Product / Toolkits / Docs / Pricing / Customers / Blog), GitHub stars + Sign In + "Get started" right.
+
+### Buttons
+
+**\`button-primary\`** \u2014 The signature Composio Blue CTA. Background \`{colors.primary}\`, text \`{colors.on-primary}\`, type \`{typography.button}\` (14px / 500), padding 10px \xD7 18px, height 40px, rounded \`{rounded.md}\` (8px).
+
+**\`button-primary-active\`** \u2014 Press state. Background \`{colors.primary-active}\`.
+
+**\`button-secondary-dark\`** \u2014 Surface-elevated secondary. Background \`{colors.surface-card-elevated}\`, text \`{colors.body-strong}\`.
+
+**\`button-outline\`** \u2014 Transparent with 1px hairline-strong border.
+
+**\`button-tertiary-text\`** \u2014 Inline text link.
+
+### Hero & Atmospheric
+
+**\`hero-band\`** \u2014 Homepage hero. Background \`{colors.canvas}\`, full-width display headline in \`{typography.display-mega}\` (72px / 500), subhead, two CTAs, and a spotlight-glow backdrop emanating from behind the centered terminal-mockup grid.
+
+**\`terminal-mockup-grid\`** \u2014 The brand's strongest visual signature. 2\xD72 grid of dark code/output panels inside a \`{rounded.xl}\` (16px) container. Background \`{colors.canvas-deep}\`, padding 32px, gap 16px.
+
+**\`terminal-pane\`** \u2014 Individual code/output panel inside the mockup grid. Background \`{colors.surface-card}\`, text \`{colors.body}\` in \`{typography.code}\`, rounded \`{rounded.lg}\` (12px), padding 20px.
+
+**\`spotlight-glow-card\`** \u2014 Large feature card with centered display headline and a radial blue glow behind it. Background \`{colors.surface-card}\`, text \`{colors.body-strong}\` in \`{typography.display-md}\`, rounded \`{rounded.xl}\`, padding 48px.
+
+### Cards
+
+**\`feature-card\`** \u2014 3-up benefit grid. Background \`{colors.surface-card}\`, text \`{colors.body}\`, type \`{typography.title-md}\`, rounded \`{rounded.xl}\`, padding 28px.
+
+**\`toolkit-card\`** \u2014 4-up toolkit grid (Slack, GitHub, Stripe, Notion, Linear, etc.). Background \`{colors.surface-card}\`, text \`{colors.body-strong}\`, type \`{typography.title-sm}\`, rounded \`{rounded.lg}\`, padding 20px. 40px square \`{component.toolkit-icon}\` top, toolkit name, one-line description.
+
+**\`toolkit-icon\`** \u2014 Square icon plate. Background \`{colors.surface-card-elevated}\`, rounded \`{rounded.md}\`, 40px size.
+
+**\`testimonial-card\`** \u2014 Quote card. Background \`{colors.surface-card}\`, text \`{colors.body}\`, rounded \`{rounded.lg}\`, padding 24px.
+
+### Code
+
+**\`code-block\`** \u2014 Inline code/terminal block. Background \`{colors.canvas-deep}\`, text \`{colors.body}\` in \`{typography.code}\`, rounded \`{rounded.lg}\`, padding 20px.
+
+### Forms
+
+**\`text-input\`** \u2014 Background \`{colors.surface-card}\`, text \`{colors.body-strong}\`, rounded \`{rounded.md}\` (8px), padding 12px \xD7 16px, height 44px.
+
+**\`search-input\`** \u2014 Compact search field. Same surface and radius, smaller padding, 40px height.
+
+### Tags & Badges
+
+**\`badge-pill\`** \u2014 Small uppercase pill. Background \`{colors.surface-card-elevated}\`, text \`{colors.body-strong}\`, type \`{typography.caption-uppercase}\`, rounded \`{rounded.pill}\`, padding 4px \xD7 10px.
+
+### CTA / Footer
+
+**\`cta-band-spotlight\`** \u2014 Pre-footer band. Background \`{colors.canvas}\` with centered radial spotlight glow. Display headline + single primary CTA pill. 96px padding.
+
+**\`footer-dark\`** \u2014 Closing footer. Background \`{colors.canvas}\`, text \`{colors.body}\`. 5-column link list. 64\xD748px padding.
+
+**\`footer-link\`** \u2014 Background transparent, text \`{colors.body}\`, type \`{typography.body-sm}\`.
+
+## Do's and Don'ts
+
+### Do
+- Reserve \`{colors.primary}\` for primary CTAs, wordmark, and spotlight glows.
+- Use \`{rounded.md}\` (8px) for every CTA \u2014 not full pills.
+- Use brightness-step ladder for elevation; avoid drop shadows.
+- Pair every hero with a centered radial blue spotlight glow.
+- Render code, CLI commands in JetBrains Mono via \`{typography.code}\`.
+- Use the 2\xD72 terminal-mockup grid as the homepage hero anchor.
+
+### Don't
+- Don't introduce a secondary brand color. Cyan and violet are illustrative-only.
+- Don't use full pills on CTAs.
+- Don't drop display weight to 400.
+- Don't add drop shadow tiers.
+- Don't use canvas-deep (#000000) outside terminal/code surfaces.
+- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual page CTAs.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 640px | Hero h1 72\u219236px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |
+| Tablet | 640\u20131024px | Hero h1 56px; terminal mockup grid stays 2\xD72; toolkit grid 2-up. |
+| Desktop | 1024\u20131280px | Full hero h1 72px; full 2\xD72 terminal mockup; toolkit grid 4-up. |
+| Wide | > 1280px | Content caps at 1200px. |
+
+### Touch Targets
+- Primary CTA at 40px height \u2014 at WCAG AA, padded for AAA.
+- Search input at 40px.
+
+### Collapsing Strategy
+- Top nav switches to hamburger below 768px.
+- Terminal mockup 2\xD72 grid collapses to a single pane on mobile.
+- Toolkit grid: 4-up \u2192 2-up \u2192 1-up.
+- Hero spotlight glow stays at every breakpoint.
+
+## Iteration Guide
+
+1. Focus on a single component at a time.
+2. CTAs default to \`{rounded.md}\` (8px). Cards use \`{rounded.lg}\` or \`{rounded.xl}\`.
+3. Variants live as separate entries inside \`components:\`.
+4. Use \`{token.refs}\` everywhere \u2014 never inline hex.
+5. Hover state never documented.
+6. abcDiatype 500 for display, 400/600 for body. JetBrains Mono on every code surface.
+7. Composio Blue stays scarce.
+
+## Known Gaps
+
+- abcDiatype is licensed; Inter is the substitute.
+- Animation timings out of scope.
+- In-product surfaces (toolkit dashboards, agent playground) are behind login walls.
+- Form validation states beyond focus not visible on captured surfaces.
+`;
+export {
+  composioBrief
+};
+//# sourceMappingURL=composio.js.map