column___style_reference:
  info: "> Halftone atlas meets Swiss ledger — a banking API console floating over a dotted globe, where the map IS the hero and the card IS the illustration."

  theme: "light"

  info: "Column operates as a Swiss-precision banking ledger projected onto a halftone atlas. The canvas is paper-white with a sparse, deep-indigo typographic system where weight 300 headlines feel engineered rather than decorated. Color is rationed: the interface stays roughly 95% achromatic while a single Ember Orange anchors featured case-study cards, and teal pill badges provide functional punctuation. The world-map dot pattern is the signature visual motif — small circular points arranged in a grid, tinted across a full spectrum to form continents — doubling as atmospheric texture and geographic context."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#f6f6f8` | `--color-paper-white` | Page background canvas |"
    info: "| Card White | `#ffffff` | `--color-card-white` | Card surfaces, elevated panels, customer logo strips |"
    info: "| Deep Ink | `#011821` | `--color-deep-ink` | Primary text, hero headlines, logo wordmark |"
    info: "| Carbon | `#12161e` | `--color-carbon` | Secondary headings, nav links, icon strokes |"
    info: "| Slate | `#7c7f88` | `--color-slate` | Muted body copy, helper text, paragraph copy |"
    info: "| Mist | `#e3e4e8` | `--color-mist` | Hairline borders, dividers, subtle separators |"
    info: "| Fog | `#a9acb6` | `--color-fog` | Disabled states, subtle icon strokes, caption text |"
    info: "| Graphite | `#3b3e47` | `--color-graphite` | Code snippets, monospace backgrounds, dense UI fills |"
    info: "| Deep Indigo | `#111a4a` | `--color-deep-indigo` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Ember Orange | `#ec652b` | `--color-ember-orange` | Featured accent — case-study card charts, high-attention highlights, brand warmth in an otherwise cold palette |"
    info: "| Midnight Teal | `#023247` | `--color-midnight-teal` | Secondary headings, deep text on light surfaces, code block headers |"
    info: "| Forest Teal | `#167e6c` | `--color-forest-teal` | Teal supporting accent for decorative details and low-frequency emphasis |"
    info: "| Sky Blue | `#7ea7e9` | `--color-sky-blue` | Map dot pattern primary fill, illustration secondary tone |"
    info: "| Pale Cyan | `#c1e8ef` | `--color-pale-cyan` | Pill badge backgrounds, soft wash fills, map dot tint |"
    info: "| Mint | `#44b48b` | `--color-mint` | Green supporting accent for decorative details and low-frequency emphasis |"
    info: "| Lavender | `#9f7aee` | `--color-lavender` | Map gradient midpoint, illustration secondary |"

  tokens___typography:

    suisseintl___primary_brand_typeface___a_swiss_neo_grotesque_used_for_all_ui_text__headlines__body__and_nav__weight_300_at_60px_hero_size_is_the_signature__whispers_authority_instead_of_shouting_it__negative_letter_spacing_tightens_as_size_grows__0_03em_at_60px___0_01em_at_20px__normal_at_14px_and_below__the__salt__2_feature_setting_enables_stylistic_alternates_that_give_the_type_a_distinctive__slightly_humanist_character_within_a_swiss_skeleton_____font_suisseintl:
      - "**Substitute:** Inter or GT America for the geometric structure; the 'salt' alternates are non-replicable"
      - "**Weights:** 300, 400, 500, 600"
      - "**Sizes:** 11px, 12px, 14px, 16px, 18px, 20px, 24px, 28px, 40px, 48px, 52px, 60px"
      - "**Line height:** 1.00–1.50 (tightens with size: 1.50 at body, 1.10 at display)"
      - "**Letter spacing:** -1.8px at 60px, -1.56px at 52px, -1.44px at 48px, -0.8px at 40px, -0.56px at 28px, -0.48px at 24px, -0.2px at 20px, -0.18px at 18px, normal at 16px and below"
      - "**OpenType features:** `'salt' 2`"
      - "**Role:** Primary brand typeface — a Swiss neo-grotesque used for all UI text, headlines, body, and nav. Weight 300 at 60px hero size is the signature: whispers authority instead of shouting it. Negative letter-spacing tightens as size grows (-0.03em at 60px, -0.01em at 20px, normal at 14px and below). The 'salt' 2 feature setting enables stylistic alternates that give the type a distinctive, slightly humanist character within a Swiss skeleton."

    sfmono___secondary_mono___inline_code_references__api_call_snippets__technical_metadata__appears_inside_cards_and_feature_blocks_at_10_12px__the__cv11__feature_setting_selects_character_variant_11_a_single_story__a__style_____font_sfmono:
      - "**Substitute:** JetBrains Mono or IBM Plex Mono"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 12px"
      - "**Line height:** 1.50"
      - "**OpenType features:** `'cv11', 'salt' 2`"
      - "**Role:** Secondary mono — inline code references, API call snippets, technical metadata. Appears inside cards and feature blocks at 10–12px. The 'cv11' feature setting selects character variant 11 (a single-story 'a' style)."

    suisseintlmono___branded_mono_for_badges__section_labels_e_g___trusted_at_scale___developer_first__and_uppercase_category_tags__pairs_with_suisseintl_to_keep_the_mono_family_visually_consistent_with_the_proportional_text_____font_suisseintlmono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 12px, 14px"
      - "**Line height:** 1.50"
      - "**OpenType features:** `'cv11', 'salt' 2`"
      - "**Role:** Branded mono for badges, section labels (e.g. 'TRUSTED AT SCALE', 'DEVELOPER FIRST'), and uppercase category tags. Pairs with SuisseIntl to keep the mono family visually consistent with the proportional text."

    inter___fallback___system_text_in_certain_blocks__used_sparingly__suisseintl_dominates_____font_inter:
      - "**Substitute:** System UI sans-serif"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10px, 12px, 14px, 16px, 20px, 24px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** -0.0300em, -0.0200em"
      - "**OpenType features:** `'cv11'`"
      - "**Role:** Fallback / system text in certain blocks. Used sparingly; SuisseIntl dominates."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.43 | -0.18px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.38 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 28px | 1.3 | -0.56px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.1 | -0.8px | `--text-heading-lg` |"
      info: "| display | 60px | 1.1 | -1.8px | `--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: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 8px |"
      info: "| links | 8px |"
      info: "| badges | 9999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(17, 26, 74, 0.1) 0px 1px 3px 0px, rgba(17, 26, 74, 0...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(87, 90, 100, 0.12) 0px 0px 0px 1px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"
      info: "| xl | `rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03...` | `--shadow-xl` |"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |"
      info: "| subtle-4 | `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgb(255, 255, 255) 0p...` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px` | `--shadow-subtle-5` |"

    layout:

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

  components:

    primary_filled_button:
      role: "Primary call-to-action (Sign up, Get started)"

      info: "Background #111a4a (Deep Indigo), text #ffffff, 8px radius, 12px 20px padding, SuisseIntl 500 at 14px. No visible border; the blue-tinted shadow (rgba 17,26,74 0.1) provides the only depth. Includes a right-arrow glyph (→) after the label, 14px, #ffffff at 80% opacity."

    ghost___arrow_link_button:
      role: "Secondary action (Documentation, Learn about our bank)"

      info: "Transparent background, text #011821 (Deep Ink), 8px radius, 12px 16px padding, SuisseIntl 500 at 14px. 1px solid #e3e4e8 border. Includes a right-chevron (>) glyph. Hover darkens text to #111a4a."

    section_pill_badge:
      role: "Category/section label (TRUSTED AT SCALE, DEVELOPER FIRST)"

      info: "Background #c1e8ef (Pale Cyan), text #167e6c (Forest Teal), 9999px radius (fully pill-shaped), 6px 12px padding, SuisseIntlMono 400 at 11px, uppercase, letter-spacing 0.5px. Appears above section headlines as a quiet signpost."

    financial_data_card:
      role: "Hero / feature mockup — visual storytelling device"

      info: "White card (#ffffff), 8px radius, 24px padding, blue-tinted shadow stack. Contains: an account header (SuisseIntl 500 14px #011821 with small flag icon), a balance line (SuisseIntl 300 28px #011821, tracking -0.56px), and optional subtext (SuisseIntlMono 400 10px #7c7f88). A thin #e3e4e8 divider separates the header from the balance. These cards are the site's primary illustration device — they replace product photography."

    case_study_accent_card:
      role: "Featured customer proof (Brex, etc.)"

      info: "White outer card, 8px radius, blue-tinted shadow, 32px padding. Contains a smaller inner card with #ec652b (Ember Orange) fill at 8px radius — the only place on the page where saturated orange appears at scale. The orange card holds a sparkline chart (white stroke) and balance figure in white. The orange is rationed: one card per case study, nowhere else."

    customer_logo_strip:
      role: "Social proof — 'trusted by' row"

      info: "White card, 8px radius, 1px #e3e4e8 border (no shadow on the strip itself), 32px vertical padding. Logos are grayscale (#12161 or #7c7f88) at uniform 20–24px height, spaced with 48px column gap. The strip is contained, never full-bleed."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent background, 20px vertical padding, sits on the Paper White canvas. Wordmark left in Deep Ink #011821, SuisseIntl 500 18px. Nav links in Carbon #12161, SuisseIntl 400 14px. Right-side actions: 'Sign in' as ghost link, 'Get started' as a Primary Filled Button. No visible nav background or shadow."

    api_code_snippet_block:
      role: "Developer-facing content / inline documentation"

      info: "Transparent or Graphite #3b3e47 background, 8px radius, 16px padding. SFMono 400 10px, text in #c1e8ef (Pale Cyan) for syntax. Appears inside Financial Data Cards to show the API call alongside the financial result — reinforcing the developer-first positioning."

    world_map_dot_pattern:
      role: "Atmospheric background motif"

      full_bleed_decorative_layer: "a regular grid of small filled circles (~2px diameter) arranged to form a world map. Dots are tinted with a 6-stop linear gradient (orange → purple → blue → cyan → green → yellow) running diagonally at 125deg. Dot density varies — denser over landmasses, sparser over oceans — creating the halftone effect. This is the page's signature visual; it appears in the hero, behind section text, and at the foot of pages."

    feature_icon:
      role: "Small inline icon in feature lists and cards"

      info: "Circular or square 24px icon containers with a fill icon at 16px in #111a4a (Deep Indigo). Used for bullet-style feature lists (e.g. 'Bank Accounts', 'Domestic Payments'). Background often #f6f6f8 or transparent."

    block_quote___testimonial:
      role: "Customer quote card"

      info: "Left-aligned text, SuisseIntl 400 18px in #011821, preceded by a large opening quotation mark (#a9acb6, 40px, SuisseIntl 300). Attribution line below in SuisseIntl 400 14px #7c7f88. No card wrapper — quotes sit directly on the Paper White canvas."

    section_headline_pair:
      role: "Section-level heading pattern"

      two_tone_headline: "first phrase in #011821 Deep Ink, second phrase in #a9acb6 Fog (the gray-on-gray fade creates the 'continuation' effect seen on 'Moving hundreds of billions a month for the world's most sophisticated tech companies and financial institutions'). SuisseIntl 300, 40px, tracking -0.8px."

  do_s_and_don_ts:

    do:
      - "Use #f6f6f8 as the page background; use #ffffff only for card surfaces — never invert this hierarchy."
      - "Set all button and card radii to 8px; use 9999px exclusively for pill badges and tags."
      - "Reach for SuisseIntl weight 300 at 40–60px for headlines; tighten tracking to -0.02em at 40px and -0.03em at 60px and above."
      - "Apply the blue-tinted shadow stack (rgba 17,26,74 0.1) to every elevated card so elevation reads as on-brand."
      - "Reserve #ec652b Ember Orange for a single accent card per case study — ration it; never use it for buttons, links, or backgrounds."
      - "Use the Forest Teal / Pale Cyan pill badge (#c1e8ef bg, #167e6c text) as the only section-label pattern."
      - "Let the halftone dot world map breathe as a full-bleed background motif — pair it with ample white space and never overlay busy content on the densest parts of the map."

    don_t:
      - "Do not use pure #ffffff as a page background; the Paper White #f6f6f8 canvas is what makes the design feel intentional rather than blank."
      - "Do not fill buttons with Deep Ink #011821 — that is the text color. The brand button color is Deep Indigo #111a4a."
      - "Do not introduce a second accent color alongside Ember Orange; the page is built around one chromatic accent at a time."
      - "Do not set hero headlines in weight 600 or above; weight 300 is the signature — bold headlines break the engineering-precision feel."
      - "Do not use 0px or 4px radii for cards or buttons; the consistent 8px radius is a load-bearing design choice."
      - "Do not add drop shadows in pure black (rgba 0,0,0); every shadow must carry the blue tint (rgba 17,26,74) to stay on-brand."
      - "Do not place photographs or lifestyle imagery as primary visuals — the site's visual language is UI-card mockups and the halftone map, not photography."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f6f6f8` | Full-page background; the only color filling the page |"
    info: "| 1 | Card | `#ffffff` | All content surfaces, logo cards, data cards, nav bar |"
    info: "| 2 | Elevated | `#ffffff` | Hovered cards, feature mockups; distinguished from base by blue-tinted shadow rather than color shift |"

  elevation:

    - "**Card / Data panel:** `rgba(17, 26, 74, 0.1) 0px 1px 3px 0px, rgba(17, 26, 74, 0.05) 0px 1px 0px 0px, inset rgba(255, 255, 255, 0.5) 0px 1px 0px 0px, inset rgba(255, 255, 255, 0.5) 0px 1px 4px 0px`"
    - "**Nav / Button hairline:** `rgba(87, 90, 100, 0.12) 0px 0px 0px 1px`"
    - "**Floating card / mockup:** `rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03) 0px 22px 18px 0px, rgba(0, 0, 0, 0.03) 0px 12px 10px 0px, rgba(0, 0, 0, 0.04) 0px 7px 5px 0px, rgba(0, 0, 0, 0.07) 0px 3px 2px 0px`"
    - "**Hovered button:** `rgba(0, 0, 0, 0.05) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0px`"

  imagery:

    info: "The site has no traditional photography. Visual storytelling is done through two devices: (1) the halftone dot world map, a full-bleed decorative background made of small colored circles forming continents, tinted with a 6-stop diagonal gradient (orange → purple → blue → cyan → green → yellow); and (2) UI mockup cards — financial data panels, API code snippets, and sparkline charts rendered as if they were real product screens. Case-study sections pair a customer's brand color (e.g. Brex orange) as a single accent fill inside a white card. Icons are small, filled, and indigo (#111a4a) at 16px inside 24px containers. The overall visual density is low — the map and cards do the work, the surrounding space does the rest."

  layout:

    info: "Max-width 1200px centered content, with full-bleed background layers. The hero is a two-column split: left holds the headline, subhead, and dual CTA; right holds a floating Financial Data Card overlapping a secondary code snippet card, both with heavy blue-tinted drop shadows. Subsequent sections alternate between contained text blocks and wide visual bands. The 'Trusted at Scale' section uses a left-aligned text block beside a full-height halftone map background, with a contained customer-logo card sitting at the bottom of the section. Case-study blocks are 2-column: text left, mockup card right. Section gaps are 80px. Navigation is a transparent top bar with no background fill. The page never uses sidebar navigation or mega-menus — all nav is flat and top-aligned."

  gradient_system:

    info: "Two gradient patterns define the brand's color language. The World Map Gradient is a 6-stop diagonal: linear-gradient(125deg, #d65620 0%, #9f7aee 14%, #4575cd 32%, #71d2f0 50%, #44b48b 68%, #f4df69 85%) — used exclusively on the halftone dot map to tint landmasses across warm-to-cool-to-warm spectrum. The Hero Bloom Gradient is a radial: radial-gradient(29.88% 184.91% at 6.55% -48.11%, #771c86 0%, #111a4a 100%) — used behind hero cards for an off-screen magenta-to-indigo wash. These are the only two gradients in the system; never introduce a third."

  map_dot_pattern_specification:

    info: "The halftone map is built on a 6px dot grid. Dot diameter: 1.5–2px. Grid spacing: 6–8px. Dot opacity varies by geographic region (land = 0.7–1.0, water = 0–0.2). Each dot's fill is sampled from the World Map Gradient based on its position on the 125deg diagonal. The pattern bleeds off all four edges of its container; the map shape is never cropped to a bounding box."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #011821"
    - "background: #f6f6f8"
    - "card: #ffffff"
    - "border: #e3e4e8"
    - "muted text: #7c7f88"
    - "brand / primary action: no distinct CTA color"
    - "accent: #ec652b (rationed — one card per case study)"

    info: "Example Component Prompts:"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Create a section label pill badge: Pale Cyan background (#c1e8ef), Forest Teal text (#167e6c), 9999px radius, 6px 12px padding, SuisseIntlMono 400 11px uppercase, letter-spacing 0.5px. Place it directly above a section headline."

    - "Create a case-study section: two-column layout. Left column has a 28px SuisseIntl weight 300 headline (#011821) with body copy in 16px weight 400 #7c7f88. Right column holds a white card (8px radius, 32px padding, floating multi-stop drop shadow) containing a smaller inner card filled with #ec652b Ember Orange (8px radius) showing a white sparkline and a balance figure in white SuisseIntl 300 24px."

    - "Create a customer logo strip: white card, 8px radius, 1px #e3e4e8 border (no shadow), 32px vertical padding, logos rendered in grayscale (#12161e or #7c7f88) at 20–24px height with 48px column gap. Container max-width 1200px centered."


  similar_brands:

    - "**Mercury** — Same restrained near-monochrome palette with a single restrained brand color, Swiss-style neo-grotesque typography, and financial-data-card-as-hero pattern"
    - "**Ramp** — Similar white-canvas fintech aesthetic with pill badges, contained customer logo strips, and card-based feature mockups"
    - "**Plaid** — Same API-first banking positioning and developer-targeted code snippets rendered as inline UI; similar halftone/geometric background patterns"
    - "**Stripe** — Same Swiss-precise typography approach (Suisse/Suisse Intl family), tight letter-spacing at large sizes, and gradient-backed hero treatments"
    - "**Wise** — Similar globally-positioned fintech with map-backed hero motifs and a clean indigo-on-white typographic system"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #f6f6f8;
          --color-card-white: #ffffff;
          --color-deep-ink: #011821;
          --color-carbon: #12161e;
          --color-slate: #7c7f88;
          --color-mist: #e3e4e8;
          --color-fog: #a9acb6;
          --color-graphite: #3b3e47;
          --color-deep-indigo: #111a4a;
          --color-ember-orange: #ec652b;
          --color-midnight-teal: #023247;
          --color-forest-teal: #167e6c;
          --color-sky-blue: #7ea7e9;
          --color-pale-cyan: #c1e8ef;
          --color-mint: #44b48b;
          --color-lavender: #9f7aee;
        
          /* Typography — Font Families */
          --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sfmono: 'SFMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-suisseintlmono: 'SuisseIntlMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.43;
          --tracking-body-lg: -0.18px;
          --text-subheading: 20px;
          --leading-subheading: 1.38;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.48px;
          --text-heading: 28px;
          --leading-heading: 1.3;
          --tracking-heading: -0.56px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.8px;
          --text-display: 60px;
          --leading-display: 1.1;
          --tracking-display: -1.8px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --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-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-100: 100px;
          --spacing-144: 144px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 8px;
          --radius-links: 8px;
          --radius-badges: 9999px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
        
          /* Shadows */
          --shadow-subtle: rgba(17, 26, 74, 0.1) 0px 1px 3px 0px, rgba(17, 26, 74, 0.05) 0px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset;
          --shadow-subtle-2: rgba(87, 90, 100, 0.12) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
          --shadow-xl: rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03) 0px 22px 18px 0px, rgba(0, 0, 0, 0.03) 0px 12px 10px 0px, rgba(0, 0, 0, 0.04) 0px 7px 5px 0px, rgba(0, 0, 0, 0.07) 0px 3px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
          --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgb(255, 255, 255) 0px 0px 0px 1px inset;
          --shadow-subtle-5: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-canvas: #f6f6f8;
          --surface-card: #ffffff;
          --surface-elevated: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #f6f6f8;
          --color-card-white: #ffffff;
          --color-deep-ink: #011821;
          --color-carbon: #12161e;
          --color-slate: #7c7f88;
          --color-mist: #e3e4e8;
          --color-fog: #a9acb6;
          --color-graphite: #3b3e47;
          --color-deep-indigo: #111a4a;
          --color-ember-orange: #ec652b;
          --color-midnight-teal: #023247;
          --color-forest-teal: #167e6c;
          --color-sky-blue: #7ea7e9;
          --color-pale-cyan: #c1e8ef;
          --color-mint: #44b48b;
          --color-lavender: #9f7aee;
        
          /* Typography */
          --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sfmono: 'SFMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-suisseintlmono: 'SuisseIntlMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.43;
          --tracking-body-lg: -0.18px;
          --text-subheading: 20px;
          --leading-subheading: 1.38;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.48px;
          --text-heading: 28px;
          --leading-heading: 1.3;
          --tracking-heading: -0.56px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.8px;
          --text-display: 60px;
          --leading-display: 1.1;
          --tracking-display: -1.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-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-100: 100px;
          --spacing-144: 144px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
        
          /* Shadows */
          --shadow-subtle: rgba(17, 26, 74, 0.1) 0px 1px 3px 0px, rgba(17, 26, 74, 0.05) 0px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset;
          --shadow-subtle-2: rgba(87, 90, 100, 0.12) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
          --shadow-xl: rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03) 0px 22px 18px 0px, rgba(0, 0, 0, 0.03) 0px 12px 10px 0px, rgba(0, 0, 0, 0.04) 0px 7px 5px 0px, rgba(0, 0, 0, 0.07) 0px 3px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
          --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgb(255, 255, 255) 0px 0px 0px 1px inset;
          --shadow-subtle-5: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
        }