uniswap___style_reference:
  info: "> Pink confetti over a clean white trading desk."

  theme: "light"

  info: "Uniswap's interface is a bright, mostly flat white canvas interrupted by one saturated hot-pink accent and scattered colorful decorative orbs that give the experience a playful, confetti-like atmosphere. The system deliberately rejects the dark-mode crypto convention in favor of an airy, almost editorial feel where the swap widget sits front-and-center as a quiet white card and the pink (#ff37c7) does all the expressive work — marking the primary action, the brand mark, and the only chromatic decision an interface designer needs to make. Typography is handled by a single custom face (Basel) at unusual mid-weights (485, 535) with tight tracking across all sizes, producing a geometric, slightly clinical tone that keeps the product feeling like a serious financial tool despite the candy-colored hero. Surfaces are nearly shadowless — the only elevation in the system is a barely-visible 10% black blur — and everything is separated by hairline borders and generous whitespace rather than stacked panels. The rainbow of secondary hues (#ff4d00, #2abdff, #00c3a0, #8251fb, etc.) functions as a token/asset taxonomy rather than a UI accent system, meaning most new screens should stay achromatic with pink as the sole chromatic verb."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Uniswap Pink | `#ff37c7` | `--color-uniswap-pink` | Primary brand mark, filled CTA buttons, active nav indicator, and the only chromatic color an interface should use — saturated hot-pink against a white canvas creates instant focal hierarchy without darkening the page |"
    info: "| Midnight Ink | `#131313` | `--color-midnight-ink` | Dark borders and separators for elevated surfaces and inverted UI. |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, input fields, and text on pink buttons — the structural base everything sits on |"
    info: "| Carbon | `#222222` | `--color-carbon` | Secondary structural border and text variant used in nav and button outlines where slightly softer than Midnight Ink is desired |"
    info: "| Slate | `#6a6a6a` | `--color-slate` | Dark borders and separators for elevated surfaces and inverted UI. |"
    info: "| Ash | `#acacac` | `--color-ash` | Disabled states, placeholder text, hairline icon borders, and the lightest visible UI elements |"
    info: "| Frost | `#f2f2f2` | `--color-frost` | Disabled button borders and the faintest possible surface separation |"
    info: "| True Black | `#000000` | `--color-true-black` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |"
    info: "| Blush Mist | `#fef4ff` | `--color-blush-mist` | Primary page canvas and white card surfaces. Do not promote it to the primary CTA color |"
    info: "| Ember | `#ff4d00` | `--color-ember` | Orange decorative accent for icons, marks, and small graphic details |"
    info: "| Iris | `#8251fb` | `--color-iris` | Token/asset category color for violet-branded assets and decorative purple orbs |"
    info: "| Magenta | `#f50db4` | `--color-magenta` | Token/asset category color for pink-branded assets and decorative orbs (a slightly different pink from the brand) |"
    info: "| Sky | `#2abdff` | `--color-sky` | Token/asset category color for blue-branded assets and decorative orbs |"
    info: "| Mint | `#00c3a0` | `--color-mint` | Token/asset category color for teal-branded assets and decorative orbs |"
    info: "| Crimson | `#e01a2b` | `--color-crimson` | Red decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"
    info: "| Forest | `#0c8911` | `--color-forest` | Green decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"

  tokens___typography:

    basel___sole_typeface_across_every_ui_surface__the_unusual_mid_weights_485__535_are_the_signature__basel_avoids_the_standard_400_500_600_ladder_and_instead_calibrates_precise_intermediate_weights__which_is_why_body_text_and_headings_feel_more_like_a_continuous_gradient_than_discrete_steps__the_geometric_construction_with_tight__0_02em_tracking_across_all_sizes_produces_a_slightly_compressed__clinical_financial_tone___readable_but_never_decorative__for_open_source_replacement_use_inter_at_400_500_550__or_dm_sans_at_400_500_550_____font_basel:
      - "**Substitute:** Inter (400/500/550) or DM Sans (400/500/550)"
      - "**Weights:** 400, 485, 500, 535"
      - "**Sizes:** 11px, 12px, 13px, 14px, 16px, 18px, 24px, 36px, 52px, 64px"
      - "**Line height:** 0.75–1.49 depending on size (tight 0.75–0.96 for display, 1.19–1.33 for body)"
      - "**Letter spacing:** -0.02em constant across all sizes"
      - "**Role:** Sole typeface across every UI surface. The unusual mid-weights (485, 535) are the signature: Basel avoids the standard 400/500/600 ladder and instead calibrates precise intermediate weights, which is why body text and headings feel more like a continuous gradient than discrete steps. The geometric construction with tight -0.02em tracking across all sizes produces a slightly compressed, clinical-financial tone — readable but never decorative. For open-source replacement use Inter at 400/500/550, or DM Sans at 400/500/550."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.33 | -0.22px | `--text-caption` |"
      info: "| subheading | 18px | 1.2 | -0.36px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.15 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.11 | -0.72px | `--text-heading` |"
      info: "| heading-lg | 52px | 0.96 | -1.04px | `--text-heading-lg` |"
      info: "| display | 64px | 0.75 | -1.28px | `--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: "| 60 | 60px | `--spacing-60` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 20px |"
      info: "| cards | 20px |"
      info: "| icons | 20px |"
      info: "| pills | 9999px |"
      info: "| inputs | 20px |"
      info: "| buttons | 20px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `color(srgb 0.0745098 0.0745098 0.0745098 / 0.00313726) 0p...` | `--shadow-md` |"

    layout:

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

  components:

    filled_pink_cta_button:
      role: "Primary action — the only filled button in the system"

      info: "Background #ff37c7, text #ffffff, weight 535 Basel at 14-16px, padding 8px 16px, border-radius 20px, no shadow. Used for the single most important action on any screen (Connect, Trade Now). Never pair with another filled button of equal weight on the same screen."

    pill_ghost_button:
      role: "Secondary action in the header"

      info: "Transparent background, 1px border in #131313 or #222222, text #131313, border-radius 9999px (full pill), padding 7px 14px, font size 13-14px weight 500. Used for 'Get the app' and similar navigational CTAs that must sit beside the primary action without competing."

    hero_swap_card:
      role: "The central product widget — token swap interface"

      info: "White surface (#ffffff), 1px border in #f2f2f2, border-radius 20px, padding 16px internal panels. Contains two stacked sub-panels (Sell / Buy) each with their own inner border, separated by a circular arrow-button connector. No drop shadow — separation is purely border-based."

    swap_input_panel:
      role: "Individual Sell/Buy sub-panel inside the swap card"

      info: "White background, 1px border #f2f2f2, border-radius 20px, padding 16px. Label text in #6a6a6a at 12px, value text in #131313 at 36-52px, token selector chip on the right."

    token_selector_chip:
      role: "Token selection button (ETH, Select token)"

      info: "Filled with #ff37c7 for the primary 'Select token' action, white text, border-radius 20px, padding 8px 16px, weight 500. For tokens already selected, shows token icon + ticker + dropdown chevron on white background with #131313 text."

    soft_pink_action_button:
      role: "Low-emphasis full-width action (e.g. 'Get started')"

      info: "Background #fef4ff (Blush Mist), text #ff37c7, weight 535 at 16px, border-radius 20px, padding 16px horizontal, full width of its container. Lighter than the filled CTA — used when the action is important but not the page's primary conversion."

    top_navigation_bar:
      role: "Persistent site navigation"

      info: "White background (#ffffff), no visible border, 64-72px height. Left: Uniswap pink logo (unicorn) at 24px. Center: search bar with light gray fill #f2f2f2 and 9999px pill radius. Right: ghost pill button + filled pink 'Connect' button. Horizontally distributed with logo+nav on left, search centered, actions on right."

    nav_link:
      role: "Top-level navigation item (Trade, Explore, Pool, Portfolio)"

      info: "Text #131313 at 14px weight 500, no underline, 4px vertical padding, 8px horizontal padding. Active state shows pink underline (1px #ff37c7). Hover state: text color #6a6a6a."

    search_bar:
      role: "Global token/pool/wallet search in the nav"

      info: "Background #f2f2f2, border-radius 9999px (full pill), padding 8px 16px, placeholder text #6a6a6a at 14px, leading search icon in #6a6a6a. Keyboard shortcut hint shown as small badge on the right."

    stats_card:
      role: "Display key platform metrics (volume, TVL, swappers)"

      info: "White background, 1px border #f2f2f2, border-radius 20px, padding 24px. Label text in #131313 at 14px weight 500. Value text in #131313 at 36px weight 535. The 24H swap volume variant uses #0c8911 (Forest) for the value text to signal positive real-time data."

    section_heading_block:
      role: "Large section titles (e.g. 'Powering trillions.', 'Built for all the ways you swap')"

      info: "Text in #131313 at 36-52px weight 535, line-height 1.11, letter-spacing -0.72 to -1.04px. No max-width constraint — headings stretch full content width to create a 'newspaper headline' feel. Followed by body copy at 16-18px in #131313 or #6a6a6a."

    text_link_with_arrow:
      role: "Inline navigation link (e.g. 'Trade without fees →')"

      info: "Text #131313 at 14px weight 500, right-arrow character appended. Underline on hover. Used in body copy to direct users to related pages."

    decorative_color_orb:
      role: "Floating blurred circle in the hero background"

      info: "Large (80-200px diameter) filled circles in #ff4d00, #2abdff, #00c3a0, #8251fb, #f50db4, #e01a2b, with heavy CSS blur filter. Positioned absolutely around the hero, partially clipped by the viewport. The orbs are the only non-structural visual element and they define the brand's playful personality."

  do_s_and_don_ts:

    do:
      - "Use #ff37c7 as the sole chromatic UI color — it is the only pink allowed on buttons, active states, and brand marks. Every other vivid hue is reserved for token/asset identification and decoration."
      - "Apply -0.02em letter-spacing to ALL Basel text regardless of size — this is not a display-only treatment, it is the base state of the typeface in this system."
      - "Use border-radius 20px as the default for cards, buttons, inputs, and chips. Reserve 9999px for genuine pill shapes (search bar, ghost nav button)."
      - "Separate surfaces with 1px borders in #f2f2f2 or #222222 rather than shadows. The system has one shadow value (a nearly invisible 10% black 0px 0px 10px blur) — reach for it only on elevated floating elements."
      - "Place decorative color orbs (blurred circles in #ff4d00, #2abdff, #00c3a0, #8251fb, #f50db4, #e01a2b) in hero and section backgrounds with heavy CSS blur to create the system's signature playful atmosphere."
      - "Set display headings at 52-64px with line-height 0.75-0.96 — the tight line-height on large type is what gives Basel its clinical-financial authority."
      - "Limit the swap card to white-on-white with hairline borders. Never add a drop shadow or colored background to the hero product widget — it must read as the calm center of the colorful hero."

    don_t:
      - "Do not use #ff37c7, #ff4d00, #2abdff, #00c3a0, #8251fb, #f50db4, or #e01a2b as generic accent colors for non-asset UI. These hues are a taxonomy, not a palette."
      - "Do not add elevation through drop shadows. The system's philosophy is flat — use border, not shadow, for separation. If you must use shadow, use only the 10% black 0px 0px 10px value."
      - "Do not use #fef4ff (Blush Mist) as a page background — it is a disabled/secondary surface only. The page canvas must be #ffffff."
      - "Do not pair two filled buttons of equal visual weight on the same screen. One filled pink CTA, one ghost/pill button, and all other actions are text links or chips."
      - "Do not use letter-spacing wider than -0.02em anywhere. The system never opens up tracking, even in small caps or labels — the compression is the personality."
      - "Do not use standard weight steps (400, 500, 600, 700) with Basel. The signature is the intermediate 485 and 535 weights — they prevent text from feeling either 'regular' or 'bold' and instead create a continuous weight gradient."
      - "Do not introduce gradients, dark-mode sections, or glassmorphism. The system is aggressively light-mode and flat. Any new section must be white or #fef4ff."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background — the structural base for all screens |"
    info: "| 1 | Card | `#ffffff` | Card, panel, and input surfaces sit on the same white as the canvas, separated only by 1px borders |"
    info: "| 2 | Tinted Surface | `#fef4ff` | Soft pink-tinted background used for secondary action buttons and occasional section tints — the only non-white surface |"
    info: "| 3 | Search Field | `#f2f2f2` | Inset search bar fill in the nav, creating a subtle depth cue without using shadows |"

  elevation:

    info: "The system intentionally avoids meaningful elevation. The only shadow in the design is color(srgb 0.0745098 0.0745098 0.0745098 / 0.00313726) 0px 0px 10px 0px — a black shadow at 0.3% opacity with zero offset, producing a barely-perceptible blur on the pink CTA button. All surface separation is achieved through 1px borders in #f2f2f2 or #222222. This is a deliberate flat-design choice: the interface reads as a printed page or financial document, not as layered software."

  imagery:

    info: "The visual language is dominated by abstract decorative color orbs — large, heavily blurred filled circles in the full vivid palette (#ff4d00, #2abdff, #00c3a0, #8251fb, #f50db4, #e01a2b) scattered across the hero and section backgrounds. These orbs are purely atmospheric: they create depth and playfulness without depicting any real-world object. There is no photography, no illustration of people, and no 3D rendering. Token logos appear as small circular icons (32px) inside swap and stats components. The hero section may include faint grid/dot patterns at very low opacity as a secondary atmospheric layer. Icons throughout the UI are thin-stroke outlined glyphs in #131313 or #6a6a6a, approximately 1.5px stroke weight, with no filled variants. The system is image-light and color-heavy — the orbs do the visual work that photography would do on a traditional site."

  layout:

    info: "The page uses a max-width contained layout centered at approximately 1200px, with the nav bar spanning full viewport width and the hero/swap widget centered within the content column. The hero pattern is a centered headline ('Swap anytime, anywhere.') above a centered swap card, with decorative color orbs floating in the negative space around them. Section rhythm is consistent vertical spacing of ~80px between sections, with seamless flow (no alternating dark bands — everything stays light). Content arrangement alternates between centered stacks (hero, stats) and 2-column split layouts (heading + body text on the left, stats grid on the right). The stats section uses a 2x2 grid of metric cards. Navigation is a single top bar — no sidebar, no mega-menu. The overall density is spacious and editorial: each section is given room to breathe, with the swap card as the calm functional anchor in a sea of colorful background atmosphere."

  agent_prompt_guide:

    quick_color_reference:
    - "Text: #131313"
    - "Background: #ffffff"
    - "Border: #f2f2f2 (hairline), #222222 (structural)"
    - "Accent: #ff37c7 (Uniswap Pink)"
    - "primary action: #ff37c7 (filled action)"
    - "Tinted surface: #fef4ff"

    example_component_prompts:

    - "**Create the hero swap widget**: White background #ffffff. Centered headline 'Swap anytime, anywhere.' at 52px Basel weight 535, #131313, letter-spacing -1.04px, line-height 0.96. Below it, a white card with 1px border in #f2f2f2, border-radius 20px, padding 16px, containing two sub-panels (Sell and Buy). Each sub-panel is white with 1px #f2f2f2 border, 20px radius, 16px padding, with a #6a6a6a label at 12px and a #131313 value at 36px weight 535. A #ff37c7 filled 'Select token' button (white text, 8px 16px padding, 20px radius) sits in the Buy panel. Below the card, a full-width soft pink button at #fef4ff with #ff37c7 text, 16px padding, 20px radius, weight 535. Place 5-7 blurred decorative circles (80-200px, heavy blur) in #ff4d00, #2abdff, #00c3a0, #8251fb, #f50db4, #e01a2b floating around the hero in absolute positioning."

    - "**Create the top navigation**: Full-width white bar, 72px height, no border. Left side: pink #ff37c7 unicorn logo at 24px followed by nav links (Trade, Explore, Pool, Portfolio) in #131313 at 14px weight 500 with 4px vertical and 12px horizontal padding. Center: search bar at 400px wide, background #f2f2f2, border-radius 9999px, padding 8px 16px, placeholder #6a6a6a. Right side: a ghost pill button 'Get the app' (transparent, 1px #222222 border, 9999px radius, 7px 14px padding, 14px weight 500) followed by a filled pink 'Connect' button (#ff37c7 background, white text, 20px radius, 8px 16px padding, 14px weight 535)."

    - "**Create a stats grid section**: Two-column layout. Left column: section heading 'Powering trillions.' at 36px Basel weight 535, #131313, letter-spacing -0.72px, followed by body copy in #131313 at 16px, and a text link 'Trade without fees →' in #131313 at 14px weight 500. Right column: 2x2 grid of stat cards. Each card is white with 1px #f2f2f2 border, 20px radius, 24px padding. Label at top in #131313 14px weight 500, value below at 36px weight 535 #131313. The '24H swap volume' card uses #0c8911 for the value text."

    - "**Create a ghost nav pill button**: Transparent background, 1px solid #222222 border, border-radius 9999px, padding 7px 14px, text in #131313 at 13px weight 500, no shadow. Used for secondary nav actions like 'Get the app'."

    - "**Create the soft pink full-width action button**: Background #fef4ff, text #ff37c7, border-radius 20px, padding 16px, full width of container, font size 16px weight 535. Used for medium-priority actions that need to span the full width of their card or panel."

  token_color_taxonomy:

    info: "The secondary vivid colors (#ff4d00 Ember, #8251fb Iris, #2abdff Sky, #00c3a0 Mint, #f50db4 Magenta, #e01a2b Crimson) function as a closed-set taxonomy for token/asset identification — each represents a brand or asset category. They appear in: token list icons, token category badges, chart segments, and the decorative orb system. They should NEVER be used as generic UI accents, status colors, or decorative background fills on cards or buttons. The exception is Crimson (#e01a2b), which doubles as the error/negative semantic color, and Forest (#0c8911), which is the success/positive semantic — these two earn their place in the semantic group because their hue-to-meaning mapping is consistent with the taxonomy."

  similar_brands:

    - "**Phantom Wallet** — Same light-mode crypto interface with a single saturated brand accent color and playful decorative orbs/blurs in the hero"
    - "**Coinbase Wallet** — Light-mode crypto product with flat surfaces, 1px border separation instead of shadows, and a single vivid brand color as the sole CTA accent"
    - "**Rainbow Wallet** — Playful light-mode DeFi interface that uses a full rainbow of vivid colors as token/asset identifiers rather than as UI accents"
    - "**Lido Finance** — Same flat white-canvas approach with a single chromatic brand color, geometric custom or near-custom typeface, and border-based surface separation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-uniswap-pink: #ff37c7;
          --color-midnight-ink: #131313;
          --color-pure-white: #ffffff;
          --color-carbon: #222222;
          --color-slate: #6a6a6a;
          --color-ash: #acacac;
          --color-frost: #f2f2f2;
          --color-true-black: #000000;
          --color-blush-mist: #fef4ff;
          --color-ember: #ff4d00;
          --color-iris: #8251fb;
          --color-magenta: #f50db4;
          --color-sky: #2abdff;
          --color-mint: #00c3a0;
          --color-crimson: #e01a2b;
          --color-forest: #0c8911;
        
          /* Typography — Font Families */
          --font-basel: 'Basel', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.33;
          --tracking-caption: -0.22px;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.48px;
          --text-heading: 36px;
          --leading-heading: 1.11;
          --tracking-heading: -0.72px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 0.96;
          --tracking-heading-lg: -1.04px;
          --text-display: 64px;
          --leading-display: 0.75;
          --tracking-display: -1.28px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w485: 485;
          --font-weight-medium: 500;
          --font-weight-w535: 535;
        
          /* 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-60: 60px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4.8px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-full: 100px;
          --radius-full-2: 999999px;
        
          /* Named Radii */
          --radius-tags: 20px;
          --radius-cards: 20px;
          --radius-icons: 20px;
          --radius-pills: 9999px;
          --radius-inputs: 20px;
          --radius-buttons: 20px;
        
          /* Shadows */
          --shadow-md: color(srgb 0.0745098 0.0745098 0.0745098 / 0.00313726) 0px 0px 10px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #ffffff;
          --surface-tinted-surface: #fef4ff;
          --surface-search-field: #f2f2f2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-uniswap-pink: #ff37c7;
          --color-midnight-ink: #131313;
          --color-pure-white: #ffffff;
          --color-carbon: #222222;
          --color-slate: #6a6a6a;
          --color-ash: #acacac;
          --color-frost: #f2f2f2;
          --color-true-black: #000000;
          --color-blush-mist: #fef4ff;
          --color-ember: #ff4d00;
          --color-iris: #8251fb;
          --color-magenta: #f50db4;
          --color-sky: #2abdff;
          --color-mint: #00c3a0;
          --color-crimson: #e01a2b;
          --color-forest: #0c8911;
        
          /* Typography */
          --font-basel: 'Basel', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.33;
          --tracking-caption: -0.22px;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.48px;
          --text-heading: 36px;
          --leading-heading: 1.11;
          --tracking-heading: -0.72px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 0.96;
          --tracking-heading-lg: -1.04px;
          --text-display: 64px;
          --leading-display: 0.75;
          --tracking-display: -1.28px;
        
          /* 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-60: 60px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4.8px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-full: 100px;
          --radius-full-2: 999999px;
        
          /* Shadows */
          --shadow-md: color(srgb 0.0745098 0.0745098 0.0745098 / 0.00313726) 0px 0px 10px 0px;
        }