@hex-core/themes 0.2.3 → 0.2.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/composio.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport 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×2 grid of dark code/output panels) with a central blue spotlight glow — 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 — 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}\\` — #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 — 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** — a 2×2 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×2 grid of code/output panes is the brand signature.\n- Compact pill geometry: CTAs sit at \\`{rounded.md}\\` (8px), not full pills — 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}\\` — #0007cd): Primary CTAs, wordmark, spotlight glow center.\n- **Composio Blue Active** (\\`{colors.primary-active}\\` — #0005a3): Press state.\n- **Spotlight Glow Tone** (\\`{colors.primary-glow}\\` — #1a26ff): Brighter blue used inside radial atmospheric glows.\n- **Accent Cyan** (\\`{colors.accent-cyan}\\` — #00d4ff): Sparingly on data-flow visualizations.\n- **Accent Violet** (\\`{colors.accent-violet}\\` — #7b3aed): Inside specific product illustrations only.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #0f0f0f): Page floor — near-black.\n- **Canvas Deep** (\\`{colors.canvas-deep}\\` — #000000): Pure black for terminal mockup grids and code blocks.\n- **Surface Card** (\\`{colors.surface-card}\\` — #181818): Default content card.\n- **Surface Card Elevated** (\\`{colors.surface-card-elevated}\\` — #222222): Terminal panes, secondary buttons.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #2a2a2a): Dropdown menus.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #222222): Default 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #1a1a1a): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #333333): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #ffffff): Display headlines.\n- **Body** (\\`{colors.body}\\` — #a8a8a8): Default running-text — soft gray.\n- **Body Strong** (\\`{colors.body-strong}\\` — #ffffff): Same as ink.\n- **Muted** (\\`{colors.muted}\\` — #888888): Sub-titles, breadcrumbs.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #666666): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on blue CTAs.\n\n### Semantic\n- **Success** (\\`{colors.semantic-success}\\` — #33d17a): \"Online\", \"active\" indicators.\n- **Error** (\\`{colors.semantic-error}\\` — #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 — 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 · \\`{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 major bands.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Terminal mockup grid: 2×2 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 — 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** — radial blue gradient centered behind hero content.\n- **Terminal-pane brightness ladder** — 2×2 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 — 8px CTAs, 12-16px cards. Signals \"developer tool\" rather than \"consumer brand.\"\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav-dark\\`** — 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\\`** — The signature Composio Blue CTA. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 500), padding 10px × 18px, height 40px, rounded \\`{rounded.md}\\` (8px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-secondary-dark\\`** — Surface-elevated secondary. Background \\`{colors.surface-card-elevated}\\`, text \\`{colors.body-strong}\\`.\n\n**\\`button-outline\\`** — Transparent with 1px hairline-strong border.\n\n**\\`button-tertiary-text\\`** — Inline text link.\n\n### Hero & Atmospheric\n\n**\\`hero-band\\`** — 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\\`** — The brand's strongest visual signature. 2×2 grid of dark code/output panels inside a \\`{rounded.xl}\\` (16px) container. Background \\`{colors.canvas-deep}\\`, padding 32px, gap 16px.\n\n**\\`terminal-pane\\`** — 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\\`** — 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\\`** — 3-up benefit grid. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.xl}\\`, padding 28px.\n\n**\\`toolkit-card\\`** — 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\\`** — Square icon plate. Background \\`{colors.surface-card-elevated}\\`, rounded \\`{rounded.md}\\`, 40px size.\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 24px.\n\n### Code\n\n**\\`code-block\\`** — 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\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.body-strong}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px.\n\n**\\`search-input\\`** — Compact search field. Same surface and radius, smaller padding, 40px height.\n\n### Tags & Badges\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.surface-card-elevated}\\`, text \\`{colors.body-strong}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band-spotlight\\`** — Pre-footer band. Background \\`{colors.canvas}\\` with centered radial spotlight glow. Display headline + single primary CTA pill. 96px padding.\n\n**\\`footer-dark\\`** — Closing footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — 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 — 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×2 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→36px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |\n| Tablet | 640–1024px | Hero h1 56px; terminal mockup grid stays 2×2; toolkit grid 2-up. |\n| Desktop | 1024–1280px | Full hero h1 72px; full 2×2 terminal mockup; toolkit grid 4-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height — 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×2 grid collapses to a single pane on mobile.\n- Toolkit grid: 4-up → 2-up → 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 — 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`;\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/composio.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport 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×2 grid of dark code/output panels) with a central blue spotlight glow — 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 — 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}\\` — #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 — 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** — a 2×2 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×2 grid of code/output panes is the brand signature.\n- Compact pill geometry: CTAs sit at \\`{rounded.md}\\` (8px), not full pills — 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}\\` — #0007cd): Primary CTAs, wordmark, spotlight glow center.\n- **Composio Blue Active** (\\`{colors.primary-active}\\` — #0005a3): Press state.\n- **Spotlight Glow Tone** (\\`{colors.primary-glow}\\` — #1a26ff): Brighter blue used inside radial atmospheric glows.\n- **Accent Cyan** (\\`{colors.accent-cyan}\\` — #00d4ff): Sparingly on data-flow visualizations.\n- **Accent Violet** (\\`{colors.accent-violet}\\` — #7b3aed): Inside specific product illustrations only.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #0f0f0f): Page floor — near-black.\n- **Canvas Deep** (\\`{colors.canvas-deep}\\` — #000000): Pure black for terminal mockup grids and code blocks.\n- **Surface Card** (\\`{colors.surface-card}\\` — #181818): Default content card.\n- **Surface Card Elevated** (\\`{colors.surface-card-elevated}\\` — #222222): Terminal panes, secondary buttons.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #2a2a2a): Dropdown menus.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #222222): Default 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #1a1a1a): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #333333): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #ffffff): Display headlines.\n- **Body** (\\`{colors.body}\\` — #a8a8a8): Default running-text — soft gray.\n- **Body Strong** (\\`{colors.body-strong}\\` — #ffffff): Same as ink.\n- **Muted** (\\`{colors.muted}\\` — #888888): Sub-titles, breadcrumbs.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #666666): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on blue CTAs.\n\n### Semantic\n- **Success** (\\`{colors.semantic-success}\\` — #33d17a): \"Online\", \"active\" indicators.\n- **Error** (\\`{colors.semantic-error}\\` — #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 — 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 · \\`{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 major bands.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Terminal mockup grid: 2×2 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 — 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** — radial blue gradient centered behind hero content.\n- **Terminal-pane brightness ladder** — 2×2 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 — 8px CTAs, 12-16px cards. Signals \"developer tool\" rather than \"consumer brand.\"\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav-dark\\`** — 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\\`** — The signature Composio Blue CTA. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 500), padding 10px × 18px, height 40px, rounded \\`{rounded.md}\\` (8px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-secondary-dark\\`** — Surface-elevated secondary. Background \\`{colors.surface-card-elevated}\\`, text \\`{colors.body-strong}\\`.\n\n**\\`button-outline\\`** — Transparent with 1px hairline-strong border.\n\n**\\`button-tertiary-text\\`** — Inline text link.\n\n### Hero & Atmospheric\n\n**\\`hero-band\\`** — 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\\`** — The brand's strongest visual signature. 2×2 grid of dark code/output panels inside a \\`{rounded.xl}\\` (16px) container. Background \\`{colors.canvas-deep}\\`, padding 32px, gap 16px.\n\n**\\`terminal-pane\\`** — 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\\`** — 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\\`** — 3-up benefit grid. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.xl}\\`, padding 28px.\n\n**\\`toolkit-card\\`** — 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\\`** — Square icon plate. Background \\`{colors.surface-card-elevated}\\`, rounded \\`{rounded.md}\\`, 40px size.\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 24px.\n\n### Code\n\n**\\`code-block\\`** — 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\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.body-strong}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px.\n\n**\\`search-input\\`** — Compact search field. Same surface and radius, smaller padding, 40px height.\n\n### Tags & Badges\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.surface-card-elevated}\\`, text \\`{colors.body-strong}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band-spotlight\\`** — Pre-footer band. Background \\`{colors.canvas}\\` with centered radial spotlight glow. Display headline + single primary CTA pill. 96px padding.\n\n**\\`footer-dark\\`** — Closing footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — 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 — 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×2 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→36px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |\n| Tablet | 640–1024px | Hero h1 56px; terminal mockup grid stays 2×2; toolkit grid 2-up. |\n| Desktop | 1024–1280px | Full hero h1 72px; full 2×2 terminal mockup; toolkit grid 4-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height — 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×2 grid collapses to a single pane on mobile.\n- Toolkit grid: 4-up → 2-up → 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 — 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`;\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/cursor.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const cursorBrief = `---\nversion: alpha\nname: Cursor\ndescription: An AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (\\`#f7f7f4\\`) instead of the typical dark IDE atmosphere. Near-black warm ink (\\`#26251e\\`) carries body and display alike — display sits at weight 400 with negative letter-spacing for a magazine feel rather than a bold tech voice. The single brand voltage is **Cursor Orange** (\\`#f54e00\\`) reserved for primary CTAs and the wordmark. A signature pastel timeline palette (peach, mint, blue, lavender, gold) marks AI-action stages (Thinking / Reading / Editing / Grepping / Done) — only inside in-product timeline visualizations. Cards use minimal hairlines, no shadows, generous 80px section rhythm. CursorGothic for display/body, JetBrains Mono on every code surface (which is roughly half the page).\n\ncolors:\n  primary: \"#f54e00\"\n  primary-active: \"#d04200\"\n  ink: \"#26251e\"\n  body: \"#5a5852\"\n  body-strong: \"#26251e\"\n  muted: \"#807d72\"\n  muted-soft: \"#a09c92\"\n  hairline: \"#e6e5e0\"\n  hairline-soft: \"#efeee8\"\n  hairline-strong: \"#cfcdc4\"\n  canvas: \"#f7f7f4\"\n  canvas-soft: \"#fafaf7\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#e6e5e0\"\n  on-primary: \"#ffffff\"\n  timeline-thinking: \"#dfa88f\"\n  timeline-grep: \"#9fc9a2\"\n  timeline-read: \"#9fbbe0\"\n  timeline-edit: \"#c0a8dd\"\n  timeline-done: \"#c08532\"\n  semantic-error: \"#cf2d56\"\n  semantic-success: \"#1f8a65\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'CursorGothic', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif\"\n    fontSize: 72px\n    fontWeight: 400\n    lineHeight: 1.1\n    letterSpacing: -2.16px\n  display-lg:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 36px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.72px\n  display-md:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 26px\n    fontWeight: 400\n    lineHeight: 1.25\n    letterSpacing: -0.325px\n  display-sm:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 22px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: -0.11px\n  title-md:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-tracked:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0.08px\n  body-sm:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'CursorGothic', 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: \"'CursorGothic', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'CursorGothic', 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: 80px\n\ncomponents:\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\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.ink}\"\n    typography: \"{typography.button}\"\n  button-download:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.canvas}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 44px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 80px\n  ide-mockup-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.lg}\"\n    padding: 0\n  ide-pane:\n    backgroundColor: \"{colors.canvas-soft}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.md}\"\n    padding: 16px\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  comparison-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  timeline-pill-thinking:\n    backgroundColor: \"{colors.timeline-thinking}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  timeline-pill-grep:\n    backgroundColor: \"{colors.timeline-grep}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  timeline-pill-read:\n    backgroundColor: \"{colors.timeline-read}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  timeline-pill-edit:\n    backgroundColor: \"{colors.timeline-edit}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  timeline-pill-done:\n    backgroundColor: \"{colors.timeline-done}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  code-block:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-featured:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.canvas}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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:\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\nCursor's marketing site reads as a quietly-confident developer brand that believes in editorial calm over IDE-darkness. The base canvas is **warm cream** (\\`{colors.canvas}\\` — #f7f7f4) holding warm near-black ink (\\`{colors.ink}\\` — #26251e) for body and display alike. The single brand voltage is **Cursor Orange** (\\`{colors.primary}\\` — #f54e00) reserved for primary CTAs and the wordmark — used scarcely.\n\nType runs **CursorGothic** as the single sans family. Display sits at weight 400 with negative letter-spacing — a magazine-editorial voice rather than tech-bombastic. JetBrains Mono carries every code surface (and code surfaces are roughly half the page).\n\nThe brand's strongest visual signature is the **AI-timeline pill palette**: five pastel pills (peach \\`{colors.timeline-thinking}\\`, mint \\`{colors.timeline-grep}\\`, blue \\`{colors.timeline-read}\\`, lavender \\`{colors.timeline-edit}\\`, gold \\`{colors.timeline-done}\\`) marking AI-action stages inside in-product timeline visualizations. Used only in product UI — never as system action colors.\n\n**Key Characteristics:**\n- Warm cream canvas, not white. Ink is warm (#26251e), not pure black.\n- Single CTA color: \\`{colors.primary}\\` (Cursor Orange #f54e00). Used scarcely.\n- Display weight stays at 400 — never bold. Magazine voice.\n- AI timeline pastels: 5 dedicated tokens for in-product agent action stages.\n- Compact 8px CTA radius — developer dialect.\n- Hairline-only depth; no drop shadows.\n- 80px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Cursor Orange** (\\`{colors.primary}\\` — #f54e00): Primary CTA pills, wordmark, hero accent. Used scarcely.\n- **Cursor Orange Active** (\\`{colors.primary-active}\\` — #d04200): Press state.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #f7f7f4): Warm cream page floor.\n- **Canvas Soft** (\\`{colors.canvas-soft}\\` — #fafaf7): IDE-pane background inside mockups.\n- **Surface Card** (\\`{colors.surface-card}\\` — #ffffff): Pure white card surface — slight contrast against the cream canvas.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #e6e5e0): Badges, tag pills.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #e6e5e0): 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #efeee8): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #cfcdc4): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #26251e): Display, body emphasis. Warm near-black.\n- **Body** (\\`{colors.body}\\` — #5a5852): Default running-text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #26251e): Same as ink.\n- **Muted** (\\`{colors.muted}\\` — #807d72): Sub-titles.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #a09c92): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on Cursor Orange.\n\n### Timeline (AI-action signature)\n- **Thinking** (\\`{colors.timeline-thinking}\\` — #dfa88f): Peach. Used inside in-product agent timeline only.\n- **Grep** (\\`{colors.timeline-grep}\\` — #9fc9a2): Mint.\n- **Read** (\\`{colors.timeline-read}\\` — #9fbbe0): Pastel blue.\n- **Edit** (\\`{colors.timeline-edit}\\` — #c0a8dd): Lavender.\n- **Done** (\\`{colors.timeline-done}\\` — #c08532): Warm gold.\n\n### Semantic\n- **Success** (\\`{colors.semantic-success}\\` — #1f8a65): Confirmation indicators.\n- **Error** (\\`{colors.semantic-error}\\` — #cf2d56): Validation errors.\n\n## Typography\n\n### Font Family\n**CursorGothic** is the licensed display + body family. Fallback: \\`system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif\\`. Code surfaces switch to **JetBrains Mono**.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 72px | 400 | 1.1 | -2.16px | Homepage hero h1 |\n| \\`{typography.display-lg}\\` | 36px | 400 | 1.2 | -0.72px | Section heads |\n| \\`{typography.display-md}\\` | 26px | 400 | 1.25 | -0.325px | Sub-section heads |\n| \\`{typography.display-sm}\\` | 22px | 400 | 1.3 | -0.11px | Card group titles |\n| \\`{typography.title-md}\\` | 18px | 600 | 1.4 | 0 | Component titles |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.4 | 0 | List labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default body |\n| \\`{typography.body-tracked}\\` | 16px | 400 | 1.5 | 0.08px | Tracked editorial 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, timeline pill labels |\n| \\`{typography.code}\\` | 13px | 400 | 1.5 | 0 | Code blocks — 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 400.** Magazine voice, never bold.\n- **Negative letter-spacing on display only.** -0.11px to -2.16px tracking.\n- **JetBrains Mono on every code surface.**\n\n### Note on Font Substitutes\nCursorGothic is licensed. Open-source substitute: **Inter** at weight 400 with letter-spacing -1.5%. Or **GT Sectra** for a more editorial feel.\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}\\` 80px.\n- **Section padding:** 80px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for splits, 3-up for benefits.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing — closer to a print magazine than a tech site. The cream canvas has plenty of breathing room; cards within bands sit close (16-24px gap).\n\n## Elevation & Depth\n\nThe system uses **hairline-only depth**. No drop shadows, no elevation tiers. Cards float above the canvas via 1px hairlines and the slight white-on-cream contrast.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#f7f7f4) | Body bands, footer |\n| Card | \\`{colors.surface-card}\\` (#ffffff) | Content cards |\n| Hairline border | 1px \\`{colors.hairline}\\` | Card outlines, dividers |\n| IDE pane | \\`{colors.canvas-soft}\\` (#fafaf7) | Inside IDE mockup cards |\n\n### Decorative Depth\n- **IDE-mockup cards** are the only \"elevated\" element. White card on cream canvas with internal pane structure mimicking the actual Cursor editor.\n- **Timeline pastel pills** add chromatic depth without surface elevation.\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 | Cards, IDE panes |\n| \\`{rounded.xl}\\` | 16px | Larger feature cards (rare) |\n| \\`{rounded.pill}\\` | 9999px | Timeline pills, badges |\n| \\`{rounded.full}\\` | 9999px | Avatars (rare) |\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Cursor wordmark left, primary horizontal menu (Pricing / Features / Enterprise / Blog / Forum / Careers), Sign In + Download primary CTA right.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature Cursor Orange CTA. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 500), padding 10px × 18px, height 40px, rounded \\`{rounded.md}\\` (8px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-secondary\\`** — White card pill on cream canvas. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`button-tertiary-text\\`** — Inline ink text link.\n\n**\\`button-download\\`** — Larger ink-canvas CTA. Background \\`{colors.ink}\\`, text \\`{colors.canvas}\\`, padding 12px × 20px, height 44px. Used for \"Download for macOS\" type CTAs.\n\n### Hero & IDE Mockups\n\n**\\`hero-band\\`** — Background \\`{colors.canvas}\\`, full-width display headline in \\`{typography.display-mega}\\` (72px / 400 / -2.16px), subhead in \\`{typography.body-md}\\`, two CTAs (\\`button-download\\` + \\`button-tertiary-text\\`), and a centered IDE-mockup card below the hero copy.\n\n**\\`ide-mockup-card\\`** — A white card containing a multi-pane IDE mockup (sidebar + main editor + chat panel + terminal). Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\` (12px), 1px \\`{colors.hairline}\\` border, no padding (panes fill the card edge-to-edge).\n\n**\\`ide-pane\\`** — Individual IDE pane inside the mockup. Background \\`{colors.canvas-soft}\\`, text \\`{colors.body}\\` in \\`{typography.code}\\` (JetBrains Mono 13px), rounded \\`{rounded.md}\\` (8px), padding 16px.\n\n### Cards\n\n**\\`feature-card\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.lg}\\`, padding 24px. 1px \\`{colors.hairline}\\` border.\n\n**\\`comparison-card\\`** — Side-by-side \"Cursor vs other tools\" card. Same surface and rounding; internally split into 2 columns.\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 24px.\n\n### AI Timeline (signature)\n\n**\\`timeline-pill-thinking\\`** — Peach pill. Background \\`{colors.timeline-thinking}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\` (11px / 600 / 0.88px tracking, uppercase), rounded \\`{rounded.pill}\\`, padding 4px × 10px. Marks \"Thinking\" stage in product timeline.\n\n**\\`timeline-pill-grep\\`** — Mint pill. Same shape, background \\`{colors.timeline-grep}\\`. Marks \"Grepping\" stage.\n\n**\\`timeline-pill-read\\`** — Pastel-blue pill. Background \\`{colors.timeline-read}\\`. Marks \"Reading\" stage.\n\n**\\`timeline-pill-edit\\`** — Lavender pill. Background \\`{colors.timeline-edit}\\`. Marks \"Editing\" stage.\n\n**\\`timeline-pill-done\\`** — Gold pill. Background \\`{colors.timeline-done}\\`, text \\`{colors.on-primary}\\` white. Marks \"Done\" stage.\n\n### Code\n\n**\\`code-block\\`** — Inline code block. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\` in \\`{typography.code}\\`, rounded \\`{rounded.lg}\\`, padding 20px, 1px \\`{colors.hairline}\\` border.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding 32px, 1px \\`{colors.hairline}\\` border.\n\n**\\`pricing-tier-featured\\`** — Featured tier inverts to ink. Background \\`{colors.ink}\\`, text \\`{colors.canvas}\\`. Same shape, dark inversion signals \"highlighted\" without colored ribbon.\n\n### Forms & Tags\n\n**\\`text-input\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px.\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band\\`** — Pre-footer \"Try Cursor now\" band. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single Cursor Orange CTA. 96px vertical padding.\n\n**\\`footer\\`** — Closing footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (Cursor Orange) for primary CTAs and brand wordmark.\n- Keep display weight at 400. The editorial voice depends on this.\n- Use the cream \\`{colors.canvas}\\` page floor — never pure white.\n- Render every code surface (inline, blocks, IDE panes) in JetBrains Mono.\n- Use timeline pastels only inside in-product agent visualizations — never as system action colors.\n\n### Don't\n- Don't introduce a secondary brand action color. Cursor Orange is the only one.\n- Don't drop display to bold weights (700+). Magazine voice depends on 400.\n- Don't add drop shadows. Hairlines + ink-on-cream contrast carry the depth.\n- Don't use timeline pastels on non-timeline UI. They're scoped to the agent timeline only.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual product CTAs.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 72→32px; IDE mockup collapses to single pane preview; feature grid 1-up; nav hamburger. |\n| Tablet | 640–1024px | Hero h1 56px; IDE mockup compresses; feature grid 2-up. |\n| Desktop | 1024–1280px | Full hero h1 72px; full multi-pane IDE mockup; feature grid 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height — at WCAG AA, padded for AAA.\n- Download CTA at 44px — at AAA.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- IDE mockup multi-pane collapses to a single primary pane preview on mobile.\n- Feature grid: 3-up → 2-up → 1-up.\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}\\` (12px).\n3. Variants live as separate entries inside \\`components:\\`.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. CursorGothic 400 for display, 400/500/600 for body. JetBrains Mono on every code surface.\n7. Cursor Orange stays scarce.\n8. Timeline pastels stay scoped to in-product agent visualizations.\n\n## Known Gaps\n\n- CursorGothic is a licensed typeface; Inter is the substitute.\n- Animation timings (timeline pill entrance, IDE pane reveal) out of scope.\n- In-app surfaces (code editor, chat panel, agent timeline) only partially captured via marketing IDE mockups.\n- Form validation states beyond focus not visible on captured surfaces.\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/cursor.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const cursorBrief = `---\nversion: alpha\nname: Cursor\ndescription: An AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (\\`#f7f7f4\\`) instead of the typical dark IDE atmosphere. Near-black warm ink (\\`#26251e\\`) carries body and display alike — display sits at weight 400 with negative letter-spacing for a magazine feel rather than a bold tech voice. The single brand voltage is **Cursor Orange** (\\`#f54e00\\`) reserved for primary CTAs and the wordmark. A signature pastel timeline palette (peach, mint, blue, lavender, gold) marks AI-action stages (Thinking / Reading / Editing / Grepping / Done) — only inside in-product timeline visualizations. Cards use minimal hairlines, no shadows, generous 80px section rhythm. CursorGothic for display/body, JetBrains Mono on every code surface (which is roughly half the page).\n\ncolors:\n  primary: \"#f54e00\"\n  primary-active: \"#d04200\"\n  ink: \"#26251e\"\n  body: \"#5a5852\"\n  body-strong: \"#26251e\"\n  muted: \"#807d72\"\n  muted-soft: \"#a09c92\"\n  hairline: \"#e6e5e0\"\n  hairline-soft: \"#efeee8\"\n  hairline-strong: \"#cfcdc4\"\n  canvas: \"#f7f7f4\"\n  canvas-soft: \"#fafaf7\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#e6e5e0\"\n  on-primary: \"#ffffff\"\n  timeline-thinking: \"#dfa88f\"\n  timeline-grep: \"#9fc9a2\"\n  timeline-read: \"#9fbbe0\"\n  timeline-edit: \"#c0a8dd\"\n  timeline-done: \"#c08532\"\n  semantic-error: \"#cf2d56\"\n  semantic-success: \"#1f8a65\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'CursorGothic', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif\"\n    fontSize: 72px\n    fontWeight: 400\n    lineHeight: 1.1\n    letterSpacing: -2.16px\n  display-lg:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 36px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.72px\n  display-md:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 26px\n    fontWeight: 400\n    lineHeight: 1.25\n    letterSpacing: -0.325px\n  display-sm:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 22px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: -0.11px\n  title-md:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-tracked:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0.08px\n  body-sm:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'CursorGothic', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'CursorGothic', 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: \"'CursorGothic', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'CursorGothic', 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: 80px\n\ncomponents:\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\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.ink}\"\n    typography: \"{typography.button}\"\n  button-download:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.canvas}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 44px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 80px\n  ide-mockup-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.lg}\"\n    padding: 0\n  ide-pane:\n    backgroundColor: \"{colors.canvas-soft}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.md}\"\n    padding: 16px\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  comparison-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  timeline-pill-thinking:\n    backgroundColor: \"{colors.timeline-thinking}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  timeline-pill-grep:\n    backgroundColor: \"{colors.timeline-grep}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  timeline-pill-read:\n    backgroundColor: \"{colors.timeline-read}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  timeline-pill-edit:\n    backgroundColor: \"{colors.timeline-edit}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  timeline-pill-done:\n    backgroundColor: \"{colors.timeline-done}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  code-block:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-featured:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.canvas}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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:\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\nCursor's marketing site reads as a quietly-confident developer brand that believes in editorial calm over IDE-darkness. The base canvas is **warm cream** (\\`{colors.canvas}\\` — #f7f7f4) holding warm near-black ink (\\`{colors.ink}\\` — #26251e) for body and display alike. The single brand voltage is **Cursor Orange** (\\`{colors.primary}\\` — #f54e00) reserved for primary CTAs and the wordmark — used scarcely.\n\nType runs **CursorGothic** as the single sans family. Display sits at weight 400 with negative letter-spacing — a magazine-editorial voice rather than tech-bombastic. JetBrains Mono carries every code surface (and code surfaces are roughly half the page).\n\nThe brand's strongest visual signature is the **AI-timeline pill palette**: five pastel pills (peach \\`{colors.timeline-thinking}\\`, mint \\`{colors.timeline-grep}\\`, blue \\`{colors.timeline-read}\\`, lavender \\`{colors.timeline-edit}\\`, gold \\`{colors.timeline-done}\\`) marking AI-action stages inside in-product timeline visualizations. Used only in product UI — never as system action colors.\n\n**Key Characteristics:**\n- Warm cream canvas, not white. Ink is warm (#26251e), not pure black.\n- Single CTA color: \\`{colors.primary}\\` (Cursor Orange #f54e00). Used scarcely.\n- Display weight stays at 400 — never bold. Magazine voice.\n- AI timeline pastels: 5 dedicated tokens for in-product agent action stages.\n- Compact 8px CTA radius — developer dialect.\n- Hairline-only depth; no drop shadows.\n- 80px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Cursor Orange** (\\`{colors.primary}\\` — #f54e00): Primary CTA pills, wordmark, hero accent. Used scarcely.\n- **Cursor Orange Active** (\\`{colors.primary-active}\\` — #d04200): Press state.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #f7f7f4): Warm cream page floor.\n- **Canvas Soft** (\\`{colors.canvas-soft}\\` — #fafaf7): IDE-pane background inside mockups.\n- **Surface Card** (\\`{colors.surface-card}\\` — #ffffff): Pure white card surface — slight contrast against the cream canvas.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #e6e5e0): Badges, tag pills.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #e6e5e0): 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #efeee8): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #cfcdc4): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #26251e): Display, body emphasis. Warm near-black.\n- **Body** (\\`{colors.body}\\` — #5a5852): Default running-text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #26251e): Same as ink.\n- **Muted** (\\`{colors.muted}\\` — #807d72): Sub-titles.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #a09c92): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on Cursor Orange.\n\n### Timeline (AI-action signature)\n- **Thinking** (\\`{colors.timeline-thinking}\\` — #dfa88f): Peach. Used inside in-product agent timeline only.\n- **Grep** (\\`{colors.timeline-grep}\\` — #9fc9a2): Mint.\n- **Read** (\\`{colors.timeline-read}\\` — #9fbbe0): Pastel blue.\n- **Edit** (\\`{colors.timeline-edit}\\` — #c0a8dd): Lavender.\n- **Done** (\\`{colors.timeline-done}\\` — #c08532): Warm gold.\n\n### Semantic\n- **Success** (\\`{colors.semantic-success}\\` — #1f8a65): Confirmation indicators.\n- **Error** (\\`{colors.semantic-error}\\` — #cf2d56): Validation errors.\n\n## Typography\n\n### Font Family\n**CursorGothic** is the licensed display + body family. Fallback: \\`system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif\\`. Code surfaces switch to **JetBrains Mono**.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 72px | 400 | 1.1 | -2.16px | Homepage hero h1 |\n| \\`{typography.display-lg}\\` | 36px | 400 | 1.2 | -0.72px | Section heads |\n| \\`{typography.display-md}\\` | 26px | 400 | 1.25 | -0.325px | Sub-section heads |\n| \\`{typography.display-sm}\\` | 22px | 400 | 1.3 | -0.11px | Card group titles |\n| \\`{typography.title-md}\\` | 18px | 600 | 1.4 | 0 | Component titles |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.4 | 0 | List labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default body |\n| \\`{typography.body-tracked}\\` | 16px | 400 | 1.5 | 0.08px | Tracked editorial 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, timeline pill labels |\n| \\`{typography.code}\\` | 13px | 400 | 1.5 | 0 | Code blocks — 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 400.** Magazine voice, never bold.\n- **Negative letter-spacing on display only.** -0.11px to -2.16px tracking.\n- **JetBrains Mono on every code surface.**\n\n### Note on Font Substitutes\nCursorGothic is licensed. Open-source substitute: **Inter** at weight 400 with letter-spacing -1.5%. Or **GT Sectra** for a more editorial feel.\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}\\` 80px.\n- **Section padding:** 80px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for splits, 3-up for benefits.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing — closer to a print magazine than a tech site. The cream canvas has plenty of breathing room; cards within bands sit close (16-24px gap).\n\n## Elevation & Depth\n\nThe system uses **hairline-only depth**. No drop shadows, no elevation tiers. Cards float above the canvas via 1px hairlines and the slight white-on-cream contrast.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#f7f7f4) | Body bands, footer |\n| Card | \\`{colors.surface-card}\\` (#ffffff) | Content cards |\n| Hairline border | 1px \\`{colors.hairline}\\` | Card outlines, dividers |\n| IDE pane | \\`{colors.canvas-soft}\\` (#fafaf7) | Inside IDE mockup cards |\n\n### Decorative Depth\n- **IDE-mockup cards** are the only \"elevated\" element. White card on cream canvas with internal pane structure mimicking the actual Cursor editor.\n- **Timeline pastel pills** add chromatic depth without surface elevation.\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 | Cards, IDE panes |\n| \\`{rounded.xl}\\` | 16px | Larger feature cards (rare) |\n| \\`{rounded.pill}\\` | 9999px | Timeline pills, badges |\n| \\`{rounded.full}\\` | 9999px | Avatars (rare) |\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Cursor wordmark left, primary horizontal menu (Pricing / Features / Enterprise / Blog / Forum / Careers), Sign In + Download primary CTA right.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature Cursor Orange CTA. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 500), padding 10px × 18px, height 40px, rounded \\`{rounded.md}\\` (8px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-secondary\\`** — White card pill on cream canvas. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`button-tertiary-text\\`** — Inline ink text link.\n\n**\\`button-download\\`** — Larger ink-canvas CTA. Background \\`{colors.ink}\\`, text \\`{colors.canvas}\\`, padding 12px × 20px, height 44px. Used for \"Download for macOS\" type CTAs.\n\n### Hero & IDE Mockups\n\n**\\`hero-band\\`** — Background \\`{colors.canvas}\\`, full-width display headline in \\`{typography.display-mega}\\` (72px / 400 / -2.16px), subhead in \\`{typography.body-md}\\`, two CTAs (\\`button-download\\` + \\`button-tertiary-text\\`), and a centered IDE-mockup card below the hero copy.\n\n**\\`ide-mockup-card\\`** — A white card containing a multi-pane IDE mockup (sidebar + main editor + chat panel + terminal). Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\` (12px), 1px \\`{colors.hairline}\\` border, no padding (panes fill the card edge-to-edge).\n\n**\\`ide-pane\\`** — Individual IDE pane inside the mockup. Background \\`{colors.canvas-soft}\\`, text \\`{colors.body}\\` in \\`{typography.code}\\` (JetBrains Mono 13px), rounded \\`{rounded.md}\\` (8px), padding 16px.\n\n### Cards\n\n**\\`feature-card\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.lg}\\`, padding 24px. 1px \\`{colors.hairline}\\` border.\n\n**\\`comparison-card\\`** — Side-by-side \"Cursor vs other tools\" card. Same surface and rounding; internally split into 2 columns.\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 24px.\n\n### AI Timeline (signature)\n\n**\\`timeline-pill-thinking\\`** — Peach pill. Background \\`{colors.timeline-thinking}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\` (11px / 600 / 0.88px tracking, uppercase), rounded \\`{rounded.pill}\\`, padding 4px × 10px. Marks \"Thinking\" stage in product timeline.\n\n**\\`timeline-pill-grep\\`** — Mint pill. Same shape, background \\`{colors.timeline-grep}\\`. Marks \"Grepping\" stage.\n\n**\\`timeline-pill-read\\`** — Pastel-blue pill. Background \\`{colors.timeline-read}\\`. Marks \"Reading\" stage.\n\n**\\`timeline-pill-edit\\`** — Lavender pill. Background \\`{colors.timeline-edit}\\`. Marks \"Editing\" stage.\n\n**\\`timeline-pill-done\\`** — Gold pill. Background \\`{colors.timeline-done}\\`, text \\`{colors.on-primary}\\` white. Marks \"Done\" stage.\n\n### Code\n\n**\\`code-block\\`** — Inline code block. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\` in \\`{typography.code}\\`, rounded \\`{rounded.lg}\\`, padding 20px, 1px \\`{colors.hairline}\\` border.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding 32px, 1px \\`{colors.hairline}\\` border.\n\n**\\`pricing-tier-featured\\`** — Featured tier inverts to ink. Background \\`{colors.ink}\\`, text \\`{colors.canvas}\\`. Same shape, dark inversion signals \"highlighted\" without colored ribbon.\n\n### Forms & Tags\n\n**\\`text-input\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px.\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band\\`** — Pre-footer \"Try Cursor now\" band. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single Cursor Orange CTA. 96px vertical padding.\n\n**\\`footer\\`** — Closing footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (Cursor Orange) for primary CTAs and brand wordmark.\n- Keep display weight at 400. The editorial voice depends on this.\n- Use the cream \\`{colors.canvas}\\` page floor — never pure white.\n- Render every code surface (inline, blocks, IDE panes) in JetBrains Mono.\n- Use timeline pastels only inside in-product agent visualizations — never as system action colors.\n\n### Don't\n- Don't introduce a secondary brand action color. Cursor Orange is the only one.\n- Don't drop display to bold weights (700+). Magazine voice depends on 400.\n- Don't add drop shadows. Hairlines + ink-on-cream contrast carry the depth.\n- Don't use timeline pastels on non-timeline UI. They're scoped to the agent timeline only.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual product CTAs.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 72→32px; IDE mockup collapses to single pane preview; feature grid 1-up; nav hamburger. |\n| Tablet | 640–1024px | Hero h1 56px; IDE mockup compresses; feature grid 2-up. |\n| Desktop | 1024–1280px | Full hero h1 72px; full multi-pane IDE mockup; feature grid 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height — at WCAG AA, padded for AAA.\n- Download CTA at 44px — at AAA.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- IDE mockup multi-pane collapses to a single primary pane preview on mobile.\n- Feature grid: 3-up → 2-up → 1-up.\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}\\` (12px).\n3. Variants live as separate entries inside \\`components:\\`.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. CursorGothic 400 for display, 400/500/600 for body. JetBrains Mono on every code surface.\n7. Cursor Orange stays scarce.\n8. Timeline pastels stay scoped to in-product agent visualizations.\n\n## Known Gaps\n\n- CursorGothic is a licensed typeface; Inter is the substitute.\n- Animation timings (timeline pill entrance, IDE pane reveal) out of scope.\n- In-app surfaces (code editor, chat panel, agent timeline) only partially captured via marketing IDE mockups.\n- Form validation states beyond focus not visible on captured surfaces.\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/elevenlabs.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const elevenlabsBrief = `---\nversion: alpha\nname: ElevenLabs\ndescription: A voice-AI brand whose marketing surfaces read like a quietly editorial print magazine. The base canvas is off-white (\\`#f5f5f5\\`) holding warm near-black ink (\\`#292524\\`); the brand voltage is photographic, not chromatic — soft pastel atmospheric gradient orbs (mint → peach → lavender → sky) drift through the page as the only \"color\" moments. Display runs Waldenburg Light at weight 300 — the editorial signature. Inter carries body, navigation, captions. CTAs are subtle: a near-black ink pill is the primary, a transparent outline is the secondary. The brand trusts atmospheric photography and modest type weights to do all of the brand work; there is no neon accent, no saturated CTA color, no developer-tools dark canvas.\n\ncolors:\n  primary: \"#292524\"\n  primary-active: \"#0c0a09\"\n  ink: \"#0c0a09\"\n  body: \"#4e4e4e\"\n  body-strong: \"#292524\"\n  muted: \"#777169\"\n  muted-soft: \"#a8a29e\"\n  hairline: \"#e7e5e4\"\n  hairline-soft: \"#f0efed\"\n  hairline-strong: \"#d6d3d1\"\n  canvas: \"#f5f5f5\"\n  canvas-soft: \"#fafafa\"\n  canvas-deep: \"#0c0a09\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#f0efed\"\n  surface-dark: \"#0c0a09\"\n  surface-dark-elevated: \"#1c1917\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#a8a29e\"\n  gradient-mint: \"#a7e5d3\"\n  gradient-peach: \"#f4c5a8\"\n  gradient-lavender: \"#c8b8e0\"\n  gradient-sky: \"#a8c8e8\"\n  gradient-rose: \"#e8b8c4\"\n  semantic-error: \"#dc2626\"\n  semantic-success: \"#16a34a\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Waldenburg', 'Times New Roman', serif\"\n    fontSize: 64px\n    fontWeight: 300\n    lineHeight: 1.05\n    letterSpacing: -1.92px\n  display-xl:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 48px\n    fontWeight: 300\n    lineHeight: 1.08\n    letterSpacing: -0.96px\n  display-lg:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 36px\n    fontWeight: 300\n    lineHeight: 1.17\n    letterSpacing: -0.36px\n  display-md:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 32px\n    fontWeight: 300\n    lineHeight: 1.13\n    letterSpacing: -0.32px\n  display-sm:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 24px\n    fontWeight: 300\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 20px\n    fontWeight: 500\n    lineHeight: 1.35\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.44\n    letterSpacing: 0.18px\n  body-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0.16px\n  body-strong:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.5\n    letterSpacing: 0.16px\n  body-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\n    fontWeight: 400\n    lineHeight: 1.47\n    letterSpacing: 0.15px\n  caption:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 12px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.96px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\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  xxl: 24px\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:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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: 10px 20px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.pill}\"\n  button-outline:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 9px 19px\n    height: 40px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  gradient-orb-card:\n    backgroundColor: \"{colors.canvas-soft}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xxl}\"\n    padding: 32px\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 24px\n  product-card-stack:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 0\n  voice-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 12px 0\n  voice-icon-circular:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.full}\"\n    size: 32px\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\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  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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.xl}\"\n    padding: 32px\n  audio-waveform-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 24px\n  footer:\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\nElevenLabs reads like a quietly editorial print magazine that happens to be a voice-AI product. The base canvas is off-white \\`{colors.canvas}\\` (#f5f5f5) holding warm near-black ink \\`{colors.ink}\\` (#0c0a09). The brand voltage is **photographic, not chromatic**: soft pastel atmospheric gradient orbs (mint, peach, lavender, sky, rose) drift through the page as the only \"color\" moments. There is no neon accent, no saturated CTA color, no dark-canvas dev-tools atmosphere.\n\nType pairs **Waldenburg Light** (custom serif at weight 300) for display with **Inter** for body, navigation, captions. The display weight at 300 is the editorial signature — never bold, never heavy.\n\nCTAs are subtle: a near-black ink pill (\\`{component.button-primary}\\`) is the primary, a transparent outline (\\`{component.button-outline}\\`) is the secondary. The brand trusts atmospheric photography and modest type weights to carry brand work.\n\n**Key Characteristics:**\n- Off-white canvas, warm near-black ink. No saturated CTA color.\n- Single primary action: ink pill at \\`{rounded.pill}\\`. Atmospheric gradients carry visual brand voltage.\n- Display runs Waldenburg Light at weight 300 — editorial magazine voice.\n- Body runs Inter at 400 with subtle letter-spacing (+0.15-0.18px).\n- Pastel gradient orbs (5 tokens: mint, peach, lavender, sky, rose) used as atmospheric brand decoration only.\n- Soft pill geometry (\\`{rounded.pill}\\` for CTAs, \\`{rounded.xl}\\` for cards).\n- 96px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Ink Primary** (\\`{colors.primary}\\` — #292524): The primary action color — warm near-black pill. Used scarcely.\n- **Ink Primary Active** (\\`{colors.primary-active}\\` — #0c0a09): Press state.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #f5f5f5): Off-white page floor.\n- **Canvas Soft** (\\`{colors.canvas-soft}\\` — #fafafa): Lighter band for subtle alternating sections.\n- **Canvas Deep** (\\`{colors.canvas-deep}\\` — #0c0a09): Same as ink — used for the rare dark-mode hero (Agents page).\n- **Surface Card** (\\`{colors.surface-card}\\` — #ffffff): Pure white card.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #f0efed): Badges, voice-icon plates.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #0c0a09): Dark hero/CTA band canvas.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1c1917): Cards on dark canvas.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #e7e5e4): Default 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #f0efed): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #d6d3d1): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #0c0a09): Display, primary text.\n- **Body** (\\`{colors.body}\\` — #4e4e4e): Default running-text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #292524): Same as primary — emphasis.\n- **Muted** (\\`{colors.muted}\\` — #777169): Sub-titles.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #a8a29e): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on ink pill.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on dark hero.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a8a29e): Muted off-white on dark.\n\n### Atmospheric Gradient Stops (signature)\n- **Gradient Mint** (\\`{colors.gradient-mint}\\` — #a7e5d3): Mint green orb.\n- **Gradient Peach** (\\`{colors.gradient-peach}\\` — #f4c5a8): Peach orb.\n- **Gradient Lavender** (\\`{colors.gradient-lavender}\\` — #c8b8e0): Lavender orb.\n- **Gradient Sky** (\\`{colors.gradient-sky}\\` — #a8c8e8): Sky-blue orb.\n- **Gradient Rose** (\\`{colors.gradient-rose}\\` — #e8b8c4): Rose orb.\n\nThese appear ONLY as soft radial-gradient atmospheric orbs inside \\`{component.gradient-orb-card}\\` and as background atmospheric blooms behind hero copy. Never as button fills, never as text colors.\n\n### Semantic\n- **Success** (\\`{colors.semantic-success}\\` — #16a34a): Confirmation.\n- **Error** (\\`{colors.semantic-error}\\` — #dc2626): Validation errors.\n\n## Typography\n\n### Font Family\n**Waldenburg Light** is the licensed display serif at weight 300. **Inter** carries body, navigation, captions, and buttons. Fallback: \\`'Times New Roman', serif\\` for Waldenburg, \\`sans-serif\\` for Inter.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 64px | 300 | 1.05 | -1.92px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 48px | 300 | 1.08 | -0.96px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 36px | 300 | 1.17 | -0.36px | Section heads |\n| \\`{typography.display-md}\\` | 32px | 300 | 1.13 | -0.32px | Sub-section heads |\n| \\`{typography.display-sm}\\` | 24px | 300 | 1.2 | 0 | Card group titles |\n| \\`{typography.title-md}\\` | 20px | 500 | 1.35 | 0 | Component titles — Inter |\n| \\`{typography.title-sm}\\` | 18px | 500 | 1.44 | 0.18px | List labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0.16px | Default body — Inter |\n| \\`{typography.body-strong}\\` | 16px | 500 | 1.5 | 0.16px | Emphasized body |\n| \\`{typography.body-sm}\\` | 15px | 400 | 1.47 | 0.15px | Footer body |\n| \\`{typography.caption}\\` | 14px | 400 | 1.5 | 0 | Photo captions |\n| \\`{typography.caption-uppercase}\\` | 12px | 600 | 1.4 | 0.96px | Section labels, badges |\n| \\`{typography.button}\\` | 15px | 500 | 1.0 | 0 | CTA pill |\n| \\`{typography.nav-link}\\` | 15px | 500 | 1.4 | 0 | Top-nav menu |\n\n### Principles\n- **Display weight stays at 300.** Waldenburg Light is the editorial signature. Never bold display copy.\n- **Subtle letter-spacing on body.** Inter at +0.15-0.18px tracking — slightly looser than default Inter for a more editorial feel.\n- **Negative letter-spacing on display.** Waldenburg pulls -0.32px to -1.92px tighter on display sizes.\n\n### Note on Font Substitutes\nWaldenburg is licensed. Open-source substitute: **EB Garamond** at weight 300 (slightly more humanist) or **GT Sectra** (closer to Waldenburg's modernity). Use Inter directly for body — it's the same family ElevenLabs uses.\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:** 96px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing — print-magazine feel. 96px between bands; cards inside bands sit close (16-24px gap). The atmospheric gradient orbs occupy generous breathing space without competing with copy.\n\n## Elevation & Depth\n\nThe system uses **hairline + soft drop**. Cards float above the off-white canvas via 1px hairlines and a single subtle shadow tier. Atmospheric depth comes from gradient orbs.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#f5f5f5) | Body bands, footer |\n| Card | \\`{colors.surface-card}\\` (#ffffff) | Content cards |\n| Hairline border | 1px \\`{colors.hairline}\\` | Card outlines |\n| Soft drop | \\`0 4px 16px rgba(0, 0, 0, 0.04)\\` | Hovered cards (single shadow tier) |\n| Gradient orb | Radial gradient with one of \\`{colors.gradient-*}\\` | Atmospheric depth — never a card surface |\n\n### Decorative Depth\n- **Pastel gradient orbs** are the brand's strongest atmospheric pattern. Soft radial blooms in mint, peach, lavender, sky, or rose drift through hero bands and feature sections without containing any content — they are pure atmosphere.\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 | Form inputs |\n| \\`{rounded.lg}\\` | 12px | Compact cards |\n| \\`{rounded.xl}\\` | 16px | Feature cards, pricing tiers |\n| \\`{rounded.xxl}\\` | 24px | Gradient orb cards (extra-soft) |\n| \\`{rounded.pill}\\` | 9999px | All CTA buttons, badges |\n| \\`{rounded.full}\\` | 9999px | Voice icon circles, avatars |\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: ElevenLabs wordmark left, primary horizontal menu (Creative / Agents / Video / Pricing / Enterprise / Docs), Sign In + \"Try free\" primary CTA right.\n\n### Buttons\n\n**\\`button-primary\\`** — Near-black ink pill. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (15px / 500), padding 10px × 20px, height 40px, rounded \\`{rounded.pill}\\`.\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-outline\\`** — Transparent pill with 1px ink border. Background transparent, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`button-tertiary-text\\`** — Inline ink text link.\n\n### Hero & Atmospheric\n\n**\\`hero-band\\`** — Background \\`{colors.canvas}\\`, full-width display headline in \\`{typography.display-mega}\\` (64px / 300 / -1.92px), subhead in \\`{typography.body-md}\\`, two CTAs, and an atmospheric gradient orb behind the centered headline.\n\n**\\`gradient-orb-card\\`** — A large card with a soft radial-gradient orb behind centered display copy. Background \\`{colors.canvas-soft}\\`, rounded \\`{rounded.xxl}\\` (24px), padding 32px. Each variant uses one of the five gradient tokens (\\`gradient-mint\\`, \\`gradient-peach\\`, \\`gradient-lavender\\`, \\`gradient-sky\\`, \\`gradient-rose\\`).\n\n**\\`audio-waveform-card\\`** — A waveform visualization card. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, padding 24px. Holds a play button + waveform glyph + voice metadata.\n\n### Cards\n\n**\\`feature-card\\`** — 2-up or 3-up grids. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.xl}\\`, padding 24px, 1px hairline border.\n\n**\\`product-card-stack\\`** — Stacked product preview cards. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, no padding (children fill the card edge-to-edge).\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.xl}\\`, padding 32px.\n\n### Voice Library\n\n**\\`voice-row\\`** — Horizontal row in voice list. Background transparent, 1px hairline divider. Layout: 32px circular voice icon (\\`{component.voice-icon-circular}\\`) left, voice name + accent stack, optional preview button right.\n\n**\\`voice-icon-circular\\`** — Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.full}\\`, 32px diameter. Holds initials or voice glyph.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, padding 32px, 1px hairline border.\n\n**\\`pricing-tier-featured\\`** — Featured tier inverts. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n### Forms & Tags\n\n**\\`text-input\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px, 1px \\`{colors.hairline-strong}\\` border. On focus, border thickens to 2px ink.\n\n**\\`badge-pill\\`** — Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band\\`** — Pre-footer. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single ink pill CTA. 96px padding.\n\n**\\`footer\\`** — Closing footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (ink pill) for primary CTAs.\n- Use Waldenburg Light at weight 300 for every display headline. Never bold.\n- Use Inter at +0.15-0.18px tracking for body — the editorial dialect.\n- Use atmospheric gradient orbs (mint/peach/lavender/sky/rose) as decoration only.\n- Use the pill shape for every CTA and badge.\n\n### Don't\n- Don't introduce a saturated brand action color. Ink pill is the only CTA color.\n- Don't bold display copy. Display sits at weight 300 — bolding shifts the brand voice from editorial to consumer-marketing.\n- Don't use gradient orbs as button fills, text colors, or component backgrounds. They are pure atmosphere.\n- Don't use sharp \\`{rounded.none}\\` (0px) on CTAs. Pill geometry is the brand button.\n- Don't drop body Inter to weight 300 to match Waldenburg — body stays at 400/500 for legibility.\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.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 64→32px; feature cards 1-up; nav hamburger; gradient orbs shrink. |\n| Tablet | 640–1024px | Hero h1 48px; feature cards 2-up. |\n| Desktop | 1024–1280px | Full hero h1 64px; feature cards 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary pill at 40px height — at WCAG AA, padded for AAA.\n- Voice icon circles 32px — padded row creates effective 48px tap zone.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Feature grid: 3-up → 2-up → 1-up.\n- Gradient orbs reduce diameter at every breakpoint but never disappear.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to \\`{rounded.pill}\\`. Cards use \\`{rounded.xl}\\` (16px).\n3. Variants live as separate entries.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. Waldenburg 300 for display, Inter 400/500 for body.\n7. Gradient orbs scoped to atmospheric decoration.\n\n## Known Gaps\n\n- Waldenburg is a licensed typeface; EB Garamond / GT Sectra are documented substitutes.\n- Animation timings (orb drift, waveform pulse, hero entrance) out of scope.\n- In-product surfaces (voice library editor, agent playground) only partially captured via marketing mockups.\n- Form validation states beyond focus not visible on captured surfaces.\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/elevenlabs.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const elevenlabsBrief = `---\nversion: alpha\nname: ElevenLabs\ndescription: A voice-AI brand whose marketing surfaces read like a quietly editorial print magazine. The base canvas is off-white (\\`#f5f5f5\\`) holding warm near-black ink (\\`#292524\\`); the brand voltage is photographic, not chromatic — soft pastel atmospheric gradient orbs (mint → peach → lavender → sky) drift through the page as the only \"color\" moments. Display runs Waldenburg Light at weight 300 — the editorial signature. Inter carries body, navigation, captions. CTAs are subtle: a near-black ink pill is the primary, a transparent outline is the secondary. The brand trusts atmospheric photography and modest type weights to do all of the brand work; there is no neon accent, no saturated CTA color, no developer-tools dark canvas.\n\ncolors:\n  primary: \"#292524\"\n  primary-active: \"#0c0a09\"\n  ink: \"#0c0a09\"\n  body: \"#4e4e4e\"\n  body-strong: \"#292524\"\n  muted: \"#777169\"\n  muted-soft: \"#a8a29e\"\n  hairline: \"#e7e5e4\"\n  hairline-soft: \"#f0efed\"\n  hairline-strong: \"#d6d3d1\"\n  canvas: \"#f5f5f5\"\n  canvas-soft: \"#fafafa\"\n  canvas-deep: \"#0c0a09\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#f0efed\"\n  surface-dark: \"#0c0a09\"\n  surface-dark-elevated: \"#1c1917\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#a8a29e\"\n  gradient-mint: \"#a7e5d3\"\n  gradient-peach: \"#f4c5a8\"\n  gradient-lavender: \"#c8b8e0\"\n  gradient-sky: \"#a8c8e8\"\n  gradient-rose: \"#e8b8c4\"\n  semantic-error: \"#dc2626\"\n  semantic-success: \"#16a34a\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Waldenburg', 'Times New Roman', serif\"\n    fontSize: 64px\n    fontWeight: 300\n    lineHeight: 1.05\n    letterSpacing: -1.92px\n  display-xl:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 48px\n    fontWeight: 300\n    lineHeight: 1.08\n    letterSpacing: -0.96px\n  display-lg:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 36px\n    fontWeight: 300\n    lineHeight: 1.17\n    letterSpacing: -0.36px\n  display-md:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 32px\n    fontWeight: 300\n    lineHeight: 1.13\n    letterSpacing: -0.32px\n  display-sm:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 24px\n    fontWeight: 300\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 20px\n    fontWeight: 500\n    lineHeight: 1.35\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.44\n    letterSpacing: 0.18px\n  body-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0.16px\n  body-strong:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.5\n    letterSpacing: 0.16px\n  body-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\n    fontWeight: 400\n    lineHeight: 1.47\n    letterSpacing: 0.15px\n  caption:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 12px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.96px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\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  xxl: 24px\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:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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: 10px 20px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.pill}\"\n  button-outline:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 9px 19px\n    height: 40px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  gradient-orb-card:\n    backgroundColor: \"{colors.canvas-soft}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xxl}\"\n    padding: 32px\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 24px\n  product-card-stack:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 0\n  voice-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 12px 0\n  voice-icon-circular:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.full}\"\n    size: 32px\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\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  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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.xl}\"\n    padding: 32px\n  audio-waveform-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 24px\n  footer:\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\nElevenLabs reads like a quietly editorial print magazine that happens to be a voice-AI product. The base canvas is off-white \\`{colors.canvas}\\` (#f5f5f5) holding warm near-black ink \\`{colors.ink}\\` (#0c0a09). The brand voltage is **photographic, not chromatic**: soft pastel atmospheric gradient orbs (mint, peach, lavender, sky, rose) drift through the page as the only \"color\" moments. There is no neon accent, no saturated CTA color, no dark-canvas dev-tools atmosphere.\n\nType pairs **Waldenburg Light** (custom serif at weight 300) for display with **Inter** for body, navigation, captions. The display weight at 300 is the editorial signature — never bold, never heavy.\n\nCTAs are subtle: a near-black ink pill (\\`{component.button-primary}\\`) is the primary, a transparent outline (\\`{component.button-outline}\\`) is the secondary. The brand trusts atmospheric photography and modest type weights to carry brand work.\n\n**Key Characteristics:**\n- Off-white canvas, warm near-black ink. No saturated CTA color.\n- Single primary action: ink pill at \\`{rounded.pill}\\`. Atmospheric gradients carry visual brand voltage.\n- Display runs Waldenburg Light at weight 300 — editorial magazine voice.\n- Body runs Inter at 400 with subtle letter-spacing (+0.15-0.18px).\n- Pastel gradient orbs (5 tokens: mint, peach, lavender, sky, rose) used as atmospheric brand decoration only.\n- Soft pill geometry (\\`{rounded.pill}\\` for CTAs, \\`{rounded.xl}\\` for cards).\n- 96px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Ink Primary** (\\`{colors.primary}\\` — #292524): The primary action color — warm near-black pill. Used scarcely.\n- **Ink Primary Active** (\\`{colors.primary-active}\\` — #0c0a09): Press state.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #f5f5f5): Off-white page floor.\n- **Canvas Soft** (\\`{colors.canvas-soft}\\` — #fafafa): Lighter band for subtle alternating sections.\n- **Canvas Deep** (\\`{colors.canvas-deep}\\` — #0c0a09): Same as ink — used for the rare dark-mode hero (Agents page).\n- **Surface Card** (\\`{colors.surface-card}\\` — #ffffff): Pure white card.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #f0efed): Badges, voice-icon plates.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #0c0a09): Dark hero/CTA band canvas.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1c1917): Cards on dark canvas.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #e7e5e4): Default 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #f0efed): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #d6d3d1): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #0c0a09): Display, primary text.\n- **Body** (\\`{colors.body}\\` — #4e4e4e): Default running-text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #292524): Same as primary — emphasis.\n- **Muted** (\\`{colors.muted}\\` — #777169): Sub-titles.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #a8a29e): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on ink pill.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on dark hero.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a8a29e): Muted off-white on dark.\n\n### Atmospheric Gradient Stops (signature)\n- **Gradient Mint** (\\`{colors.gradient-mint}\\` — #a7e5d3): Mint green orb.\n- **Gradient Peach** (\\`{colors.gradient-peach}\\` — #f4c5a8): Peach orb.\n- **Gradient Lavender** (\\`{colors.gradient-lavender}\\` — #c8b8e0): Lavender orb.\n- **Gradient Sky** (\\`{colors.gradient-sky}\\` — #a8c8e8): Sky-blue orb.\n- **Gradient Rose** (\\`{colors.gradient-rose}\\` — #e8b8c4): Rose orb.\n\nThese appear ONLY as soft radial-gradient atmospheric orbs inside \\`{component.gradient-orb-card}\\` and as background atmospheric blooms behind hero copy. Never as button fills, never as text colors.\n\n### Semantic\n- **Success** (\\`{colors.semantic-success}\\` — #16a34a): Confirmation.\n- **Error** (\\`{colors.semantic-error}\\` — #dc2626): Validation errors.\n\n## Typography\n\n### Font Family\n**Waldenburg Light** is the licensed display serif at weight 300. **Inter** carries body, navigation, captions, and buttons. Fallback: \\`'Times New Roman', serif\\` for Waldenburg, \\`sans-serif\\` for Inter.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 64px | 300 | 1.05 | -1.92px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 48px | 300 | 1.08 | -0.96px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 36px | 300 | 1.17 | -0.36px | Section heads |\n| \\`{typography.display-md}\\` | 32px | 300 | 1.13 | -0.32px | Sub-section heads |\n| \\`{typography.display-sm}\\` | 24px | 300 | 1.2 | 0 | Card group titles |\n| \\`{typography.title-md}\\` | 20px | 500 | 1.35 | 0 | Component titles — Inter |\n| \\`{typography.title-sm}\\` | 18px | 500 | 1.44 | 0.18px | List labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0.16px | Default body — Inter |\n| \\`{typography.body-strong}\\` | 16px | 500 | 1.5 | 0.16px | Emphasized body |\n| \\`{typography.body-sm}\\` | 15px | 400 | 1.47 | 0.15px | Footer body |\n| \\`{typography.caption}\\` | 14px | 400 | 1.5 | 0 | Photo captions |\n| \\`{typography.caption-uppercase}\\` | 12px | 600 | 1.4 | 0.96px | Section labels, badges |\n| \\`{typography.button}\\` | 15px | 500 | 1.0 | 0 | CTA pill |\n| \\`{typography.nav-link}\\` | 15px | 500 | 1.4 | 0 | Top-nav menu |\n\n### Principles\n- **Display weight stays at 300.** Waldenburg Light is the editorial signature. Never bold display copy.\n- **Subtle letter-spacing on body.** Inter at +0.15-0.18px tracking — slightly looser than default Inter for a more editorial feel.\n- **Negative letter-spacing on display.** Waldenburg pulls -0.32px to -1.92px tighter on display sizes.\n\n### Note on Font Substitutes\nWaldenburg is licensed. Open-source substitute: **EB Garamond** at weight 300 (slightly more humanist) or **GT Sectra** (closer to Waldenburg's modernity). Use Inter directly for body — it's the same family ElevenLabs uses.\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:** 96px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing — print-magazine feel. 96px between bands; cards inside bands sit close (16-24px gap). The atmospheric gradient orbs occupy generous breathing space without competing with copy.\n\n## Elevation & Depth\n\nThe system uses **hairline + soft drop**. Cards float above the off-white canvas via 1px hairlines and a single subtle shadow tier. Atmospheric depth comes from gradient orbs.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#f5f5f5) | Body bands, footer |\n| Card | \\`{colors.surface-card}\\` (#ffffff) | Content cards |\n| Hairline border | 1px \\`{colors.hairline}\\` | Card outlines |\n| Soft drop | \\`0 4px 16px rgba(0, 0, 0, 0.04)\\` | Hovered cards (single shadow tier) |\n| Gradient orb | Radial gradient with one of \\`{colors.gradient-*}\\` | Atmospheric depth — never a card surface |\n\n### Decorative Depth\n- **Pastel gradient orbs** are the brand's strongest atmospheric pattern. Soft radial blooms in mint, peach, lavender, sky, or rose drift through hero bands and feature sections without containing any content — they are pure atmosphere.\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 | Form inputs |\n| \\`{rounded.lg}\\` | 12px | Compact cards |\n| \\`{rounded.xl}\\` | 16px | Feature cards, pricing tiers |\n| \\`{rounded.xxl}\\` | 24px | Gradient orb cards (extra-soft) |\n| \\`{rounded.pill}\\` | 9999px | All CTA buttons, badges |\n| \\`{rounded.full}\\` | 9999px | Voice icon circles, avatars |\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: ElevenLabs wordmark left, primary horizontal menu (Creative / Agents / Video / Pricing / Enterprise / Docs), Sign In + \"Try free\" primary CTA right.\n\n### Buttons\n\n**\\`button-primary\\`** — Near-black ink pill. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (15px / 500), padding 10px × 20px, height 40px, rounded \\`{rounded.pill}\\`.\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-outline\\`** — Transparent pill with 1px ink border. Background transparent, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`button-tertiary-text\\`** — Inline ink text link.\n\n### Hero & Atmospheric\n\n**\\`hero-band\\`** — Background \\`{colors.canvas}\\`, full-width display headline in \\`{typography.display-mega}\\` (64px / 300 / -1.92px), subhead in \\`{typography.body-md}\\`, two CTAs, and an atmospheric gradient orb behind the centered headline.\n\n**\\`gradient-orb-card\\`** — A large card with a soft radial-gradient orb behind centered display copy. Background \\`{colors.canvas-soft}\\`, rounded \\`{rounded.xxl}\\` (24px), padding 32px. Each variant uses one of the five gradient tokens (\\`gradient-mint\\`, \\`gradient-peach\\`, \\`gradient-lavender\\`, \\`gradient-sky\\`, \\`gradient-rose\\`).\n\n**\\`audio-waveform-card\\`** — A waveform visualization card. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, padding 24px. Holds a play button + waveform glyph + voice metadata.\n\n### Cards\n\n**\\`feature-card\\`** — 2-up or 3-up grids. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.xl}\\`, padding 24px, 1px hairline border.\n\n**\\`product-card-stack\\`** — Stacked product preview cards. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, no padding (children fill the card edge-to-edge).\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.xl}\\`, padding 32px.\n\n### Voice Library\n\n**\\`voice-row\\`** — Horizontal row in voice list. Background transparent, 1px hairline divider. Layout: 32px circular voice icon (\\`{component.voice-icon-circular}\\`) left, voice name + accent stack, optional preview button right.\n\n**\\`voice-icon-circular\\`** — Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.full}\\`, 32px diameter. Holds initials or voice glyph.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, padding 32px, 1px hairline border.\n\n**\\`pricing-tier-featured\\`** — Featured tier inverts. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n### Forms & Tags\n\n**\\`text-input\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px, 1px \\`{colors.hairline-strong}\\` border. On focus, border thickens to 2px ink.\n\n**\\`badge-pill\\`** — Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band\\`** — Pre-footer. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single ink pill CTA. 96px padding.\n\n**\\`footer\\`** — Closing footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (ink pill) for primary CTAs.\n- Use Waldenburg Light at weight 300 for every display headline. Never bold.\n- Use Inter at +0.15-0.18px tracking for body — the editorial dialect.\n- Use atmospheric gradient orbs (mint/peach/lavender/sky/rose) as decoration only.\n- Use the pill shape for every CTA and badge.\n\n### Don't\n- Don't introduce a saturated brand action color. Ink pill is the only CTA color.\n- Don't bold display copy. Display sits at weight 300 — bolding shifts the brand voice from editorial to consumer-marketing.\n- Don't use gradient orbs as button fills, text colors, or component backgrounds. They are pure atmosphere.\n- Don't use sharp \\`{rounded.none}\\` (0px) on CTAs. Pill geometry is the brand button.\n- Don't drop body Inter to weight 300 to match Waldenburg — body stays at 400/500 for legibility.\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.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 64→32px; feature cards 1-up; nav hamburger; gradient orbs shrink. |\n| Tablet | 640–1024px | Hero h1 48px; feature cards 2-up. |\n| Desktop | 1024–1280px | Full hero h1 64px; feature cards 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary pill at 40px height — at WCAG AA, padded for AAA.\n- Voice icon circles 32px — padded row creates effective 48px tap zone.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Feature grid: 3-up → 2-up → 1-up.\n- Gradient orbs reduce diameter at every breakpoint but never disappear.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to \\`{rounded.pill}\\`. Cards use \\`{rounded.xl}\\` (16px).\n3. Variants live as separate entries.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. Waldenburg 300 for display, Inter 400/500 for body.\n7. Gradient orbs scoped to atmospheric decoration.\n\n## Known Gaps\n\n- Waldenburg is a licensed typeface; EB Garamond / GT Sectra are documented substitutes.\n- Animation timings (orb drift, waveform pulse, hero entrance) out of scope.\n- In-product surfaces (voice library editor, agent playground) only partially captured via marketing mockups.\n- Form validation states beyond focus not visible on captured surfaces.\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/expo.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const expoBrief = `---\nversion: alpha\nname: Expo\ndescription: A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (\\`#171717\\`) carries body and display alike. The single brand voltage is **pure black** (\\`#000000\\`) for primary CTAs — minimal and editorial-feeling, paired with a small blue text-link accent (\\`#0d74ce\\`) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces — over the gradient sky wash.\n\ncolors:\n  primary: \"#000000\"\n  primary-active: \"#1a1a1a\"\n  text-link: \"#0d74ce\"\n  text-link-secondary: \"#476cff\"\n  ink: \"#171717\"\n  body: \"#60646c\"\n  body-strong: \"#171717\"\n  muted: \"#999999\"\n  muted-soft: \"#cccccc\"\n  hairline: \"#f0f0f3\"\n  hairline-soft: \"#f5f5f7\"\n  hairline-strong: \"#dcdee0\"\n  canvas: \"#ffffff\"\n  canvas-soft: \"#fafafa\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#f0f0f3\"\n  surface-dark: \"#171717\"\n  surface-dark-elevated: \"#1a1a1a\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#b0b4ba\"\n  gradient-sky-light: \"#cfe7ff\"\n  gradient-sky-mid: \"#a8c8e8\"\n  accent-warning: \"#ab6400\"\n  accent-preview: \"#8145b5\"\n  accent-link-bright: \"#47c2ff\"\n  semantic-error: \"#eb8e90\"\n  semantic-success: \"#16a34a\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Inter', -apple-system, system-ui, sans-serif\"\n    fontSize: 64px\n    fontWeight: 600\n    lineHeight: 1.05\n    letterSpacing: -1.92px\n  display-xl:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 48px\n    fontWeight: 600\n    lineHeight: 1.1\n    letterSpacing: -1.44px\n  display-lg:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 36px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -1.08px\n  display-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: -0.84px\n  display-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 22px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: -0.5px\n  title-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'Inter', 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: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.0\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  none: 0px\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  xxl: 24px\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:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\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.text-link}\"\n    typography: \"{typography.button}\"\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  device-mockup-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 0\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  feature-card-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  workflow-step-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  workflow-step-icon:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.md}\"\n    size: 32px\n  code-block:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  ide-mockup-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.lg}\"\n    padding: 0\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\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.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  ecosystem-tile:\n    backgroundColor: \"{colors.surface-card}\"\n    rounded: \"{rounded.md}\"\n    size: 64px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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-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---\n\n## Overview\n\nExpo's marketing site reads like a quietly-confident React-Native developer platform. The base canvas is **pure white** (\\`{colors.canvas}\\` — #ffffff) with a soft **sky-blue gradient atmospheric wash** behind the hero band. Near-black ink \\`{colors.ink}\\` (#171717) carries body and display alike. The single brand voltage is **pure black** (\\`{colors.primary}\\` — #000000) for primary CTAs — minimal and editorial-feeling. A small blue text-link accent (\\`{colors.text-link}\\` — #0d74ce) is reserved for inline body links, never as a CTA.\n\nType runs **Inter** as the single sans family at modest weights (display 600, body 400). JetBrains Mono carries every code surface. No custom typeface — the brand trusts Inter's editorial neutrality.\n\nThe brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces (Expo Studio, EAS Build dashboard, the Expo Go simulator) — over a sky-blue gradient atmospheric wash. The composite is the page's chrome instead of an illustration.\n\n**Key Characteristics:**\n- Pure white canvas with sky-blue gradient atmospheric backdrop in hero only.\n- Single primary CTA: pure black pill at \\`{rounded.md}\\` (8px) — compact developer-tool dialect.\n- Text-link blue (\\`{colors.text-link}\\`) for inline links only — never on a CTA.\n- Inter as the single sans family — no custom display typeface.\n- JetBrains Mono on every code surface.\n- Device-mockup hero with real Expo product surfaces is the brand chrome.\n- Hairline + soft drop depth; no atmospheric brand decoration outside the hero.\n- 96px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Black** (\\`{colors.primary}\\` — #000000): Primary CTA fill. Used scarcely.\n- **Black Active** (\\`{colors.primary-active}\\` — #1a1a1a): Press state.\n- **Text Link Blue** (\\`{colors.text-link}\\` — #0d74ce): Inline body links inside long-form copy. Scoped narrowly — never on CTAs.\n- **Legal Link Blue** (\\`{colors.text-link-secondary}\\` — #476cff): Inline links inside legal copy footer.\n- **Bright Cyan** (\\`{colors.accent-link-bright}\\` — #47c2ff): Used very sparingly inside docs widget links.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): Pure white page floor.\n- **Canvas Soft** (\\`{colors.canvas-soft}\\` — #fafafa): Subtle alternating band.\n- **Surface Card** (\\`{colors.surface-card}\\` — #ffffff): Pure white card.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #f0f0f3): Badges, ecosystem tiles, secondary buttons.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #171717): Dark feature cards, code blocks, IDE mockups, featured pricing.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1a1a1a): One step lighter inside dark cards.\n\n### Atmospheric Backdrop\n- **Sky Light** (\\`{colors.gradient-sky-light}\\` — #cfe7ff) + **Sky Mid** (\\`{colors.gradient-sky-mid}\\` — #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #f0f0f3): Default 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #f5f5f7): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #dcdee0): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #171717): Display, body emphasis.\n- **Body** (\\`{colors.body}\\` — #60646c): Default running-text — slightly cool gray.\n- **Body Strong** (\\`{colors.body-strong}\\` — #171717): Same as ink.\n- **Muted** (\\`{colors.muted}\\` — #999999): Sub-titles.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #cccccc): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on black CTA.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on dark cards.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #b0b4ba): Muted off-white on dark.\n\n### Semantic\n- **Warning** (\\`{colors.accent-warning}\\` — #ab6400): Warning text inside docs callouts.\n- **Preview** (\\`{colors.accent-preview}\\` — #8145b5): \"Preview\" tag color.\n- **Success** (\\`{colors.semantic-success}\\` — #16a34a): Confirmation.\n- **Error** (\\`{colors.semantic-error}\\` — #eb8e90): Validation errors.\n\n## Typography\n\n### Font Family\n**Inter** is the single sans family across every text role. **JetBrains Mono** carries every code surface. Fallback: \\`-apple-system, system-ui, sans-serif\\`.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 48px | 600 | 1.1 | -1.44px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 36px | 600 | 1.15 | -1.08px | Section heads |\n| \\`{typography.display-md}\\` | 28px | 600 | 1.2 | -0.84px | Sub-section heads |\n| \\`{typography.display-sm}\\` | 22px | 600 | 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 | List labels |\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, badges |\n| \\`{typography.code}\\` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |\n| \\`{typography.button}\\` | 14px | 500 | 1.0 | 0 | CTA labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu |\n\n### Principles\n- **Display weight stays at 600** — confident but not bombastic. Inter at 600 reads cleaner than 700.\n- **Negative letter-spacing on display** — -0.5px to -1.92px tracking.\n- **JetBrains Mono on every code surface.**\n\n### Note on Font Substitutes\nInter and JetBrains Mono are both freely available — the system uses them directly.\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:** 96px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.\n- Ecosystem tile grid: 8-up at desktop.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#ffffff) | Body bands, footer |\n| Card | \\`{colors.surface-card}\\` (#ffffff) | Content cards |\n| Hairline border | 1px \\`{colors.hairline}\\` | Card outlines |\n| Soft drop | \\`0 4px 12px rgba(0, 0, 0, 0.04)\\` | Hovered cards (single shadow tier) |\n| Atmospheric gradient | Sky-blue radial wash | Hero backdrop only |\n| Dark inversion | \\`{colors.surface-dark}\\` (#171717) | Dark feature cards, code blocks, featured pricing |\n\n### Decorative Depth\n- **Sky-blue gradient backdrop** in the hero only — atmospheric depth without claiming to be a brand color.\n- **Device mockup composite** as page chrome — MacBook + iPhone showing real Expo dev surfaces.\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, ecosystem tiles |\n| \\`{rounded.lg}\\` | 12px | Feature cards, code blocks, pricing tiers |\n| \\`{rounded.xl}\\` | 16px | Device mockup cards |\n| \\`{rounded.xxl}\\` | 24px | Larger atmospheric cards (rare) |\n| \\`{rounded.pill}\\` | 9999px | Badges only |\n| \\`{rounded.full}\\` | 9999px | Avatar plates (rare) |\n\nCompact developer-ergonomic radii — 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.\n\n### Buttons\n\n**\\`button-primary\\`** — Pure black pill. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 500), padding 10px × 18px, height 40px, rounded \\`{rounded.md}\\` (8px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-secondary\\`** — White card with 1px hairline-strong border. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`button-tertiary-text\\`** — Inline blue text link. Background transparent, text \\`{colors.text-link}\\`.\n\n### Hero & Device Mockup\n\n**\\`hero-band\\`** — Background \\`{colors.canvas}\\` with a soft sky-blue gradient wash behind the centered headline. Display headline in \\`{typography.display-mega}\\` (64px / 600 / -1.92px), subhead in \\`{typography.body-md}\\`, single primary CTA, then below — the device mockup composite.\n\n**\\`device-mockup-card\\`** — A layered MacBook + iPhone composite showing real Expo dev surfaces. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.\n\n### Cards\n\n**\\`feature-card\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.lg}\\`, padding 24px, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`feature-card-dark\\`** — Dark variant. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n**\\`workflow-step-card\\`** — Step in the \"Get your app on every device\" workflow row. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 20px. Layout: 32px square \\`{component.workflow-step-icon}\\` + step number + label + body.\n\n**\\`workflow-step-icon\\`** — Square plate. Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.md}\\`, 32px size.\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 24px.\n\n### Code & IDE\n\n**\\`code-block\\`** — Inline code block. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\` in \\`{typography.code}\\` (JetBrains Mono 13px), rounded \\`{rounded.lg}\\`, padding 20px. White text on dark.\n\n**\\`ide-mockup-card\\`** — Stylized IDE mockup. Background \\`{colors.surface-dark}\\`, rounded \\`{rounded.lg}\\`. Multi-pane editor + terminal preview.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Standard pricing tier. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding 32px, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`pricing-tier-featured\\`** — Featured tier. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n### Ecosystem\n\n**\\`ecosystem-tile\\`** — Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background \\`{colors.surface-card}\\`, rounded \\`{rounded.md}\\`, 64px size, 1px \\`{colors.hairline}\\` border.\n\n### Forms & Tags\n\n**\\`text-input\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px, 1px \\`{colors.hairline-strong}\\` border. Focus thickens border to 2px ink.\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band\\`** — Pre-footer band. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single black pill CTA. 96px padding.\n\n**\\`footer-light\\`** — Closing white footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (black) for primary CTAs.\n- Use \\`{colors.text-link}\\` (blue) for inline body links only — never on CTAs or buttons.\n- Set every CTA at \\`{rounded.md}\\` (8px) — developer dialect.\n- Use Inter at weight 600 for display, 400 for body.\n- Render every code surface in JetBrains Mono.\n- Pair the hero with the device-mockup composite — it's the page chrome.\n\n### Don't\n- Don't introduce a saturated brand action color. Black is the only CTA fill.\n- Don't use blue (\\`{colors.text-link}\\`) on a CTA. Inline links only.\n- Don't drop display below weight 600 or above 700.\n- Don't use full pills on CTAs — pills are for badges only.\n- Don't replicate the sky-blue gradient backdrop outside the hero.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA 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 64→32px; device mockup → single iPhone screen; feature grid 1-up; nav hamburger. |\n| Tablet | 640–1024px | Hero h1 48px; device mockup compresses; feature grid 2-up. |\n| Desktop | 1024–1280px | Full hero h1 64px; full MacBook + iPhone composite; feature grid 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height — at WCAG AA, padded for AAA.\n- Search input 44px — at AAA.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.\n- Feature grid: 3-up → 2-up → 1-up.\n- Ecosystem tile grid: 8-up → 4-up → 3-up → 2-up.\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}\\` (12px).\n3. Variants live as separate entries.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.\n7. Black stays the only CTA color; text-link blue stays inline-only.\n\n## Known Gaps\n\n- Inter and JetBrains Mono are freely available — no licensing concerns.\n- Animation timings (device mockup parallax, hero entrance) out of scope.\n- In-app surfaces (EAS dashboard interactive, Expo Go simulator) only partially captured via marketing mockups.\n- Form validation states beyond focus not visible on captured surfaces.\n`;\n"],"mappings":";AACO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/expo.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const expoBrief = `---\nversion: alpha\nname: Expo\ndescription: A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (\\`#171717\\`) carries body and display alike. The single brand voltage is **pure black** (\\`#000000\\`) for primary CTAs — minimal and editorial-feeling, paired with a small blue text-link accent (\\`#0d74ce\\`) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces — over the gradient sky wash.\n\ncolors:\n  primary: \"#000000\"\n  primary-active: \"#1a1a1a\"\n  text-link: \"#0d74ce\"\n  text-link-secondary: \"#476cff\"\n  ink: \"#171717\"\n  body: \"#60646c\"\n  body-strong: \"#171717\"\n  muted: \"#999999\"\n  muted-soft: \"#cccccc\"\n  hairline: \"#f0f0f3\"\n  hairline-soft: \"#f5f5f7\"\n  hairline-strong: \"#dcdee0\"\n  canvas: \"#ffffff\"\n  canvas-soft: \"#fafafa\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#f0f0f3\"\n  surface-dark: \"#171717\"\n  surface-dark-elevated: \"#1a1a1a\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#b0b4ba\"\n  gradient-sky-light: \"#cfe7ff\"\n  gradient-sky-mid: \"#a8c8e8\"\n  accent-warning: \"#ab6400\"\n  accent-preview: \"#8145b5\"\n  accent-link-bright: \"#47c2ff\"\n  semantic-error: \"#eb8e90\"\n  semantic-success: \"#16a34a\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Inter', -apple-system, system-ui, sans-serif\"\n    fontSize: 64px\n    fontWeight: 600\n    lineHeight: 1.05\n    letterSpacing: -1.92px\n  display-xl:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 48px\n    fontWeight: 600\n    lineHeight: 1.1\n    letterSpacing: -1.44px\n  display-lg:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 36px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -1.08px\n  display-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: -0.84px\n  display-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 22px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: -0.5px\n  title-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'Inter', 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: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.0\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  none: 0px\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  xxl: 24px\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:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\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.text-link}\"\n    typography: \"{typography.button}\"\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  device-mockup-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 0\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  feature-card-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  workflow-step-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  workflow-step-icon:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.md}\"\n    size: 32px\n  code-block:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  ide-mockup-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.lg}\"\n    padding: 0\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\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.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  ecosystem-tile:\n    backgroundColor: \"{colors.surface-card}\"\n    rounded: \"{rounded.md}\"\n    size: 64px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\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-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---\n\n## Overview\n\nExpo's marketing site reads like a quietly-confident React-Native developer platform. The base canvas is **pure white** (\\`{colors.canvas}\\` — #ffffff) with a soft **sky-blue gradient atmospheric wash** behind the hero band. Near-black ink \\`{colors.ink}\\` (#171717) carries body and display alike. The single brand voltage is **pure black** (\\`{colors.primary}\\` — #000000) for primary CTAs — minimal and editorial-feeling. A small blue text-link accent (\\`{colors.text-link}\\` — #0d74ce) is reserved for inline body links, never as a CTA.\n\nType runs **Inter** as the single sans family at modest weights (display 600, body 400). JetBrains Mono carries every code surface. No custom typeface — the brand trusts Inter's editorial neutrality.\n\nThe brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces (Expo Studio, EAS Build dashboard, the Expo Go simulator) — over a sky-blue gradient atmospheric wash. The composite is the page's chrome instead of an illustration.\n\n**Key Characteristics:**\n- Pure white canvas with sky-blue gradient atmospheric backdrop in hero only.\n- Single primary CTA: pure black pill at \\`{rounded.md}\\` (8px) — compact developer-tool dialect.\n- Text-link blue (\\`{colors.text-link}\\`) for inline links only — never on a CTA.\n- Inter as the single sans family — no custom display typeface.\n- JetBrains Mono on every code surface.\n- Device-mockup hero with real Expo product surfaces is the brand chrome.\n- Hairline + soft drop depth; no atmospheric brand decoration outside the hero.\n- 96px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Black** (\\`{colors.primary}\\` — #000000): Primary CTA fill. Used scarcely.\n- **Black Active** (\\`{colors.primary-active}\\` — #1a1a1a): Press state.\n- **Text Link Blue** (\\`{colors.text-link}\\` — #0d74ce): Inline body links inside long-form copy. Scoped narrowly — never on CTAs.\n- **Legal Link Blue** (\\`{colors.text-link-secondary}\\` — #476cff): Inline links inside legal copy footer.\n- **Bright Cyan** (\\`{colors.accent-link-bright}\\` — #47c2ff): Used very sparingly inside docs widget links.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): Pure white page floor.\n- **Canvas Soft** (\\`{colors.canvas-soft}\\` — #fafafa): Subtle alternating band.\n- **Surface Card** (\\`{colors.surface-card}\\` — #ffffff): Pure white card.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #f0f0f3): Badges, ecosystem tiles, secondary buttons.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #171717): Dark feature cards, code blocks, IDE mockups, featured pricing.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1a1a1a): One step lighter inside dark cards.\n\n### Atmospheric Backdrop\n- **Sky Light** (\\`{colors.gradient-sky-light}\\` — #cfe7ff) + **Sky Mid** (\\`{colors.gradient-sky-mid}\\` — #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #f0f0f3): Default 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #f5f5f7): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #dcdee0): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #171717): Display, body emphasis.\n- **Body** (\\`{colors.body}\\` — #60646c): Default running-text — slightly cool gray.\n- **Body Strong** (\\`{colors.body-strong}\\` — #171717): Same as ink.\n- **Muted** (\\`{colors.muted}\\` — #999999): Sub-titles.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #cccccc): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on black CTA.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on dark cards.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #b0b4ba): Muted off-white on dark.\n\n### Semantic\n- **Warning** (\\`{colors.accent-warning}\\` — #ab6400): Warning text inside docs callouts.\n- **Preview** (\\`{colors.accent-preview}\\` — #8145b5): \"Preview\" tag color.\n- **Success** (\\`{colors.semantic-success}\\` — #16a34a): Confirmation.\n- **Error** (\\`{colors.semantic-error}\\` — #eb8e90): Validation errors.\n\n## Typography\n\n### Font Family\n**Inter** is the single sans family across every text role. **JetBrains Mono** carries every code surface. Fallback: \\`-apple-system, system-ui, sans-serif\\`.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 48px | 600 | 1.1 | -1.44px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 36px | 600 | 1.15 | -1.08px | Section heads |\n| \\`{typography.display-md}\\` | 28px | 600 | 1.2 | -0.84px | Sub-section heads |\n| \\`{typography.display-sm}\\` | 22px | 600 | 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 | List labels |\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, badges |\n| \\`{typography.code}\\` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |\n| \\`{typography.button}\\` | 14px | 500 | 1.0 | 0 | CTA labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu |\n\n### Principles\n- **Display weight stays at 600** — confident but not bombastic. Inter at 600 reads cleaner than 700.\n- **Negative letter-spacing on display** — -0.5px to -1.92px tracking.\n- **JetBrains Mono on every code surface.**\n\n### Note on Font Substitutes\nInter and JetBrains Mono are both freely available — the system uses them directly.\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:** 96px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.\n- Ecosystem tile grid: 8-up at desktop.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#ffffff) | Body bands, footer |\n| Card | \\`{colors.surface-card}\\` (#ffffff) | Content cards |\n| Hairline border | 1px \\`{colors.hairline}\\` | Card outlines |\n| Soft drop | \\`0 4px 12px rgba(0, 0, 0, 0.04)\\` | Hovered cards (single shadow tier) |\n| Atmospheric gradient | Sky-blue radial wash | Hero backdrop only |\n| Dark inversion | \\`{colors.surface-dark}\\` (#171717) | Dark feature cards, code blocks, featured pricing |\n\n### Decorative Depth\n- **Sky-blue gradient backdrop** in the hero only — atmospheric depth without claiming to be a brand color.\n- **Device mockup composite** as page chrome — MacBook + iPhone showing real Expo dev surfaces.\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, ecosystem tiles |\n| \\`{rounded.lg}\\` | 12px | Feature cards, code blocks, pricing tiers |\n| \\`{rounded.xl}\\` | 16px | Device mockup cards |\n| \\`{rounded.xxl}\\` | 24px | Larger atmospheric cards (rare) |\n| \\`{rounded.pill}\\` | 9999px | Badges only |\n| \\`{rounded.full}\\` | 9999px | Avatar plates (rare) |\n\nCompact developer-ergonomic radii — 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.\n\n### Buttons\n\n**\\`button-primary\\`** — Pure black pill. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 500), padding 10px × 18px, height 40px, rounded \\`{rounded.md}\\` (8px).\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-secondary\\`** — White card with 1px hairline-strong border. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`button-tertiary-text\\`** — Inline blue text link. Background transparent, text \\`{colors.text-link}\\`.\n\n### Hero & Device Mockup\n\n**\\`hero-band\\`** — Background \\`{colors.canvas}\\` with a soft sky-blue gradient wash behind the centered headline. Display headline in \\`{typography.display-mega}\\` (64px / 600 / -1.92px), subhead in \\`{typography.body-md}\\`, single primary CTA, then below — the device mockup composite.\n\n**\\`device-mockup-card\\`** — A layered MacBook + iPhone composite showing real Expo dev surfaces. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.\n\n### Cards\n\n**\\`feature-card\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, type \\`{typography.title-md}\\`, rounded \\`{rounded.lg}\\`, padding 24px, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`feature-card-dark\\`** — Dark variant. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n**\\`workflow-step-card\\`** — Step in the \"Get your app on every device\" workflow row. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 20px. Layout: 32px square \\`{component.workflow-step-icon}\\` + step number + label + body.\n\n**\\`workflow-step-icon\\`** — Square plate. Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.md}\\`, 32px size.\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.lg}\\`, padding 24px.\n\n### Code & IDE\n\n**\\`code-block\\`** — Inline code block. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\` in \\`{typography.code}\\` (JetBrains Mono 13px), rounded \\`{rounded.lg}\\`, padding 20px. White text on dark.\n\n**\\`ide-mockup-card\\`** — Stylized IDE mockup. Background \\`{colors.surface-dark}\\`, rounded \\`{rounded.lg}\\`. Multi-pane editor + terminal preview.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Standard pricing tier. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding 32px, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`pricing-tier-featured\\`** — Featured tier. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n### Ecosystem\n\n**\\`ecosystem-tile\\`** — Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background \\`{colors.surface-card}\\`, rounded \\`{rounded.md}\\`, 64px size, 1px \\`{colors.hairline}\\` border.\n\n### Forms & Tags\n\n**\\`text-input\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px, 1px \\`{colors.hairline-strong}\\` border. Focus thickens border to 2px ink.\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band\\`** — Pre-footer band. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single black pill CTA. 96px padding.\n\n**\\`footer-light\\`** — Closing white footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (black) for primary CTAs.\n- Use \\`{colors.text-link}\\` (blue) for inline body links only — never on CTAs or buttons.\n- Set every CTA at \\`{rounded.md}\\` (8px) — developer dialect.\n- Use Inter at weight 600 for display, 400 for body.\n- Render every code surface in JetBrains Mono.\n- Pair the hero with the device-mockup composite — it's the page chrome.\n\n### Don't\n- Don't introduce a saturated brand action color. Black is the only CTA fill.\n- Don't use blue (\\`{colors.text-link}\\`) on a CTA. Inline links only.\n- Don't drop display below weight 600 or above 700.\n- Don't use full pills on CTAs — pills are for badges only.\n- Don't replicate the sky-blue gradient backdrop outside the hero.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA 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 64→32px; device mockup → single iPhone screen; feature grid 1-up; nav hamburger. |\n| Tablet | 640–1024px | Hero h1 48px; device mockup compresses; feature grid 2-up. |\n| Desktop | 1024–1280px | Full hero h1 64px; full MacBook + iPhone composite; feature grid 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height — at WCAG AA, padded for AAA.\n- Search input 44px — at AAA.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.\n- Feature grid: 3-up → 2-up → 1-up.\n- Ecosystem tile grid: 8-up → 4-up → 3-up → 2-up.\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}\\` (12px).\n3. Variants live as separate entries.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.\n7. Black stays the only CTA color; text-link blue stays inline-only.\n\n## Known Gaps\n\n- Inter and JetBrains Mono are freely available — no licensing concerns.\n- Animation timings (device mockup parallax, hero entrance) out of scope.\n- In-app surfaces (EAS dashboard interactive, Expo Go simulator) only partially captured via marketing mockups.\n- Form validation states beyond focus not visible on captured surfaces.\n`;\n"],"mappings":";AACO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}