monday_com___style_reference:
  info: "> white workshop with pastel sticky notes"

  theme: "light"

  info: "monday.com runs a white-canvas productivity language with violet as its singular brand voice. The page breathes through generous whitespace, near-black typography, and pastel-colored card surfaces that borrow from a crayon-box palette — soft green, powder blue, peach, lavender, mint — creating a playful, human feeling that contrasts the serious SaaS market. Violet (#6161ff) owns the primary action and brand surfaces, while gradient text (pink→orange, cyan→violet) carries the hero's emotional charge. Components are pill-shaped and generously rounded: 160px buttons, 24px cards, 6px tags. The visual rhythm alternates between flat text-heavy sections and elevated product/board mockups that peek above the page edge, blurring the boundary between marketing and product."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Monday Violet | `#6161ff` | `--color-monday-violet` | Primary CTA buttons, brand backgrounds, active states, gradient stops — saturated indigo reads as confident but approachable, not corporate |"
    info: "| Ink | `#333333` | `--color-ink` | Primary body text, headings, button labels — near-black with a hint of warmth avoids the harshness of pure #000 |"
    info: "| Slate | `#535768` | `--color-slate` | Secondary text, nav links, icon fills, footer copy — cool gray supports hierarchy without competing with headings |"
    info: "| Iron | `#808080` | `--color-iron` | Muted helper text, disabled icon strokes, tertiary borders |"
    info: "| Fog | `#cacbcd` | `--color-fog` | Card and container borders, subtle dividers between content blocks |"
    info: "| Mist | `#d0d4e4` | `--color-mist` | Light card borders, the standard outline color for elevated card surfaces |"
    info: "| Pebble | `#dddfeb` | `--color-pebble` | Badge borders, pill-button outlines, input borders |"
    info: "| Cloud | `#f5f6f8` | `--color-cloud` | Page canvas, section backgrounds, neutral button fills — the floor color everything floats on |"
    info: "| Snow | `#ffffff` | `--color-snow` | Card surfaces, button text, nav background, input fields |"
    info: "| Shadow Dust | `#e6e7ea` | `--color-shadow-dust` | Box-shadow tint, barely-there surface lifts |"
    info: "| Mint | `#bcfe90` | `--color-mint` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"
    info: "| Sky | `#abf0ff` | `--color-sky` | Blue wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"
    info: "| Apricot | `linear-gradient(90deg, rgb(254, 129, 228), rgb(254, 129, 228) 31%, rgb(253, 169, 0) 88%)` | `--color-apricot` | Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content; Hero headline gradient stop, warm accent in pink-to-orange text |"
    info: "| Lavender | `#eddff7` | `--color-lavender` | Decorative card background, soft category surface |"
    info: "| Periwinkle | `#e7ecff` | `--color-periwinkle` | Decorative card background, light brand-tinted surface |"
    info: "| Cornflower | `#93beff` | `--color-cornflower` | Decorative card background, secondary brand surface |"
    info: "| Aqua | `#d1faff` | `--color-aqua` | Decorative card background, cyan accent surface |"
    info: "| Cotton Candy | `#e98dfe` | `--color-cotton-candy` | Card border accent, playful highlight stroke |"
    info: "| Ultra Violet | `#9450fd` | `--color-ultra-violet` | Saturated button alternative, deep brand accent |"
    info: "| Electric Cyan | `#3ac9ff` | `--color-electric-cyan` | Saturated button alternative, AI/feature highlight |"
    info: "| Forest | `#2a5c4e` | `--color-forest` | Teal action color for filled buttons, selected navigation states, and focused conversion moments |"
    info: "| Peony | `#fcd0f8` | `--color-peony` | Saturated button alternative, soft pink fill |"
    info: "| Periwinkle Wash | `#dbdbff` | `--color-periwinkle-wash` | Badge and tag background — tints pill elements with brand warmth |"
    info: "| Prism | `conic-gradient(from 270deg, rgb(129, 129, 255) 15%, rgb(51, 219, 219) 40%, rgb(51, 213, 142) 55%, rgb(255, 214, 51) 65%, rgb(252, 82, 125) 85%, rgb(129, 129, 255) 100%)` | `--color-prism` | Supporting palette color for small decorative accents when the core palette needs contrast. |"

  tokens___typography:

    poppins___sole_typeface___used_for_all_nav__body__headings__buttons__badges__and_product_ui__geometric_humanist_sans_with_friendly_rounded_terminals__the_rounded_forms_harmonize_with_the_pill_buttons_and_24px_card_radii__making_the_whole_ui_feel_approachable__weight_300_for_display_headlines_creates_a_soft__modern_presence__weight_700_for_nav_and_button_labels_carries_authority_without_heaviness_____font_poppins:
      - "**Substitute:** Manrope, DM Sans, Plus Jakarta Sans"
      - "**Weights:** 300, 400, 500, 700"
      - "**Sizes:** 8, 12, 13, 14, 16, 18, 20, 22, 24, 28, 32, 36, 40, 48, 52, 56, 64"
      - "**Line height:** 1.15–2.46"
      - "**Letter spacing:** Negative tracking tightens large display: -0.04em at 64px, -0.02em at 48–56px, -0.015em at 28–40px, -0.01em at body sizes. Positive +0.2em appears for small uppercase labels (likely 8–12px tracking for eyebrow text)."
      - "**Role:** Sole typeface — used for all nav, body, headings, buttons, badges, and product UI. Geometric humanist sans with friendly rounded terminals; the rounded forms harmonize with the pill buttons and 24px card radii, making the whole UI feel approachable. Weight 300 for display headlines creates a soft, modern presence; weight 700 for nav and button labels carries authority without heaviness."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.45 | -0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.22px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.36px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | -0.54px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.15 | -0.96px | `--text-heading-lg` |"
      info: "| display | 64px | 1.15 | -2.56px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 6px |"
      info: "| cards | 24px |"
      info: "| badges | 6px |"
      info: "| images | 12px |"
      info: "| inputs | 6px |"
      info: "| buttons | 160px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(205, 208, 223, 0.4) 0px 2px 48px 0px` | `--shadow-xl` |"
      info: "| xl-2 | `rgba(0, 0, 0, 0.15) 0px 5px 45px 0px` | `--shadow-xl-2` |"
      info: "| xl-3 | `rgba(0, 0, 0, 0.15) 0px 4px 40px 0px` | `--shadow-xl-3` |"
      info: "| xl-4 | `rgba(0, 0, 0, 0.4) 0px 5px 55px 0px` | `--shadow-xl-4` |"
      info: "| subtle | `rgb(0, 0, 0) 0px -2px 0px 0px inset` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_pill_button:
      role: "Main CTA — the most prominent action on any page"

      info: "Filled violet #6161ff background, white text in Poppins 16px weight 500, 160px border-radius (full pill), 13px vertical / 24px horizontal padding, inline arrow icon. Drives the hero 'Get Started' and any conversion moment."

    outlined_pill_button:
      role: "Secondary CTA — paired with the primary to offer a lower-commitment path"

      info: "Transparent background, 1px #535768 border, 160px border-radius, 13px vertical / 20px horizontal padding, Ink text. Used for 'Contact sales' next to the primary CTA."

    text_link_button:
      role: "Tertiary action in nav and inline text"

      info: "No background or border, Slate (#535768) text weight 500, often paired with a dropdown chevron. 8–10px horizontal padding for nav items."

    pastel_feature_card:
      role: "Icon-and-text card used in feature grids and exploration menus"

      info: "Soft-tinted background (one of the accent palette: Mint, Sky, Apricot, Lavender, Periwinkle, Aqua), 24px border-radius, 24px internal padding, small monochrome icon, Poppins 16px weight 500 label. The 2:3 aspect ratio card is the system's workhorse tile."

    board_mockup_card:
      role: "Product showcase — embedded board UI that floats above the page edge"

      info: "White #ffffff surface, Mist (#d0d4e4) 1px border, 16–24px radius, soft shadow rgba(205,208,223,0.4) 0 2px 48px. Contains monday.com board rows with colored status pills and avatar stacks."

    ai_prompt_card:
      role: "Interactive AI input card for the Sidekick feature"

      info: "White surface, 6px radius, 12–16px padding, with a left brand-color icon, placeholder text in Slate, mic and send icons on the right. Hovers with subtle shadow lift."

    brand_gradient_panel:
      role: "Full-bleed brand-colored section that frames product mockups"

      info: "Violet #6161ff background fills the entire right column, white card sits on top with 24px radius. Used in the AI section to create a 50/50 split with visual contrast against the white left column."

    status_pill:
      role: "Inline metadata badge in board rows and lists"

      info: "Small pill (6px radius), tinted background matching status color (green/mint for done, orange for working, blue for stuck, red for stuck). Poppins 12–13px weight 500 label, 2px vertical / 8px horizontal padding."

    avatar_stack:
      role: "Social/collaboration indicator in board rows"

      info: "Circular avatars (full radius), 24–32px diameter, white 2px border separating overlapping members, slight negative margin between them."

    logo_strip:
      role: "Social proof — 'Trusted by Fortune 500' row"

      info: "Single-row horizontal layout of monochrome black wordmarks at ~60% opacity, centered, generous horizontal spacing. No card backgrounds or dividers between logos."

    exploration_grid_card:
      role: "'What would you like to explore?' category picker"

      info: "White card, Mist 1px border, 6px radius, small square icon, 2-line Poppins label. Arranged in a 3-column grid on white panel with subtle shadow."

    navigation_bar:
      role: "Top-level site navigation"

      info: "White #ffffff background, sticky top, 8px vertical / 16px horizontal padding for nav items, monday.com wordmark on left, primary actions ('Contact sales' outlined, 'Get Started' filled) on right. Logo uses full-color spectrum conic gradient mark."

  do_s_and_don_ts:

    do:
      - "Use 160px border-radius for all buttons and CTAs — the pill shape is non-negotiable and defines the brand's friendly tone"
      - "Reserve #6161ff for primary actions and brand panels; let it carry the most important decision on every screen"
      - "Apply pastel accent backgrounds (Mint, Sky, Apricot, Lavender) to feature cards, not to buttons or text"
      - "Set display headlines at 48–64px Poppins weight 300 with negative letter-spacing (-0.04em to -0.02em) — thin geometric headlines distinguish this from typical 700-weight SaaS heroes"
      - "Use 24px radius for cards and 6px for badges/inputs — keep these two tiers consistent"
      - "Apply the conic-gradient prism (#8181ff → teal → green → yellow → pink → back to violet) to brand dividers, the logo mark, and loading states only"
      - "Use gradient text (pink→orange or cyan→violet) exclusively on hero headlines to inject warmth into the white canvas"

    don_t:
      - "Don't use square or 4px-radius buttons — the pill shape is the signature"
      - "Don't apply pastel accent colors to body text, borders, or icons — they are surface treatments only"
      - "Don't set type below weight 400 for body or below 500 for UI labels — weight 300 is reserved for display headlines"
      - "Don't use pure #000000 for large text blocks — #333333 is warmer and reads as the system's true black"
      - "Don't stack more than 3-4 pastel colors in adjacent cards — pick a 2-3 color accent set per section"
      - "Don't use heavy drop shadows on cards — the system uses a single soft 48px-blur lavender-tinted shadow at 40% opacity"
      - "Don't introduce new chromatic CTA colors — #6161ff is the single action color; saturated button alternatives exist for product UI, not marketing"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f5f6f8` | Page background — the soft warm-gray floor that sections sit on |"
    info: "| 1 | Card | `#ffffff` | Standard card and component surface — the dominant elevated plane |"
    info: "| 2 | Brand Panel | `#6161ff` | Full-bleed brand-colored section creating visual contrast for embedded product |"
    info: "| 3 | Tinted Accent | `#bcfe90` | Pastel category surface for feature cards and exploration tiles |"

  elevation:

    - "**Card / Board Mockup:** `rgba(205, 208, 223, 0.4) 0px 2px 48px 0px`"
    - "**Elevated Card (hover/featured):** `rgba(0, 0, 0, 0.15) 0px 5px 45px 0px`"
    - "**AI Prompt Card (active):** `rgba(0, 0, 0, 0.15) 0px 4px 40px 0px`"

  imagery:

    info: "Visuals are dominated by product UI mockups — actual monday.com board screens with colored status pills, avatar stacks, and AI sidebar panels — rather than photography or illustration. The product IS the hero: boards peek above section edges at skewed angles, creating a 'leaking into the marketing page' effect. Logo strip uses monochrome black wordmarks. No lifestyle photography, no human portraits, no stock imagery. The only decorative visual is the conic-gradient prism mark in the logo."

  layout:

    info: "Max-width ~1200px centered content with full-bleed product mockups that break the container. Hero is a centered single-column headline with gradient text and one CTA. Below: social-proof logo strip, then alternating 2-column text+product sections. The AI feature uses a 50/50 split with a violet brand panel on the right housing a product mockup. Vertical rhythm is generous (64px section gaps) with soft gray bands (#f5f6f8) breaking up white sections. Navigation is a single sticky white top bar with logo left, links center, dual CTAs right. No sidebar, no mega-menu visible on this page."

  agent_prompt_guide:

    primary_action: "#6161ff (filled action)"
    create_a_primary_action_button: "#6161ff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
  quick_color_reference:
    - "Primary text: #333333"
    - "Secondary text: #535768"
    - "Page background: #f5f6f8"
    - "Card surface: #ffffff"
    - "Card border: #d0d4e4"
    - "Brand accent: #6161ff"

  5_example_component_prompts:


    - "**Pastel Feature Card**: Background #abf0ff (or one of the accent palette: #bcfe90, #ff8940, #eddff7, #93beff, #d1faff). 24px border-radius. 24px internal padding. Small monochrome icon top-left, Poppins 16px weight 500 label below in #333333."

    - "**Board Mockup Card**: White #ffffff surface, 1px #d0d4e4 border, 24px border-radius, soft shadow rgba(205,208,223,0.4) 0 2px 48px. Contains rows with colored status pills (6px radius, tinted backgrounds like #bcfe90, #ff8940) and circular avatar stacks."

    - "**AI Prompt Card**: White surface, 6px border-radius, 16px padding, brand-color icon left, placeholder text 'Analyze sales pipeline' in Poppins 16px weight 500 #333333, mic and send icons right."

    - "**Logo Trust Strip**: Centered eyebrow text 16px Poppins weight 400 #535768 reading 'Trusted by over 60% of the Fortune 500'. Below: single horizontal row of 7–8 monochrome black wordmarks (Holt Renfrew, Universal, Coca-Cola, Lionsgate, Carrefour, BD, Glossier style) at ~60% opacity, generous 32–48px gap between logos, no dividers."

  gradient_system:

    gradients_serve_three_roles: "(1) **Hero headline text** — linear pink-to-orange #fe81e4 → #fda900 injected into display copy to create emotional warmth against the white canvas. (2) **Brand prism** — conic gradient cycling violet → teal → green → yellow → pink → violet, used only for the logo mark and divider lines, never as a surface fill. (3) **CTA and illustration accent gradients** — short 2-stop linear gradients (cyan→violet, orange→pink) used sparingly on dark product panels and feature illustrations. Gradients are never applied to body text or button backgrounds."

  component_visual_language:

    info: "The system follows a **flat-with-soft-shadow** approach: components are mostly flat-shaded with surfaces distinguished by pastel background tints rather than borders or heavy elevation. The single soft lavender-tinted shadow (rgba(205,208,223,0.4) 0 2px 48px) lifts cards just enough to read as elevated without introducing the 'skeuomorphic card stack' look. Buttons are fully filled (no outline-first patterns) and rely on the pill radius for personality. The visual density is low — generous internal padding (24px in cards, 13–16px in buttons) and 64px between sections — making the system feel like a spacious workshop rather than a dense dashboard."

  similar_brands:

    - "**Asana** — Same product-as-hero pattern with embedded UI mockups and generous whitespace, though Asana leans warmer/coral while monday.com owns violet"
    - "**Notion** — Both use soft pastel card surfaces and playful multi-color category tiles, though Notion is more text-dense and monday.com is more visually bold"
    - "**ClickUp** — Similar feature-rich SaaS marketing with product screenshots breaking the page boundary, though ClickUp's palette is more saturated and monday.com stays pastel"
    - "**Linear** — Shared single-accent-color brand strategy (Linear's purple = monday.com's violet) with minimal chrome and geometric sans typography"
    - "**Airtable** — Comparable 'friendly enterprise' positioning with colored record-type cards, though Airtable uses sharper corners and a wider accent palette"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-monday-violet: #6161ff;
          --color-ink: #333333;
          --color-slate: #535768;
          --color-iron: #808080;
          --color-fog: #cacbcd;
          --color-mist: #d0d4e4;
          --color-pebble: #dddfeb;
          --color-cloud: #f5f6f8;
          --color-snow: #ffffff;
          --color-shadow-dust: #e6e7ea;
          --color-mint: #bcfe90;
          --color-sky: #abf0ff;
          --color-apricot: #ff8940;
          --gradient-apricot: linear-gradient(90deg, rgb(254, 129, 228), rgb(254, 129, 228) 31%, rgb(253, 169, 0) 88%);
          --color-lavender: #eddff7;
          --color-periwinkle: #e7ecff;
          --color-cornflower: #93beff;
          --color-aqua: #d1faff;
          --color-cotton-candy: #e98dfe;
          --color-ultra-violet: #9450fd;
          --color-electric-cyan: #3ac9ff;
          --color-forest: #2a5c4e;
          --color-peony: #fcd0f8;
          --color-periwinkle-wash: #dbdbff;
          --color-prism: #8181ff;
          --gradient-prism: conic-gradient(from 270deg, rgb(129, 129, 255) 15%, rgb(51, 219, 219) 40%, rgb(51, 213, 142) 55%, rgb(255, 214, 51) 65%, rgb(252, 82, 125) 85%, rgb(129, 129, 255) 100%);
        
          /* Typography — Font Families */
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.45;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.22px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.36px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.54px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -0.96px;
          --text-display: 64px;
          --leading-display: 1.15;
          --tracking-display: -2.56px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 100px;
          --radius-full-2: 160px;
        
          /* Named Radii */
          --radius-nav: 6px;
          --radius-cards: 24px;
          --radius-badges: 6px;
          --radius-images: 12px;
          --radius-inputs: 6px;
          --radius-buttons: 160px;
        
          /* Shadows */
          --shadow-xl: rgba(205, 208, 223, 0.4) 0px 2px 48px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.15) 0px 5px 45px 0px;
          --shadow-xl-3: rgba(0, 0, 0, 0.15) 0px 4px 40px 0px;
          --shadow-xl-4: rgba(0, 0, 0, 0.4) 0px 5px 55px 0px;
          --shadow-subtle: rgb(0, 0, 0) 0px -2px 0px 0px inset;
        
          /* Surfaces */
          --surface-canvas: #f5f6f8;
          --surface-card: #ffffff;
          --surface-brand-panel: #6161ff;
          --surface-tinted-accent: #bcfe90;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-monday-violet: #6161ff;
          --color-ink: #333333;
          --color-slate: #535768;
          --color-iron: #808080;
          --color-fog: #cacbcd;
          --color-mist: #d0d4e4;
          --color-pebble: #dddfeb;
          --color-cloud: #f5f6f8;
          --color-snow: #ffffff;
          --color-shadow-dust: #e6e7ea;
          --color-mint: #bcfe90;
          --color-sky: #abf0ff;
          --color-apricot: #ff8940;
          --color-lavender: #eddff7;
          --color-periwinkle: #e7ecff;
          --color-cornflower: #93beff;
          --color-aqua: #d1faff;
          --color-cotton-candy: #e98dfe;
          --color-ultra-violet: #9450fd;
          --color-electric-cyan: #3ac9ff;
          --color-forest: #2a5c4e;
          --color-peony: #fcd0f8;
          --color-periwinkle-wash: #dbdbff;
          --color-prism: #8181ff;
        
          /* Typography */
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.45;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.22px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.36px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.54px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -0.96px;
          --text-display: 64px;
          --leading-display: 1.15;
          --tracking-display: -2.56px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 100px;
          --radius-full-2: 160px;
        
          /* Shadows */
          --shadow-xl: rgba(205, 208, 223, 0.4) 0px 2px 48px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.15) 0px 5px 45px 0px;
          --shadow-xl-3: rgba(0, 0, 0, 0.15) 0px 4px 40px 0px;
          --shadow-xl-4: rgba(0, 0, 0, 0.4) 0px 5px 55px 0px;
          --shadow-subtle: rgb(0, 0, 0) 0px -2px 0px 0px inset;
        }