dub___style_reference:
  info: "> engineer's whiteboard with neon sticky tabs"

  theme: "light"

  info: "Dub is a near-monochrome product surface dressed for marketing: a white canvas, hairline #e5e5e5 borders doing the structural work, black filled CTAs, and three small color tabs (orange, green, violet) that tag product capabilities. The signature is restraint — the page reads like a technical editorial layout, not a glossy SaaS brochure, with a compact density and confident Satoshi display headlines that do the talking. Product UI screenshots are the dominant visual; the chrome around them is deliberately quiet. Color is used as a labeling system, not as atmosphere, which keeps the system extensible: any new feature category slots into the orange/green/violet/pink/yellow palette without redecorating the page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, button text on dark fills |"
    info: "| Ink Black | `#0a0a0a` | `--color-ink-black` | Primary headings, body text, and icon fills on light surfaces. Do not promote it to the primary CTA color |"
    info: "| Carbon | `#171717` | `--color-carbon` | Secondary text, body emphasis, dark surfaces |"
    info: "| Smoke 50 | `#f5f5f5` | `--color-smoke-50` | Elevated surface, secondary button fill, subtle wash backgrounds |"
    info: "| Smoke 100 | `#e5e5e5` | `--color-smoke-100` | Default border, hairline dividers, input borders — the structural neutral |"
    info: "| Smoke 200 | `#d4d4d4` | `--color-smoke-200` | Stronger borders, card outlines, button borders |"
    info: "| Smoke 400 | `#a3a3a3` | `--color-smoke-400` | Disabled state, placeholder text, muted icons |"
    info: "| Smoke 500 | `#737373` | `--color-smoke-500` | Body helper text, secondary labels |"
    info: "| Smoke 600 | `#525252` | `--color-smoke-600` | Subheadings, body emphasis, icon stroke |"
    info: "| Smoke 700 | `#404040` | `--color-smoke-700` | Strong body text, dark icon fills |"
    info: "| Ember Orange | `#ea580c` | `--color-ember-orange` | Orange text accent for links, tags, and emphasized short phrases. |"
    info: "| Pulse Green | `#16a34a` | `--color-pulse-green` | Green text accent for links, tags, and emphasized short phrases |"
    info: "| Arc Violet | `#7c3aed` | `--color-arc-violet` | Affiliate Programs feature tab, violet icon accent — programs/partner signal |"
    info: "| Circuit Blue | `#3b82f6` | `--color-circuit-blue` | Link strokes, focus rings, secondary interactive strokes |"
    info: "| Mint Wash | `#dcfce7` | `--color-mint-wash` | Gray outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color |"
    info: "| Slate Ink | `#111827` | `--color-slate-ink` | Secondary body text, navigation labels, and subdued headings. Use as a supporting accent, not as a status color |"
    info: "| Primary Action Fill | `#000000` | `--color-primary-action-fill` | High-contrast neutral action fill for primary buttons on light surfaces. Use as the primary filled action background |"

  tokens___typography:

    satoshi___display_headings___hero__section_titles__medium_weight_only_no_bold__tight_line_height__and_a_geometric_construction_give_headlines_a_calm__technical_confidence_rather_than_saas_shout__substitute_with__inter__at_600_or__general_sans_____font_satoshi:
      - "**Substitute:** General Sans"
      - "**Weights:** 500"
      - "**Sizes:** 36px, 40px, 48px"
      - "**Line height:** 1.00, 1.11, 1.15"
      - "**Letter spacing:** -0.02em"
      - "**Role:** Display headings — hero, section titles. Medium weight only (no bold), tight line-height, and a geometric construction give headlines a calm, technical confidence rather than SaaS shout. Substitute with 'Inter' at 600 or 'General Sans'."

    inter___body__ui__navigation__subheadings__buttons___the_workhorse__compact_1_4_1_5_line_heights_create_density_without_crowding__600_is_reserved_for_button_labels_and_small_caps_feel_emphasis__500_carries_nav_and_labels__400_is_the_body_default_____font_inter:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 8px, 10px, 11px, 12px, 13px, 14px, 16px, 18px, 20px, 24px, 30px"
      - "**Line height:** 1.00, 1.33, 1.38, 1.40, 1.43, 1.50, 1.56, 2.15, 2.80"
      - "**Role:** Body, UI, navigation, subheadings, buttons — the workhorse. Compact 1.4-1.5 line-heights create density without crowding. 600 is reserved for button labels and small-caps-feel emphasis; 500 carries nav and labels; 400 is the body default."

    geistmono___monospace_ui___url_slugs__api_keys__tag_chips__code_like_inline_data__tightly_confined_to_functional_text_where_variable_width_would_break_alignment_____font_geistmono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 14px, 24px"
      - "**Line height:** 1.00, 1.33, 1.43"
      - "**Role:** Monospace UI — URL slugs, API keys, tag chips, code-like inline data. Tightly confined to functional text where variable-width would break alignment."

    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: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.4 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 1.15 | -0.72px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.15 | -0.96px | `--text-heading-lg` |"

  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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"
      info: "| featureCards | 16px |"
      info: "| announcementBanner | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset` | `--shadow-sm-2` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 4px` | `--shadow-subtle-2` |"
      info: "| md | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1)...` | `--shadow-md` |"
      info: "| lg | `rgba(0, 0, 0, 0.09) 0px 20px 20px 0px` | `--shadow-lg` |"
      info: "| subtle-3 | `rgb(255, 255, 255) 0px 0px 0px 3px, rgb(0, 0, 0) 0px 0px ...` | `--shadow-subtle-3` |"

    layout:

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

  components:

    primary_cta_button:
      role: "Main conversion action — 'Start for free', 'Sign up'"

      info: "Filled #0a0a0a background, #ffffff text, 9999px pill radius, 16px horizontal × 8-10px vertical padding. Inter 14px weight 500. Optional subtle 1px 2px shadow at rgba(0,0,0,0.05). The black fill on white is the entire brand voice for actions — no blue CTA, no gradient."

    secondary_ghost_button:
      role: "Companion action — 'Get a demo', 'Learn more'"

      info: "White or transparent fill, #0a0a0a text, 1px #d4d4d4 border, 9999px pill radius, 16px × 8-10px padding. Inter 14px weight 500. Always paired with a primary button in the same row."

    navigation_link:
      role: "Top nav items with dropdown indicators"

      info: "Inter 14px weight 500, #0a0a0a text, no underline. Caret chevron in #737373. Active/hover state lifts to weight 600 or adds #0a0a0a underline. Nav row sits in a white bar with no border."

    feature_category_pill:
      role: "Tag for the three product capabilities (Short Links, Conversion Analytics, Affiliate Programs)"

      info: "9999px radius, 6px vertical × 12px horizontal padding. Three variants by capability: orange (#ea580c) for Short Links, green (#16a34a) for Conversion Analytics, violet (#7c3aed) for Affiliate Programs. White background with a 4-6px solid-color square icon prefix. Inter 12-13px weight 500."

    announcement_banner:
      role: "Top-of-page news strip ('Celebrating $10M partner payouts')"

      info: "White background, #e5e5e5 border, 9999px pill radius, 6px × 16px padding, inline text + 'Read more' link. Sits centered above the hero, separated by generous whitespace."

    product_screenshot_card:
      role: "Hero visual and feature imagery"

      info: "12-16px radius, 1px #e5e5e5 border, no shadow or a very soft rgba(0,0,0,0.05) 1px 2px. White surface framing the app UI. The screenshot itself contains the dense product chrome — the card around it is intentionally quiet."

    customer_logo_cell:
      role: "Social proof logo grid"

      info: "Plain 60-80px tall image, no border, no background. Arranged in a 5×2 grid with generous row/column gaps. 'CASE STUDY' caption in Inter 10-11px uppercase #737373 below some logos."

    inline_highlight_pill:
      role: "Colored word-level emphasis in body copy"

      info: "Colored background (#ea580c at ~10% opacity, #16a34a at ~15%, or #7c3aed at ~10%) with matching saturated text color, 4px radius, 2px vertical × 6px horizontal padding. Used to make 'short links', 'real-time analytics', and 'affiliate programs' pop within paragraphs."

    input_field:
      role: "Text input in product UI"

      info: "8px radius, 1px #d4d4d4 border, white fill, Inter 14px weight 400 text, 10-12px vertical × 12-16px horizontal padding. Focus state shifts border to #0a0a0a with a 4px rgba(0,0,0,0.1) outer ring."

    tag_chip:
      role: "Small inline metadata tag in product UI"

      info: "9999px radius, #16a34a or #ea580c text on a tinted background (#dcfce7 or similar ~10% opacity), 4px × 8px padding, Inter 12px weight 500."

    feature_highlight_card:
      role: "Section-level feature illustration with a tilted/scaled product crop"

      info: "No explicit card chrome — the product crop sits on the white canvas with a subtle #e5e5e5 outline. Often accompanied by a 64-80px outlined icon in #737373. Cards in grids use 16px column gap."

    dark_section_banner:
      role: "Inline callout strip ('Short Links — Learn more')"

      info: "Dark #171717 or #262626 background, #ffffff text, 12-16px radius, inline icon in a #404040 rounded square, 'Learn more' button in white pill at the right. Used to break the monochrome rhythm and direct attention to a product pillar."

  do_s_and_don_ts:

    do:
      - "Use 9999px radius for all interactive elements (buttons, pills, tags, announcement banners) and 8-16px radius for cards and inputs"
      - "Default to #0a0a0a filled buttons on #ffffff canvas for primary actions — never use blue or gradient as the CTA color"
      - "Use #e5e5e5 for all hairline borders and dividers; reach for #d4d4d4 only when stronger definition is needed"
      - "Use Satoshi weight 500 for all display headings; do not bold it"
      - "Use the three accent colors (orange #ea580c, green #16a34a, violet #7c3aed) as a feature-category labeling system — one per capability, never decorative"
      - "Apply 10-15% opacity tints of accent colors for inline highlight pills within body copy, keeping the saturated hex for text"
      - "Use GeistMono for any URL slug, API key, code-like identifier, or alignment-sensitive inline data"

    don_t:
      - "Do not introduce a chromatic primary action color — the system is monochrome with accent labels, not a colored CTA system"
      - "Do not use more than one accent color in a single component — feature pills are single-hue"
      - "Do not apply heavy shadows; if elevation is needed, stay at rgba(0,0,0,0.05) 1px 2px or rgba(0,0,0,0.1) 4px 6px"
      - "Do not use bold weights (700+) for headings; Satoshi's confidence comes from its medium weight, not weight escalation"
      - "Do not mix Inter and Satoshi in the same text block — Satoshi is for display only"
      - "Do not add gradient buttons, gradient text, or glassmorphism — the aesthetic is flat editorial, not dimensional"
      - "Do not use the #dcfce7 green wash outside of success/callout contexts — it is semantic, not decorative"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Full page background, default surface for all sections |"
    info: "| 1 | Card Surface | `#ffffff` | Product screenshots, feature cards, logo grid cells — same as canvas, separated only by hairline borders |"
    info: "| 2 | Elevated Wash | `#f5f5f5` | Secondary button fill, subtle background variation, code snippet backgrounds |"
    info: "| 3 | Tinted Callout | `#dcfce7` | Green-tinted highlight band, badge background, feature accent panel |"

  elevation:

    - "**Primary CTA Button:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`"
    - "**Product Screenshot Card:** `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`"
    - "**Input Focus Ring:** `rgba(0, 0, 0, 0.1) 0px 0px 0px 4px`"
    - "**Elevated Card (hover/active):** `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`"

  imagery:

    info: "The site is product-screenshot-driven. The hero and feature sections are anchored by actual app UI captures — dashboard panels, link editor with QR code, analytics tables — framed on white cards with hairline borders. There is no lifestyle photography, no stock imagery, and no decorative illustration. The product IS the imagery. Outside of screenshots, icons are thin-stroke outlined glyphs in #525252-#737373, used small (16-24px) and functionally. The only chromatic graphics are the three feature-category square icons (orange, green, violet) that act as a visual key for product capabilities."

  layout:

    info: "Page layout is max-width 1200px centered with generous outer padding. The hero is centered text-over-product: headline → subhead → two-button row (primary + ghost) → product screenshot card below. Sections alternate between centered single-column text blocks and 2-column text+image splits, separated by 64-80px vertical gaps. Customer logos sit in a 5-column grid. Feature grids use 3 columns at desktop. The nav is a single horizontal bar — logo left, product/solutions/resources dropdowns center, login + sign-up right — with no sticky behavior indicated. Dark section banners (near-black #171717) appear as full-width strips to break the monochrome rhythm. Background sections alternate between pure white and very subtle off-white washes."

  agent_prompt_guide:

  quick_color_reference:
    - "text primary: #0a0a0a"
    - "text muted: #737373"
    - "text helper: #525252"
    - "background: #ffffff"
    - "surface elevated: #f5f5f5"
    - "border default: #e5e5e5"
    - "primary action: #000000 (filled action)"
    - "accent orange (Short Links): #ea580c"
    - "accent green (Analytics): #16a34a"
    - "accent violet (Programs): #7c3aed"

  example_component_prompts:

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

    - "**Create a feature category pill**: 9999px radius, white background, 1px #e5e5e5 border, 4px × 10px padding. Prefix with a 4px solid-color square icon (#ea580c for Short Links, #16a34a for Analytics, #7c3aed for Programs). Label text Inter 13px weight 500 #0a0a0a."

    - "**Create an inline highlight pill in body copy**: 'short links' text wrapped in a span with #ea580c at 10% opacity background, #ea580c text, 4px radius, 2px × 6px padding, Inter 16px weight 500. The pill is inline, not a block."

    - "**Create a customer logo grid**: 5-column CSS grid, 48px row gap, 32px column gap, centered. Each cell holds a customer logo (grayscale, ~32px tall) with optional 'CASE STUDY' caption below in Inter 10px uppercase #737373, letter-spacing 0.05em. No card chrome, no borders."

    - "**Create a dark section banner**: full-width #171717 background, max-width 1200px inner container, 12px radius (or no radius if edge-to-edge), 24px vertical padding. Left: 40px square icon container in #262626 with white outline icon. Center: white text 'Short Links' in Inter 16px weight 600, #a3a3a3 description below. Right: 'Learn more' white pill button (1px #404040 border, white text, 9999px radius, 12px × 20px padding)."

  similar_brands:

    - "**Vercel** — Same monochrome-first approach with black filled CTAs, hairline borders, and minimal elevation. Vercel also uses a single display font at medium weight for headlines and lets product UI carry the page."
    - "**Linear** — Identical restraint — white canvas, compact density, Inter for UI, pill-shaped controls, and product screenshots as hero visuals. Both sites treat accent color as a labeling tool rather than atmosphere."
    - "**Cal.com** — Same open-source SaaS layout grammar: centered hero with single headline, product screenshot below, 2-column feature splits, and 5-column customer logo grid. Both use small color-coded category tags as a capability key."
    - "**Plausible Analytics** — Shares the technical-editorial feel — black CTAs on white, clean Satoshi/Inter pairing, compact 4-8px element gaps, and a near-monochrome palette with a single accent appearing only as functional punctuation."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #0a0a0a;
          --color-carbon: #171717;
          --color-smoke-50: #f5f5f5;
          --color-smoke-100: #e5e5e5;
          --color-smoke-200: #d4d4d4;
          --color-smoke-400: #a3a3a3;
          --color-smoke-500: #737373;
          --color-smoke-600: #525252;
          --color-smoke-700: #404040;
          --color-ember-orange: #ea580c;
          --color-pulse-green: #16a34a;
          --color-arc-violet: #7c3aed;
          --color-circuit-blue: #3b82f6;
          --color-mint-wash: #dcfce7;
          --color-slate-ink: #111827;
          --color-primary-action-fill: #000000;
        
          /* Typography — Font Families */
          --font-satoshi: 'Satoshi', 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-geistmono: 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* 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-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.4;
          --text-heading: 36px;
          --leading-heading: 1.15;
          --tracking-heading: -0.72px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -0.96px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
          --radius-featurecards: 16px;
          --radius-announcementbanner: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 4px;
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
          --shadow-lg: rgba(0, 0, 0, 0.09) 0px 20px 20px 0px;
          --shadow-subtle-3: rgb(255, 255, 255) 0px 0px 0px 3px, rgb(0, 0, 0) 0px 0px 0px 4px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-card-surface: #ffffff;
          --surface-elevated-wash: #f5f5f5;
          --surface-tinted-callout: #dcfce7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #0a0a0a;
          --color-carbon: #171717;
          --color-smoke-50: #f5f5f5;
          --color-smoke-100: #e5e5e5;
          --color-smoke-200: #d4d4d4;
          --color-smoke-400: #a3a3a3;
          --color-smoke-500: #737373;
          --color-smoke-600: #525252;
          --color-smoke-700: #404040;
          --color-ember-orange: #ea580c;
          --color-pulse-green: #16a34a;
          --color-arc-violet: #7c3aed;
          --color-circuit-blue: #3b82f6;
          --color-mint-wash: #dcfce7;
          --color-slate-ink: #111827;
          --color-primary-action-fill: #000000;
        
          /* Typography */
          --font-satoshi: 'Satoshi', 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-geistmono: 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* 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-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.4;
          --text-heading: 36px;
          --leading-heading: 1.15;
          --tracking-heading: -0.72px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -0.96px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 4px;
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
          --shadow-lg: rgba(0, 0, 0, 0.09) 0px 20px 20px 0px;
          --shadow-subtle-3: rgb(255, 255, 255) 0px 0px 0px 3px, rgb(0, 0, 0) 0px 0px 0px 4px;
        }