tella___style_reference:
  info: "> Violet broadcast signal — the design feels like a TV network's on-air package: full-bleed chromatic fields, bold compressed display type, hard cuts between saturated and white."

  theme: "mixed"

  info: "Tella pulses with electric violet energy — a hero that washes the entire viewport in saturated purple (#5e51f8 to #251544), then cuts hard to white for feature sections. The contrast is deliberate and jarring in the best way: you go from immersive chromatic field to clinical white card grid without transition. The headline font NaN Jaune Midi Bold does the heavy lifting — a chunky, tightly-tracked display face at -0.054em letter-spacing that feels like broadcast TV titles squeezed into browser chrome. Lavender-tinted secondary text (#cfcbfd on dark, #d7d3fd on features) carries brand color even into body copy, preventing the white sections from losing brand identity. The pill-shaped dark CTA floating in a violet sea is the signature contradiction: the most important action is the darkest, most contained element on the page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Violet | `#5e51f8` | `--color-signal-violet` | Primary brand color — hero backgrounds, CTAs, interactive states, logo mark. The electric quality (vivid, high-chroma) makes every surface it touches feel charged. |"
    info: "| Deep Nebula | `linear-gradient(rgb(39, 21, 76) 0%, rgb(24, 17, 39) 100%)` | `--color-deep-nebula` | Hero section footer tone and gradient terminus. Paired with Signal Violet for the dark-to-darker hero gradient that creates depth within the purple field. |"
    info: "| Iris Mid | `#4b41c6` | `--color-iris-mid` | Button shadow underlay and hover states on the hero. Creates tactile depth on dark surfaces via box-shadow layering. |"
    info: "| Soft Amethyst | `#cfcbfd` | `--color-soft-amethyst` | Secondary headline text on dark violet backgrounds — brand color carried into typography so the hero never loses chromatic identity. |"
    info: "| Lavender Mist | `#d5a8f5` | `--color-lavender-mist` | Pill button accent variant — appears as a pastel contrast button against the violet hero. Black text on this color delivers AAA contrast with brand warmth. |"
    info: "| Powder Violet | `#d7d3fd` | `--color-powder-violet` | Feature card illustration tints and ghost typography in the white sections — keeps brand hue present without saturating light backgrounds. |"
    info: "| Periwinkle Glow | `#867dfa` | `--color-periwinkle-glow` | Icon fills and glow halos (box-shadow on interactive elements). The lighter violet relative of Signal Violet — used for SVG fills and hover glow effects. |"
    info: "| Celestial Cyan | `#99eeff` | `--color-celestial-cyan` | Decorative accent surface — appears sparingly as a cool counterpoint to the warm violet system. |"
    info: "| Ink | `#0f172a` | `--color-ink` | Primary heading text on white sections. |"
    info: "| Slate | `#475569` | `--color-slate` | Body text on white sections, secondary navigation labels. |"
    info: "| Steel | `#808a99` | `--color-steel` | Tertiary body copy, fine print, disabled states. |"
    info: "| Fog | `#94a3b8` | `--color-fog` | Icon strokes, placeholder text, muted UI elements. |"
    info: "| Ash Border | `#e5e7eb` | `--color-ash-border` | Card borders, section dividers, input borders on light surfaces. |"
    info: "| Chalk | `#f8fafc` | `--color-chalk` | Page background for feature sections. |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, nav background, text on dark hero. |"
    info: "| Carbon | `#111111` | `--color-carbon` | CTA button fill on the hero (the dark pill that contrasts with the violet field), high-contrast body text. |"
    info: "| Deep Violet Text | `#312e58` | `--color-deep-violet-text` | Body copy within violet/dark sections where pure white would be too harsh. |"
    info: "| Hero Gradient | `radial-gradient(50% 200% at 50% -100%, rgb(119, 107, 255) 0%, rgb(94, 81, 248) 100%)` | `--color-hero-gradient` | Full-bleed hero background — Signal Violet to Deep Nebula vertical gradient with radial glow at top center. |"

  tokens___typography:

    nan_jaune_midi_bold___hero_and_section_display_headlines_exclusively__the_custom_font_s_chunky_stroke_contrast_and_tight_tracking_at_display_sizes_creates_broadcast_title_energy___unmistakable_at_a_glance__nothing_inter_could_replicate__the_aggressive_negative_tracking__0_054em_at_56px_squeezes_letters_into_a_dense_typographic_block_that_reads_as_a_single_graphic_unit_____font_nan_jaune_midi_bold:
      - "**Substitute:** Cabinet Grotesk ExtraBold or Clash Display Bold"
      - "**Weights:** 700"
      - "**Sizes:** 56px, 64px, 84px"
      - "**Line height:** 1.10–1.20"
      - "**Letter spacing:** -0.054em at 56px, -0.047em at 64px, -0.036em at 84px"
      - "**OpenType features:** `normal`"
      - "**Role:** Hero and section display headlines exclusively. The custom font's chunky stroke contrast and tight tracking at display sizes creates broadcast-title energy — unmistakable at a glance, nothing Inter could replicate. The aggressive negative tracking (-0.054em at 56px) squeezes letters into a dense typographic block that reads as a single graphic unit."

    inter___all_ui_text__navigation__body_copy__subheadings__card_titles__buttons__captions__weight_700_at_24_30px_for_section_subheadings__weight_600_at_18_20px_for_card_headers__weight_500_at_14_16px_for_body_and_ui_labels__the_utilitarian_pairing_with_nan_jaune_midi_is_intentional___inter_stays_invisible_so_the_display_font_commands_full_attention_____font_inter:
      - "**Substitute:** Inter (freely available via Google Fonts)"
      - "**Weights:** 500, 600, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 28px, 30px"
      - "**Line height:** 1.00–1.95"
      - "**Letter spacing:** normal"
      - "**Role:** All UI text: navigation, body copy, subheadings, card titles, buttons, captions. Weight 700 at 24-30px for section subheadings; weight 600 at 18-20px for card headers; weight 500 at 14-16px for body and UI labels. The utilitarian pairing with NaN Jaune Midi is intentional — Inter stays invisible so the display font commands full attention."

    sans_serif___system_fallback_at_12px_for_fine_print_labels_and_browser_rendered_micro_text_____font_sans_serif:
      - "**Substitute:** System sans-serif"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** normal"
      - "**Role:** System fallback at 12px for fine-print labels and browser-rendered micro text."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 18 | — | `--text-caption` |"
      info: "| body-sm | 14px | 22 | — | `--text-body-sm` |"
      info: "| body | 16px | 25 | — | `--text-body` |"
      info: "| subheading | 18px | 27 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 29 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 36 | — | `--text-heading` |"
      info: "| heading-lg | 56px | 62 | -3.02px | `--text-heading-lg` |"
      info: "| display | 84px | 93 | -4.54px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 168 | 168px | `--spacing-168` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 12px |"
      info: "| cards | 24px |"
      info: "| images | 16px |"
      info: "| inputs | 8px |"
      info: "| buttons | 40px |"
      info: "| featureCards | 32px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.15) 0px 8px 32px 4px` | `--shadow-xl` |"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px -4px 6px 0px, rgba(0, 0, 0, 0.1) ...` | `--shadow-sm` |"
      info: "| xl-2 | `rgba(238, 217, 253, 0.25) 0px 16px 64px 4px, rgba(0, 0, 0...` | `--shadow-xl-2` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.16) 0px 2px 4px 0px, rgba(0, 0, 0, 0.16) ...` | `--shadow-sm-2` |"
      info: "| xl-3 | `rgba(0, 0, 0, 0.15) 0px 8px 32px 0px` | `--shadow-xl-3` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 96px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    hero_primary_cta_button:
      role: "Main conversion action on the violet hero"

      info: "40px border-radius pill, #111111 background, #ffffff text, Inter 600 16px. Sits inside a fully saturated violet hero — the deliberate darkness makes it recede into urgency rather than compete with the background. Padding approximately 16px 32px. No border."

    lavender_accent_pill_button:
      role: "Secondary or decorative CTA variant"

      info: "40px border-radius pill, #d5a8f5 background, #000000 text, #000000 border. Inter 600 14-16px. Used as a visual counterpoint — warm pastel against violet — creates a softer entry point alongside the hard dark CTA."

    ghost_navigation_link:
      role: "Top nav links (Features, Resources, Pricing)"

      info: "No background, no border. Inter 500 16px, #475569 text color on white nav, #ffffff on dark sections. Hover state likely adds #5e51f8 color. Letter-spacing normal."

    outlined_sign_up_button:
      role: "Nav bar secondary action"

      info: "40px border-radius pill, transparent background, #000000 border 1px solid, #000000 text on light nav. Inter 600 14px. Padding 8px 20px. On dark hero sections, border becomes #ffffff."

    feature_card:
      role: "Individual feature showcase in the horizontal scrolling card grid"

      info: "32px border-radius, #ffffff background, #e5e7eb border 1px solid, shadow rgba(0,0,0,0.15) 0px 8px 32px 4px. Padding 24px. Interior contains an icon (16px, #5e51f8 or #867dfa fill), Inter 700 18px heading in #0f172a, Inter 400 16px body in #475569. Feature illustration in the lower half uses #d7d3fd and #cfcbfd tints on white — brand-colored at low saturation."

    tab_selector_demo_tutorials_courses:
      role: "Content filter tabs beneath the hero product screenshot"

      active_state: "40px radius pill, #ffffff background, Inter 600 14px #0f172a text, shadow rgba(0,0,0,0.16) 0px 2px 4px, rgba(0,0,0,0.16) 0px 4px 8px, rgba(255,255,255,0.25) 0px 1px 1px inset. Inactive: no background, #ffffff text at reduced opacity. Container: semi-transparent violet surface."

    video_demo_card:
      role: "Inline video teaser with play button"

      info: "24px border-radius card, #ffffff background, shadow rgba(0,0,0,0.15) 0px 8px 32px 0px. Contains thumbnail image at 16px radius left side, Inter 700 20px headline #0f172a, Inter 500 16px link text in #5e51f8 ('Watch the demo'). Positioned floating over the violet-to-white transition band."

    product_screenshot_frame:
      role: "Showcasing the Tella app UI within the hero"

      info: "16px border-radius on the inner screen content, dark bezel (#111111) at ~8-12px around the screen. Shadow: rgba(238,217,253,0.25) 0px 16px 64px 4px + rgba(0,0,0,0.1) 0px 8px 32px 0px. The lavender-tinted outer glow is the signature — elevation feels brand-colored, not neutral."

    social_proof_avatar_row:
      role: "Trust signal showing user community"

      info: "Horizontally scrolling row of circular avatars (40px diameter, 9999px radius). Overlapping arrangement with 16px negative margin between each. Centered below the hero. Caption text Inter 500 14px #475569 centered above."

    gear_list___content_card:
      role: "Embedded product content card (within app screenshot)"

      info: "24px border-radius, #ffffff background, border #e5e7eb 1px. Internal layout: image left (product photo at 16px radius), text right with Inter 700 16px title #0f172a, body Inter 400 14px #475569. CTA pill button '#5e51f8 background, #ffffff text, 40px radius' inside the card."

    footnote___trial_copy:
      role: "De-emphasised trust copy beneath primary CTA"

      info: "Inter 400 12px, #cfcbfd color on dark violet, centered. No background. Used for '7-day Free trial — no credit card required' messaging."

  do_s_and_don_ts:

    do:
      - "Use NaN Jaune Midi Bold with letter-spacing -0.047em to -0.054em for all display headlines above 48px — never set this font at tracking above -0.036em or it loses its broadcast-title compression."
      - "Apply the full-bleed violet hero (#5e51f8 → #251544 gradient) as a hard-cut section, not a fade — the abrupt transition to #f8fafc white is a signature move, not a design error."
      - "Use 40px border-radius for all interactive pill elements: CTA buttons, nav sign-up button, tab selectors, and tag labels — this is the single rounded form that appears system-wide."
      - "Tint feature card illustrations and ghost text with #d7d3fd or #cfcbfd on white surfaces — this keeps brand violet present in content sections without saturating the white ground."
      - "Apply the lavender glow shadow (rgba(238,217,253,0.25) 0px 16px 64px 4px) to product screenshots and elevated frames — generic black shadows on violet-adjacent content would break the brand-colored elevation system."
      - "Maintain the dark CTA (#111111 pill) as the primary action on violet hero sections — the unexpected darkness against saturated violet reads as decisive contrast, not absence of brand."
      - "Use Inter 700 at 24-30px for section subheadings on white sections — NaN Jaune Midi is reserved for display sizes only; Inter carries section-level hierarchy below 48px."

    don_t:
      - "Never use NaN Jaune Midi Bold below 48px — the custom face loses its display impact at text sizes and competes poorly with Inter's legibility."
      - "Never add gradient transitions between the violet hero and white sections — the hard cut is a deliberate design choice, not a transition oversight."
      - "Never use semantic red/green for status colors without verifying they appear in the design system — no semantic colors were detected in the extracted data; default to violet (#5e51f8) for interactive states."
      - "Never apply card border-radius below 24px — even small UI elements use 12-20px; the system has no sharp-cornered cards."
      - "Never place the lavender pill button (#d5a8f5) as the sole primary CTA — it reads as decorative or secondary alongside the dark pill; always pair it with or subordinate it to #111111 primary action."
      - "Never use box-shadows with warm-toned or yellow-shifted colors — all elevation uses either neutral black rgba(0,0,0,x) or brand-tinted lavender rgba(238,217,253,x). No warm brown or golden shadow tones."
      - "Never center-align body copy in card grids at more than 2 lines — the feature cards use left-aligned body text below card headers; centered multi-line body copy breaks the card's reading rhythm."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Background | `#f8fafc` | Default page surface for feature/content sections |"
    info: "| 1 | Card Surface | `#ffffff` | Feature cards, nav bar, modal surfaces on light backgrounds |"
    info: "| 2 | Hero Field | `#5e51f8` | Full-bleed violet hero section — primary brand immersion surface |"
    info: "| 3 | Dark Depth | `#251544` | Hero gradient base, deepest surface within the violet system |"

  elevation:

    - "**Feature Card (white section):** `rgba(0, 0, 0, 0.15) 0px 8px 32px 4px`"
    - "**Product Screenshot Frame:** `rgba(238, 217, 253, 0.25) 0px 16px 64px 4px, rgba(0, 0, 0, 0.1) 0px 8px 32px 0px`"
    - "**Navigation Pill / Active Tab:** `rgba(0, 0, 0, 0.16) 0px 2px 4px 0px, rgba(0, 0, 0, 0.16) 0px 4px 8px 0px, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset`"
    - "**Bottom Card Edge:** `rgba(0, 0, 0, 0.05) 0px -4px 6px 0px, rgba(0, 0, 0, 0.1) 0px -10px 15px 0px`"

  imagery:

    info: "Tella's visual language mixes real user webcam footage (candid, casual, head-and-shoulders crops inside rounded device frames) with flat-style brand illustrations. The webcam footage is raw and unretouched — intentionally amateur-feeling, matching the 'anyone can make videos' positioning. Product screenshots are contained within simulated laptop/monitor bezels at 16px internal radius. Feature card illustrations use ultra-light lavender (#d7d3fd, #cfcbfd) line drawings on white — outline-style, no fill, geometric human figures carrying trash (delete silences), large typographic elements ('um', 'ahh', 'ehhh' in fading lavender) for the filler-words card. Icons are outlined, approximately 1.5px stroke weight, monochromatic using #5e51f8 or #94a3b8. The rainbow linear/conic gradient (yellow→cyan→magenta) appears as an animated decorative ring — a neon halo effect, likely around the logo or a status indicator. Imagery is sparse: the white sections are text-and-illustration dominant, the hero is type-dominant with one large contained product demo below the fold."

  layout:

    info: "Max-width approximately 1200px, centered. Hero is full-bleed violet spanning the full viewport width and approximately 100vh, with centered headline stack and a single dark pill CTA. Below the CTA, a tab row switches between content modes, and a large product screenshot frame extends below the fold — the frame bottom intentionally crops, pulling the eye down. The hero-to-white section transition is a hard cut with no gradient bridge. Feature sections use a horizontal scroll card grid (4 visible cards, partial 5th visible, approximately 280px wide each) — not a static grid, implying overflow scroll on desktop. The video demo card floats in the transition zone between violet and white, using a card-on-gradient effect. Social proof is a single centered row at near-full width. Navigation is a fixed top bar with logo left, three links centered, auth actions right — standard SaaS nav but the sign-up button uses a pill outline matching the brand's rounded language. Footer is multi-column with approximately 3 content columns on a dark violet/near-black background."

  agent_prompt_guide:

    quick_color_reference:
    - "Text (dark sections): #ffffff primary, #cfcbfd secondary"
    - "Text (light sections): #0f172a primary, #475569 body, #808a99 tertiary"
    - "Page background: #f8fafc"
    - "Hero background: #5e51f8 → #251544 gradient"
    - "Primary CTA: #111111 background, #ffffff text"
    - "Brand accent / links: #5e51f8"
    - "Card border: #e5e7eb"
    - "Card surface: #ffffff"

    example_component_prompts:

    - "**Hero Section**: Full-bleed violet background using radial-gradient(50% 200% at 50% -100%, #776bff 0%, #5e51f8 100%) over linear-gradient(#27154c, #181127). Centered content. Headline 'Record incredible videos' at 84px NaN Jaune Midi Bold weight 700, letter-spacing -0.054em, line-height 1.10 — first line #ffffff, second line #cfcbfd. Subheadline Inter 500 20px #ffffff at 80% opacity. Dark pill CTA (#111111 background, #ffffff text, 40px radius, 16px 32px padding, Inter 600 16px). Fine-print caption 12px #cfcbfd below button."

    - "**Feature Card (White Section)**: White card (#ffffff), 32px border-radius, 1px #e5e7eb border, shadow rgba(0,0,0,0.15) 0px 8px 32px 4px, 24px padding. Top: small icon (20px, #5e51f8 stroke). Title Inter 700 18px #0f172a. Body Inter 400 16px #475569 line-height 1.6. Lower half: decorative illustration using #d7d3fd line-art on white. Card width ~280px."

    - "**Tab Selector Row**: Semi-transparent violet container, 40px radius. Active tab: white pill (#ffffff bg, 40px radius, Inter 600 14px #0f172a, shadow rgba(0,0,0,0.16) 0px 2px 4px + rgba(0,0,0,0.16) 0px 4px 8px + rgba(255,255,255,0.25) 0px 1px 1px inset, 8px 20px padding). Inactive tabs: no background, Inter 500 14px #ffffff 70% opacity."

    - "**Video Demo Card**: 24px border-radius, #ffffff background, shadow rgba(0,0,0,0.15) 0px 8px 32px 0px. Left: video thumbnail (16px radius, ~80px wide). Right: title Inter 700 18px #0f172a, 'Watch the demo' link Inter 500 16px #5e51f8. Floating between violet and white sections."

    - "**Nav Bar**: White background, full-width, ~64px height. Left: logo mark + 'tella' wordmark Inter 700 16px #0f172a. Center: 'Features', 'Resources', 'Pricing' — Inter 500 16px #475569. Right: 'Log in' Inter 500 16px #475569, 'Sign up' pill button 40px radius 1px #000000 border #000000 text Inter 600 14px 8px 20px padding."

  gradient_system:

    info: "Tella uses four gradient types with specific roles:"

    - "**Hero Background Gradient**: radial-gradient(50% 200% at 50% -100%, #776bff 0%, #5e51f8 100%) layered over linear-gradient(#27154c, #181127 100%) — creates a glowing violet orb at the top of the hero that fades to near-black at the bottom."

    - "**Brand CTA Gradient**: linear-gradient(135deg, #5e51f8 4.6%, #5e51f8 32.6%, #955ceb 63.4%) — used on brand-colored interactive elements, creates a subtle violet-to-purple shift."

    - "**Lavender Shimmer**: linear-gradient(270deg, #dec8ff 0%, #ffffff 50%, #dec8ff 100%) — appears on card backgrounds or section separators in the white feature areas, a barely-there tint suggesting brand presence without commitment."

    - "**Rainbow Neon Ring**: linear-gradient(270deg, #ffff00 0%, #00ffff 33%, #ff00ff 65%, #ffff00 100%) — likely animated, appears as a decorative halo element (logo ring or status indicator). Use sparingly — it's a punctuation mark, not a background."

  similar_brands:

    - "**Loom** — Same violet-dominant brand with a screen recorder product hero — both use full-bleed chromatic hero sections and product-screenshot-in-device-frame layouts"
    - "**Framer** — Custom display font at heavy negative tracking paired with system-weight UI body copy — same typographic two-tier strategy (expressive headline font + invisible utility font)"
    - "**Pitch** — Hard section cuts between saturated dark hero and white feature panels with lavender/violet illustration accents on white cards"
    - "**Descript** — Screen recorder / video editor SaaS with pill CTA buttons, feature cards showing illustrated UI metaphors, and a horizontal scrolling feature card layout"
    - "**Supercut** — Violet brand palette with circular avatar social proof rows and a candid-webcam-footage-as-hero visual approach"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-violet: #5e51f8;
          --color-deep-nebula: #251544;
          --gradient-deep-nebula: linear-gradient(rgb(39, 21, 76) 0%, rgb(24, 17, 39) 100%);
          --color-iris-mid: #4b41c6;
          --color-soft-amethyst: #cfcbfd;
          --color-lavender-mist: #d5a8f5;
          --color-powder-violet: #d7d3fd;
          --color-periwinkle-glow: #867dfa;
          --color-celestial-cyan: #99eeff;
          --color-ink: #0f172a;
          --color-slate: #475569;
          --color-steel: #808a99;
          --color-fog: #94a3b8;
          --color-ash-border: #e5e7eb;
          --color-chalk: #f8fafc;
          --color-pure-white: #ffffff;
          --color-carbon: #111111;
          --color-deep-violet-text: #312e58;
          --color-hero-gradient: #5e51f8;
          --gradient-hero-gradient: radial-gradient(50% 200% at 50% -100%, rgb(119, 107, 255) 0%, rgb(94, 81, 248) 100%);
        
          /* Typography — Font Families */
          --font-nan-jaune-midi-bold: 'NaN Jaune Midi Bold', 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-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 18;
          --text-body-sm: 14px;
          --leading-body-sm: 22;
          --text-body: 16px;
          --leading-body: 25;
          --text-subheading: 18px;
          --leading-subheading: 27;
          --text-heading-sm: 24px;
          --leading-heading-sm: 29;
          --text-heading: 30px;
          --leading-heading: 36;
          --text-heading-lg: 56px;
          --leading-heading-lg: 62;
          --tracking-heading-lg: -3.02px;
          --text-display: 84px;
          --leading-display: 93;
          --tracking-display: -4.54px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-168: 168px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
        
          /* Named Radii */
          --radius-tags: 12px;
          --radius-cards: 24px;
          --radius-images: 16px;
          --radius-inputs: 8px;
          --radius-buttons: 40px;
          --radius-featurecards: 32px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.15) 0px 8px 32px 4px;
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px -4px 6px 0px, rgba(0, 0, 0, 0.1) 0px -10px 15px 0px;
          --shadow-xl-2: rgba(238, 217, 253, 0.25) 0px 16px 64px 4px, rgba(0, 0, 0, 0.1) 0px 8px 32px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.16) 0px 2px 4px 0px, rgba(0, 0, 0, 0.16) 0px 4px 8px 0px, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset;
          --shadow-xl-3: rgba(0, 0, 0, 0.15) 0px 8px 32px 0px;
        
          /* Surfaces */
          --surface-page-background: #f8fafc;
          --surface-card-surface: #ffffff;
          --surface-hero-field: #5e51f8;
          --surface-dark-depth: #251544;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-violet: #5e51f8;
          --color-deep-nebula: #251544;
          --color-iris-mid: #4b41c6;
          --color-soft-amethyst: #cfcbfd;
          --color-lavender-mist: #d5a8f5;
          --color-powder-violet: #d7d3fd;
          --color-periwinkle-glow: #867dfa;
          --color-celestial-cyan: #99eeff;
          --color-ink: #0f172a;
          --color-slate: #475569;
          --color-steel: #808a99;
          --color-fog: #94a3b8;
          --color-ash-border: #e5e7eb;
          --color-chalk: #f8fafc;
          --color-pure-white: #ffffff;
          --color-carbon: #111111;
          --color-deep-violet-text: #312e58;
          --color-hero-gradient: #5e51f8;
        
          /* Typography */
          --font-nan-jaune-midi-bold: 'NaN Jaune Midi Bold', 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-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 18;
          --text-body-sm: 14px;
          --leading-body-sm: 22;
          --text-body: 16px;
          --leading-body: 25;
          --text-subheading: 18px;
          --leading-subheading: 27;
          --text-heading-sm: 24px;
          --leading-heading-sm: 29;
          --text-heading: 30px;
          --leading-heading: 36;
          --text-heading-lg: 56px;
          --leading-heading-lg: 62;
          --tracking-heading-lg: -3.02px;
          --text-display: 84px;
          --leading-display: 93;
          --tracking-display: -4.54px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-168: 168px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.15) 0px 8px 32px 4px;
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px -4px 6px 0px, rgba(0, 0, 0, 0.1) 0px -10px 15px 0px;
          --shadow-xl-2: rgba(238, 217, 253, 0.25) 0px 16px 64px 4px, rgba(0, 0, 0, 0.1) 0px 8px 32px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.16) 0px 2px 4px 0px, rgba(0, 0, 0, 0.16) 0px 4px 8px 0px, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset;
          --shadow-xl-3: rgba(0, 0, 0, 0.15) 0px 8px 32px 0px;
        }