tuple___style_reference:
  info: "> Developer pair-programming workshop — clean white surfaces, one violet CTA, playful multi-color accents, and a dark band that makes the light sections breathe."

  theme: "light"

  info: "Tuple's design language is a developer's pair-programming workshop: bright, airy light surfaces with a single confident violet CTA that makes the primary action unmistakable. The visual identity leans on a four-color accent palette — violet, blue, orange, green — used sparingly as headings, icons, and the product-screenshot wallpapers, while the structural UI stays zinc-neutral and quiet. Typography pairs Inter Variable for everything functional with DM Mono for small all-caps labels and section eyebrows, which is a signature devtool move: mono labels say 'this is a product built by engineers' without resorting to skeuomorphism. Components are mostly flat and bordered rather than heavily shadowed, with a mix of 8px and 12px radii giving cards a modern-but-not-too-soft feel. The page alternates between generous white space sections and one dramatic dark band, creating rhythm without monotony."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Iris | `#6a5ed9` | `--color-iris` | Primary action — CTA buttons, filled links, active nav states |"
    info: "| Cobalt | `#3f71d4` | `--color-cobalt` | Brand accent — icons, heading highlights, link hover; the most-used chromatic color in illustrations and product chrome |"
    info: "| Coral | `#db5434` | `--color-coral` | Brand accent — headings, product-screenshot strokes, decorative highlights; warm counterweight to the cool blues and violets |"
    info: "| Sprout | `#1bb152` | `--color-sprout` | Green text accent for links, tags, and emphasized short phrases |"
    info: "| Emerald | `#16a34a` | `--color-emerald` | Green text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color |"
    info: "| Mint | `#22c55e` | `--color-mint` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color |"
    info: "| Lime | `#4ade80` | `--color-lime` | Green text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color |"
    info: "| Crimson | `#ef4444` | `--color-crimson` | Red wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color |"
    info: "| Saffron | `#ffb929` | `--color-saffron` | Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color |"
    info: "| Zinc 50 | `#fafafa` | `--color-zinc-50` | Page background, hero canvas |"
    info: "| Zinc 100 | `#f4f4f5` | `--color-zinc-100` | Subtle section backgrounds, footer strips, surface wash |"
    info: "| Zinc 200 | `#e4e4e7` | `--color-zinc-200` | Hairline borders, dividers, card outlines, input borders — the most-used neutral, structural backbone of every component |"
    info: "| Zinc 300 | `#d4d4d8` | `--color-zinc-300` | Muted borders, disabled strokes, secondary dividers |"
    info: "| Zinc 400 | `#a1a1aa` | `--color-zinc-400` | Muted icon fills, placeholder text, tertiary text |"
    info: "| Zinc 500 | `#71717a` | `--color-zinc-500` | Secondary text, caption text, helper copy, muted nav links |"
    info: "| Zinc 600 | `#52525b` | `--color-zinc-600` | Card outlines, emphasized borders, tertiary surface strokes |"
    info: "| Zinc 700 | `#3f3f46` | `--color-zinc-700` | Body text accent, medium-emphasis text, card inner surfaces on dark sections |"
    info: "| Zinc 800 | `#27272a` | `--color-zinc-800` | Primary text color, heading text, dark card surfaces, dark band backgrounds |"
    info: "| Zinc 900 | `#18181b` | `--color-zinc-900` | Deepest dark — dark section canvases, near-black surfaces |"
    info: "| White | `#ffffff` | `--color-white` | Card surfaces, button text on dark, raised content backgrounds |"
    info: "| Mint Wash | `#dcfce7` | `--color-mint-wash` | Gray wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"
    info: "| Saffron Wash | `#fdc75c` | `--color-saffron-wash` | Warm section background, decorative wash |"

  tokens___typography:

    inter_variable___primary_ui_and_heading_typeface__inter_carries_all_functional_text__body_copy_at_16px_400__nav_at_14px_500__subheadings_at_18_20px_600__and_large_display_headlines_at_48_60px_700__the_custom_font_features_cv05__cv06__ss01_refine_the_alternate_glyphs_and_tabular_figures___a_devtool_grade_choice_that_signals_engineering_precision__weight_700_is_reserved_for_the_hero_headline__weight_500_dominates_nav_and_buttons__weight_400_carries_body_copy_____font_inter_variable:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12, 13, 14, 16, 18, 20, 24, 36, 48, 60"
      - "**Line height:** 1.00–1.63"
      - "**OpenType features:** `\"cv05\", \"cv06\", \"ss01\"`"
      - "**Role:** Primary UI and heading typeface. Inter carries all functional text: body copy at 16px/400, nav at 14px/500, subheadings at 18–20px/600, and large display headlines at 48–60px/700. The custom font features (cv05, cv06, ss01) refine the alternate glyphs and tabular figures — a devtool-grade choice that signals engineering precision. Weight 700 is reserved for the hero headline; weight 500 dominates nav and buttons; weight 400 carries body copy."

    dm_mono___monospace_label_and_eyebrow_typeface__dm_mono_appears_in_small_all_caps_section_tags_e_g___workflow__nav_micro_labels__and_technical_micro_copy__letter_spacing_opens_up_to_0_05em_0_1em_at_smaller_sizes__which_is_the_mono_label_signature__tight_tracking_would_look_cramped__the_extra_air_gives_labels_a__badge__presence__custom_features_ss03__ss04__ss05_activate_stylistic_alternates_for_the_mono_character_set_____font_dm_mono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 11, 12, 13, 14, 16"
      - "**Line height:** 1.33–1.63"
      - "**Letter spacing:** 0.05em–0.1em at 11–14px"
      - "**OpenType features:** `\"ss03\", \"ss04\", \"ss05\"`"
      - "**Role:** Monospace label and eyebrow typeface. DM Mono appears in small all-caps section tags (e.g. 'WORKFLOW'), nav micro-labels, and technical micro-copy. Letter-spacing opens up to 0.05em–0.1em at smaller sizes, which is the mono-label signature: tight tracking would look cramped, the extra air gives labels a 'badge' presence. Custom features (ss03, ss04, ss05) activate stylistic alternates for the mono character set."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.6px | `--text-caption` |"
      info: "| body | 16px | 1.63 | — | `--text-body` |"
      info: "| subheading | 18px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.43 | — | `--text-heading-sm` |"
      info: "| heading | 24px | 1.33 | — | `--text-heading` |"
      info: "| heading-lg | 36px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.14 | — | `--text-display` |"
      info: "| display-lg | 60px | 1 | — | `--text-display-lg` |"

  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: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 192 | 192px | `--spacing-192` |"
      info: "| 240 | 240px | `--spacing-240` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 4-8px |"
      info: "| tags | 9999px |"
      info: "| cards | 8-12px |"
      info: "| links | 4px |"
      info: "| inputs | 8px |"
      info: "| buttons | 12px |"
      info: "| large-cards | 16-24px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) ...` | `--shadow-subtle-2` |"
      info: "| xl | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | `--shadow-xl` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.75) 0px 0px 0px 1px` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(255, 255, 255, 0.15) 0px 0px 0px 1px inset` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-subtle-5` |"
      info: "| subtle-6 | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle-6` |"
      info: "| xl-2 | `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1)...` | `--shadow-xl-2` |"
      info: "| xl-3 | `rgba(0, 0, 0, 0.05) 0px 0px 80px 0px, rgba(0, 0, 0, 0.02)...` | `--shadow-xl-3` |"

    layout:

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

  components:

    primary_cta_button:
      role: "Main action button"

      info: "Filled violet (#6a5ed9) button with white text, 12px radius, padding 12px 24px. Inter Variable 16px weight 500. Used for 'Start your free trial' and primary conversion actions."

    ghost_nav_button:
      role: "Secondary navigation action"

      info: "Transparent background, Zinc 800 text, no border, 4–8px radius. Used for 'Log in' and similar low-emphasis nav items."

    outlined_button:
      role: "Secondary action"

      info: "White background, 1px Zinc 200 border, Zinc 800 text, 12px radius, 12px 24px padding. Used for 'Sign up' and tertiary actions in nav."

    pill_tag:
      role: "Label or badge"

      info: "Full 9999px radius, small padding 4px 12px, Inter or DM Mono 12–13px text. Used for status indicators and category pills."

    mono_section_eyebrow:
      role: "Category label above headings"

      info: "DM Mono 11–13px weight 500, letter-spacing 0.05em–0.1em, uppercase, in a brand accent color (green for 'WORKFLOW'). Sits centered above section headings."

    feature_card:
      role: "Content card for feature sections"

      info: "White or Zinc 100 surface, 1px Zinc 200 border, 8–12px radius, 16–24px padding. Optional 0 25px 50px -12px shadow for elevated variants. Contains icon, heading, and body copy."

    logo_strip_row:
      role: "Social proof / trusted-by section"

      info: "Horizontal row of grayscale partner logos at single opacity, spaced 48–80px apart, centered, under a small DM Mono eyebrow label. Logos desaturated to Zinc 500 to reduce visual competition."

    hero_headline:
      role: "Primary page headline"

      info: "Inter Variable 48–60px weight 700, Zinc 900, centered, tight line-height 1.0–1.14. The hero signature is centered text + subtitle + single violet CTA on a clean white canvas."

    product_screenshot_frame:
      role: "App preview image"

      info: "Rounded 8–12px radius, optional subtle shadow, displayed full-bleed or contained within a gradient or solid backdrop. The product screenshot itself includes colorful macOS window chrome."

    dark_feature_card:
      role: "Card on dark band sections"

      info: "Zinc 800 or near-black surface, 1px subtle border, 8–12px radius. Contains folder/file-tree UI or feature illustrations. Used inside the dark 'Built for developers' section."

    nav_bar:
      role: "Top navigation"

      info: "Horizontal bar, white or transparent background, 1px Zinc 200 bottom border. Logo left, nav links center or right, CTA right. Sticky on scroll with subtle shadow. Height 56–64px."

    footer:
      role: "Site footer"

      info: "Zinc 100 background, 1px Zinc 200 top border, multi-column link layout, small Inter 13–14px text in Zinc 500. Centered logo above link grid."

  do_s_and_don_ts:

    do:
      - "Use #6a5ed9 exclusively for the primary CTA — never repurpose it for icons, headings, or decoration; its scarcity is what makes it feel like an action"
      - "Use Inter Variable for all body, nav, button, and heading text; reserve DM Mono strictly for uppercase eyebrows, technical labels, and micro-copy"
      - "Set buttons and cards to 12px radius; use 8px for inputs and nav items; use 9999px only for true pill tags and status badges"
      - "Set hero headlines to 48–60px weight 700 in Zinc 900; center the headline, subtitle, and CTA vertically with generous 64–96px section gaps above and below"
      - "Pair every section with a DM Mono uppercase eyebrow in a brand accent color (green, blue, or orange) — this is the signature move that signals devtool credibility"
      - "Anchor light sections on #fafafa canvas with #ffffff card surfaces and #e4e4e7 hairline borders; do not introduce new background colors without a structural role"
      - "Use the dark band (#18181b) sparingly — once per page — to make surrounding light sections feel brighter by contrast"
      - "Reference exact token values (colors, radii, spacing) from this spec when generating new components; do not estimate or interpolate"

    don_t:
      - "Do not use #3f71d4, #db5434, #1bb152, or other brand accents as button fills — they are decorative, not action colors"
      - "Do not apply heavy drop shadows to standard cards; use 1px borders and subtle 0 1px 3px shadows, reserving 0 25px 50px shadow for hero-level elevation only"
      - "Do not mix Inter and DM Mono in the same sentence or label — DM Mono is for standalone labels and eyebrows only"
      - "Do not center-align body copy or feature descriptions — keep body text left-aligned for readability, reserving center alignment for hero and section intros"
      - "Do not introduce a new accent color outside the four-color brand palette (violet, blue, orange, green)"
      - "Do not use #27272a for decorative text on light backgrounds where #71717a secondary text would suffice; reserve Zinc 800 for headings and primary copy"
      - "Do not stack multiple colored gradients in the same view; one gradient or color-wash per section maximum"
      - "Do not use border-radius above 12px for functional components (buttons, inputs, cards) — 16–24px should only appear on oversized feature cards or decorative frames"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#fafafa` | Page background, hero and feature sections |"
    info: "| 1 | Card | `#ffffff` | Raised product cards, inner content blocks |"
    info: "| 2 | Wash | `#f4f4f5` | Subtle alternating section background, footer strip |"
    info: "| 3 | Dark Band | `#18181b` | Dark feature section (e.g. 'Built for developers') |"
    info: "| 4 | Color Wash | `#dcfce7` | Decorative green section background for variety |"

  elevation:

    - "**Card:** `0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1)`"
    - "**Bordered card:** `0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05)`"
    - "**Elevated card / modal:** `0 25px 50px -12px rgba(0,0,0,0.25)`"
    - "**Heavy-outlined card:** `0 0 0 1px rgba(0,0,0,0.75)`"
    - "**Sticky nav:** `0 0 0 1px rgba(0,0,0,0.05), 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)`"

  imagery:

    info: "Product screenshots dominate the visual language: full macOS window captures with menu bars, code editors, and colorful gradient wallpapers (green-to-coral, violet-to-blue) serve as the primary 'hero images'. These are always contained within a rounded frame (8–12px radius), never full-bleed. Illustration style is minimal — small line-art character mascots (the cartoon gnome/bird figures flanking the Linux announcement pill) and simple folder/file-tree icons in the dark section. No lifestyle photography, no stock imagery. The dark 'Built for developers' section uses a subtle radial-line concentric-circle motif behind the UI card, giving depth without illustration. Icon style: thin-stroke outlined icons in brand accent colors (violet, blue, green), consistent 1.5–2px stroke weight. Imagery is decorative-atmosphere and product-showcase — it sells the product, not the brand."

  layout:

    info: "Max-width ~1200px centered content area with generous side padding. Hero is a centered vertical stack: nav bar → DM Mono eyebrow pill → large display headline → subtitle → single violet CTA → free-trial micro-copy → product screenshot frame. The page alternates between light and dark bands in a consistent rhythm: light hero → light product showcase → light trusted-by logo strip → dark 'Built for developers' feature band. Each band is separated by 64–96px vertical padding, with seamless flow (no dividers between bands). Feature sections inside the dark band use centered 2-column or 3-column card grids. The overall density is spacious and breathing — sections rarely compete for attention, and the single dark band creates a strong rhythm reset mid-page. Navigation is a clean top bar with logo left, links center, CTA right; sticky on scroll with a subtle border."

  agent_prompt_guide:

    quick_color_reference:
    - "Text: #27272a (primary), #71717a (secondary), #a1a1aa (muted)"
    - "Background: #fafafa (page), #ffffff (card), #f4f4f5 (wash), #18181b (dark band)"
    - "Border: #e4e4e7 (hairline), #d4d4d8 (muted), #52525b (emphasized)"
    - "Accent: #3f71d4 (blue), #db5434 (orange), #1bb152 (green)"
    - "primary action: #6a5ed9 (filled action)"

    3_5_example_component_prompts:

    - "*Create a hero section:* Background #fafafa. Centered DM Mono eyebrow pill in #1bb152 (13px, letter-spacing 0.1em, uppercase, 4px 12px padding, 9999px radius). Headline 'Headline here' at 48px Inter Variable weight 700, #27272a, line-height 1.14. Subtitle at 18px Inter weight 400, #71717a, max-width 640px. Violet CTA button (#6a5ed9 fill, white text, Inter 16px weight 500, 12px radius, 12px 24px padding). Section padding 96px top/bottom."

    - "*Create a feature card:* White background, 1px #e4e4e7 border, 12px radius, 24px padding. Small brand-color icon (32px, #3f71d4 stroke). Heading 'Feature title' at 20px Inter weight 600, #27272a. Body copy at 16px Inter weight 400, #71717a, line-height 1.63."

    - "*Create a dark feature band:* Background #18181b, 96px vertical padding. Centered DM Mono eyebrow in #4ade80 ('WORKFLOW', 13px, 0.1em letter-spacing, uppercase). Heading at 36px Inter weight 700, #ffffff. Content card with #27272a surface, 1px #3f3f46 border, 12px radius, containing a file-tree UI with folder icons in #3f71d4 and #1bb152."

    - "*Create a trusted-by logo strip:* Background #fafafa. Centered DM Mono eyebrow 'TRUSTED BY THOUSANDS OF TEAMS' in #71717a (12px, 0.1em letter-spacing, uppercase, #1bb152 word). Below: single horizontal row of 5–6 grayscale partner logos spaced 64px apart, all desaturated to #71717a opacity."

    - "*Create a product screenshot frame:* Rounded container at 12px radius with 0 25px 50px -12px rgba(0,0,0,0.25) shadow. Inside: a macOS window screenshot showing a code editor over a green-to-coral gradient wallpaper. Frame max-width 900px, centered, with 64px section padding above and below."

  signature_choices:

    four_color_accent_palette__not_one: "Most brands commit to a single accent color. Tuple uses four — violet, blue, orange, green — but enforces a strict rule: violet is action, the other three are decoration. This lets the CTA stay singular and urgent while giving illustrations, product chrome, and section eyebrows a playful multi-color personality."

    mono_eyebrows_above_every_section: "A DM Mono uppercase label in a brand accent color sits above section headings throughout the site. This is the strongest 'devtool identity' signal: it borrows the terminal/CLI aesthetic without being a code block, and it creates consistent vertical rhythm across sections."

    dark_band_as_rhythm_device: "Most of the page is light. One dark band appears mid-page (the 'Built for developers' section), creating a dramatic contrast reset that makes the surrounding light sections feel brighter. The dark band also hosts the most technical UI (file tree, folder icons), reinforcing the 'product for engineers' message."

    zinc_based_neutral_scale: "Tuple avoids blue-tinted or warm-tinted grays — the neutrals are true zinc (cool but achromatic). This keeps the four accent colors visually pure; warm grays would muddy the coral and saffron, cool grays would fight the cobalt and iris."

  similar_brands:

    - "**Linear** — Same devtool sensibility — zinc neutrals, single accent color for CTAs, generous whitespace, mono labels for technical identity"
    - "**Vercel** — Dark-band rhythm device, minimal bordered cards, 8–12px radius, Inter Variable as primary typeface with mono accents"
    - "**GitLab** — Purple primary CTA on light surfaces, multi-color accent palette used as decoration, section-eyebrow pattern above headings"
    - "**CodeSandbox** — Devtool brand that uses colorful gradient product screenshots as hero imagery, clean white canvas, confident single-color CTA"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-iris: #6a5ed9;
          --color-cobalt: #3f71d4;
          --color-coral: #db5434;
          --color-sprout: #1bb152;
          --color-emerald: #16a34a;
          --color-mint: #22c55e;
          --color-lime: #4ade80;
          --color-crimson: #ef4444;
          --color-saffron: #ffb929;
          --color-zinc-50: #fafafa;
          --color-zinc-100: #f4f4f5;
          --color-zinc-200: #e4e4e7;
          --color-zinc-300: #d4d4d8;
          --color-zinc-400: #a1a1aa;
          --color-zinc-500: #71717a;
          --color-zinc-600: #52525b;
          --color-zinc-700: #3f3f46;
          --color-zinc-800: #27272a;
          --color-zinc-900: #18181b;
          --color-white: #ffffff;
          --color-mint-wash: #dcfce7;
          --color-saffron-wash: #fdc75c;
        
          /* Typography — Font Families */
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.6px;
          --text-body: 16px;
          --leading-body: 1.63;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.43;
          --text-heading: 24px;
          --leading-heading: 1.33;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.14;
          --text-display-lg: 60px;
          --leading-display-lg: 1;
        
          /* 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-96: 96px;
          --spacing-128: 128px;
          --spacing-192: 192px;
          --spacing-240: 240px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-96px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 4-8px;
          --radius-tags: 9999px;
          --radius-cards: 8-12px;
          --radius-links: 4px;
          --radius-inputs: 8px;
          --radius-buttons: 12px;
          --radius-large-cards: 16-24px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.75) 0px 0px 0px 1px;
          --shadow-subtle-4: rgba(255, 255, 255, 0.15) 0px 0px 0px 1px inset;
          --shadow-subtle-5: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
          --shadow-subtle-6: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
          --shadow-xl-3: rgba(0, 0, 0, 0.05) 0px 0px 80px 0px, rgba(0, 0, 0, 0.02) 0px 8px 8px 0px;
        
          /* Surfaces */
          --surface-canvas: #fafafa;
          --surface-card: #ffffff;
          --surface-wash: #f4f4f5;
          --surface-dark-band: #18181b;
          --surface-color-wash: #dcfce7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-iris: #6a5ed9;
          --color-cobalt: #3f71d4;
          --color-coral: #db5434;
          --color-sprout: #1bb152;
          --color-emerald: #16a34a;
          --color-mint: #22c55e;
          --color-lime: #4ade80;
          --color-crimson: #ef4444;
          --color-saffron: #ffb929;
          --color-zinc-50: #fafafa;
          --color-zinc-100: #f4f4f5;
          --color-zinc-200: #e4e4e7;
          --color-zinc-300: #d4d4d8;
          --color-zinc-400: #a1a1aa;
          --color-zinc-500: #71717a;
          --color-zinc-600: #52525b;
          --color-zinc-700: #3f3f46;
          --color-zinc-800: #27272a;
          --color-zinc-900: #18181b;
          --color-white: #ffffff;
          --color-mint-wash: #dcfce7;
          --color-saffron-wash: #fdc75c;
        
          /* Typography */
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.6px;
          --text-body: 16px;
          --leading-body: 1.63;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.43;
          --text-heading: 24px;
          --leading-heading: 1.33;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.14;
          --text-display-lg: 60px;
          --leading-display-lg: 1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-192: 192px;
          --spacing-240: 240px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.75) 0px 0px 0px 1px;
          --shadow-subtle-4: rgba(255, 255, 255, 0.15) 0px 0px 0px 1px inset;
          --shadow-subtle-5: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
          --shadow-subtle-6: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
          --shadow-xl-3: rgba(0, 0, 0, 0.05) 0px 0px 80px 0px, rgba(0, 0, 0, 0.02) 0px 8px 8px 0px;
        }