elevenlabs___style_reference:
  info: "> Parchment command terminal — warm paper surfaces beneath monochrome controls, with ambient color appearing only as sound made visible."

  theme: "light"

  info: "ElevenLabs uses a warm-white paper surface system — off-white canvas (#fdfcfc) layered with parchment cards (#f5f3f1, radius 20-24px) that feel tactile without being decorative. The typographic personality splits sharply: Waldenburg weight 300 at negative tracking for all display headlines (anti-convention for a tech brand — authority through restraint, not mass), and Inter for everything functional. The only color in an otherwise achromatic system is used in SVG decoration (vivid violet #0447ff and vivid orange #ff4704), appearing as ambient glowing orbs in voice-category visuals — color as sound made visible, not as UI state. All interactive affordances are monochrome: black pill buttons, white pill buttons with hairline borders, ghost text links — the brand refuses to use color as a call to action."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Parchment White | `#fdfcfc` | `--color-parchment-white` | Page canvas — the dominant background behind all sections and nav |"
    info: "| Warm Sand | `#f5f3f1` | `--color-warm-sand` | Card surfaces, feature tiles, section backgrounds — one step warmer and darker than canvas |"
    info: "| Ash Border | `#e5e5e5` | `--color-ash-border` | All hairline borders on buttons, inputs, cards, nav items, dividers |"
    info: "| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, headline text, filled pill button background, icon fills |"
    info: "| Driftwood | `#777169` | `--color-driftwood` | Secondary body text, muted link text, icon strokes |"
    info: "| Fog | `#a59f97` | `--color-fog` | Tertiary helper text, light icon strokes |"
    info: "| Silver Mist | `#b1b0b0` | `--color-silver-mist` | Subtle background washes, mid-level surface dividers |"
    info: "| Void Violet | `#0447ff` | `--color-void-violet` | Decorative SVG orb fill and stroke in voice-category visuals — color as ambient sound, never as UI state |"
    info: "| Ember Orange | `#ff4704` | `--color-ember-orange` | Decorative SVG orb fill and stroke in voice-category visuals — paired with Void Violet in gradient orbs |"

  tokens___typography:

    waldenburg___display_and_section_headlines_exclusively__weight_300_is_anti_convention_for_an_ai_tech_brand___these_headlines_whisper_authority_rather_than_shout_it__tight_negative_tracking__0_02em_compresses_letterforms_for_density_at_large_scale_____font_waldenburg:
      - "**Substitute:** DM Sans 300 or Figtree 300"
      - "**Weights:** 300"
      - "**Sizes:** 32px, 36px, 48px"
      - "**Line height:** 1.08–1.17"
      - "**Letter spacing:** -0.02em"
      - "**Role:** Display and section headlines exclusively. Weight 300 is anti-convention for an AI tech brand — these headlines whisper authority rather than shout it. Tight negative tracking (-0.02em) compresses letterforms for density at large scale."

    waldenburgfh___logo_wordmark_and_brand_identifier_only__wide_positive_tracking_0_05em_at_small_size_creates_a_tight_but_spaced_badge_feel_distinct_from_all_body_text_____font_waldenburgfh:
      - "**Substitute:** Space Grotesk 700"
      - "**Weights:** 700"
      - "**Sizes:** 14px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** 0.05em"
      - "**Role:** Logo wordmark and brand identifier only. Wide positive tracking (0.05em) at small size creates a tight-but-spaced badge feel distinct from all body text."

    inter___all_functional_ui_text__nav__buttons__body_copy__labels__inputs__captions__footer__weight_400_for_body_and_500_for_emphasis_nav_labels__subtle_tracking_at_0_01em_adds_microscopic_breath_to_dense_functional_text_____font_inter:
      - "**Substitute:** Inter (Google Fonts)"
      - "**Weights:** 400, 500"
      - "**Sizes:** 10px, 12px, 13px, 14px, 15px, 16px, 18px, 20px"
      - "**Line height:** 1.0–2.06"
      - "**Letter spacing:** 0.01em"
      - "**OpenType features:** `normal`"
      - "**Role:** All functional UI text: nav, buttons, body copy, labels, inputs, captions, footer. Weight 400 for body and 500 for emphasis/nav labels. Subtle tracking at 0.01em adds microscopic breath to dense functional text."

    geist_mono___code_snippets__api_references__technical_inline_labels__looser_line_height_1_69_distinguishes_it_from_body_text_rhythm_____font_geist_mono:
      - "**Substitute:** JetBrains Mono 400 or IBM Plex Mono 400"
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.69"
      - "**Role:** Code snippets, API references, technical inline labels. Looser line-height (1.69) distinguishes it from body text rhythm."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.4 | 0.1px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.16px | `--text-body` |"
      info: "| subheading | 18px | 1.44 | 0.18px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.4 | 0.2px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.17 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 36px | 1.13 | -0.72px | `--text-heading-lg` |"
      info: "| display | 48px | 1.08 | -0.96px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tabs | 20px |"
      info: "| tags | 14px |"
      info: "| cards | 20px |"
      info: "| pills | 9999px |"
      info: "| badges | 18px |"
      info: "| inputs | 4px |"
      info: "| buttons | 9999px |"
      info: "| tooltips | 8px |"
      info: "| cardLarge | 24px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0...` | `--shadow-subtle-5` |"
      info: "| subtle-6 | `rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0...` | `--shadow-subtle-6` |"
      info: "| subtle-7 | `rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0...` | `--shadow-subtle-7` |"
      info: "| subtle-8 | `rgba(255, 255, 255, 0.6) 0px 0px 0px 1px inset` | `--shadow-subtle-8` |"
      info: "| subtle-9 | `rgb(235, 232, 228) 0px 0px 0px 0.5px inset` | `--shadow-subtle-9` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 16-32px"
      - "**Element gap:** 8px"

  components:

    black_filled_pill_button:
      role: "Primary action — Sign up, Create agent, Learn more"

      info: "Background #000000, text #ffffff, border-radius 9999px, padding 0px 16px, border 1px solid #e5e5e5. Inter 15px weight 500. The monochrome black-on-white contrast is the only affordance; no color signal is used."

    white_outlined_pill_button:
      role: "Secondary action — Contact sales, Log in"

      info: "Background #fdfcfc or rgba(0,0,0,0), text #000000, border-radius 9999px, padding 0px 12px, border 1px solid #e5e5e5. Box-shadow rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px 0px. Inter 15px weight 500."

    ghost_text_button:
      role: "Inline tertiary action — nav links, read-all links"

      info: "Background transparent, text #000000, border-radius 9999px, no border, no padding horizontally. Inter 15px weight 400. Hover triggers color transition. Pure text affordance with no chrome."

    rounded_tab_badge_button:
      role: "Product-switcher tabs — ElevenCreative, ElevenAgents, ElevenAPI"

      info: "Background transparent or #f5f3f1 when active, border-radius 18px, padding 8px 12px, border 1px solid #e5e5e5. Inter 14px weight 500. Active state gets white background with inset shadow rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset."

    warm_sand_feature_card:
      role: "Primary content tile — voice categories, feature descriptions"

      info: "Background #f5f3f1, border-radius 20px, box-shadow none, padding 0px 32px. No border. Sits directly on #fdfcfc canvas — surface contrast does all the separation work."

    white_elevated_card:
      role: "Dashboard screenshot tiles and floating UI previews"

      info: "Background #ffffff, border-radius 20px, padding 16px, box-shadow rgba(0,0,0,0.4) 0px 0px 1px 0px, rgba(0,0,0,0.04) 0px 1px 1px 0px, rgba(0,0,0,0.04) 0px 2px 4px 0px. The 0.4 opacity hairline shadow creates a sharp definition edge while the micro blurs add dimensionality."

    large_feature_card:
      role: "Platform section insets — platform comparison, two-column product areas"

      info: "Background #f5f3f1, border-radius 24px, box-shadow none, no padding on container. Used for full-bleed image containers within product sections."

    ambient_voice_orb:
      role: "Decorative voice-type illustration — non-interactive visual identity"

      info: "Circular shape with radial gradient blending Void Violet (#0447ff) and Ember Orange (#ff4704) — the only chromatic element in the UI. Displayed in a horizontal carousel. Functions as sound-to-color translation, not as a UI state indicator."

    text_input_field:
      role: "Search and form inputs"

      info: "Background #ffffff, border-radius 0px (flat/flush), padding 16px 20px, border 1px solid #e5e5e5, text #000000. Zero radius distinguishes inputs from pill buttons and rounded cards — inputs feel editorial/typewritten."

    logo_wordmark:
      role: "Brand identifier in top-left nav"

      info: "WaldenburgFH weight 700, 14px, letter-spacing 0.05em. Rendered in #000000. Preceded by a vertical bar glyph ('||') also in black. Small size + wide tracking creates a dense, stamp-like mark."

    trust_logo_grid:
      role: "Social proof — partner/client logos displayed in muted grayscale"

      info: "Logos rendered in #777169 or filtered to desaturated via CSS brightness(0) invert. Arranged in a 6-column grid inside a rounded-20px card on #f5f3f1 background. All logos reduced to same tonal weight — hierarchy flattened intentionally."

  do_s_and_don_ts:

    do:
      - "Use 9999px border-radius on ALL buttons, nav pills, and tags — no rectangular buttons exist in this system."
      - "Apply Waldenburg weight 300 with -0.02em letter-spacing for every headline 32px and above — never use Inter or a heavier weight for display text."
      - "Keep all interactive chrome in the #000000 / #fdfcfc / #e5e5e5 axis — color (#0447ff, #ff4704) is reserved for decorative orbs and illustration fills only."
      - "Use #f5f3f1 at 20-24px radius for primary cards; reserve #ffffff elevated cards (with hairline shadow) for product screenshots and UI previews only."
      - "Apply 0.05em letter-spacing to WaldenburgFH (logo only) and -0.02em to Waldenburg headlines; use 0.01em for all Inter body/UI text."
      - "Use surface-color contrast (#fdfcfc → #f5f3f1) as the primary elevation signal — shadows should be sub-pixel hairlines, never soft blurs."

    don_t:
      - "Never use #0447ff or #ff4704 for button backgrounds, link colors, hover states, or any interactive affordance — they appear only in decorative SVG/gradient orbs."
      - "Never use Waldenburg or WaldenburgFH for body text, labels, or buttons — Inter handles all functional text without exception."
      - "Never apply heavy shadows (blur > 4px or spread > 2px) — the shadow vocabulary tops out at 4px blur with 0.04 opacity."
      - "Never use rectangular (0px radius) buttons or fully square cards in this system — even inputs and tooltip-like elements have at least 4px radius."
      - "Never introduce color-coded states (green success, red error, blue info) as prominent UI elements — the system has no semantic color infrastructure at the UI layer."
      - "Never set Inter below 10px or above 20px for UI text — display sizes use Waldenburg, not Inter at large scale."
      - "Never place text or UI on top of the gradient orbs — they are always isolated floating shapes, not backgrounds or card surfaces."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#fdfcfc` | Page background — nearly white with a faint warm cast |"
    info: "| 2 | Card Surface | `#f5f3f1` | Feature cards, product tile backgrounds, section insets |"
    info: "| 3 | Border / Divider | `#e5e5e5` | Hairline borders on all interactive and structural elements |"
    info: "| 4 | Elevated Card | `#ffffff` | White cards that float above Warm Sand via subtle ring shadow |"

  elevation:

    - "**White Elevated Card:** `rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`"
    - "**Button / Control Ring:** `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`"
    - "**Inset Surface:** `rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset`"

  imagery:

    info: "ElevenLabs uses two distinct visual registers. Product screenshots — detailed UI captures of the ElevenCreative and ElevenAgents dashboards — are displayed at full fidelity inside white elevated cards (20px radius), cropped and contained rather than full-bleed, showing the actual product interface as explanatory content. The second register is abstract animated orbs: perfect circles filled with soft radial gradients blending violet (#0447ff) and orange (#ff4704) through pink and peach mid-tones, displayed in a horizontal carousel against the warm sand card. These orbs are the only chromatic element on the page and function as a synaesthetic map of voice types — color encodes personality and timbre, not data. No photography exists on the page. Icons are minimal outlined style at low stroke weight, monochrome (#777169 or #000000), never multicolor. The overall image density is low — text dominates, with visuals appearing in contained demo sections rather than as atmospheric backgrounds."

  layout:

    info: "Max-width approximately 1200px centered on #fdfcfc canvas. Navigation is a sticky top bar with full-width background, pill buttons right-aligned, logo left — very low height (~36px). The hero is split asymmetrically: left-aligned oversized Waldenburg headline with black pill CTA below, right-aligned body copy paragraph — not a standard centered stack. Below the hero, a rounded-20px card container houses the product switcher tabs and voice carousel, sitting as a distinct inset panel. Subsequent sections alternate between full-width flat layouts (text + product screenshot side by side at 50/50 split) and centered text blocks. The trust/logo section uses a rounded-20px card on warm sand to frame a 6-column logo grid. Section vertical rhythm is generous — approximately 80-120px between sections, creating a comfortable breathing pace despite information density. No sidebar layout exists; everything is single-column or 2-column max."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #000000"
    - "text (secondary): #777169"
    - "background (canvas): #fdfcfc"
    - "background (card): #f5f3f1"
    - "border: #e5e5e5"
    - "accent (decorative only): #0447ff, #ff4704"
    - "primary action: #000000 (filled action)"

    example_component_prompts:

    - "**Hero section**: #fdfcfc background. Left column: headline in Waldenburg weight 300, 48px, #000000, letter-spacing -0.96px, line-height 1.08. Below headline: black pill button (background #000000, text #ffffff, radius 9999px, padding 0 16px, Inter 15px weight 500) beside ghost text button (transparent bg, #000000 text, same size). Right column: body copy Inter 16px weight 400 #777169."

    - "**Warm Sand Feature Card**: background #f5f3f1, border-radius 20px, no shadow, no border, padding 0 32px. Card title Inter 16px weight 500 #000000. Body text Inter 14px weight 400 #777169."

    - "**Product Tab Switcher**: Container with 3 pill tabs, border-radius 20px overall. Active tab: background #ffffff, border-radius 18px, padding 8px 12px, inset shadow rgba(0,0,0,0.075) 0px 0px 0px 0.5px. Inactive tabs: transparent bg, same padding. Inter 14px weight 500 #000000. Outer container background #f5f3f1."

    - "**Trust Logo Section**: Rounded card background #f5f3f1, radius 20px. 6-column grid of logos all filtered to #777169 (desaturated). Section label above card: Inter 14px weight 400 #777169."

    - "**Navigation Bar**: Background #fdfcfc, height ~36px, 1px bottom border #e5e5e5. Logo: WaldenburgFH 700 14px #000000 letter-spacing 0.05em. Nav links: Inter 14px weight 400 #000000, ghost style. Right side: ghost text button 'Log in' + black pill button 'Sign up' (background #000000, #ffffff text, radius 9999px, padding 0 16px)."

  similar_brands:

    - "**Linear** — Same monochrome pill-button system with black filled primary and ghost secondary, no color used for interactive states"
    - "**Vercel** — Black-and-white achromatic UI language with near-white warm canvas, color reserved exclusively for decorative/illustration contexts"
    - "**Notion** — Custom display typeface at light weight (300) for headlines against Inter body text, warm off-white surface palette"
    - "**Resemble AI** — AI voice/audio product with gradient orb motifs as primary visual identity device and minimal interface chrome"
    - "**Perplexity** — Warm parchment-toned canvas (#fdfcfc equivalent) with exclusively monochrome UI controls and typography-first layout"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-white: #fdfcfc;
          --color-warm-sand: #f5f3f1;
          --color-ash-border: #e5e5e5;
          --color-midnight-ink: #000000;
          --color-driftwood: #777169;
          --color-fog: #a59f97;
          --color-silver-mist: #b1b0b0;
          --color-void-violet: #0447ff;
          --color-ember-orange: #ff4704;
        
          /* Typography — Font Families */
          --font-waldenburg: 'Waldenburg', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-waldenburgfh: 'WaldenburgFH', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.44;
          --tracking-subheading: 0.18px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.2px;
          --text-heading: 32px;
          --leading-heading: 1.17;
          --tracking-heading: -0.64px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -0.72px;
          --text-display: 48px;
          --leading-display: 1.08;
          --tracking-display: -0.96px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 16-32px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tabs: 20px;
          --radius-tags: 14px;
          --radius-cards: 20px;
          --radius-pills: 9999px;
          --radius-badges: 18px;
          --radius-inputs: 4px;
          --radius-buttons: 9999px;
          --radius-tooltips: 8px;
          --radius-cardlarge: 24px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset;
          --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
          --shadow-subtle-5: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 4px 0px;
          --shadow-subtle-6: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
          --shadow-subtle-7: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
          --shadow-subtle-8: rgba(255, 255, 255, 0.6) 0px 0px 0px 1px inset;
          --shadow-subtle-9: rgb(235, 232, 228) 0px 0px 0px 0.5px inset;
        
          /* Surfaces */
          --surface-canvas: #fdfcfc;
          --surface-card-surface: #f5f3f1;
          --surface-border-divider: #e5e5e5;
          --surface-elevated-card: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-white: #fdfcfc;
          --color-warm-sand: #f5f3f1;
          --color-ash-border: #e5e5e5;
          --color-midnight-ink: #000000;
          --color-driftwood: #777169;
          --color-fog: #a59f97;
          --color-silver-mist: #b1b0b0;
          --color-void-violet: #0447ff;
          --color-ember-orange: #ff4704;
        
          /* Typography */
          --font-waldenburg: 'Waldenburg', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-waldenburgfh: 'WaldenburgFH', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.44;
          --tracking-subheading: 0.18px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.2px;
          --text-heading: 32px;
          --leading-heading: 1.17;
          --tracking-heading: -0.64px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -0.72px;
          --text-display: 48px;
          --leading-display: 1.08;
          --tracking-display: -0.96px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset;
          --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
          --shadow-subtle-5: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 4px 0px;
          --shadow-subtle-6: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
          --shadow-subtle-7: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
          --shadow-subtle-8: rgba(255, 255, 255, 0.6) 0px 0px 0px 1px inset;
          --shadow-subtle-9: rgb(235, 232, 228) 0px 0px 0px 0.5px inset;
        }