glyph-ai 0.1.0

package/bundled/server/data/design-systems/elevenlabs-design-system.md

@@ -0,0 +1,669 @@
+# ElevenLabs.io Design System & Section Boilerplate
+
+---
+
+## Design System
+
+### Colors
+
+| Role | Value | RGB | Notes |
+|------|-------|-----|-------|
+| **Primary** | `#000000` | `rgb(0, 0, 0)` | Black. Used for text, primary buttons, strong CTAs |
+| **Secondary** | `#FDFCFC` | `rgb(253, 252, 252)` | Warm off-white. Page background |
+| **Tertiary (Accent)** | `#193CB8` | `rgb(25, 60, 184)` | Deep blue. Used sparingly for interactive accents |
+| **Neutral 100** | `#FFFFFF` | `rgb(255, 255, 255)` | Pure white. Card surfaces, secondary buttons |
+| **Neutral 200** | `#F5F3F1` | `rgb(245, 243, 241)` | Warm light gray. Feature card backgrounds |
+| **Neutral 300** | `#E7E5E4` | `rgb(231, 229, 228)` | Border/divider gray |
+| **Neutral 400** | `#D6D3D1` | `rgb(214, 211, 209)` | Disabled/muted elements |
+| **Neutral 500** | `#A6A09B` | `rgb(166, 160, 155)` | Placeholder text |
+| **Neutral 600** | `#79716B` | `rgb(121, 113, 107)` | Section labels, secondary text |
+| **Neutral 700** | `#57534E` | `rgb(87, 83, 78)` | Body text (muted) |
+| **Neutral 800** | `#44403B` | `rgb(68, 64, 59)` | Dark secondary text |
+| **Neutral 900** | `#0C0A09` | `rgb(12, 10, 9)` | Near-black, used interchangeably with primary |
+| **Accent Orange** | `#FF4704` | `rgb(255, 71, 4)` | ElevenCreative dot indicator |
+| **Accent Blue** | `#0447FF` | `rgb(4, 71, 255)` | ElevenAgents dot indicator |
+| **Divider** | `rgba(0, 0, 0, 0.05)` | 5% black | Section separator borders |
+| **Overlay** | `rgba(0, 0, 0, 0.3)` | 30% black | Overlays on images/media |
+| **Surface Blur** | `rgba(245, 242, 239, 0.8)` | 80% warm white | Frosted glass surfaces |
+
+### Typography
+
+#### Font Families
+
+| Role | Font | Fallback | Usage |
+|------|------|----------|-------|
+| **Headline** | `Waldenburg` | `"Waldenburg Fallback"` | H1, H2 (large section headings) |
+| **Headline Alt** | `WaldenburgFH` | `"WaldenburgFH Fallback"` | Alternate heading weight |
+| **Body / UI** | `Inter` | `"Inter Fallback"` | All body text, labels, buttons, nav |
+| **Code** | `Geist Mono` | `"Geist Mono Fallback"` | Code snippets, API examples |
+| **Code Alt** | `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas` | `"Liberation Mono", "Courier New", monospace` | Fallback monospace |
+
+#### Type Scale
+
+| Element | Font | Size | Weight | Line Height | Letter Spacing | Color |
+|---------|------|------|--------|-------------|----------------|-------|
+| **H1** | Waldenburg | 48px | 300 (Light) | 52px | -0.96px | `#000` |
+| **H2 (large)** | Waldenburg | 36px | 300 (Light) | 42px | normal | `#000` |
+| **H2 (small)** | Inter | 16px | 400 | 24px | 0.16px | `#000` |
+| **H3** | Inter | 16px | 500 (Medium) | 24px | normal | `#000` |
+| **H4** | Inter | 14px | 500 | 20px | normal | `#000` |
+| **Body** | Inter | 16px | 400 | 24px | normal | `#000` |
+| **Body Large** | Inter | 18px | 400 | 28.8px | normal | `#000` |
+| **Section Label** | Inter | 15px | 500 | normal | 0.15px | `#79716B` |
+| **Label / Small** | Inter | 14px | 400 | 20px | normal | `#000` |
+| **Caption** | Inter | 13px | 400 | normal | normal | `#000` |
+| **Tiny** | Inter | 12px | 400 | normal | normal | `#79716B` |
+| **Code** | Geist Mono | 13px | 400 | 24px | normal | `#000` |
+
+### Buttons
+
+#### Primary Button (CTA)
+
+```
+Background:    #000000 (black)
+Text color:    #FFFFFF (white)
+Font:          Inter, 16px, weight 400
+Padding:       0 20px (large) / 0 16px (medium) / 0 12px (small)
+Border radius: 9999px (full pill)
+Border:        none
+Height:        ~40px (inferred from padding + font)
+Hover:         subtle opacity/scale transition
+```
+
+#### Secondary Button (Ghost/Outline)
+
+```
+Background:    #FFFFFF (white)
+Text color:    #000000 (black)
+Font:          Inter, 16px, weight 400
+Padding:       0 20px (large) / 0 16px (medium) / 0 12px (small)
+Border radius: 9999px (full pill)
+Border:        1px solid rgba(0,0,0,0.05) or none (shadow-based)
+Height:        ~40px
+Hover:         subtle background darken
+```
+
+#### Nav Buttons (Small)
+
+```
+Background:    transparent / #FFFFFF (Log in) / #000 (Sign up)
+Font:          Inter, 14px, weight 400
+Padding:       0 12px
+Border radius: 9999px
+```
+
+#### Icon Button (Play, Navigation arrows)
+
+```
+Background:    #000000 or transparent
+Border radius: 9999px
+Size:          ~36px circle
+Icon color:    white or black depending on variant
+```
+
+### Input Fields
+
+```
+Font:          Inter, 16-18px
+Background:    transparent (inherits card bg)
+Border:        none visible (borderless design)
+Border radius: 0px (integrated into parent card)
+Padding:       contextual
+Color:         #000000
+Placeholder:   #A6A09B
+```
+
+Note: ElevenLabs uses a borderless, embedded input style within cards. Text areas blend into the card surface without distinct borders. Dropdowns use custom `<button>` + `<combobox>` with pill-shaped triggers.
+
+### Spacing System
+
+#### Section Spacing
+
+```
+Section padding:     72px 48px (vertical / horizontal)
+Section margin:      0 40px (horizontal page margin)
+Between sections:    32px - 64px gap
+Content max-width:   1120px (centered within 1200px viewport)
+```
+
+#### Component Spacing
+
+```
+Gap (tight):     4px
+Gap (small):     6px - 8px
+Gap (medium):    10px - 16px
+Gap (large):     24px - 32px
+Gap (section):   48px - 64px
+Card grid gap:   16px - 28px
+```
+
+### Border Radius
+
+| Size | Value | Usage |
+|------|-------|-------|
+| **Pill** | `9999px` | Buttons, tabs, badges |
+| **Card XL** | `24px` | Large feature cards |
+| **Card L** | `20px` | Feature cards |
+| **Card M** | `16px` | Blog cards, article cards |
+| **Element** | `12px` | Inner card elements |
+| **Small** | `8px` | Code blocks, small elements |
+| **Tiny** | `4px` | Inline code, tags |
+
+### Shadows & Effects
+
+```
+Box shadows:     Minimal. Cards rely on background color contrast (white on off-white) rather than shadows.
+Dividers:        1px solid rgba(0,0,0,0.05) between major sections
+Backdrop filter:  Used on frosted glass surfaces: rgba(245,242,239,0.8) with blur
+```
+
+---
+
+## Section Boilerplates
+
+### Navigation
+
+**Structure:**
+```
+<header> (relative, z-50, height: 64px)
+  <nav> (static, height: 36px, transparent bg)
+    <ul> (flex, gap: 28px)
+      <li> Logo (link to /)
+      <li> Nav items container
+        <ul> (flex, inline)
+          <li><button> ElevenCreative  -- navigates to /creative on click
+          <li><button> ElevenAgents    -- navigates to /agents on click
+          <li><button> ElevenAPI       -- navigates to /api on click
+          <li><button> Resources       -- dropdown or navigates
+          <li><a> Enterprise           -- link to /enterprise
+          <li><a> Pricing              -- link to /pricing
+    <div> Auth buttons
+      <a> "Log in"    -- secondary pill, white bg, 14px
+      <a> "Sign up"   -- primary pill, black bg, 14px
+```
+
+**Interactions:**
+- Nav items (ElevenCreative, ElevenAgents, ElevenAPI) are `<button>` elements that navigate to their respective subpages on click (not hover dropdowns on the homepage)
+- Each subpage has its own secondary nav bar beneath the main nav with sub-navigation (Platform, Models, Docs, Customers, Pricing)
+- On scroll, the nav transforms into a sticky bar with "Contact sales" (secondary) and "Sign up" (primary) buttons replacing "Log in"/"Sign up" pair
+- Font: Inter, 14px, weight 400 for nav items
+- Nav items have no visible underline or indicator in default state
+
+**Scrolled State:**
+```
+Position:        sticky (appears on scroll)
+Background:      white or transparent
+Buttons change:  "Contact sales" (secondary) + "Sign up" (primary) replace login/signup
+```
+
+### Hero
+
+**Structure:**
+```
+<section> (padding: 72px 48px, gap: 32px 64px, margin: 0 40px)
+  <div> Left column
+    <h1> "Bringing technology to life"
+      -- Waldenburg, 48px, weight 300, line-height 52px, letter-spacing -0.96px
+      -- "technology to life" has separate styling wrapper (same style, but enables word-level animation)
+    <div> CTA buttons (flex, gap)
+      <a> "Sign up"        -- primary pill, black, 16px, padding 0 20px
+      <a> "Contact sales"  -- secondary pill, white, 16px, padding 0 20px
+  <div> Right column
+    <p> Supporting copy
+      -- Inter, 16px, weight 400, line-height 24px
+      -- "Powering the best enterprises, creators, and developers..."
+
+  <div> Interactive demo widget
+    <div> Tab bar (pill tabs)
+      <tab> "ElevenCreative" [selected] -- with orange dot indicator
+      <tab> "ElevenAgents" -- with blue dot indicator
+      -- Tabs: 18px Inter, pill-shaped (9999px), padding ~18px horizontal
+    <tabpanel>
+      <div> Sub-tab bar
+        <tab> "Text to Speech" | "Music" | "Speech to Text" | "Voice Cloning"
+      <div> Demo content (two-column within card)
+        <div> Left: Voice selector (radio group, scrollable list)
+          -- Each voice: avatar + name + descriptor
+          -- Selected state: blue checkmark icon
+          -- "Explore 10,000+ voices" link + prev/next arrows
+        <div> Right: Text input area
+          -- Label: "Enter your own text" (muted)
+          -- Textarea with pre-filled demo text
+          -- Bottom bar: Language selector (pill button + dropdown) + Play button (black pill)
+      <a> "Sign up" -- primary pill at bottom edge
+```
+
+**Key Details:**
+- Layout: Two-column top (heading left, copy right), full-width interactive demo below
+- Demo widget has white background, rounded corners, sits on the off-white page
+- Tab indicators use colored dots (orange for Creative, blue for Agents)
+- Voice list is a scrollable radio group with avatar thumbnails
+
+### Social Proof (Logo Ticker)
+
+**Structure:**
+```
+<section>
+  <div> Header row (flex, space-between)
+    <h2> "Trusted by leading developers and enterprises"
+      -- Inter, 16px, weight 400 (styled as small h2)
+    <a> "Read all stories" -- link to /customer-stories
+
+  <ul> Logo ticker (flex, gap: 28px, horizontal scroll/marquee)
+    <li> x18 logos
+      <a> Brand name (link to case study)
+        -- Logos: Twilio, Disney, KPN, TVS, Telus Digital, Cisco,
+           Epic Games, Nvidia, Revolut, Meta, Bertelsmann, Ukraine,
+           Deliveroo, Chess.com, Deutsche Telekom, Meesho, Harvey, Salesforce
+```
+
+**Key Details:**
+- Horizontal scrolling logo strip (marquee-style animation)
+- Each logo links to its respective case study/blog post
+- Logos rendered as text in brand styling (grayscale)
+- Simple left-right continuous scroll animation
+
+### Features (Product Platforms)
+
+**Structure:**
+```
+<section> Platform overview
+  <h2> "Two platforms built on the same research foundation"
+    -- Waldenburg, 36px, weight 300, line-height 42px
+
+  <div> Two-column card layout (flex, gap)
+    <div> Card 1 - ElevenCreative
+      <h3> "ElevenCreative" -- Inter, 16px, weight 500
+      <p> "Generate ultra-realistic speech, videos, music, and sound effects."
+      <img> Product screenshot
+    <div> Card 2 - ElevenAgents
+      <h3> "ElevenAgents"
+      <p> "Configure, deploy and monitor conversational agents."
+      <img> Product screenshot
+```
+
+### Features (ElevenCreative Detail)
+
+**Structure:**
+```
+<section> (bg: page background)
+  <div> Section header
+    <p> "ElevenCreative" -- section label, 15px, weight 500, color #79716B
+    <div> Heading row (flex, space-between)
+      <div>
+        <h2> "Create, edit and localize in one AI platform"
+          -- Waldenburg, 36px, weight 300
+        <a> "Learn more" -- link with arrow icon, 16px
+      <p> Supporting copy -- 16px Inter
+
+  <div> Feature card grid (6 cards, responsive grid)
+    -- First 2 cards: large (span 2 columns), contain interactive demos
+    -- Remaining 4 cards: equal size, icon + heading + description
+
+    Card structure (each):
+      <div> (bg: #F5F3F1, border-radius: 20px, overflow: hidden)
+        <div> Media/demo area (top portion)
+          -- Interactive widget, screenshot, or illustration
+        <h3> Feature name -- Inter, 16px, weight 500
+          <a> Optional link with arrow icon
+        <p> Description -- Inter, 16px, weight 400
+
+    Cards:
+    1. "All-in-one AI editor" (large, contains Studio editor preview)
+    2. "Ultra-realistic speech" (large, contains TTS demo widget)
+    3. "Music" (small, icon + description)
+    4. "SFX" (small, icon + description)
+    5. "Voices" (small, icon + description)
+    6. "Image & Video" (small, icon + description)
+
+  <div> Customer story tabs
+    <div> Tab bar
+      <tab> Brand logos (NVIDIA, Mozart AI, Duolingo) as image tabs
+    <tabpanel>
+      <p> Brand name (bold)
+      <p> Use case description
+    <a> "Get started" -- secondary pill button, white bg
+```
+
+**Key Details:**
+- Feature cards use `#F5F3F1` warm gray background, `20px` border-radius
+- Large cards (first 2) span double width and contain interactive demos
+- Small cards have an icon at top-left, heading, and short description
+- H3 headings with links include a small arrow icon (diagonal arrow ↗)
+- Cards have no visible border or shadow, differentiated by background color alone
+
+### Features (ElevenAgents Detail)
+
+**Structure:**
+```
+<section> (same pattern as ElevenCreative)
+  <div> Section header
+    <p> "ElevenAgents" -- section label
+    <div>
+      <h2> "Deploy agents that talk, type, and take action"
+      <a> "Learn more"
+    <p> Supporting copy
+
+  <div> Feature card grid (5 cards)
+    1. "Omnichannel agents" (large, contains chat mockup)
+       -- Chat bubble UI showing customer support conversation
+       -- Includes action card "Refund completed" with checkmark
+    2. "Analytics" (large, contains chart/graph mockup)
+       -- Success rate chart with line graph
+    3. "Testing" (small)
+    4. "Guardrails" (small)
+    5. "Workflows" (small)
+
+  <div> Customer story tabs (same pattern)
+    -- Deliveroo, Meesho, Cars24
+    <a> "Get started"
+```
+
+### Features (ElevenAPI Detail)
+
+**Structure:**
+```
+<section>
+  <div> Section header
+    <p> "ElevenAPI" -- section label
+    <div>
+      <h2> "Or build anything with a powerful host of APIs"
+      <a> "Explore docs" -- link to /docs/overview/intro
+
+  <div> API showcase (3 stacked cards, alternating layout)
+
+    Card 1: Text to Speech API
+      <div> Left column
+        <h3> "Text to Speech API"
+        <p> Description
+        <div> Sub-features (3 items, flex row)
+          <div> each: <h4> Model name + <p> spec
+            -- "Eleven Flash" / "75ms latency..."
+            -- "Eleven Multilingual" / "Best lifelike..."
+            -- "Eleven v3" / "Most expressive..."
+      <div> Right column
+        <pre><code> TypeScript code example
+          -- Geist Mono, 13px, line-height 24px
+          -- Dark text on neutral background
+
+    Card 2: Speech to Text API
+      <div> Left: heading, description, model spec
+      <div> Right: product screenshot
+
+    Card 3: Music API
+      <div> Left: heading, description, model spec
+      <div> Right: TypeScript code example
+```
+
+### Showcase (Case Studies)
+
+**Structure:**
+```
+<section>
+  <h2> "Showcasing the global impact of AI audio research"
+    -- Waldenburg, 36px
+
+  <div> Tab bar
+    <tab> "ElevenCreative" [selected] -- pill tab
+    <tab> "ElevenAgents" -- pill tab
+
+  <tabpanel>
+    <div> Bento grid layout (mixed card sizes)
+      -- 2 columns top row, each with 2 stacked story links
+      -- 1 column bottom row with 2 stories side by side
+
+      Each story card:
+        <a> (link to blog post)
+          <div> Image/gradient background
+          <p> Story headline (white text overlaid)
+          -- Cards have rounded corners, overflow hidden
+```
+
+### How It Works (Research Timeline)
+
+**Structure:**
+```
+<section>
+  <div> Header
+    <h2> "Research that redefines human technology interaction"
+    <p> Vision statement paragraph
+
+  <div> Timeline carousel
+    <button> Previous (arrow)
+    <button> Next (arrow)
+
+    <div> Timeline track (horizontal scroll)
+      <tablist> "ElevenLabs history"
+        8 events as tabs, horizontal dot markers on a line:
+        1. "Eleven Multilingual v2" - Aug 2023
+        2. "Eleven Turbo v2" - Nov 2023
+        3. "Eleven Flash v2.5" - Dec 2024
+        4. "Scribe" - Feb 2025
+        5. "Eleven v3" - Jun 2025
+        6. "Eleven Music" - Aug 2025
+        7. "Scribe v2 Realtime" - Nov 2025
+        8. "Scribe v2" - Jan 2026
+
+      Each event card:
+        <h3> Model name -- Inter, 16px, weight 500
+        <p> Description
+        <p> Date
+
+  <div> Research articles (2-column)
+    <article>
+      <img> Thumbnail
+      <time> Date
+      <a><p> Article title
+    <a> "Learn more" -- link with arrow to /about
+```
+
+### Features (Safety)
+
+**Structure:**
+```
+<section>
+  <div> Header
+    <h2> "Safety, built in" -- Waldenburg, 36px
+    <a> "Learn more" -- link to /safety
+
+  <ul> 3-column card list
+    <li> Card 1
+      <img> "Moderation" icon
+      <h3> "Moderation"
+      <p> "We actively monitor content generated with our technology."
+    <li> Card 2
+      <img> "Accountability" icon
+      <h3> "Accountability"
+      <p> "We believe misuse must have consequences."
+    <li> Card 3
+      <img> "Provenance" icon
+      <h3> "Provenance"
+      <p> "We believe that you should know if audio is AI-generated."
+```
+
+**Key Details:**
+- Simple 3-column grid of cards
+- Each card has an icon image, heading, and one-sentence description
+- Cards use the same warm gray background (`#F5F3F1`)
+
+### Blog (Latest Updates)
+
+**Structure:**
+```
+<section>
+  <div> Header row (flex, space-between)
+    <h2> "Latest updates" -- Waldenburg, 36px
+    <a> "All posts" -- link to /blog
+
+  <ul> 3-column article grid
+    <li> x3 articles
+      <article> (bg: white, border-radius: 16px, overflow: hidden)
+        <img> Cover image (object-fit: cover, aspect-ratio: 1000/894)
+        <p>
+          <a> Article title -- Inter, 16px, linked to blog post
+
+  Articles shown:
+  1. "Introducing Flows in ElevenCreative"
+  2. "Introducing ElevenLabs for Government"
+  3. "Introducing Expressive Mode for ElevenAgents"
+```
+
+**Key Details:**
+- Article cards: white background, 16px border-radius
+- Cover images fill the top portion with no border-radius on image itself (card handles clipping)
+- Title below image, simple text link
+- 3-column grid layout
+
+### CTA (Pre-Footer)
+
+**Structure:**
+```
+<section> (border-top: 1px solid rgba(0,0,0,0.05))
+  <div> (padding: 72px 48px, flex, align-items: flex-end, gap: 32px 64px)
+    <p> "The most realistic voice AI platform"
+      -- Waldenburg, 32px, weight 300
+    <div> Button group (flex)
+      <a> "Talk to sales"       -- secondary pill, white bg, 16px, padding 0 20px
+      <a> "Create an AI agent"  -- primary pill, black bg, 16px, padding 0 20px
+```
+
+**Key Details:**
+- Separated from content above by a 1px divider (`rgba(0,0,0,0.05)`)
+- Horizontal layout: tagline left, buttons right (flex, align-items: flex-end)
+- Uses the same dual-CTA pattern (secondary + primary) as the hero
+
+### Footer
+
+**Structure:**
+```
+<footer-section>
+  <div> Top row (flex, space-between)
+    <div> Left
+      <a> ElevenLabs logo (link to /)
+      <button> Language selector ("English" + dropdown)
+    <div> Right -- (empty, alignment spacer)
+
+  <ul> 6-column link grid
+    Column 1: "ElevenCreative" (heading link to /creative)
+      - Text to Speech, Speech to Text, Voice Changer, Text to Sound Effects,
+        Voice Cloning, Voice Isolator, AI Music Generator, Studio,
+        Voice Design, AI Voice Generator
+
+    Column 2: "ElevenAgents" (heading link to /agents)
+      - Voice Agents, Conversational AI, Integrations, Telecommunications,
+        Financial Services, Healthcare, Technology, Retail & E-commerce,
+        Customer Support
+
+    Column 3: "ElevenAPI" (heading link to /api)
+      - API Reference, Agents API, Dubbing API, Text to Speech API,
+        Speech to Text API, Sound Effects API, Music API, API Key
+
+    Column 4: "Resources" (plain text heading)
+      - Blog, Iconic Marketplace, Impact Program, Help Center, Webinars,
+        Docs, Enterprise, Trust Center, India, Cookie Settings (button)
+
+    Column 5: "Socials" (plain text heading)
+      - X, LinkedIn, GitHub, YouTube, Discord, TikTok, Instagram,
+        Facebook, Reddit
+
+    Column 6: "Company" (plain text heading)
+      - About, Careers, Safety, Brand & Press Kit, EU Digital Services Act,
+        ElevenLabs Summit, Terms, Privacy, Modern Slavery Policy,
+        CCPA Notice, EU-US DPF Policy
+```
+
+**Key Details:**
+- Column headings: some are links (ElevenCreative, ElevenAgents, ElevenAPI), others are plain text (Resources, Socials, Company)
+- Links: Inter, 16px, weight 400, color `#000`, no underline
+- No background change from page (transparent, inherits `#FDFCFC`)
+- Language selector in top-left with globe icon and chevron dropdown
+
+### FAQ (from /creative subpage)
+
+**Structure:**
+```
+<section>
+  <h2> "Frequently asked questions" -- Waldenburg, 36px
+
+  <div> Accordion list
+    <div> x12 FAQ items
+      <button> Question trigger (flex, space-between)
+        <h3> Question text -- Inter, 16px, weight 500
+        <img> Chevron/plus icon (rotates on expand)
+      <div> Answer panel (collapsible)
+        <p> Answer text -- Inter, 16px, weight 400
+
+  Questions expand/collapse on click.
+  First item expanded by default.
+  Chevron icon rotates 45deg on expand.
+```
+
+---
+
+## Common Patterns
+
+### Section Header Pattern
+
+Most sections follow this consistent header structure:
+
+```
+<p> Section label ("ElevenCreative" / "ElevenAgents" / "ElevenAPI")
+  -- Inter, 15px, weight 500, color #79716B, letter-spacing 0.15px
+
+<div> Heading row (flex, space-between or stacked)
+  <h2> Section heading
+    -- Waldenburg, 36px, weight 300, line-height 42px
+  <a> Action link ("Learn more" / "Explore docs")
+    -- Inter, 16px, with arrow icon
+
+<p> Supporting description
+  -- Inter, 16px, weight 400, line-height 24px
+```
+
+### Card Pattern
+
+```
+Background:     #F5F3F1 (warm gray)
+Border radius:  20px
+Border:         none
+Shadow:         none
+Overflow:       hidden
+Padding:        0 (content handles internal spacing)
+
+Internal structure:
+  <div> Media area (image/demo, no border radius - card clips)
+  <h3> Title -- Inter, 16px, weight 500
+  <p> Description -- Inter, 16px, weight 400
+```
+
+### Tab Pattern
+
+```
+<tablist> (flex, pill-shaped container)
+  <tab> (border-radius: 9999px, padding: 0 17-19px, font: Inter 18px)
+    Selected:   filled background (contextual)
+    Unselected: transparent background
+    With optional dot indicator (orange/blue colored circle before text)
+```
+
+### Dual CTA Pattern
+
+Used in Hero, CTA section, and section CTAs:
+
+```
+<div> (flex, gap)
+  <a> Primary action    -- black pill button
+  <a> Secondary action  -- white pill button (outline/ghost)
+```
+
+### Customer Story Tab Pattern
+
+```
+<div> (flex, space-between)
+  <tablist>
+    <tab> x3 brand logos (image-based tabs)
+  <tabpanel>
+    <p> Brand name (bold or linked with arrow)
+    <p> Use case one-liner
+<a> "Get started" -- secondary pill button
+```

package/bundled/server/data/design-systems/generating_design.md

@@ -0,0 +1,9 @@
+Identify the sections in user’ existing website
+
+Pull the boilerplate for each section from a different brand. If a brand was mentioned in prompt, only reference it for hero section’s boilerplate. 
+
+If a product preview image is detected, prompt user to upload a screenshot of their product. 
+
+Pull the design system from mentioned brand. If an aesthetic was mentioned instead of brand, pull the design system of the brand that most aligns with the prompt. Otherwise if the prompt doesn’t contain a website reference or descriptor of desired aesthetic, default to the “modern” aesthetic, referencing ElevenLabs. 
+
+If the utilized font isn’t available: Use Inter to sub san-serif fonts, and EB Garamond to sub serif fonts