hex___style_reference:
  info: "> alchemy lab on cream parchment — literary serif headline over dense data notebook"

  theme: "light"

  info: "Hex treats its marketing site like a research notebook: a warm cream canvas, a near-black violet ink, and a hand-drawn editorial headline floating above crisp sans-serif body copy. The hero pairs PP Editorial New italic at weight 200 with PP Formula's compressed 800-weight — a tension between literary softness and engineered density that recurs throughout. CTAs are intentionally quiet: thin dark outlines and dark text on white, no filled buttons, no drop-shadows that would shout over the product. Violet-tinted borders and shadows (rgba(71,57,130,0.1)) are the only chromatic warmth on the surface, while product screenshots and data visualizations carry the real color — viridis-style purples, teals, greens, and yellows blooming inside the notebook panels. The site reads as compact, technical, and confident: dense info blocks, 3px micro-radii on controls, and generous breathing room only between sections."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Violet | `#01011b` | `--color-ink-violet` | Primary text, body copy, heavy borders, data labels — the near-black ink with a violet undertone that makes charts and code blocks feel in-brand even at full contrast |"
    info: "| Plum Charcoal | `#31263b` | `--color-plum-charcoal` | Heavy borders, icon strokes, secondary text — a warm dark that softens harsh black and gives outlines a violet cast |"
    info: "| Storm Mauve | `#43394c` | `--color-storm-mauve` | Nav borders, tertiary text, muted headings — sits between Ink Violet and Plum Charcoal for intermediate contrast |"
    info: "| Slate Iris | `#717a94` | `--color-slate-iris` | Muted body text, icon fills, table borders — cool blue-gray for de-emphasized UI elements |"
    info: "| Ash Lavender | `#89828d` | `--color-ash-lavender` | Placeholder text, disabled labels, subtle icon tints |"
    info: "| Parchment | `#fffcfc` | `--color-parchment` | Page background, card surfaces, input fills — the warm near-white canvas, never pure #fff |"
    info: "| Bone Mist | `#ecedf2` | `--color-bone-mist` | Subtle dividers, zebra-striped table rows, hairline section separators |"
    info: "| Fog Border | `#dbd7da` | `--color-fog-border` | Default 1px border, card outlines, nav separators |"
    info: "| Twilight Plum | `#473982` | `--color-twilight-plum` | Brand-violet accent for focus rings (4px halo at 15% opacity), inset borders on elevated cards, decorative brand tints |"
    info: "| Amethyst | `#6f63b7` | `--color-amethyst` | Mid-tone violet for chart series, illustration fills, and data visualization highlights |"
    info: "| Wisteria | `#9e91d6` | `--color-wisteria` | Light violet for chart backgrounds, soft brand washes, and paired data fills |"
    info: "| Indigo Plum | `linear-gradient(90deg, #31263b 0%, #01011b 100%)` | `--color-indigo-plum` | Deep accent violet for dark-mode callouts, gradient endpoints, and badge fills; Gradient start |"

  tokens___typography:

    pp_editorial_new___hero_display_headline___ultra_light_italic_serif_floats_above_the_page__an_anti_convention_whisper_voice_where_competitors_use_bold_sans__the_200_weight_at_78px_with__0_024em_tracking_gives_the_italic_terminals_room_to_breathe__substitute__cormorant_garamond_italic_200__or_playfair_display_italic_300_as_fallback_____font_pp_editorial_new:
      - "**Substitute:** Cormorant Garamond Italic 200"
      - "**Weights:** 200"
      - "**Sizes:** 78px"
      - "**Line height:** 1.30"
      - "**Letter spacing:** -1.87px"
      - "**Role:** Hero display headline — ultra-light italic serif floats above the page, an anti-convention whisper-voice where competitors use bold sans. The 200 weight at 78px with -0.024em tracking gives the italic terminals room to breathe. Substitute: Cormorant Garamond Italic 200, or Playfair Display Italic 300 as fallback."

    pp_formula_semiextended___section_display_headings___semi_condensed_industrial_sans_at_60px_balances_the_editorial_hero__tight__0_031em_tracking_makes_the_letterforms_lock_together_for_a_compressed__engineered_read_____font_pp_formula_semiextended:
      - "**Substitute:** Archivo Narrow 700"
      - "**Weights:** 700"
      - "**Sizes:** 60px"
      - "**Line height:** 1.30"
      - "**Letter spacing:** -1.86px"
      - "**Role:** Section display headings — semi-condensed industrial sans at 60px balances the editorial hero. Tight -0.031em tracking makes the letterforms lock together for a compressed, engineered read."

    pp_formula___mid_weight_display_subheadings___condensed_800_weight_for_tight__headline_grade_labels____font_pp_formula:
      - "**Substitute:** Archivo Black"
      - "**Weights:** 800"
      - "**Sizes:** 28px"
      - "**Line height:** 1.30"
      - "**Letter spacing:** -0.70px"
      - "**Role:** Mid-weight display subheadings — condensed 800 weight for tight, headline-grade labels"

    ibm_plex_sans___primary_ui_and_body___the_workhorse__400_for_body__500_600_for_nav_and_subheadings__700_for_emphasized_labels__tracking_tightens_with_size___0_70px_at_20px___0_65px_at_26px__letterforms_stay_technical_and_neutral_so_the_violet_ink_color_does_the_brand_work_____font_ibm_plex_sans:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 10px, 12px, 16px, 20px, 24px, 26px"
      - "**Line height:** 1.20–2.33"
      - "**Letter spacing:** -0.0350em at 20px, -0.0250em at 26px"
      - "**Role:** Primary UI and body — the workhorse. 400 for body, 500/600 for nav and subheadings, 700 for emphasized labels. Tracking tightens with size: -0.70px at 20px, -0.65px at 26px. Letterforms stay technical and neutral so the violet ink color does the brand work."

    cinetype___secondary_ui___nav_links__button_text__badges__inline_labels__a_geometric_companion_to_plex_sans__used_when_slightly_more_character_is_needed_in_controls_____font_cinetype:
      - "**Substitute:** DM Sans"
      - "**Weights:** 300, 400, 500, 700"
      - "**Sizes:** 12px, 14px, 16px, 20px, 24px"
      - "**Line height:** 1.00–1.57"
      - "**Role:** Secondary UI — nav links, button text, badges, inline labels. A geometric companion to Plex Sans, used when slightly more character is needed in controls."

    ibm_plex_mono___code_snippets__query_cells__technical_annotations___confined_to_11px_in_product_screenshots_and_embedded_code_blocks____font_ibm_plex_mono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 11px"
      - "**Line height:** 1.50"
      - "**Role:** Code snippets, query cells, technical annotations — confined to 11px in product screenshots and embedded code blocks"

    lato___tertiary_small_text___footers__fine_print__logo_grid_captions____font_lato:
      - "**Substitute:** Source Sans 3"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 10px, 12px, 14px"
      - "**Line height:** 1.20–2.20"
      - "**Letter spacing:** -0.0140em"
      - "**Role:** Tertiary small text — footers, fine print, logo-grid captions"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.4 | -0.14px | `--text-caption` |"
      info: "| body | 16px | 1.6 | — | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.7px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 26px | 1.2 | -0.65px | `--text-heading` |"
      info: "| heading-md | 28px | 1.3 | -0.7px | `--text-heading-md` |"
      info: "| heading-lg | 60px | 1.3 | -1.86px | `--text-heading-lg` |"
      info: "| display | 78px | 1.3 | -1.87px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 108 | 108px | `--spacing-108` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 6px |"
      info: "| pills | 9999px |"
      info: "| inputs | 6px |"
      info: "| buttons | 3px |"
      info: "| navItems | 3px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(71, 57, 130, 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, ...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgb(255, 255, 255) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(71, 57, 130, 0.15) 0px 0px 0px 4px` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, ...` | `--shadow-subtle-5` |"
      info: "| md | `rgba(0, 0, 0, 0.05) 0px 0px 11px 0px inset, rgba(0, 0, 0,...` | `--shadow-md` |"

    layout:

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

  components:

    outlined_cta_button:
      role: "Primary action trigger (e.g. 'Get started for free')"

      info: "White fill, 1px border in #31263b (Plum Charcoal), 3px border-radius, 10px vertical / 20px horizontal padding. Text in IBM Plex Sans 500, #01011b (Ink Violet), 14px. No fill on hover — border thickens to 2px or shifts to #01011b. The button's restraint is the point: it never competes with the product screenshot beside it."

    ghost_text_button:
      role: "Secondary action (e.g. 'Request a demo')"

      info: "No border, no fill. IBM Plex Sans 500 at 14px in #01011b, underline on hover. Sits to the right of the outlined CTA, creating a paired action pattern without visual weight competition."

    pill_badge:
      role: "Section eyebrow labels (e.g. 'Agentic data notebooks', 'Conversational self-serve')"

      info: "Pill shape (9999px radius), 4px 12px padding, 12px IBM Plex Sans 500 in #43394c. No fill — sits directly on the parchment canvas as a quiet typographic marker above section headings."

    notebook_product_card:
      role: "Hero and mid-page product screenshot containers"

      info: "White (#ffffff) fill, 6px border-radius, 1px inset border in rgba(71,57,130,0.1), and the signature three-layer shadow: rgba(49,38,59,0.22) 0 0 0 1px outline + rgba(49,38,59,0.1) 0 26px 57px close drop + rgba(49,38,59,0.09) 0 103px 103px ambient spread. The violet-tinted shadows (not pure black) are what make the panel feel in-brand. 20px internal padding, contains a notebook/app builder UI screenshot."

    editorial_hero_block:
      role: "Above-the-fold headline and subhead"

      info: "Centered stack on parchment canvas. Line 1: PP Editorial New 200 italic at 78px, #01011b, -1.87px tracking. Line 2: PP Formula SemiExtended 700 at 60px, #01011b, -1.86px tracking. Subhead in IBM Plex Sans 400 at 20px, #43394c, max-width ~640px. 48px gap between display lines, 24px to subhead, 32px to CTA row."

    top_navigation_bar:
      role: "Sticky header with primary nav"

      info: "Transparent parchment background, 1px bottom border in #dbd7da. Center-aligned HEX wordmark in PP Formula at 24px. Nav links in IBM Plex Sans 500 at 14px, #31263b. Right side: 'Log in' ghost link + outlined 'Get started' button (3px radius, Plum Charcoal border). No background blur, no shadow — the nav is a flat hairline above the canvas."

    logo_trust_bar:
      role: "Social proof row below the hero"

      info: "Two rows of customer logos in monochrome black or near-black, 24px column gap, centered. Small caps label 'TRUSTED BY LEADING DATA COMPANIES' in IBM Plex Sans 600 at 11px, #89828d, letter-spaced +0.08em. Logos are not recolored to brand — they sit in their native grays, treated as content rather than UI."

    code_cell_block:
      role: "Embedded notebook cells within product cards"

      info: "No background fill. IBM Plex Mono 400 at 11px, line-height 1.50. Syntax coloring uses a muted palette: keywords in #544692, strings in #22863a, function names in #005cc5, comments in #89828d. Python comment line '# Start from Q3 rows only' in #22863a. Cell border: none — code floats as a continuation of the notebook UI."

    ai_agent_chat_panel:
      role: "Conversational interface preview in product cards"

      info: "White fill, 6px top-left radius, sits flush right inside the notebook card. Header: 'NexaCorp product line performance (Q3)' in IBM Plex Sans 600 at 14px, #01011b. Share / Continue in project link buttons in #717a94. Agent messages in IBM Plex Sans 400 at 13px, #31263b, with a small avatar circle (20px, Plum Charcoal fill) and 'Thought for 11 seconds' timestamp in #89828d. Input field at bottom: 1px border in #dbd7da, 6px radius, IBM Plex Sans 400 placeholder at 13px in #89828d."

    data_visualization_panel:
      role: "Bar charts and scatter plots embedded in product cards"

      info: "Chart titles in IBM Plex Sans 600 at 13px, #01011b. Bar fills use a viridis-style ramp: #472d7b → #21918c → #5ec962 → #fde725. Scatter plots use the same ramp across data points. Axis labels in IBM Plex Sans 400 at 10px, #89828d. No chart background — the chart sits on white inside the notebook card."

    two_column_feature_block:
      role: "Text-left / product-right feature sections"

      info: "Max-width 1200px, 80px vertical gap between sections. Left column: 40% width, contains a pill eyebrow badge, 60px PP Formula SemiExtended heading, 20px IBM Plex Sans body in #43394c, and a ghost outlined button. Right column: 60% width, contains a Notebook Product Card. Alternates left/right by section."

    section_divider:
      role: "Visual break between page sections"

      info: "1px horizontal hairline in #ecedf2, full-width, no margin collapse. Alternatively, a 80px vertical gap with no rule — the parchment canvas itself acts as the separator. Decorative asterisk/sparkle motif (4-point star) in #cd5973 (rose accent) marks the end of the editorial hero headline."

  do_s_and_don_ts:

    do:
      - "Use the outlined button pattern: 1px #31263b border, 3px radius, white fill, IBM Plex Sans 500 14px #01011b. Never fill a CTA with brand color — the restraint is the brand."
      - "Pair PP Editorial New 200 italic (78px) with PP Formula SemiExtended 700 (60px) for hero display lines. The serif/sans contrast at extreme weight asymmetry is the signature."
      - "Apply the three-layer violet-tinted shadow stack to product cards: rgba(49,38,59,0.22) 1px outline + rgba(49,38,59,0.1) 26px close + rgba(49,38,59,0.09) 103px ambient. Never use pure black shadows."
      - "Use 3px border-radius for buttons, nav items, and links. Use 6px for cards and inputs. Use 9999px for pill badges only."
      - "Set the page background to #fffcfc (warm near-white), not #ffffff. The cream cast ties the canvas to the violet ink."
      - "Embed product screenshots as the primary visual content in every section — notebook panels, AI agent threads, data visualizations. Stock photography and abstract renders should not appear."
      - "Use IBM Plex Mono 400 at 11px for all code cells, with syntax colors in #544692 (keywords), #22863a (strings), #005cc5 (functions), and #89828d (comments)."

    don_t:
      - "Don't use filled CTA buttons with brand-color backgrounds. The outlined/dark-text pattern is intentional — filling the button breaks the design language."
      - "Don't use pure black (#000000) for body text or shadows. Use #01011b for text and rgba(49,38,59,*) for shadows. The violet undertone is what makes the system feel in-brand."
      - "Don't pair the PP Editorial New hero with a standard bold sans. The weight 200 italic at 78px is anti-convention; using 600+ weight on the serif kills the editorial whisper."
      - "Don't introduce a second serif or a third display font. The system is PP Editorial New (editorial) + PP Formula (display) + IBM Plex Sans (body) + IBM Plex Mono (code) + Cinetype (secondary UI). Adding more fragments the voice."
      - "Don't use large border-radii (12px+) on cards or buttons. 3px and 6px are the system — bigger radii feel consumer-app, not data-workbench."
      - "Don't alternate dark/light section bands. The page is one continuous parchment canvas. Section breaks are 80px gaps and hairlines, not color changes."
      - "Don't apply the viridis chart colors (#472d7b, #21918c, #5ec962, #fde725, etc.) to UI elements. They are content/visualization colors, not interface tokens."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Parchment Canvas | `#fffcfc` | Page background, the warm near-white that everything floats on |"
    info: "| 1 | Bone Mist Card | `#ecedf2` | Alternate band backgrounds, table row striping, soft section breaks |"
    info: "| 2 | Plum-Tinted Card | `#fffcfc` | Product screenshot cards with violet inset border (rgba(71,57,130,0.1) 0 0 0 1px inset) and layered dark shadows |"
    info: "| 3 | Elevated Product Panel | `#ffffff` | Notebook/app builder previews with white fill, 6px radius, and the signature three-layer shadow stack (border + 26px close shadow + 103px ambient) |"

  elevation:

    - "**Notebook Product Card:** `rgba(49,38,59,0.22) 0px 0px 0px 1px, rgba(49,38,59,0.09) 0px 103px 103px 0px, rgba(49,38,59,0.1) 0px 26px 57px 0px`"
    - "**Elevated Card (lighter variant):** `rgba(49,38,59,0.22) 0px 0px 0px 1px, rgba(49,38,59,0.1) 0px 26px 57px 0px`"
    - "**Inset Brand Border:** `rgba(71,57,130,0.1) 0px 0px 0px 1px inset`"
    - "**Focus Ring:** `rgba(71,57,130,0.15) 0px 0px 0px 4px`"
    - "**Input Field:** `rgb(255,255,255) 0px 0px 0px 1px inset`"

  imagery:

    info: "Product UI screenshots dominate — notebook panels, AI agent chat threads, and data visualizations are the primary visual content, not stock photography. The embedded charts use a viridis color ramp (deep violet → teal → green → yellow) that is content-specific, not part of the UI palette. Decorative motifs are minimal: a small 4-point starburst in rose (#cd5973) marks the end of the editorial hero headline, and a subtle pink-to-plum gradient (rgb(205,160,165) → rgb(49,38,59) at 45deg) appears as an accent wash. No lifestyle photography, no abstract 3D renders. Customer logos in the trust bar are rendered in their native monochrome — treated as content, not branded into the system. The visual density is high: screenshots contain code, charts, chat threads, and UI chrome simultaneously, reinforcing the 'data workbench' identity."

  layout:

    info: "Max-width 1200px centered, with the nav bar full-bleed and content blocks constrained. The hero is a centered stack (not split): editorial serif headline above bold sans subhead, subhead above CTA pair, hero product card below — all vertically stacked and centered. Below the hero: a full-width logo trust band, then alternating two-column feature blocks (text-left / product-right, then text-right / product-left). Sections are separated by 80px vertical gaps on the continuous parchment canvas — no dark bands, no color alternation. The page is a single scroll with no sidebar; the rhythm is hero → trust → features stacked vertically, each section getting one product screenshot as its visual anchor. Navigation is a flat sticky top bar with center-aligned wordmark, no mega-menu, no sidebar."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "Background (canvas): #fffcfc"
    - "Card surface: #ffffff with #ecedf2 dividers"
    - "Border (default): #dbd7da"
    - "Border (heavy/brand): #31263b"
    - "Text (primary): #01011b"
    - "Text (secondary/muted): #43394c"
    - "Accent (brand violet): #473982"
    - "primary action: #31263b (outlined action border)"

    info: "Example Component Prompts:"
    - "Build a hero section on a #fffcfc canvas. Display headline: PP Editorial New 200 italic at 78px, #01011b, letter-spacing -1.87px, centered. Second line: PP Formula SemiExtended 700 at 60px, #01011b, letter-spacing -1.86px. Subhead: IBM Plex Sans 400 at 20px, #43394c, max-width 640px. CTA row centered: outlined button (1px #31263b border, 3px radius, 10px 20px padding, IBM Plex Sans 500 14px #01011b) reading 'Get started for free', then ghost text link 'Request a demo' in IBM Plex Sans 500 14px #01011b."
    - "Build a notebook product card: white #ffffff fill, 6px radius, 1px inset border in rgba(71,57,130,0.1), 20px padding, and the three-layer shadow (rgba(49,38,59,0.22) 0 0 0 1px, rgba(49,38,59,0.1) 0 26px 57px 0px, rgba(49,38,59,0.09) 0 103px 103px 0px). Inside, embed a code cell with IBM Plex Mono 400 at 11px and a scatter plot using viridis-ramp points (#472d7b → #21918c → #5ec962 → #fde725)."
    - "Build a pill eyebrow badge: no fill, 9999px radius, 4px 12px padding, IBM Plex Sans 500 at 12px in #43394c. Place above a 60px PP Formula SemiExtended 700 heading in #01011b."
    - "Build a two-column feature block: left column 40% width with a pill badge, 60px heading, 20px body text in #43394c, and a ghost outlined button. Right column 60% width with a notebook product card. 80px vertical gap to the next section."
    - "Build a top navigation bar: transparent #fffcfc background, 1px bottom border in #dbd7da, 12px vertical padding. Center: HEX wordmark in PP Formula at 24px #01011b. Left: nav links in IBM Plex Sans 500 14px #31263b. Right: 'Log in' ghost link + outlined 'Get started' button (3px radius, #31263b 1px border, IBM Plex Sans 500 14px #01011b)."

  similar_brands:

    - "**Linear** — Same outlined-button + monochrome dark-on-light approach, compact density, and product-screenshot-as-hero strategy"
    - "**Vercel** — Same near-white canvas with dark text, minimal color, and geometric sans typography for body"
    - "**Observable** — Same notebook/data-workbench visual identity with embedded code, charts, and AI panels in product screenshots"
    - "**Retool** — Same technical/devtools audience with compact layouts, dark text on light canvas, and violet-tinted UI accents"
    - "**Notion** — Same warm near-white parchment canvas (#fffcfc vs Notion's off-white) with editorial restraint and minimal elevation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-violet: #01011b;
          --color-plum-charcoal: #31263b;
          --color-storm-mauve: #43394c;
          --color-slate-iris: #717a94;
          --color-ash-lavender: #89828d;
          --color-parchment: #fffcfc;
          --color-bone-mist: #ecedf2;
          --color-fog-border: #dbd7da;
          --color-twilight-plum: #473982;
          --color-amethyst: #6f63b7;
          --color-wisteria: #9e91d6;
          --color-indigo-plum: #544692;
          --gradient-indigo-plum: linear-gradient(90deg, #31263b 0%, #01011b 100%);
        
          /* Typography — Font Families */
          --font-pp-editorial-new: 'PP Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-formula-semiextended: 'PP Formula SemiExtended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-formula: 'PP Formula', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ibm-plex-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cinetype: 'Cinetype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-lato: 'Lato', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: -0.14px;
          --text-body: 16px;
          --leading-body: 1.6;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.7px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 26px;
          --leading-heading: 1.2;
          --tracking-heading: -0.65px;
          --text-heading-md: 28px;
          --leading-heading-md: 1.3;
          --tracking-heading-md: -0.7px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.3;
          --tracking-heading-lg: -1.86px;
          --text-display: 78px;
          --leading-display: 1.3;
          --tracking-display: -1.87px;
        
          /* Typography — Weights */
          --font-weight-extralight: 200;
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-6: 6px;
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-96: 96px;
          --spacing-108: 108px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-full: 99px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-cards: 6px;
          --radius-pills: 9999px;
          --radius-inputs: 6px;
          --radius-buttons: 3px;
          --radius-navitems: 3px;
        
          /* Shadows */
          --shadow-subtle: rgba(71, 57, 130, 0.1) 0px 0px 0px 1px inset;
          --shadow-subtle-2: rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.09) 0px 103px 103px 0px, rgba(49, 38, 59, 0.1) 0px 26px 57px 0px;
          --shadow-subtle-3: rgb(255, 255, 255) 0px 0px 0px 1px inset;
          --shadow-subtle-4: rgba(71, 57, 130, 0.15) 0px 0px 0px 4px;
          --shadow-subtle-5: rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.1) 0px 26px 57px 0px;
          --shadow-md: rgba(0, 0, 0, 0.05) 0px 0px 11px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 16px 24px -8px, rgba(0, 0, 0, 0.05) 0px 8px 12px -4px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        
          /* Surfaces */
          --surface-parchment-canvas: #fffcfc;
          --surface-bone-mist-card: #ecedf2;
          --surface-plum-tinted-card: #fffcfc;
          --surface-elevated-product-panel: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-violet: #01011b;
          --color-plum-charcoal: #31263b;
          --color-storm-mauve: #43394c;
          --color-slate-iris: #717a94;
          --color-ash-lavender: #89828d;
          --color-parchment: #fffcfc;
          --color-bone-mist: #ecedf2;
          --color-fog-border: #dbd7da;
          --color-twilight-plum: #473982;
          --color-amethyst: #6f63b7;
          --color-wisteria: #9e91d6;
          --color-indigo-plum: #544692;
        
          /* Typography */
          --font-pp-editorial-new: 'PP Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-formula-semiextended: 'PP Formula SemiExtended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-formula: 'PP Formula', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ibm-plex-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cinetype: 'Cinetype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-lato: 'Lato', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: -0.14px;
          --text-body: 16px;
          --leading-body: 1.6;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.7px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 26px;
          --leading-heading: 1.2;
          --tracking-heading: -0.65px;
          --text-heading-md: 28px;
          --leading-heading-md: 1.3;
          --tracking-heading-md: -0.7px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.3;
          --tracking-heading-lg: -1.86px;
          --text-display: 78px;
          --leading-display: 1.3;
          --tracking-display: -1.87px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-96: 96px;
          --spacing-108: 108px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-full: 99px;
          --radius-full-2: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(71, 57, 130, 0.1) 0px 0px 0px 1px inset;
          --shadow-subtle-2: rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.09) 0px 103px 103px 0px, rgba(49, 38, 59, 0.1) 0px 26px 57px 0px;
          --shadow-subtle-3: rgb(255, 255, 255) 0px 0px 0px 1px inset;
          --shadow-subtle-4: rgba(71, 57, 130, 0.15) 0px 0px 0px 4px;
          --shadow-subtle-5: rgba(49, 38, 59, 0.22) 0px 0px 0px 1px, rgba(49, 38, 59, 0.1) 0px 26px 57px 0px;
          --shadow-md: rgba(0, 0, 0, 0.05) 0px 0px 11px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 16px 24px -8px, rgba(0, 0, 0, 0.05) 0px 8px 12px -4px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        }