vercel___style_reference:
  info: "> Prismatic monolith on graph paper — a single dark triangle refracts a full conic spectrum against a faint engineer grid, and everything else on the page is pure black-on-white precision."

  theme: "light"

  info: "Vercel operates as a near-monochrome engineering workspace: off-white canvas (#fafafa), near-black text and filled actions (#171717, never pure #000), hairline borders (#ebebeb) carrying structure instead of shadows, and one signature burst of prismatic color from the conic-gradient prism logo that appears exactly once per screen. The type system is exclusively Geist — a geometric grotesque with very tight negative tracking at large sizes (-0.06em at 48px) and no decorative weights — giving the entire UI a precise, lab-instrument quality. Density is compact: 6px radii dominate cards and buttons, 12px padding wraps most surfaces, and 2–8px gaps control rhythm. Color is rationed — chromatic blue, red, and teal appear only as decorative illustration accents; the product chrome stays strictly achromatic with the prism gradient serving as the only chromatic punctuation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Graphite | `#171717` | `--color-graphite` | Primary text, filled action buttons, primary borders. The near-black is intentional — not #000000 — giving surfaces a slightly warmer, inkier feel than pure black would |"
    info: "| Marble White | `#fafafa` | `--color-marble-white` | Page canvas, card surfaces, elevated panels. Not pure white — the faint warmth reads as paper rather than screen |"
    info: "| Pearl | `#ffffff` | `--color-pearl` | Inset surface white used inside cards, button text on dark fills, and inner panel highlights |"
    info: "| Hairline | `#ebebeb` | `--color-hairline` | Default border color for cards, nav, inputs, dividers. Carries structural separation in place of shadows |"
    info: "| Felt Gray | `#4d4d4d` | `--color-felt-gray` | Secondary text, muted nav items, icon strokes, sub-labels. The workhorse mid-gray for everything between primary text and placeholder |"
    info: "| Smoke | `#666666` | `--color-smoke` | Tertiary nav text, metadata, timestamps, non-active UI labels |"
    info: "| Ash | `#a8a8a8` | `--color-ash` | Placeholder text, disabled borders, low-priority dividers |"
    info: "| Fog | `#7d7d7d` | `--color-fog` | Subtle body text, helper copy, inactive tab labels |"
    info: "| Ice Tint | `#f0fbff` | `--color-ice-tint` | Subtle cool wash used on a small number of list rows and decorative callouts — the only chromatic surface tint in the system |"
    info: "| Carbon | `#000000` | `--color-carbon` | SVG icon fills, logo stroke, and true-black contrast moments. Used sparingly in vector artwork rather than as a UI fill |"
    info: "| Prism Blue | `#52aeff` | `--color-prism-blue` | Decorative illustration accent — appears in the prismatic gradient, diagrams, and hero refraction. Not used for UI controls or text |"
    info: "| Prism Red | `#e5484d` | `--color-prism-red` | Decorative illustration accent within the prism spectrum and diagram strokes only |"
    info: "| Prism Teal | `#45dec5` | `--color-prism-teal` | Decorative illustration accent within the prism spectrum and diagram strokes only |"
    info: "| Vercel Blue | `#0070f3` | `--color-vercel-blue` | Reserved brand blue for links, logo-tied CTAs, and the occasional chart highlight. Appears more in nav and footer chrome than body content |"

  tokens___typography:

    geist___primary_ui_and_display_typeface__geist_is_custom_vercel_built_and_brings_a_neo_grotesque_geometry_with_very_tight_default_tracking_that_distinguishes_it_from_inter_or_system_sans__used_for_everything_from_12px_captions_to_48px_hero_headlines__the_weight_400_does_the_work_of_a_bold_on_most_sites___vercel_rarely_exceeds_600_even_for_headings__letting_negative_letter_spacing_do_the_visual_weight____font_geist:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px"
      - "**Line height:** 1.00, 1.17, 1.20, 1.25, 1.33, 1.43, 1.50, 1.52, 1.56, 1.80"
      - "**Letter spacing:** -0.02em at 16px, tightening to -0.06em at 48px. Body text sits at roughly -0.02em; display climbs to -0.06em"
      - "**OpenType features:** `\"liga\" on, \"ss05\" on`"
      - "**Role:** Primary UI and display typeface. Geist is custom (Vercel-built) and brings a neo-grotesque geometry with very tight default tracking that distinguishes it from Inter or system sans. Used for everything from 12px captions to 48px hero headlines. The weight 400 does the work of a bold on most sites — Vercel rarely exceeds 600 even for headings, letting negative letter-spacing do the visual weight"

    geist_mono___monospace_companion_for_code_blocks__terminal_output__package_names__and_inline_technical_strings__tracking_stays_at_normal___mono_type_is_allowed_to_breathe_compared_to_the_display_sans____font_geist_mono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 8px, 10px, 12px, 13px, 14px, 16px"
      - "**Line height:** 1.00, 1.20, 1.43, 1.54, 1.67"
      - "**OpenType features:** `\"liga\"`"
      - "**Role:** Monospace companion for code blocks, terminal output, package names, and inline technical strings. Tracking stays at normal — mono type is allowed to breathe compared to the display sans"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.02px | `--text-caption` |"
      info: "| body | 14px | 1.56 | -0.02px | `--text-body` |"
      info: "| heading-sm | 20px | 1.33 | -0.04px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.25 | -0.05px | `--text-heading` |"
      info: "| heading-lg | 32px | 1.2 | -0.05px | `--text-heading-lg` |"
      info: "| display | 48px | 1.17 | -0.06px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 135 | 135px | `--spacing-135` |"
      info: "| 157 | 157px | `--spacing-157` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tab | 64px |"
      info: "| cards | 6px |"
      info: "| large | 100px |"
      info: "| pills | 9999px |"
      info: "| buttons | 6px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0...` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgb(235, 235, 235) 0px 0px 0px 1px` | `--shadow-subtle-5` |"
      info: "| subtle-6 | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px` | `--shadow-subtle-6` |"
      info: "| subtle-7 | `rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0...` | `--shadow-subtle-7` |"

    layout:

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

  components:

    filled_primary_button:
      role: "Main action — used for Sign Up, Start Deploying, Deploy Now"

171717_background__ffffff_text__geist_14px_weight_500__6px_radius__8px_16px_padding__no_border__sits_flat_on_the_canvas___the_only_elevation_comes_from_the_near_black_fill_against_the_off_white_page__which_is_enough_contrast_that_no_shadow_is_needed__always_paired_with_a_14px_leading_icon_when_iconography_is_present:

    outlined_secondary_button:
      role: "Tertiary action — Get a Demo, Learn about Enterprise"

      info: "Transparent background, 1px #171717 border, #171717 text, Geist 14px weight 500, 6px radius, 8px 16px padding. Inverts cleanly on dark sections. The outlined variant is as common as the filled one — Vercel never uses a gray-filled secondary button."

    pill_navigation_chip:
      role: "Category filter tabs (AI Apps, Web Apps, Ecommerce, Marketing, Platforms)"

ffffff_background__1px_ebebeb_border__171717_text__geist_13px_weight_500__9999px_radius__6px_14px_padding__active_state__fills_to_fafafa_with_slightly_darker_border__no_shadows___the_pill_shape_and_border_do_the_work:

    top_navigation_bar:
      role: "Global header with logo, product menu, auth actions"

      info: "Sticky top, #fafafa background, 1px bottom border in #ebebeb, ~64px tall. Logo left (12px black triangle + Geist wordmark), center group of Geist 14px weight 500 nav links in #4d4d4d with chevron-down caret on dropdown items, right group contains outlined Ask AI button, Log In text link, and filled Sign Up button. All links separated by 4px gaps."

    product_feature_card:
      role: "Grid card promoting a product surface (Agents, AI Apps, Web Apps, etc.)"

ffffff_background__1px_ebebeb_border__6px_radius__24px_internal_padding__heading_in_geist_18px_weight_600_171717__description_in_geist_14px_weight_400_4d4d4d__circular_icon_container_40px__1px_ebebeb_border__icon_inside_with_a_small_right_arrow_cta_in_a_32px_circle__optional_illustration_block_at_the_bottom__cards_have_no_shadow___the_hairline_border___white_on_canvas_lift_is_the_elevation_strategy:

    hero_section:
      role: "First viewport — brand statement and primary CTAs"

fafafa_background_overlaid_with_a_very_faint_engineer_grid_1px_lines__f2f2f2_or_4__opacity_171717__40px_module__centered_stack__geist_48px_weight_500_headline_in_171717_with__0_06em_tracking__geist_16px_weight_400_subhead_in_4d4d4d__then_a_row_containing_filled_black_cta_and_outlined_cta__below_the_text__a_centered_prismatic_gradient_background_with_the_dark_triangular_vercel_prism_logo___this_is_the_only_chromatic_moment_in_the_system:

    logo_mark:
      role: "Vercel brand identity — black triangle / prism"

      custom_mark: "equilateral or isoceles triangle rendered in #171717 with sharp 0px corners, used at 16–20px in nav, 32–48px in hero. The hero variant sits over a conic gradient (gold → red → steel-blue → mint → transparent) that emanates from below, creating the signature prismatic refraction."

    prismatic_conic_gradient:
      role: "Signature brand atmosphere — appears once on hero, once on key product moments"

      conic_gradient_from_180deg_at_50__70: "transparent → gold (#eec32d) → red (#ec4b4b) → steel blue (#709ab9) → mint (#4dffbf) → transparent. Applied as a soft radial wash behind the prism logo, not as a full-bleed background. The gradient is the only place where chromatic color is used in the design system."

    engineer_grid_overlay:
      role: "Subtle structural background pattern on hero and section dividers"

      info: "1px grid lines in #f2f2f2 or 4%-opacity #171717, 40–48px module size, full-bleed across the canvas. Functions as a blueprint texture — visible on close inspection but recessive at normal viewing distance. Sometimes a small + cross-hair mark sits at the top-left grid intersection as a designer's registration mark."

    wireframe_globe_illustration:
      role: "Secondary hero visual — global infrastructure narrative"

      info: "Line-art globe drawn in #ebebeb strokes at 1px, with latitude/longitude grid lines. Small Vercel prism triangles (8px, #171717) mark deployment points along the surface. Blue accent strokes (#52aeff) radiate from select nodes to suggest active connections. No fill, no shadow — pure linework."

    code_block:
      role: "Inline code, terminal output, CLI commands"

fafafa_or_slightly_darker_f5f5f5_background__1px_ebebeb_border__6px_radius__geist_mono_12_13px_weight_400__syntax_highlighting_uses_a_restricted_palette__297a3a_green_for_strings_keywords__0070f3_blue_for_properties__7820bc_purple_for_keywords__e5484d_red_for_errors__no_language_label__no_copy_button_chrome___just_the_code:

    tab_bar:
      role: "Content switching within product sections"

      info: "Horizontal row of pill chips (9999px radius) or low-radius tabs (6px). Active tab fills with #171717 text and underlines with a 2px #171717 bar; inactive tabs are #4d4d4d. Geist 13px weight 500. No background change between active/inactive — the underline is the only state signal."

  do_s_and_don_ts:

    do:
      - "Use #171717 for all filled buttons and primary text — never #000000 for UI fills, the warmer near-black is part of the brand"
      - "Default to 6px radius for cards, buttons, and inputs; reserve 9999px (pill) only for nav chips, category filters, and tag-style elements"
      - "Apply the prismatic conic gradient exactly once per major section, always behind the triangle logo mark — it is a logo accent, not a background fill"
      - "Use Geist with negative letter-spacing proportional to size: -0.02em at 14–16px, scaling to -0.06em at 48px. Never use positive tracking on Geist"
      - "Keep the page 99% achromatic — chromatic blue, red, and teal may only appear in illustrations, the prism gradient, and code syntax highlighting"
      - "Use hairline #ebebeb borders for structural separation instead of shadows on cards, inputs, and nav — the surface lift comes from #ffffff on #fafafa, not from drop shadows"
      - "Pair every primary filled button with an outlined secondary button of the same size and type — Vercel never ships a single-CTA hero"

    don_t:
      - "Do not use #0070f3 or any chromatic color as a button background or primary CTA fill — the filled action is always #171717"
      - "Do not apply drop shadows larger than the 2px/8px tail in the standard elevation stack — the system is designed to work without heavy shadows"
      - "Do not use border-radius values other than 6px, 9999px, or 100px for UI components — 12px, 16px, and 32px only appear on imagery"
      - "Do not set body or heading type above weight 600 — Vercel leans on tight tracking, not bold weight, for visual emphasis"
      - "Do not use the prismatic gradient as a section background, card fill, or text treatment — it belongs exclusively behind the prism logo"
      - "Do not introduce new chromatic colors outside the four prism hues (#52aeff, #e5484d, #45dec5, plus the gradient gold and mint) — the system is intentionally near-monochrome"
      - "Do not use pure white (#ffffff) as the page canvas — always #fafafa, which reads as paper rather than screen"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#fafafa` | Page background — the base floor everything sits on |"
    info: "| 1 | Card | `#ffffff` | Inner panel surface inside cards and feature blocks, creates a subtle 1-step lift over canvas |"
    info: "| 2 | Wash | `#f0fbff` | Occasional cool tint row used for highlight strips or callout panels |"

  elevation:

    - "**Card / Button / Link:** `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px 0, #fafafa 0 0 0 1px inset`"
    - "**Image / List:** `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px 0, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset`"
    - "**Nav Border:** `rgba(0,0,0,0.08) 0 0 0 1px, #fafafa 0 0 0 1px`"

  imagery:

    info: "Imagery is almost entirely illustrative and diagrammatic rather than photographic. The hero features the signature dark triangular prism refracting a conic spectrum gradient — this is the only decorative artwork and it doubles as the logo. Supporting visuals are wireframe line drawings (globe with latitude lines, deployment node maps) rendered in 1px #ebebeb strokes with selective #171717 and #52aeff accent strokes. Product cards include small UI mockup snapshots — actual product screenshots at small scale inside 6px-radius frames with the standard hairline border. There is no lifestyle photography, no human imagery, no environmental context. Icons are minimal mono-line geometric shapes (circles, arrows, triangles) at 1–1.5px stroke weight, almost always inside 32–40px circular containers with a hairline border. The overall image density is low — most of the page is text and whitespace; visuals earn their placement."

  layout:

    info: "Pages are max-width 1200px centered with generous outer gutters. The hero is a single centered stack (headline → subhead → CTA row → prism visual) on a full-width #fafafa canvas with a faint 40px grid overlay. Below the hero, content breaks into sections separated by 64–80px vertical gaps, each section typically using a 3-column card grid (equal width, 24px gaps) for product features and use cases. Some sections use a 2-column text+visual split. There is no alternating light/dark banding — the entire page stays light. Navigation is a single sticky top bar with a bottom hairline border. A footer reuses the nav styling with additional link columns. The layout rhythm is: centered hero → 3-col grid → centered stat bar → 3-col grid → 2-col infrastructure section with globe visual → 3-col grid → footer. No sidebar, no mega-menu, no floating elements."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #171717"
    - "Background: #fafafa"
    - "Card surface: #ffffff"
    - "Border: #ebebeb"
    - "Muted text: #4d4d4d"
    - "primary action: #171717 (filled action)"

  example_component_prompts:

    - "**Hero section**: #fafafa canvas with a faint 40px grid in #f2f2f2. Centered Geist 48px weight 500 headline in #171717, letter-spacing -0.06em. Subtext in Geist 16px weight 400, #4d4d4d. Below: a centered Vercel triangle logo (32px, #171717, sharp corners) sitting over a conic gradient (from 180deg at 50% 70%: transparent → #eec32d → #ec4b4b → #709ab9 → #4dffbf → transparent). Two buttons side by side: filled #171717 with #ffffff text, 6px radius, Geist 14px weight 500, 8px 16px padding, plus outlined variant with 1px #171717 border and transparent background."

    - "**Product feature card**: #ffffff background, 1px #ebebeb border, 6px radius, 24px padding. Heading Geist 18px weight 600 #171717, description Geist 14px weight 400 #4d4d4d, bottom-right a 40px circular icon container (1px #ebebeb border) holding a mono-line arrow icon in #171717. No shadow."

    - "**Category filter row**: horizontal row of pill chips, 9999px radius, #ffffff background, 1px #ebebeb border, Geist 13px weight 500 #171717 text, 6px 14px padding, 8px gap between chips. Active chip: #fafafa background with 1px #d4d4d4 border."

    - "**Navigation bar**: sticky top, #fafafa background, 1px bottom border #ebebeb, 64px tall, flex row with 1200px max-width centered. Left: 12px black triangle logo + Geist 16px weight 500 wordmark #171717. Center: nav links Geist 14px weight 500 #4d4d4d with 4px gap, chevron caret on dropdown items. Right: outlined \"Ask AI\" button (6px radius, 1px #171717 border), \"Log In\" text link #171717, filled \"Sign Up\" button (#171717 bg, #ffffff text, 6px radius)."

    - "**Stat callout strip**: centered Geist 32px weight 500 headline #171717 with inline highlighted word in #0070f3, subtext Geist 16px weight 400 #4d4d4d below, no background fill, sits directly on the #fafafa canvas with 64px vertical breathing room above and below."

  elevation_philosophy:

    info: "Elevation is achieved through surface contrast, not shadow. The system has exactly three surface levels (#fafafa canvas → #ffffff card → #f0fbff wash) and relies on 1px #ebebeb hairline borders plus the natural luminance step between surfaces to communicate layering. When shadows do appear, they are minimal: a 1px ring (rgba(0,0,0,0.08)) for definition and at most a 2px–8px soft tail for products cards holding imagery. There is no large diffuse shadow, no neumorphism, no glow. The design language treats shadow as a finishing detail, not a structural element."

  similar_brands:

    - "**Linear** — Same near-monochrome light UI with 6px radii, hairline borders, and a single near-black filled action button as the only chromatic moment"
    - "**Raycast** — Compact density, Geist-family type with tight negative tracking, pill-shaped nav chips, and 1px structural borders instead of shadows"
    - "**Stripe** — Geometric grotesque type (Geist pairing with Stripe's Sohne), centered max-width layouts, product card grids with subtle borders, and a very restrained color palette"
    - "**Cursor** — Developer-tool visual language: dark prism icon on white canvas, tight tracking on display type, 6px radii, and a love of prismatic accents against otherwise achromatic chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-graphite: #171717;
          --color-marble-white: #fafafa;
          --color-pearl: #ffffff;
          --color-hairline: #ebebeb;
          --color-felt-gray: #4d4d4d;
          --color-smoke: #666666;
          --color-ash: #a8a8a8;
          --color-fog: #7d7d7d;
          --color-ice-tint: #f0fbff;
          --color-carbon: #000000;
          --color-prism-blue: #52aeff;
          --color-prism-red: #e5484d;
          --color-prism-teal: #45dec5;
          --color-vercel-blue: #0070f3;
        
          /* Typography — Font Families */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.02px;
          --text-body: 14px;
          --leading-body: 1.56;
          --tracking-body: -0.02px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.04px;
          --text-heading: 24px;
          --leading-heading: 1.25;
          --tracking-heading: -0.05px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.05px;
          --text-display: 48px;
          --leading-display: 1.17;
          --tracking-display: -0.06px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-50: 50px;
          --spacing-135: 135px;
          --spacing-157: 157px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 24px;
          --element-gap: 12-16px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 32px;
          --radius-full: 64px;
          --radius-full-2: 100px;
          --radius-full-3: 9999px;
        
          /* Named Radii */
          --radius-tab: 64px;
          --radius-cards: 6px;
          --radius-large: 100px;
          --radius-pills: 9999px;
          --radius-buttons: 6px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px, rgb(250, 250, 250) 0px 0px 0px 1px;
          --shadow-subtle-4: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
          --shadow-subtle-5: rgb(235, 235, 235) 0px 0px 0px 1px;
          --shadow-subtle-6: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
          --shadow-subtle-7: rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-canvas: #fafafa;
          --surface-card: #ffffff;
          --surface-wash: #f0fbff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-graphite: #171717;
          --color-marble-white: #fafafa;
          --color-pearl: #ffffff;
          --color-hairline: #ebebeb;
          --color-felt-gray: #4d4d4d;
          --color-smoke: #666666;
          --color-ash: #a8a8a8;
          --color-fog: #7d7d7d;
          --color-ice-tint: #f0fbff;
          --color-carbon: #000000;
          --color-prism-blue: #52aeff;
          --color-prism-red: #e5484d;
          --color-prism-teal: #45dec5;
          --color-vercel-blue: #0070f3;
        
          /* Typography */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.02px;
          --text-body: 14px;
          --leading-body: 1.56;
          --tracking-body: -0.02px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.04px;
          --text-heading: 24px;
          --leading-heading: 1.25;
          --tracking-heading: -0.05px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.05px;
          --text-display: 48px;
          --leading-display: 1.17;
          --tracking-display: -0.06px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-50: 50px;
          --spacing-135: 135px;
          --spacing-157: 157px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 32px;
          --radius-full: 64px;
          --radius-full-2: 100px;
          --radius-full-3: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px, rgb(250, 250, 250) 0px 0px 0px 1px;
          --shadow-subtle-4: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
          --shadow-subtle-5: rgb(235, 235, 235) 0px 0px 0px 1px;
          --shadow-subtle-6: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
          --shadow-subtle-7: rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        }