clickup____style_reference:
  info: "> Violet-lit productivity cockpit on white"

  theme: "light"

  info: "ClickUp presents a productivity command center on a clean white canvas — a SaaS brand that uses a single vivid violet as its primary voice against an otherwise achromatic interface. The visual rhythm is dense and information-rich: large confident display headlines (Plus Jakarta Sans at 60-76px, weight 800) that occupy generous whitespace, paired with compact body text and tightly-packed product UIs shown as the hero itself. Surfaces are flat with subtle blue-tinted shadows rather than dramatic elevation, and the brand violet (#7b68ee) appears sparingly on primary actions, the logo, and a few accent moments. The overall feel is utilitarian but premium — a product showcase where the software IS the hero, framed by clean typographic hierarchy and a restrained palette punctuated by that single signature purple."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Brand Violet | `#7b68ee` | `--color-brand-violet` | Primary brand color for the logo, primary CTAs, active states, and brand accents — this single violet carries 90% of the chromatic identity |"
    info: "| Signal Blue | `#0091ff` | `--color-signal-blue` | Secondary accent for badges, icons, and the Agents/Brain feature highlights — a cool counterpoint to the violet, often appearing in conic-gradient sweeps |"
    info: "| Ultra Violet | `#6647f0` | `--color-ultra-violet` | Deeper violet variant for hover states and selected/active surfaces — gives the brand a darker dimension when needed |"
    info: "| Muted Violet | `#514b81` | `--color-muted-violet` | Desaturated violet for secondary text, subdued borders, and tonal backgrounds where brand presence is needed without full saturation |"
    info: "| Midnight Ink | `#090c1d` | `--color-midnight-ink` | Primary heading and body text — a near-black with a cool blue undertone that harmonizes with the violet palette |"
    info: "| Charcoal | `#292d34` | `--color-charcoal` | Secondary text, icon strokes, and high-frequency border color — the workhorse neutral that defines most UI chrome |"
    info: "| Carbon | `#202023` | `--color-carbon` | High-contrast neutral action fill for primary buttons on light surfaces. |"
    info: "| Graphite | `#1a202c` | `--color-graphite` | Subtle heading color variant for lower-prominence headings and dark-on-dark contrast |"
    info: "| Slate | `#646464` | `--color-slate` | Muted body text, placeholder copy, and secondary navigation text |"
    info: "| Steel | `#7c828d` | `--color-steel` | Tertiary text and disabled-state labels — a cool gray that recedes without disappearing |"
    info: "| Fog | `#b3b3b3` | `--color-fog` | Light borders, inactive icons, and dividers on light surfaces |"
    info: "| Ash | `#838383` | `--color-ash` | Mid-gray for badges, secondary icons, and subtle text annotations |"
    info: "| Mist | `#d9d9d9` | `--color-mist` | Hairline dividers and table row separators |"
    info: "| Cloud | `#e8e8e8` | `--color-cloud` | Subtle card borders, ghost-button borders, and light surface tints |"
    info: "| Paper | `#f8f9fa` | `--color-paper` | Alternate surface background for striped sections and inset cards |"
    info: "| Frost | `#edf6fd` | `--color-frost` | Light neutral action fill for buttons on dark surfaces |"
    info: "| Linen | `#e9ebf0` | `--color-linen` | Section background tint for alternating bands — a barely-visible warm gray that creates subtle separation |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, and filled button text |"
    info: "| True Black | `#000000` | `--color-true-black` | Reserved for high-contrast icon fills, SVG strokes, and rare emphasis elements |"
    info: "| Abyss | `#090909` | `--color-abyss` | Near-black card background for dark surface cards on light pages |"
    info: "| Violet Glow | `#b38cff` | `--color-violet-glow` | Light violet for decorative strokes, code highlighting, and accent washes |"

  tokens___typography:

    plus_jakarta_sans___primary_typeface_for_all_ui_text___from_display_headlines_weight_800_at_60_76px_down_to_navigation_and_body__the_weight_650_between_600_and_700_is_a_custom_intermediate_that_gives_buttons_and_subheadings_a_distinctive_confident_density__tight_negative_tracking_scales_with_size___0_05em_at_76px_compresses_the_headline_for_impact_____font_plus_jakarta_sans:
      - "**Substitute:** DM Sans or Manrope"
      - "**Weights:** 400, 500, 650, 700, 800"
      - "**Sizes:** 14, 16, 26, 34, 40, 42, 48, 52, 60, 76"
      - "**Line height:** 1.05, 1.10, 1.12, 1.14, 1.18, 1.20, 1.25, 1.43, 1.50"
      - "**Letter spacing:** -3.8px at 76px, -2.0px at 48px, -0.18px at 16px, -0.14px at 14px"
      - "**OpenType features:** `\"calt\" 0`"
      - "**Role:** Primary typeface for all UI text — from display headlines (weight 800 at 60-76px) down to navigation and body. The weight 650 (between 600 and 700) is a custom intermediate that gives buttons and subheadings a distinctive confident density. Tight negative tracking scales with size: -0.05em at 76px compresses the headline for impact."

    inter___secondary_typeface_for_supporting_text__fine_print__badges__and_dense_ui_labels_at_12_19px__inter_appears_where_information_density_trumps_brand_expression___tooltips__small_captions__and_form_fields_____font_inter:
      - "**Substitute:** system-ui or IBM Plex Sans"
      - "**Weights:** 400, 500, 600, 650, 700"
      - "**Sizes:** 8, 9, 12, 13, 14, 15, 16, 17, 18, 19"
      - "**Line height:** 1.00, 1.14, 1.33, 1.37, 1.38, 1.43, 1.50"
      - "**Letter spacing:** -0.76px at 19px, -0.32px at 16px, -0.18px at 14px, -0.16px at 12px"
      - "**OpenType features:** `\"calt\" 0, \"clig\" 0, \"liga\" 0`"
      - "**Role:** Secondary typeface for supporting text, fine print, badges, and dense UI labels at 12-19px. Inter appears where information density trumps brand expression — tooltips, small captions, and form fields."

    sometype_mono___monospaced_typeface_for_badge_labels__feature_tags__and_the_all_caps_micro_copy_that_marks_category_labels_e_g___introducing_clickup_4_0__the_0_06em_positive_tracking_creates_a_tracked_out__technical_character_that_contrasts_the_geometric_plus_jakarta_sans_____font_sometype_mono:
      - "**Substitute:** JetBrains Mono or IBM Plex Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12, 14, 16, 24, 40"
      - "**Line height:** 1.25, 1.29, 1.38, 1.43"
      - "**Letter spacing:** 0.72px at 12px, 0.84px at 14px, 2.4px at 40px"
      - "**Role:** Monospaced typeface for badge labels, feature tags, and the all-caps micro-copy that marks category labels (e.g. 'Introducing ClickUp 4.0'). The 0.06em positive tracking creates a tracked-out, technical character that contrasts the geometric Plus Jakarta Sans."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | -0.14px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | -0.18px | `--text-body-sm` |"
      info: "| body | 18px | 1.43 | -0.18px | `--text-body` |"
      info: "| subheading | 26px | 1.25 | -0.52px | `--text-subheading` |"
      info: "| heading-sm | 40px | 1.18 | -1.6px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.14 | -2px | `--text-heading` |"
      info: "| heading-lg | 60px | 1.1 | -3px | `--text-heading-lg` |"
      info: "| display | 76px | 1.05 | -3.8px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    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: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| pills | 54px |"
      info: "| badges | 12px |"
      info: "| buttons | 9px |"
      info: "| largeCards | 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: "| xl | `rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset, rgba(...` | `--shadow-xl` |"
      info: "| subtle-2 | `rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, ...` | `--shadow-subtle-2` |"
      info: "| sm | `rgba(13, 21, 48, 0.04) 0px 4px 4px 0px` | `--shadow-sm` |"
      info: "| xl-2 | `rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset` | `--shadow-xl-2` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 12px"

  components:

    primary_filled_button:
      role: "Main call-to-action"

      info: "Filled with #202023 (carbon black), white text in Plus Jakarta Sans weight 650 at 16px, 9px border-radius, padding 9px 18px. The subtle blue-tinted shadow (rgba(13,21,48,0.04) 0px 4px 4px 0px) lifts it just enough to feel tappable. No brand violet fill — the primary action is deliberately neutral, letting the violet live in the logo and accents."

    violet_brand_button:
      role: "Branded action or feature highlight"

      info: "Filled with #7b68ee, white text, 9px radius, padding 9px 18px. Used selectively for product-specific CTAs tied to the violet brand color rather than generic page actions."

    pill_tag_button:
      role: "Category filter or feature tag"

      info: "Very rounded shape at 54px border-radius, padding 3px 12px, light background (#f8f9fa or #ffffff), 1px border in #e8e8e8 or #d9d9d9, Plus Jakarta Sans 14px weight 500. The extreme radius (54px) makes them feel like removable tags rather than buttons."

    ghost_button:
      role: "Secondary action or nav item"

      info: "No fill, transparent background, border 1px in #e8e8e8, text in #292d34 at 16px weight 500, 9px radius, padding 9px 18px. Renders as a thin outlined rectangle that recedes against the white canvas."

    navigation_link:
      role: "Top-level nav items"

      info: "Text-only in Plus Jakarta Sans 15-16px weight 500, color #292d34, no underline. Paired with a small chevron icon for dropdowns. Padding 8px 12px with 4px vertical spacing."

    feature_badge:
      role: "Product or category label (e.g. 'Super Agents')"

      info: "Pill shape with 12px radius, white or violet-tinted background, small Plus Jakarta Sans 13-14px weight 500 or Sometype Mono caps. Often paired with an icon and a right-arrow chevron. Padding 3px 12px."

    product_icon_tile:
      role: "Feature grid item in the '100+ products' section"

      info: "Square tile with no fill, centered outlined icon (#7b68ee or #292d34 stroke), Plus Jakarta Sans label 14px below. Arranged in a 7-column grid with even spacing, creating a uniform catalog feel."

    product_ui_card:
      role: "Hero visual or product screenshot container"

      info: "White surface, 12px border-radius, subtle shadow stack (rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px), padding 0px (screenshot fills edge-to-edge with rounded corners via overflow:hidden). Contains a simulated app interface."

    feature_highlight_card:
      role: "Three-column value prop (Context Switching/Missing/Stitching)"

      info: "White surface with very subtle blue-tinted shadow, 12px radius, padding 24px. Contains a decorative illustration at top, then a 26px Plus Jakarta Sans weight 700 heading, then 16px body text in #646464."

    context_problem_card:
      role: "Pain-point illustration card"

      info: "Light gray (#f8f9fa) background, 12px radius, padding 16px, contains floating app icons connected by a tangled gray line illustration. Represents fragmented workflow visually."

    announcement_banner:
      role: "Top-of-page promotional strip"

      info: "Full-width #f8f9fa or white background, centered text in Plus Jakarta Sans 14-15px weight 500, small chevron link at the end. Very thin vertical padding (8-12px)."

    hero_headline:
      role: "Primary page headline"

      info: "Plus Jakarta Sans weight 800 at 60-76px, color #090c1d, letter-spacing -3.0 to -3.8px, line-height 1.05-1.10. The extreme weight combined with very tight tracking creates a condensed, high-density headline that dominates the hero without needing color."

    checklist_item:
      role: "Value prop bullet (Save money, Save time, Create infinite productivity)"

      info: "Inline flex with small violet checkmark icon (#7b68ee), bold label in #090c1d, then lighter descriptor text in #292d34 at 16px. No bullet points — the checkmark is the only marker."

    section_divider:
      role: "Visual break between content sections"

      info: "Whitespace-driven separator at 80px section gaps. Occasionally a 1px #e8e8e8 horizontal rule. No decorative elements — the breathing room IS the divider."

  do_s_and_don_ts:

    do:
      - "Use Plus Jakarta Sans weight 800 with -0.05em letter-spacing for all display headlines above 48px"
      - "Reserve #7b68ee violet for the logo, brand moments, and feature highlights — not generic page CTAs"
      - "Use #202023 (carbon) as the primary filled button background — the system trusts neutral over chromatic for action surfaces"
      - "Apply 9px border-radius to buttons and 12px to cards — the 3px delta creates a clear component hierarchy"
      - "Use #e9ebf0 (linen) for alternating section bands to create rhythm without color noise"
      - "Pair every value prop headline with a small violet checkmark icon (#7b68ee) — the check is a signature motif"
      - "Keep body text at 16-18px Plus Jakarta Sans 400 with -0.011em tracking for a dense, scannable reading experience"

    don_t:
      - "Don't use #7b68ee as a filled background for generic page CTAs — reserve it for brand-tied moments"
      - "Don't apply shadows heavier than rgba(0,0,0,0.1) — the system uses blue-tinted micro-shadows, not dramatic elevation"
      - "Don't use border-radius larger than 24px on cards — 54px is exclusively for pill tags, and 12px is the card standard"
      - "Don't introduce new accent colors — the palette is deliberately tight: one violet, one blue, and grays"
      - "Don't use weight 400 for headlines — display text must be 700+ to carry the brand's confident density"
      - "Don't fill the page with the conic gradient — it's a hero/showcase device, not a background pattern"
      - "Don't use letter-spacing wider than -0.01em on any text larger than 14px — the system tracks tighter as size increases"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background — the dominant surface for most content |"
    info: "| 1 | Linen Band | `#e9ebf0` | Alternating section background for visual rhythm |"
    info: "| 2 | Paper | `#f8f9fa` | Inset card surfaces and subtle elevated panels |"
    info: "| 3 | Frost | `#edf6fd` | Cool-tinted info regions and selected/highlighted states |"
    info: "| 4 | Carbon | `#202023` | Dark surface cards and inverted sections |"

  elevation:

    - "**Product UI Card:** `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`"
    - "**Elevated Card:** `rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, 165, 0.04) 0px 3px 3px -1.5px, rgba(18, 43, 165, 0.04) 0px 6px 6px -3px, rgba(18, 43, 165, 0.04) 0px 12px 12px -6px`"
    - "**Dark Card Inset Highlight:** `rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset`"
    - "**Button:** `rgba(13, 21, 48, 0.04) 0px 4px 4px 0px`"

  imagery:

    info: "Product UI screenshots are the dominant visual language — the hero is a literal screenshot of the ClickUp app showing a multi-pane workspace with sidebar navigation, task lists, and colored priority badges. These screenshots are presented as living product evidence rather than marketing illustrations. Supporting visuals include: outlined icon grids (7-column uniform layout of product feature icons), tangled-line illustrations representing workflow fragmentation, and floating app-logo clusters with gray connecting threads. There is no photography — no people, no office shots, no lifestyle imagery. Decorative conic-gradient swirls appear sparingly to signal AI/agent features. Icons are outlined with thin (1.5-2px) strokes, monochromatic, and rendered at uniform size within grids."

  layout:

    info: "The page model is max-width 1200px centered with generous side padding. The hero uses a split layout: left column holds the headline + CTA + checklist (roughly 45% width), right column holds the product UI screenshot (roughly 55% width). Below the hero, sections alternate between full-width centered text blocks and three-column card grids. Section rhythm is consistent at 80px vertical gaps, with alternating #ffffff and #e9ebf0 backgrounds creating subtle visual bands. The navigation is a single sticky top bar with a left-aligned logo, centered nav links (Brain AI, Product, Solutions, Learn, Pricing, Enterprise), and right-aligned action buttons (Get a Demo, Login, Sign Up). An announcement banner sits above the nav. The '100+ products' section is a dense 7-column icon grid that fills the viewport width. Content density is compact — the design favors information-rich sections with tight spacing over spacious breathing room."

  agent_prompt_guide:

    quick_color_reference:
    - "Primary text: #090c1d (Midnight Ink)"
    - "Secondary text: #292d34 (Charcoal)"
    - "Muted text: #646464 (Slate)"
    - "Page background: #ffffff (Pure White)"
    - "Brand accent: #7b68ee (Brand Violet)"
    - "primary action: #202023 (filled action)"

    example_component_prompts:

    - "**Hero Section**: White (#ffffff) background. Headline at 60px Plus Jakarta Sans weight 800, #090c1d, letter-spacing -3.0px, line-height 1.10. Subtext at 18px weight 400, #646464. Primary CTA: carbon (#202023) filled button, white text weight 650, 9px radius, padding 9px 18px. Right side: product UI screenshot card with 12px radius and subtle blue-tinted shadow."

    - "**Feature Grid Tile**: Center-aligned square tile, no background, outlined icon at 32px in #7b68ee with 1.5px stroke. Label below in Plus Jakarta Sans 14px weight 500, #292d34. Arranged in 7-column grid with 24px gaps."

    - "**Pill Tag Button**: Background #f8f9fa, 1px border #d9d9d9, 54px border-radius, padding 3px 12px. Text in Plus Jakarta Sans 14px weight 500, #292d34. No shadow."

    - "**Three-Column Value Prop Card**: White surface, 12px radius, padding 24px, subtle shadow (rgba(0,0,0,0.1) 0px 1px 3px 0px). Heading 26px Plus Jakarta Sans weight 700, #090c1d. Body 16px weight 400, #646464."

    - "**Announcement Banner**: Full-width #f8f9fa background, centered text 14px Plus Jakarta Sans weight 500, #292d34, with right-arrow chevron link. Vertical padding 8px."

  similar_brands:

    - "**Linear** — Same product-UI-as-hero approach with a single vivid accent color (Linear's purple/violet parallels ClickUp's #7b68ee) against a near-monochrome white interface"
    - "**Notion** — Similar compact density, product screenshot heroes, and a restrained palette with minimal color noise — though Notion uses a warmer near-black"
    - "**Asana** — Both position product UI screenshots as the hero visual and use tight typographic hierarchy with display-weight headlines over clean white surfaces"
    - "**Monday.com** — Comparable product-catalog grid sections showing feature icons, and a similar use of vibrant accent colors (Monday's multi-color palette vs ClickUp's single violet) against white"
    - "**Airtable** — Same approach of showing the actual product interface in marketing contexts, with comparable typographic confidence and a flat, shadow-light design language"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-brand-violet: #7b68ee;
          --color-signal-blue: #0091ff;
          --color-ultra-violet: #6647f0;
          --color-muted-violet: #514b81;
          --color-midnight-ink: #090c1d;
          --color-charcoal: #292d34;
          --color-carbon: #202023;
          --color-graphite: #1a202c;
          --color-slate: #646464;
          --color-steel: #7c828d;
          --color-fog: #b3b3b3;
          --color-ash: #838383;
          --color-mist: #d9d9d9;
          --color-cloud: #e8e8e8;
          --color-paper: #f8f9fa;
          --color-frost: #edf6fd;
          --color-linen: #e9ebf0;
          --color-pure-white: #ffffff;
          --color-true-black: #000000;
          --color-abyss: #090909;
          --color-violet-glow: #b38cff;
        
          /* Typography — Font Families */
          --font-plus-jakarta-sans: 'Plus Jakarta Sans', 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-sometype-mono: 'Sometype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: -0.14px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.18px;
          --text-body: 18px;
          --leading-body: 1.43;
          --tracking-body: -0.18px;
          --text-subheading: 26px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.52px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 1.18;
          --tracking-heading-sm: -1.6px;
          --text-heading: 48px;
          --leading-heading: 1.14;
          --tracking-heading: -2px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -3px;
          --text-display: 76px;
          --leading-display: 1.05;
          --tracking-display: -3.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-w650: 650;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-lg: 9px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-3xl-4: 39px;
          --radius-3xl-5: 45px;
          --radius-full: 54px;
          --radius-full-2: 653px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-pills: 54px;
          --radius-badges: 12px;
          --radius-buttons: 9px;
          --radius-largecards: 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-xl: rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset, rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset;
          --shadow-subtle-2: rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, 165, 0.04) 0px 3px 3px -1.5px, rgba(18, 43, 165, 0.04) 0px 6px 6px -3px, rgba(18, 43, 165, 0.04) 0px 12px 12px -6px;
          --shadow-sm: rgba(13, 21, 48, 0.04) 0px 4px 4px 0px;
          --shadow-xl-2: rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-linen-band: #e9ebf0;
          --surface-paper: #f8f9fa;
          --surface-frost: #edf6fd;
          --surface-carbon: #202023;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-brand-violet: #7b68ee;
          --color-signal-blue: #0091ff;
          --color-ultra-violet: #6647f0;
          --color-muted-violet: #514b81;
          --color-midnight-ink: #090c1d;
          --color-charcoal: #292d34;
          --color-carbon: #202023;
          --color-graphite: #1a202c;
          --color-slate: #646464;
          --color-steel: #7c828d;
          --color-fog: #b3b3b3;
          --color-ash: #838383;
          --color-mist: #d9d9d9;
          --color-cloud: #e8e8e8;
          --color-paper: #f8f9fa;
          --color-frost: #edf6fd;
          --color-linen: #e9ebf0;
          --color-pure-white: #ffffff;
          --color-true-black: #000000;
          --color-abyss: #090909;
          --color-violet-glow: #b38cff;
        
          /* Typography */
          --font-plus-jakarta-sans: 'Plus Jakarta Sans', 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-sometype-mono: 'Sometype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: -0.14px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.18px;
          --text-body: 18px;
          --leading-body: 1.43;
          --tracking-body: -0.18px;
          --text-subheading: 26px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.52px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 1.18;
          --tracking-heading-sm: -1.6px;
          --text-heading: 48px;
          --leading-heading: 1.14;
          --tracking-heading: -2px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -3px;
          --text-display: 76px;
          --leading-display: 1.05;
          --tracking-display: -3.8px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-lg: 9px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-3xl-4: 39px;
          --radius-3xl-5: 45px;
          --radius-full: 54px;
          --radius-full-2: 653px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
          --shadow-xl: rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset, rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset;
          --shadow-subtle-2: rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, 165, 0.04) 0px 3px 3px -1.5px, rgba(18, 43, 165, 0.04) 0px 6px 6px -3px, rgba(18, 43, 165, 0.04) 0px 12px 12px -6px;
          --shadow-sm: rgba(13, 21, 48, 0.04) 0px 4px 4px 0px;
          --shadow-xl-2: rgba(255, 255, 255, 0.08) 0px -32px 64px 0px inset;
        }