lightdash___style_reference:
  info: "> violet pixel-grid on drafting paper"

  theme: "light"

  info: "Lightdash operates as a calm, developer-first command center: a near-white canvas populated by slate-gray typography, subtle hairline borders, and one saturated violet (#5e4cff) that powers every interactive moment. The brand voice is confident and quiet — headlines are set in a custom geometric sans (Britti Sans) at 48–76px with aggressively tight tracking (-0.025em), making them feel architectural rather than decorative. Body copy uses Inter at 14–18px with slightly negative letter-spacing, keeping dense information readable without feeling heavy. Surfaces layer gently from #ffffff canvas to #f6f8fa sections to 12px-rounded cards, and a pixel-art violet mosaic in the hero is the only ornamental gesture — a deliberate nod to the 'code-native' identity. Components are flat and borderless-by-default; elevation is borrowed from layered rgba shadows tinted with the brand's slate (#272835) rather than neutral gray, which keeps every card visually on-brand."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Primary page background, card surfaces, input fills |"
    info: "| Cloud Mist | `#f6f8fa` | `--color-cloud-mist` | Alternate section background, subtle surface tier below white |"
    info: "| Frost Tint | `#eceff3` | `--color-frost-tint` | Tertiary surface, muted background blocks |"
    info: "| Ash Border | `#cdd2d9` | `--color-ash-border` | Hairline dividers, card borders, table separators |"
    info: "| Mist Border | `#c1c7d0` | `--color-mist-border` | Secondary borders, disabled state outlines |"
    info: "| Fog Text | `#a4abb8` | `--color-fog-text` | Helper text, link underlines in body copy, placeholder text |"
    info: "| Steel Text | `#818898` | `--color-steel-text` | Muted metadata, timestamps, caption text |"
    info: "| Slate Body | `#666d80` | `--color-slate-body` | Secondary body text, descriptions, supporting paragraphs |"
    info: "| Graphite Heading | `#36394a` | `--color-graphite-heading` | Primary headings, strong body text, high-emphasis content |"
    info: "| Midnight Ink | `#272835` | `--color-midnight-ink` | Dark surface fills, announcement bar, code terminal background, primary button background |"
    info: "| Onyx | `#1a1b25` | `--color-onyx` | Deepest text, high-contrast dark surfaces |"
    info: "| Volt Violet | `#5e4cff` | `--color-volt-violet` | Primary CTA fill, active link, brand accent — vivid violet against slate neutrals is the single chromatic punctuation of the entire system |"
    info: "| Lavender Wash | `#c8ccf3` | `--color-lavender-wash` | Muted accent background, hero pixel-art mid-tones, tag chips |"
    info: "| Lilac Whisper | `#dfdbff` | `--color-lilac-whisper` | Tertiary accent surface, selected row tint, soft callout |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    britti_sans_trial_semibold___display_headlines_and_hero_copy__the_aggressive__0_025em_tracking_at_76px_and_condensed_0_95_line_height_make_text_feel_architectural_and_code_like__substitute__space_grotesk_bold_or_general_sans_semibold_____font_britti_sans_trial_semibold:
      - "**Substitute:** Space Grotesk Bold"
      - "**Weights:** 600"
      - "**Sizes:** 18px, 48px, 56px, 57px, 76px"
      - "**Line height:** 0.95-1.00"
      - "**Letter spacing:** -0.025em at 56-76px, -0.02em at 48px"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Role:** Display headlines and hero copy. The aggressive -0.025em tracking at 76px and condensed 0.95 line-height make text feel architectural and code-like. Substitute: Space Grotesk Bold or General Sans Semibold."

    britti_sans_medium___section_headings_h2_h3__nav_items__emphasized_ui_labels__carries_brand_personality_into_subhead_levels__substitute__space_grotesk_medium_____font_britti_sans_medium:
      - "**Substitute:** Space Grotesk Medium"
      - "**Weights:** 500"
      - "**Sizes:** 14px, 16px, 18px, 20px, 24px, 32px"
      - "**Line height:** 1.20-1.30"
      - "**Letter spacing:** -0.02em at 24-32px, -0.01em at 18-20px, +0.01em at 14-16px"
      - "**Role:** Section headings (H2/H3), nav items, emphasized UI labels. Carries brand personality into subhead levels. Substitute: Space Grotesk Medium."

    inter___body_copy__paragraphs__descriptions__the_slight_negative_tracking__0_01_to__0_02em_keeps_even_long_form_text_dense_but_readable__substitute__inter_is_already_google_hosted_____font_inter:
      - "**Substitute:** Inter (Google)"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 9px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 24px"
      - "**Line height:** 1.33-1.63"
      - "**Letter spacing:** -0.0200em, -0.0150em, -0.0100em"
      - "**Role:** Body copy, paragraphs, descriptions. The slight negative tracking (-0.01 to -0.02em) keeps even long-form text dense but readable. Substitute: Inter is already Google-hosted."

    inter_variable___ui_controls__buttons__badges__form_labels__nav_links___the_workhorse_for_interactive_elements_____font_inter_variable:
      - "**Substitute:** Inter (Google)"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px"
      - "**Line height:** 1.43-1.70"
      - "**Letter spacing:** -0.0100em"
      - "**Role:** UI controls, buttons, badges, form labels, nav links — the workhorse for interactive elements."

    ibm_plex_mono___code_snippets__terminal_output__inline__code__elements__signals_the_developer_first_audience_____font_ibm_plex_mono:
      - "**Substitute:** IBM Plex Mono (Google)"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** -0.0200em"
      - "**Role:** Code snippets, terminal output, inline `<code>` elements. Signals the developer-first audience."

    britti_sans_trial_regular___britti_sans_trial_regular___detected_in_extracted_data_but_not_described_by_ai____font_britti_sans_trial_regular:
      - "**Weights:** 400"
      - "**Sizes:** 48px"
      - "**Line height:** 1, 1.2"
      - "**Letter spacing:** -0.02"
      - "**Role:** Britti Sans Trial Regular — detected in extracted data but not described by AI"

    micro_5___micro_5___detected_in_extracted_data_but_not_described_by_ai____font_micro_5:
      - "**Weights:** 400"
      - "**Sizes:** 31px"
      - "**Line height:** 1.2"
      - "**Role:** Micro 5 — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.14px | `--text-caption` |"
      info: "| body-sm | 14px | 1.63 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.05 | -1px | `--text-heading-lg` |"
      info: "| display | 76px | 0.95 | -1.9px | `--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: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 12px |"
      info: "| badges | 999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"
      info: "| special | 80px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) ...` | `--shadow-sm` |"
      info: "| subtle | `rgba(18, 18, 18, 0.1) 0px 1px 1px 0px, rgba(18, 18, 18, 0...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(39, 40, 53, 0.1) 0px 0px 0px 1px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(39, 40, 53, 0.1) 0px 0px 0px 1px, rgba(39, 40, 53, 0...` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(39, 40, 53, 0.05) 0px 0px 0px 1px, rgba(39, 40, 53, ...` | `--shadow-subtle-4` |"
      info: "| lg | `rgba(0, 0, 0, 0.01) 0px 54px 21px 0px, rgba(0, 0, 0, 0.05...` | `--shadow-lg` |"

    layout:

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

  components:

    announcement_bar:
      role: "Top-of-page promo strip"

      info: "Full-width #1a1b25 dark bar. 12px Inter Variable white text, centered, with inline link in #c8ccf3. Padding 8px vertical. No radius."

    primary_navigation:
      role: "Sticky top-level nav with brand and auth"

      info: "White background, 64px height, 8px radius dropdowns. Logo (lightning bolt glyph) in #5e4cff on the left, nav links in #36394a at 14px Inter Medium, Login as text link, 'Book a demo' as ghost button (1px #cdd2d9 border, 8px radius), 'Start for free' as filled #272835 button with white text and 8px radius."

    ghost_button:
      role: "Secondary CTA (Book a demo, Try live demo)"

      info: "White background, 1px #cdd2d9 border, 8px radius, 10px 16px padding, 14px Inter Medium #36394a text. Hover darkens border to #818898."

    primary_filled_button:
      role: "Main action (Start for free, Sign up)"

      info: "Filled #272835 background, white text, 8px radius, 10px 20px padding, 14px Inter Medium. Or the brand-violet variant: #5e4cff fill, white text, 8px radius, used for one hero CTA per page."

    violet_accent_button:
      role: "Hero primary action"

5e4cff_fill__white_text__8px_radius__12px_24px_padding__14_16px_inter_medium__the_single_saturated_moment_in_an_otherwise_monochrome_page___use_sparingly__at_most_one_per_viewport:

    tab_toggle:
      role: "Audience switcher (For developers / For business users)"

      info: "Pill container, 999px radius, #f6f8fa inactive background, white active background with subtle shadow on the active tab. Text 14px Inter Medium, #666d80 inactive, #36394a active."

    hero_section:
      role: "Above-fold headline and visual"

      info: "White #ffffff canvas. Headline 56-76px Britti Sans Semibold #36394a with -0.025em tracking. Body 16-18px Inter Regular #666d80. Violet pixel-art mosaic decoration anchored to the right edge. CTAs stacked horizontally with 8-12px gap."

    pixel_art_hero_decoration:
      role: "Brand ornamental element"

      info: "Scattered 4px-12px violet square tiles in a loose grid, anchored to the upper-right of the hero. Colors: #5e4cff (saturated), #c8ccf3 (muted), #dfdbff (pale), #ffffff (negative space). The only decorative flourish in the system."

    product_preview_card:
      role: "Browser-frame screenshot of the product"

      info: "White surface with 12px radius and the multi-layer shadow stack (see elevation). Contains a macOS-style window chrome at top, then product UI inside. Sits on #f6f8fa section background."

    code_terminal_card:
      role: "Dark embedded code/terminal block"

1a1b25_background__12px_radius__16px_padding__ibm_plex_mono_12px_text_in_a4abb8_with_syntax_tokens_in_5e4cff_and_c8ccf3__provides_visual_contrast_against_the_white_page:

    logo_grid_section:
      role: "Customer/partner social proof"

      info: "White background, 2-row x 6-column grid of customer logos, evenly spaced with 40px row gaps. Logos render monochrome in #36394a or original brand colors at 60% scale."

    testimonial_block:
      role: "Quoted social proof"

      info: "Centered 18-20px Inter Regular #36394a quote, 600px max-width, preceded by a small violet pixel-art icon (#5e4cff). Avatar row of 5 headshots below in 80px circles."

    feature_card:
      role: "Feature highlight in 2 or 3 column grid"

      info: "White surface, 12px radius, 16px padding, 1px #cdd2d9 border, no shadow by default. Heading 24px Britti Medium #36394a, body 14-16px Inter #666d80. Optional violet icon at top in #5e4cff."

    input_field:
      role: "Text input / form control"

      info: "White background, 1px #cdd2d9 border, 8px radius, 10px 12px padding, 14px Inter Regular #36394a text. Placeholder #a4abb8. Focus ring: 2px #5e4cff at 20% opacity."

    badge___tag:
      role: "Status or category label"

      info: "Pill shape (999px radius), #f6f8fa or #dfdbff background, 12px Inter Medium text, 4px 10px padding, #36394a or #5e4cff text."

  do_s_and_don_ts:

    do:
      - "Use #5e4cff (Volt Violet) for exactly one primary CTA per viewport — never pair it with another accent color on the same screen."
      - "Set display headlines in Britti Sans Semibold at 48-76px with -0.025em letter-spacing; this aggressive tracking is the signature of the brand voice."
      - "Set body copy in Inter at 14-18px with -0.01 to -0.02em tracking, never in pure #000000 — use #36394a (Graphite Heading) for strong text and #666d80 (Slate Body) for descriptions."
      - "Use 12px radius for all cards and 8px radius for all buttons, inputs, and nav elements — these two values are the system's structural constants."
      - "Default cards to 1px #cdd2d9 border with no shadow; reserve the multi-layer shadow stack for hero product previews and elevated feature cards only."
      - "Use the pixel-art violet mosaic (#5e4cff, #c8ccf3, #dfdbff, #ffffff tiles) as the single decorative flourish — it is the brand's only ornament."
      - "Tint all shadows with #272835 rgba values, never neutral gray — this keeps elevation on-brand."

    don_t:
      - "Don't introduce additional chromatic accent colors — the system runs on slate neutrals plus one violet."
      - "Don't use #000000 for body text; the brand reads as #36394a (Graphite) which is softer and more distinctive."
      - "Don't center body copy in feature sections — only hero headlines and testimonials are centered; everything else is left-aligned."
      - "Don't apply heavy drop shadows to standard cards; 1px borders are the default, shadows are earned by elevation tier."
      - "Don't set headlines at line-height > 1.10; the 0.95 line-height at 76px is a deliberate compression."
      - "Don't use the Inter font for display sizes above 32px — Britti Sans owns the display tier, Inter owns body and UI."
      - "Don't use rounded shapes above 16px radius for standard UI; 80px and 999px are reserved for special elements (tab toggles, full-width brand blocks)."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Default page background |"
    info: "| 1 | Cloud Section | `#f6f8fa` | Alternating section bands, feature blocks |"
    info: "| 2 | Frost Block | `#eceff3` | Inset content blocks, subtle callouts |"
    info: "| 3 | Card Surface | `#ffffff` | Elevated cards on tinted sections, 12px radius, hairline border |"
    info: "| 4 | Terminal | `#1a1b25` | Dark code/terminal surfaces embedded in light pages |"

  elevation:

    - "**Hero product preview:** `rgba(0,0,0,0.05) 0px 2px 5px 0px, rgba(0,0,0,0.04) 0px 9px 9px 0px, rgba(0,0,0,0.02) 0px 20px 12px 0px, rgba(0,0,0,0.01) 0px 35px 14px 0px, rgba(0,0,0,0.01) 0px 0px 0px 1px`"
    - "**Branded card:** `rgba(39,40,53,0.1) 0px 0px 0px 1px`"
    - "**Feature card (elevated):** `rgba(39,40,53,0.1) 0px 0px 0px 1px, rgba(39,40,53,0.08) 0px 24px 24px -12px, rgba(39,40,53,0.08) 0px 12px 12px -6px, rgba(39,40,53,0.08) 0px 6px 6px -3px, rgba(39,40,53,0.08) 0px 2px 2px -1px`"
    - "**Soft card (no elevation):** `rgba(39,40,53,0.05) 0px 0px 0px 1px, rgba(39,40,53,0.01) 0px 50px 20px 0px, rgba(39,40,53,0.02) 0px 30px 18px 0px, rgba(39,40,53,0.04) 0px 13px 13px 0px, rgba(39,40,53,0.05) 0px 3px 7px 0px`"

  imagery:

    info: "Imagery is minimal and functional. The hero uses a custom pixel-art mosaic of violet squares (#5e4cff, #c8ccf3, #dfdbff) as the sole decorative element. Product screenshots appear inside browser-frame cards with macOS chrome, always set on white. Code/terminal screenshots use the dark #1a1b25 surface with IBM Plex Mono and violet syntax tokens. Customer logos are monochrome #36394a in a clean 2x6 grid. Avatars in testimonials render as 80px circular crops. There is no lifestyle photography, no full-bleed images, no abstract gradients — visuals are either product, code, logo, or the violet pixel motif."

  layout:

    info: "Layout is centered max-width 1200px with generous left/right padding. The hero is split-asymmetric: left two-thirds is headline + sub + CTAs, right one-third is the pixel-art mosaic. Below the hero, content alternates between white #ffffff and #f6f8fa bands at 40px section gaps. Feature sections use 2 or 3 column card grids with 12px radii. The product preview is a single full-width card with a browser-chrome frame. Customer logos sit in a centered 2x6 grid. Testimonials are centered at 600px max-width. Navigation is a single sticky 64px white bar with logo left, links center, auth right. Density is comfortable — pages breathe with whitespace rather than packing information tightly."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #36394a (Graphite Heading)"
    - "background: #ffffff (Canvas White)"
    - "border: #cdd2d9 (Ash Border)"
    - "accent: #5e4cff (Volt Violet)"
    - "secondary surface: #f6f8fa (Cloud Mist)"
    - "primary action: #5e4cff (filled action)"

    3_5_example_component_prompts:
    - "Create a Primary Action Button: #5e4cff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "*Feature card*: White surface, 12px radius, 16px padding, 1px #cdd2d9 border, no shadow. Violet #5e4cff icon at top (24px). Heading at 24px Britti Sans Medium #36394a, letter-spacing -0.48px. Body at 16px Inter Regular #666d80, line-height 1.50."

    - "*Product preview card*: White surface with browser-chrome top bar (3 traffic-light dots, #f6f8fa). 12px radius, multi-layer shadow stack tinted #272835. Contains a product screenshot inside at full width with 8px inner padding."

    - "*Code terminal card*: #1a1b25 background, 12px radius, 16px padding. IBM Plex Mono 12px text — comments in #818898, keywords in #5e4cff, strings in #c8ccf3, plain text in #a4abb8."

    - "*Tab toggle*: 999px radius outer pill, #f6f8fa background. Two 14px Inter Medium labels, inactive in #666d80, active in #36394a on white fill with a subtle 1px #cdd2d9 border and 2px shadow. 8px 20px padding on each tab."

  signature_moves:

    info: "Three choices define Lightdash's visual identity and should be preserved across every new screen:"

    - "**One violet per viewport.** The system runs on slate. A single #5e4cff CTA per screen is the maximum chromatic load. This restraint is what makes the violet feel switched-on rather than decorative."

    - "**Britti Sans at display tier only.** The custom font appears at 48px and above. Inter handles everything below 32px. Mixing tiers creates a clear hierarchy: brand voice at the top, functional clarity below."

    - "**Slate-tinted shadows.** Every shadow in the system uses rgba versions of #272835, not neutral gray. This subtle choice means even elevated surfaces feel cut from the same brand material rather than floating in generic space."

  similar_brands:

    - "**Linear** — Same single-accent restraint (Linear's purple vs. Lightdash's violet) and the same display-headline + tight-tracking combination on a near-white canvas."
    - "**Vercel** — Monochrome-first system with a single saturated accent, hairline-bordered cards, and developer-facing code/terminal blocks embedded in light pages."
    - "**Cal.com** — Open-source dev tool with a white canvas, slate-gray typography, and a violet accent used sparingly for primary actions only."
    - "**Cursor** — Code-first product landing pages that mix a clean white UI surface with dark terminal previews, set in a custom geometric sans at large display sizes."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-cloud-mist: #f6f8fa;
          --color-frost-tint: #eceff3;
          --color-ash-border: #cdd2d9;
          --color-mist-border: #c1c7d0;
          --color-fog-text: #a4abb8;
          --color-steel-text: #818898;
          --color-slate-body: #666d80;
          --color-graphite-heading: #36394a;
          --color-midnight-ink: #272835;
          --color-onyx: #1a1b25;
          --color-volt-violet: #5e4cff;
          --color-lavender-wash: #c8ccf3;
          --color-lilac-whisper: #dfdbff;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-britti-sans-trial-semibold: 'Britti Sans Trial Semibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-britti-sans-medium: 'Britti Sans Medium', 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-inter-variable: 'Inter Variable', 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-britti-sans-trial-regular: 'Britti Sans Trial Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-micro-5: 'Micro 5', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.14px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.63;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1px;
          --text-display: 76px;
          --leading-display: 0.95;
          --tracking-display: -1.9px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* 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-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 26px;
          --radius-full: 80px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 12px;
          --radius-badges: 999px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
          --radius-special: 80px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 9px 9px 0px, rgba(0, 0, 0, 0.02) 0px 20px 12px 0px, rgba(0, 0, 0, 0.01) 0px 35px 14px 0px, rgba(0, 0, 0, 0.01) 0px 0px 0px 1px;
          --shadow-subtle: rgba(18, 18, 18, 0.1) 0px 1px 1px 0px, rgba(18, 18, 18, 0.1) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(39, 40, 53, 0.1) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(39, 40, 53, 0.1) 0px 0px 0px 1px, rgba(39, 40, 53, 0.08) 0px 24px 24px -12px, rgba(39, 40, 53, 0.08) 0px 12px 12px -6px, rgba(39, 40, 53, 0.08) 0px 6px 6px -3px, rgba(39, 40, 53, 0.08) 0px 2px 2px -1px;
          --shadow-subtle-4: rgba(39, 40, 53, 0.05) 0px 0px 0px 1px, rgba(39, 40, 53, 0.01) 0px 50px 20px 0px, rgba(39, 40, 53, 0.02) 0px 30px 18px 0px, rgba(39, 40, 53, 0.04) 0px 13px 13px 0px, rgba(39, 40, 53, 0.05) 0px 3px 7px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.01) 0px 54px 21px 0px, rgba(0, 0, 0, 0.05) 0px 30px 18px 0px, rgba(0, 0, 0, 0.09) 0px 13px 13px 0px, rgba(0, 0, 0, 0.1) 0px 3px 7px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-cloud-section: #f6f8fa;
          --surface-frost-block: #eceff3;
          --surface-card-surface: #ffffff;
          --surface-terminal: #1a1b25;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-cloud-mist: #f6f8fa;
          --color-frost-tint: #eceff3;
          --color-ash-border: #cdd2d9;
          --color-mist-border: #c1c7d0;
          --color-fog-text: #a4abb8;
          --color-steel-text: #818898;
          --color-slate-body: #666d80;
          --color-graphite-heading: #36394a;
          --color-midnight-ink: #272835;
          --color-onyx: #1a1b25;
          --color-volt-violet: #5e4cff;
          --color-lavender-wash: #c8ccf3;
          --color-lilac-whisper: #dfdbff;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-britti-sans-trial-semibold: 'Britti Sans Trial Semibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-britti-sans-medium: 'Britti Sans Medium', 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-inter-variable: 'Inter Variable', 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-britti-sans-trial-regular: 'Britti Sans Trial Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-micro-5: 'Micro 5', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.14px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.63;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1px;
          --text-display: 76px;
          --leading-display: 0.95;
          --tracking-display: -1.9px;
        
          /* 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-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 26px;
          --radius-full: 80px;
          --radius-full-2: 999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 9px 9px 0px, rgba(0, 0, 0, 0.02) 0px 20px 12px 0px, rgba(0, 0, 0, 0.01) 0px 35px 14px 0px, rgba(0, 0, 0, 0.01) 0px 0px 0px 1px;
          --shadow-subtle: rgba(18, 18, 18, 0.1) 0px 1px 1px 0px, rgba(18, 18, 18, 0.1) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(39, 40, 53, 0.1) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(39, 40, 53, 0.1) 0px 0px 0px 1px, rgba(39, 40, 53, 0.08) 0px 24px 24px -12px, rgba(39, 40, 53, 0.08) 0px 12px 12px -6px, rgba(39, 40, 53, 0.08) 0px 6px 6px -3px, rgba(39, 40, 53, 0.08) 0px 2px 2px -1px;
          --shadow-subtle-4: rgba(39, 40, 53, 0.05) 0px 0px 0px 1px, rgba(39, 40, 53, 0.01) 0px 50px 20px 0px, rgba(39, 40, 53, 0.02) 0px 30px 18px 0px, rgba(39, 40, 53, 0.04) 0px 13px 13px 0px, rgba(39, 40, 53, 0.05) 0px 3px 7px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.01) 0px 54px 21px 0px, rgba(0, 0, 0, 0.05) 0px 30px 18px 0px, rgba(0, 0, 0, 0.09) 0px 13px 13px 0px, rgba(0, 0, 0, 0.1) 0px 3px 7px 0px;
        }