@hex-core/themes 0.1.0 → 0.2.0

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

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

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

@@ -0,0 +1,3 @@
+declare 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 \u2014 soft pastel atmospheric gradient orbs (mint \u2192 peach \u2192 lavender \u2192 sky) drift through the page as the only \"color\" moments. Display runs Waldenburg Light at weight 300 \u2014 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 \u2014 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 \u2014 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}` \u2014 #292524): The primary action color \u2014 warm near-black pill. Used scarcely.\n- **Ink Primary Active** (`{colors.primary-active}` \u2014 #0c0a09): Press state.\n\n### Surface\n- **Canvas** (`{colors.canvas}` \u2014 #f5f5f5): Off-white page floor.\n- **Canvas Soft** (`{colors.canvas-soft}` \u2014 #fafafa): Lighter band for subtle alternating sections.\n- **Canvas Deep** (`{colors.canvas-deep}` \u2014 #0c0a09): Same as ink \u2014 used for the rare dark-mode hero (Agents page).\n- **Surface Card** (`{colors.surface-card}` \u2014 #ffffff): Pure white card.\n- **Surface Strong** (`{colors.surface-strong}` \u2014 #f0efed): Badges, voice-icon plates.\n- **Surface Dark** (`{colors.surface-dark}` \u2014 #0c0a09): Dark hero/CTA band canvas.\n- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` \u2014 #1c1917): Cards on dark canvas.\n\n### Hairlines\n- **Hairline** (`{colors.hairline}` \u2014 #e7e5e4): Default 1px divider.\n- **Hairline Soft** (`{colors.hairline-soft}` \u2014 #f0efed): Lighter divider.\n- **Hairline Strong** (`{colors.hairline-strong}` \u2014 #d6d3d1): Stronger panel outline.\n\n### Text\n- **Ink** (`{colors.ink}` \u2014 #0c0a09): Display, primary text.\n- **Body** (`{colors.body}` \u2014 #4e4e4e): Default running-text.\n- **Body Strong** (`{colors.body-strong}` \u2014 #292524): Same as primary \u2014 emphasis.\n- **Muted** (`{colors.muted}` \u2014 #777169): Sub-titles.\n- **Muted Soft** (`{colors.muted-soft}` \u2014 #a8a29e): Disabled text.\n- **On Primary** (`{colors.on-primary}` \u2014 #ffffff): White text on ink pill.\n- **On Dark** (`{colors.on-dark}` \u2014 #ffffff): White text on dark hero.\n- **On Dark Soft** (`{colors.on-dark-soft}` \u2014 #a8a29e): Muted off-white on dark.\n\n### Atmospheric Gradient Stops (signature)\n- **Gradient Mint** (`{colors.gradient-mint}` \u2014 #a7e5d3): Mint green orb.\n- **Gradient Peach** (`{colors.gradient-peach}` \u2014 #f4c5a8): Peach orb.\n- **Gradient Lavender** (`{colors.gradient-lavender}` \u2014 #c8b8e0): Lavender orb.\n- **Gradient Sky** (`{colors.gradient-sky}` \u2014 #a8c8e8): Sky-blue orb.\n- **Gradient Rose** (`{colors.gradient-rose}` \u2014 #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}` \u2014 #16a34a): Confirmation.\n- **Error** (`{colors.semantic-error}` \u2014 #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 \u2014 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 \u2014 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 \u2014 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 \u2014 it's the same family ElevenLabs uses.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** `{spacing.xxs}` 4px \u00B7 `{spacing.xs}` 8px \u00B7 `{spacing.sm}` 12px \u00B7 `{spacing.base}` 16px \u00B7 `{spacing.md}` 20px \u00B7 `{spacing.lg}` 24px \u00B7 `{spacing.xl}` 32px \u00B7 `{spacing.xxl}` 48px \u00B7 `{spacing.section}` 96px.\n- **Section padding:** 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 \u2014 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 \u2014 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 \u2014 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`** \u2014 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`** \u2014 Near-black ink pill. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (15px / 500), padding 10px \u00D7 20px, height 40px, rounded `{rounded.pill}`.\n\n**`button-primary-active`** \u2014 Press state. Background `{colors.primary-active}`.\n\n**`button-outline`** \u2014 Transparent pill with 1px ink border. Background transparent, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.\n\n**`button-tertiary-text`** \u2014 Inline ink text link.\n\n### Hero & Atmospheric\n\n**`hero-band`** \u2014 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`** \u2014 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`** \u2014 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`** \u2014 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`** \u2014 Stacked product preview cards. Background `{colors.surface-card}`, rounded `{rounded.xl}`, no padding (children fill the card edge-to-edge).\n\n**`testimonial-card`** \u2014 Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.xl}`, padding 32px.\n\n### Voice Library\n\n**`voice-row`** \u2014 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`** \u2014 Background `{colors.surface-strong}`, rounded `{rounded.full}`, 32px diameter. Holds initials or voice glyph.\n\n### Pricing\n\n**`pricing-tier-card`** \u2014 Background `{colors.surface-card}`, rounded `{rounded.xl}`, padding 32px, 1px hairline border.\n\n**`pricing-tier-featured`** \u2014 Featured tier inverts. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.\n\n### Forms & Tags\n\n**`text-input`** \u2014 Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.md}` (8px), padding 12px \u00D7 16px, height 44px, 1px `{colors.hairline-strong}` border. On focus, border thickens to 2px ink.\n\n**`badge-pill`** \u2014 Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px \u00D7 10px.\n\n### CTA / Footer\n\n**`cta-band`** \u2014 Pre-footer. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single ink pill CTA. 96px padding.\n\n**`footer`** \u2014 Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64\u00D748px padding.\n\n**`footer-link`** \u2014 Background transparent, text `{colors.body}`, type `{typography.body-sm}`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve `{colors.primary}` (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 \u2014 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 \u2014 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 \u2014 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\u219232px; feature cards 1-up; nav hamburger; gradient orbs shrink. |\n| Tablet | 640\u20131024px | Hero h1 48px; feature cards 2-up. |\n| Desktop | 1024\u20131280px | 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 \u2014 at WCAG AA, padded for AAA.\n- Voice icon circles 32px \u2014 padded row creates effective 48px tap zone.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Feature grid: 3-up \u2192 2-up \u2192 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 \u2014 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";
+
+export { elevenlabsBrief };

package/dist/presets/_briefs/elevenlabs.js

@@ -0,0 +1,510 @@
+// src/presets/_briefs/elevenlabs.ts
+var elevenlabsBrief = `---
+version: alpha
+name: ElevenLabs
+description: 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 \u2014 soft pastel atmospheric gradient orbs (mint \u2192 peach \u2192 lavender \u2192 sky) drift through the page as the only "color" moments. Display runs Waldenburg Light at weight 300 \u2014 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.
+
+colors:
+  primary: "#292524"
+  primary-active: "#0c0a09"
+  ink: "#0c0a09"
+  body: "#4e4e4e"
+  body-strong: "#292524"
+  muted: "#777169"
+  muted-soft: "#a8a29e"
+  hairline: "#e7e5e4"
+  hairline-soft: "#f0efed"
+  hairline-strong: "#d6d3d1"
+  canvas: "#f5f5f5"
+  canvas-soft: "#fafafa"
+  canvas-deep: "#0c0a09"
+  surface-card: "#ffffff"
+  surface-strong: "#f0efed"
+  surface-dark: "#0c0a09"
+  surface-dark-elevated: "#1c1917"
+  on-primary: "#ffffff"
+  on-dark: "#ffffff"
+  on-dark-soft: "#a8a29e"
+  gradient-mint: "#a7e5d3"
+  gradient-peach: "#f4c5a8"
+  gradient-lavender: "#c8b8e0"
+  gradient-sky: "#a8c8e8"
+  gradient-rose: "#e8b8c4"
+  semantic-error: "#dc2626"
+  semantic-success: "#16a34a"
+
+typography:
+  display-mega:
+    fontFamily: "'Waldenburg', 'Times New Roman', serif"
+    fontSize: 64px
+    fontWeight: 300
+    lineHeight: 1.05
+    letterSpacing: -1.92px
+  display-xl:
+    fontFamily: "'Waldenburg', serif"
+    fontSize: 48px
+    fontWeight: 300
+    lineHeight: 1.08
+    letterSpacing: -0.96px
+  display-lg:
+    fontFamily: "'Waldenburg', serif"
+    fontSize: 36px
+    fontWeight: 300
+    lineHeight: 1.17
+    letterSpacing: -0.36px
+  display-md:
+    fontFamily: "'Waldenburg', serif"
+    fontSize: 32px
+    fontWeight: 300
+    lineHeight: 1.13
+    letterSpacing: -0.32px
+  display-sm:
+    fontFamily: "'Waldenburg', serif"
+    fontSize: 24px
+    fontWeight: 300
+    lineHeight: 1.2
+    letterSpacing: 0
+  title-md:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 20px
+    fontWeight: 500
+    lineHeight: 1.35
+    letterSpacing: 0
+  title-sm:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 18px
+    fontWeight: 500
+    lineHeight: 1.44
+    letterSpacing: 0.18px
+  body-md:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0.16px
+  body-strong:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.5
+    letterSpacing: 0.16px
+  body-sm:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 15px
+    fontWeight: 400
+    lineHeight: 1.47
+    letterSpacing: 0.15px
+  caption:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  caption-uppercase:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 12px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0.96px
+    textTransform: uppercase
+  button:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 15px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  nav-link:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 15px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+
+rounded:
+  none: 0px
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  xxl: 24px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  base: 16px
+  md: 20px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+  section: 96px
+
+components:
+  top-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.nav-link}"
+    height: 64px
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.pill}"
+    padding: 10px 20px
+    height: 40px
+  button-primary-active:
+    backgroundColor: "{colors.primary-active}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.pill}"
+  button-outline:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.pill}"
+    padding: 9px 19px
+    height: 40px
+  button-tertiary-text:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+  hero-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-mega}"
+    padding: 96px
+  gradient-orb-card:
+    backgroundColor: "{colors.canvas-soft}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xxl}"
+    padding: 32px
+  feature-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.xl}"
+    padding: 24px
+  product-card-stack:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xl}"
+    padding: 0
+  voice-row:
+    backgroundColor: transparent
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    padding: 12px 0
+  voice-icon-circular:
+    backgroundColor: "{colors.surface-strong}"
+    rounded: "{rounded.full}"
+    size: 32px
+  pricing-tier-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  pricing-tier-featured:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  text-input:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 16px
+    height: 44px
+  badge-pill:
+    backgroundColor: "{colors.surface-strong}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption-uppercase}"
+    rounded: "{rounded.pill}"
+    padding: 4px 10px
+  cta-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-lg}"
+    padding: 96px
+  testimonial-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  audio-waveform-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 24px
+  footer:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+    padding: 64px 48px
+  footer-link:
+    backgroundColor: transparent
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+---
+
+## Overview
+
+ElevenLabs 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.
+
+Type 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 \u2014 never bold, never heavy.
+
+CTAs 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.
+
+**Key Characteristics:**
+- Off-white canvas, warm near-black ink. No saturated CTA color.
+- Single primary action: ink pill at \`{rounded.pill}\`. Atmospheric gradients carry visual brand voltage.
+- Display runs Waldenburg Light at weight 300 \u2014 editorial magazine voice.
+- Body runs Inter at 400 with subtle letter-spacing (+0.15-0.18px).
+- Pastel gradient orbs (5 tokens: mint, peach, lavender, sky, rose) used as atmospheric brand decoration only.
+- Soft pill geometry (\`{rounded.pill}\` for CTAs, \`{rounded.xl}\` for cards).
+- 96px section rhythm.
+
+## Colors
+
+### Brand & Accent
+- **Ink Primary** (\`{colors.primary}\` \u2014 #292524): The primary action color \u2014 warm near-black pill. Used scarcely.
+- **Ink Primary Active** (\`{colors.primary-active}\` \u2014 #0c0a09): Press state.
+
+### Surface
+- **Canvas** (\`{colors.canvas}\` \u2014 #f5f5f5): Off-white page floor.
+- **Canvas Soft** (\`{colors.canvas-soft}\` \u2014 #fafafa): Lighter band for subtle alternating sections.
+- **Canvas Deep** (\`{colors.canvas-deep}\` \u2014 #0c0a09): Same as ink \u2014 used for the rare dark-mode hero (Agents page).
+- **Surface Card** (\`{colors.surface-card}\` \u2014 #ffffff): Pure white card.
+- **Surface Strong** (\`{colors.surface-strong}\` \u2014 #f0efed): Badges, voice-icon plates.
+- **Surface Dark** (\`{colors.surface-dark}\` \u2014 #0c0a09): Dark hero/CTA band canvas.
+- **Surface Dark Elevated** (\`{colors.surface-dark-elevated}\` \u2014 #1c1917): Cards on dark canvas.
+
+### Hairlines
+- **Hairline** (\`{colors.hairline}\` \u2014 #e7e5e4): Default 1px divider.
+- **Hairline Soft** (\`{colors.hairline-soft}\` \u2014 #f0efed): Lighter divider.
+- **Hairline Strong** (\`{colors.hairline-strong}\` \u2014 #d6d3d1): Stronger panel outline.
+
+### Text
+- **Ink** (\`{colors.ink}\` \u2014 #0c0a09): Display, primary text.
+- **Body** (\`{colors.body}\` \u2014 #4e4e4e): Default running-text.
+- **Body Strong** (\`{colors.body-strong}\` \u2014 #292524): Same as primary \u2014 emphasis.
+- **Muted** (\`{colors.muted}\` \u2014 #777169): Sub-titles.
+- **Muted Soft** (\`{colors.muted-soft}\` \u2014 #a8a29e): Disabled text.
+- **On Primary** (\`{colors.on-primary}\` \u2014 #ffffff): White text on ink pill.
+- **On Dark** (\`{colors.on-dark}\` \u2014 #ffffff): White text on dark hero.
+- **On Dark Soft** (\`{colors.on-dark-soft}\` \u2014 #a8a29e): Muted off-white on dark.
+
+### Atmospheric Gradient Stops (signature)
+- **Gradient Mint** (\`{colors.gradient-mint}\` \u2014 #a7e5d3): Mint green orb.
+- **Gradient Peach** (\`{colors.gradient-peach}\` \u2014 #f4c5a8): Peach orb.
+- **Gradient Lavender** (\`{colors.gradient-lavender}\` \u2014 #c8b8e0): Lavender orb.
+- **Gradient Sky** (\`{colors.gradient-sky}\` \u2014 #a8c8e8): Sky-blue orb.
+- **Gradient Rose** (\`{colors.gradient-rose}\` \u2014 #e8b8c4): Rose orb.
+
+These 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.
+
+### Semantic
+- **Success** (\`{colors.semantic-success}\` \u2014 #16a34a): Confirmation.
+- **Error** (\`{colors.semantic-error}\` \u2014 #dc2626): Validation errors.
+
+## Typography
+
+### Font Family
+**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.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| \`{typography.display-mega}\` | 64px | 300 | 1.05 | -1.92px | Homepage hero h1 |
+| \`{typography.display-xl}\` | 48px | 300 | 1.08 | -0.96px | Subsidiary heroes |
+| \`{typography.display-lg}\` | 36px | 300 | 1.17 | -0.36px | Section heads |
+| \`{typography.display-md}\` | 32px | 300 | 1.13 | -0.32px | Sub-section heads |
+| \`{typography.display-sm}\` | 24px | 300 | 1.2 | 0 | Card group titles |
+| \`{typography.title-md}\` | 20px | 500 | 1.35 | 0 | Component titles \u2014 Inter |
+| \`{typography.title-sm}\` | 18px | 500 | 1.44 | 0.18px | List labels |
+| \`{typography.body-md}\` | 16px | 400 | 1.5 | 0.16px | Default body \u2014 Inter |
+| \`{typography.body-strong}\` | 16px | 500 | 1.5 | 0.16px | Emphasized body |
+| \`{typography.body-sm}\` | 15px | 400 | 1.47 | 0.15px | Footer body |
+| \`{typography.caption}\` | 14px | 400 | 1.5 | 0 | Photo captions |
+| \`{typography.caption-uppercase}\` | 12px | 600 | 1.4 | 0.96px | Section labels, badges |
+| \`{typography.button}\` | 15px | 500 | 1.0 | 0 | CTA pill |
+| \`{typography.nav-link}\` | 15px | 500 | 1.4 | 0 | Top-nav menu |
+
+### Principles
+- **Display weight stays at 300.** Waldenburg Light is the editorial signature. Never bold display copy.
+- **Subtle letter-spacing on body.** Inter at +0.15-0.18px tracking \u2014 slightly looser than default Inter for a more editorial feel.
+- **Negative letter-spacing on display.** Waldenburg pulls -0.32px to -1.92px tighter on display sizes.
+
+### Note on Font Substitutes
+Waldenburg 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 \u2014 it's the same family ElevenLabs uses.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 4px.
+- **Tokens:** \`{spacing.xxs}\` 4px \xB7 \`{spacing.xs}\` 8px \xB7 \`{spacing.sm}\` 12px \xB7 \`{spacing.base}\` 16px \xB7 \`{spacing.md}\` 20px \xB7 \`{spacing.lg}\` 24px \xB7 \`{spacing.xl}\` 32px \xB7 \`{spacing.xxl}\` 48px \xB7 \`{spacing.section}\` 96px.
+- **Section padding:** 96px.
+
+### Grid & Container
+- Max content width: ~1200px.
+- Editorial body: 12-column grid.
+- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.
+- Footer: 5-column at desktop.
+
+### Whitespace Philosophy
+Generous editorial pacing \u2014 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.
+
+## Elevation & Depth
+
+The 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.
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat (canvas) | \`{colors.canvas}\` (#f5f5f5) | Body bands, footer |
+| Card | \`{colors.surface-card}\` (#ffffff) | Content cards |
+| Hairline border | 1px \`{colors.hairline}\` | Card outlines |
+| Soft drop | \`0 4px 16px rgba(0, 0, 0, 0.04)\` | Hovered cards (single shadow tier) |
+| Gradient orb | Radial gradient with one of \`{colors.gradient-*}\` | Atmospheric depth \u2014 never a card surface |
+
+### Decorative Depth
+- **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 \u2014 they are pure atmosphere.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| \`{rounded.none}\` | 0px | Reserved |
+| \`{rounded.xs}\` | 4px | Inline tags |
+| \`{rounded.sm}\` | 6px | Compact rows |
+| \`{rounded.md}\` | 8px | Form inputs |
+| \`{rounded.lg}\` | 12px | Compact cards |
+| \`{rounded.xl}\` | 16px | Feature cards, pricing tiers |
+| \`{rounded.xxl}\` | 24px | Gradient orb cards (extra-soft) |
+| \`{rounded.pill}\` | 9999px | All CTA buttons, badges |
+| \`{rounded.full}\` | 9999px | Voice icon circles, avatars |
+
+## Components
+
+### Top Navigation
+
+**\`top-nav\`** \u2014 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.
+
+### Buttons
+
+**\`button-primary\`** \u2014 Near-black ink pill. Background \`{colors.primary}\`, text \`{colors.on-primary}\`, type \`{typography.button}\` (15px / 500), padding 10px \xD7 20px, height 40px, rounded \`{rounded.pill}\`.
+
+**\`button-primary-active\`** \u2014 Press state. Background \`{colors.primary-active}\`.
+
+**\`button-outline\`** \u2014 Transparent pill with 1px ink border. Background transparent, text \`{colors.ink}\`, 1px \`{colors.hairline-strong}\` border.
+
+**\`button-tertiary-text\`** \u2014 Inline ink text link.
+
+### Hero & Atmospheric
+
+**\`hero-band\`** \u2014 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.
+
+**\`gradient-orb-card\`** \u2014 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\`).
+
+**\`audio-waveform-card\`** \u2014 A waveform visualization card. Background \`{colors.surface-card}\`, rounded \`{rounded.xl}\`, padding 24px. Holds a play button + waveform glyph + voice metadata.
+
+### Cards
+
+**\`feature-card\`** \u2014 2-up or 3-up grids. Background \`{colors.surface-card}\`, text \`{colors.ink}\`, rounded \`{rounded.xl}\`, padding 24px, 1px hairline border.
+
+**\`product-card-stack\`** \u2014 Stacked product preview cards. Background \`{colors.surface-card}\`, rounded \`{rounded.xl}\`, no padding (children fill the card edge-to-edge).
+
+**\`testimonial-card\`** \u2014 Quote card. Background \`{colors.surface-card}\`, text \`{colors.body}\`, rounded \`{rounded.xl}\`, padding 32px.
+
+### Voice Library
+
+**\`voice-row\`** \u2014 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.
+
+**\`voice-icon-circular\`** \u2014 Background \`{colors.surface-strong}\`, rounded \`{rounded.full}\`, 32px diameter. Holds initials or voice glyph.
+
+### Pricing
+
+**\`pricing-tier-card\`** \u2014 Background \`{colors.surface-card}\`, rounded \`{rounded.xl}\`, padding 32px, 1px hairline border.
+
+**\`pricing-tier-featured\`** \u2014 Featured tier inverts. Background \`{colors.surface-dark}\`, text \`{colors.on-dark}\`. Same shape, dark inversion.
+
+### Forms & Tags
+
+**\`text-input\`** \u2014 Background \`{colors.surface-card}\`, text \`{colors.ink}\`, rounded \`{rounded.md}\` (8px), padding 12px \xD7 16px, height 44px, 1px \`{colors.hairline-strong}\` border. On focus, border thickens to 2px ink.
+
+**\`badge-pill\`** \u2014 Background \`{colors.surface-strong}\`, text \`{colors.ink}\`, type \`{typography.caption-uppercase}\`, rounded \`{rounded.pill}\`, padding 4px \xD7 10px.
+
+### CTA / Footer
+
+**\`cta-band\`** \u2014 Pre-footer. Background \`{colors.canvas}\`, centered display headline in \`{typography.display-lg}\`, single ink pill CTA. 96px padding.
+
+**\`footer\`** \u2014 Closing footer. Background \`{colors.canvas}\`, text \`{colors.body}\`. 5-column link list. 64\xD748px padding.
+
+**\`footer-link\`** \u2014 Background transparent, text \`{colors.body}\`, type \`{typography.body-sm}\`.
+
+## Do's and Don'ts
+
+### Do
+- Reserve \`{colors.primary}\` (ink pill) for primary CTAs.
+- Use Waldenburg Light at weight 300 for every display headline. Never bold.
+- Use Inter at +0.15-0.18px tracking for body \u2014 the editorial dialect.
+- Use atmospheric gradient orbs (mint/peach/lavender/sky/rose) as decoration only.
+- Use the pill shape for every CTA and badge.
+
+### Don't
+- Don't introduce a saturated brand action color. Ink pill is the only CTA color.
+- Don't bold display copy. Display sits at weight 300 \u2014 bolding shifts the brand voice from editorial to consumer-marketing.
+- Don't use gradient orbs as button fills, text colors, or component backgrounds. They are pure atmosphere.
+- Don't use sharp \`{rounded.none}\` (0px) on CTAs. Pill geometry is the brand button.
+- Don't drop body Inter to weight 300 to match Waldenburg \u2014 body stays at 400/500 for legibility.
+- 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.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 640px | Hero h1 64\u219232px; feature cards 1-up; nav hamburger; gradient orbs shrink. |
+| Tablet | 640\u20131024px | Hero h1 48px; feature cards 2-up. |
+| Desktop | 1024\u20131280px | Full hero h1 64px; feature cards 3-up. |
+| Wide | > 1280px | Content caps at 1200px. |
+
+### Touch Targets
+- Primary pill at 40px height \u2014 at WCAG AA, padded for AAA.
+- Voice icon circles 32px \u2014 padded row creates effective 48px tap zone.
+
+### Collapsing Strategy
+- Top nav switches to hamburger below 768px.
+- Feature grid: 3-up \u2192 2-up \u2192 1-up.
+- Gradient orbs reduce diameter at every breakpoint but never disappear.
+
+## Iteration Guide
+
+1. Focus on a single component at a time.
+2. CTAs default to \`{rounded.pill}\`. Cards use \`{rounded.xl}\` (16px).
+3. Variants live as separate entries.
+4. Use \`{token.refs}\` everywhere \u2014 never inline hex.
+5. Hover state never documented.
+6. Waldenburg 300 for display, Inter 400/500 for body.
+7. Gradient orbs scoped to atmospheric decoration.
+
+## Known Gaps
+
+- Waldenburg is a licensed typeface; EB Garamond / GT Sectra are documented substitutes.
+- Animation timings (orb drift, waveform pulse, hero entrance) out of scope.
+- In-product surfaces (voice library editor, agent playground) only partially captured via marketing mockups.
+- Form validation states beyond focus not visible on captured surfaces.
+`;
+export {
+  elevenlabsBrief
+};
+//# sourceMappingURL=elevenlabs.js.map