superhi___style_reference:
  info: "> Paper-cut shapes scattered across a pale-blue classroom wall"

  theme: "light"

  info: "SuperHi reads like a creative-school art room translated to screen: a near-white pale-blue canvas strewn with oversized flat paper-cut shapes in candy-bright primaries, wrapped around quietly confident typography that never competes with the playfulness. The palette is almost monochrome in interface chrome — deep ink text, white surfaces, one electric violet that powers every action — while the decorative layer is intentionally loud: yellow pentagons, red half-circles, green triangles, pink stars and powder-blue blobs float behind content like cutouts on a studio wall. Components are pill-soft (24–48px radii), buttons are chunky capsules with arrow glyphs, and the tone is friendly, confident, and unmistakably creative."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Iris | `#2727e6` | `--color-electric-iris` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Ink Black | `#111118` | `--color-ink-black` | Primary text, dark secondary buttons, icon strokes, hairline borders — warmer than pure black, reads as ink rather than void |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, elevated panels, button text on dark fills, page sections that need to lift off the pale-blue canvas |"
    info: "| Chalk Blue | `#f0f6ff` | `--color-chalk-blue` | Dominant page canvas — a barely-there blue tint that prevents the page from feeling clinical and ties the scattered blue shapes to the background |"
    info: "| Frost Blue | `#e1edff` | `--color-frost-blue` | Secondary surface wash, input field backgrounds, footer tint — a step deeper than the canvas to create soft layering without shadows |"
    info: "| Carbon | `#000000` | `--color-carbon` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Marker Red | `#ff4141` | `--color-marker-red` | Decorative shape fill — the large red semicircle, star bursts, and accent blobs scattered through the decorative layer |"
    info: "| Hi-Yellow | `#ffda00` | `--color-hi-yellow` | Decorative shape fill — the yellow pentagon and sunny accents in the cutout composition; also used as a section wash behind featured content |"
    info: "| Powder Sky | `#91d8ec` | `--color-powder-sky` | Decorative shape fill — soft powder-blue circles and cloud forms in the scattered cutout scene |"
    info: "| Bubblegum Pink | `#ffbac4` | `--color-bubblegum-pink` | Red supporting accent for decorative details and low-frequency emphasis. |"
    info: "| Jelly Green | `#16ab59` | `--color-jelly-green` | Decorative shape fill — green triangle accents in the scattered cutout scene |"
    info: "| Sunbeam | `#ffe54d` | `--color-sunbeam` | Decorative shape fill — a slightly warmer yellow variant for layering against Hi-Yellow in the cutout composition |"

  tokens___typography:

    haas_grot_disp___display_and_headings_only___the_geometric_grotesque_has_a_sturdy__slightly_condensed_skeleton_that_holds_92px_hero_lines_without_losing_legibility__weight_stays_at_400_because_the_tight_letter_spacing__0_03em_at_the_largest_sizes_does_the_heavy_lifting__not_bold_weight____font_haas_grot_disp:
      - "**Substitute:** Inter, Manrope, or Suisse Int'l"
      - "**Weights:** 400"
      - "**Sizes:** 24px, 35px, 42px, 52px, 62px, 72px, 92px"
      - "**Line height:** 1.00, 1.10, 1.15, 1.35"
      - "**Letter spacing:** -0.0300em at 92px down to -0.0040em at 24px"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on`"
      - "**Role:** Display and headings only — the geometric grotesque has a sturdy, slightly condensed skeleton that holds 92px hero lines without losing legibility; weight stays at 400 because the tight letter-spacing (-0.03em at the largest sizes) does the heavy-lifting, not bold weight"

    haas_grot_text___body__navigation__buttons__and_smaller_ui_text___the_text_cut_of_the_same_family_tuned_for_readability_at_small_sizes_with_looser_tracking_than_the_display_companion____font_haas_grot_text:
      - "**Substitute:** Inter, Manrope, or Suisse Int'l"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 20px, 22px, 24px"
      - "**Line height:** 1.10, 1.25, 1.35, 1.40"
      - "**Letter spacing:** -0.0200em at 16px down to -0.0070em at 24px"
      - "**Role:** Body, navigation, buttons, and smaller UI text — the text cut of the same family tuned for readability at small sizes with looser tracking than the display companion"

    martian_mono___promotional_ticker_text__tag_labels__and_code_flavored_micro_copy___a_monospaced_voice_used_sparingly_for_editorial_texture__not_for_entire_paragraphs____font_martian_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, or Space Mono"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 17px"
      - "**Line height:** 1.00, 1.30, 1.35"
      - "**Letter spacing:** -0.0130em"
      - "**Role:** Promotional ticker text, tag labels, and code-flavored micro-copy — a monospaced voice used sparingly for editorial texture, not for entire paragraphs"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption-mono | 12px | 1.35 | -0.156px | `--text-caption-mono` |"
      info: "| body-sm | 16px | 1.4 | -0.32px | `--text-body-sm` |"
      info: "| body | 20px | 1.4 | -0.2px | `--text-body` |"
      info: "| subheading | 22px | 1.35 | -0.176px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | -0.168px | `--text-heading-sm` |"
      info: "| heading-lg | 42px | 1.1 | -0.378px | `--text-heading-lg` |"
      info: "| display | 52px | 1.1 | -0.468px | `--text-display` |"
      info: "| display-lg | 62px | 1.05 | -0.558px | `--text-display-lg` |"
      info: "| display-xl | 72px | 1 | -0.648px | `--text-display-xl` |"
      info: "| mega | 92px | 1 | -2.76px | `--text-mega` |"

  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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 5000px |"
      info: "| cards | 24px |"
      info: "| small | 16px |"
      info: "| inputs | 5000px |"
      info: "| shapes | 0px |"
      info: "| buttons | 48px |"

    layout:

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

  components:

    primary_pill_button:
      role: "Main call-to-action — course enrollment, catalog navigation, see-more links"

      info: "Fill #2727e6, text #ffffff in Haas Grot Text 20px weight 400, letter-spacing -0.01em, 12px 24px padding, border-radius 48px (full pill), includes a trailing arrow glyph (→) after the label. Hard offset shadow 0 4px 0 0 #111118 gives a sticker-like pop without softness."

    dark_pill_button:
      role: "Secondary action — free trials, sign-in entry points"

      info: "Fill #000000, text #ffffff, same 48px pill radius and 20px label, 12px 24px padding, no arrow. Hard offset shadow 0 4px 0 0 #2727e6 echoes the primary brand color as the shadow hue."

    ghost_text_button:
      role: "Tertiary navigation — 'About', 'Catalog' nav links, footer links"

      info: "No fill, no border, text #111118 in Haas Grot Text 20px weight 400, 8px vertical padding, transparent background, underline only on hover."

    announcement_ticker:
      role: "Site-wide promotional bar at the very top of every page"

      info: "Full-bleed bar, fill #111118, text #ffffff in Martian Mono 12px, letter-spacing -0.013em, uppercase tracking. Repeating message with a bullet separator. Fades to transparent on the left edge via the violet-to-clear linear-gradient, suggesting an infinite marquee."

    top_navigation_bar:
      role: "Primary site navigation, sticky below the ticker"

      info: "White background #ffffff, 1px bottom border #e1edff, height ~64px. Left: round 32px logo mark + 'Catalog' and 'About' links in Haas Grot Text 20px. Right: search icon, 'Cart' link, 'Sign in' pill button. No drop shadow — the 1px hairline is the only separator."

    hero_text_block:
      role: "Centered headline-and-CTA composition on the home hero"

      info: "Headline in Haas Grot Disp 72px weight 400, color #111118, letter-spacing -0.03em, two lines maximum, centered. Above the headline, a small 48px round icon mark in #2727e6 (the smiley emoji container). Below: subhead in Haas Grot Text 20px #111118, then two pill buttons side by side with 16px gap."

    decorative_shape_layer:
      role: "Atmospheric cutout shapes scattered behind page content"

      info: "Absolute-positioned oversized flat geometric forms — pentagons, triangles, semicircles, stars, circles — in the five accent colors. Sizes range 200–600px, rotated at varied angles, with 0px radius and no shadow. Sits behind the content layer at z-index 0, partially clipped by the viewport edges to create the impression of shapes spilling off the page."

    course_card:
      role: "Catalog grid item — links to individual course pages"

      info: "White surface #ffffff, 24px border-radius, 1px border #e1edff, 24px padding. Course image at top with 16px top radius. Title in Haas Grot Text 20px weight 400, meta line below in Martian Mono 12px, price or 'Free' tag at bottom. Hard offset shadow 0 2px 0 0 #111118."

    student_work_card:
      role: "Showcase grid item — displays student project thumbnails"

      info: "White surface, 16px border-radius, no shadow, image fills the entire card edge-to-edge with the title overlaid at the bottom-left in a small text bar. Designed to be visual-first, with minimal chrome."

    featured_section_wash:
      role: "Highlighted content band (e.g. 'Most popular')"

      info: "Full-bleed background in #ffbac4 (bubblegum) or #ffda00 (hi-yellow), content sits inside a 1200px max-width container. Section heading in Haas Grot Disp 42px #111118 left-aligned, with a right-aligned 'See all content →' primary pill button at the section's vertical center."

    input_field:
      role: "Email capture, search, newsletter signup"

      info: "Fill #f0f6ff, border 1px solid #e1edff, border-radius 5000px (full pill), padding 12px 20px, placeholder text in #111118 at 40% opacity, Haas Grot Text 16px. Focus state adds a 2px #2727e6 outer ring with 2px offset."

    tag___category_pill:
      role: "Course category labels, filter chips"

      info: "5000px border-radius, fill #e1edff, text #111118 in Haas Grot Text 16px, padding 4px 12px, no border. Active filter state swaps fill to #2727e6 and text to #ffffff."

    cookie_consent_bar:
      role: "GDPR notice pinned to the bottom of the viewport"

      info: "Fixed full-width, fill #111118, padding 16px 24px, text #ffffff in Haas Grot Text 16px left-aligned with body copy and a 'We use essential cookies…' message. Right side: two pill buttons — 'Essential cookies only' in ghost style (white text, 1px white border) and 'Sure thing' as a dark-fill pill with white text."

    round_icon_container:
      role: "Brand mark, category icon, avatar fallback"

      info: "48px circle, fill #2727e6, contains a centered emoji or icon glyph in #ffffff. Used as the small smiley mark above the hero headline and as a floating category indicator."

  do_s_and_don_ts:

    do:
      - "Use #2727e6 as the single chromatic for every filled action button, active link, and brand-tinted icon container — no secondary brand colors on buttons."
      - "Set border-radius to 48px for all primary and secondary buttons; 24px for cards; 5000px for inputs, tags, and icon containers."
      - "Weight 400 across all three type families — the hierarchy comes from size, line-height, and letter-spacing, not from going bold."
      - "Anchor letter-spacing to -0.03em at 92px and ease it to -0.004em at 24px so display type tightens as it scales up."
      - "Scatter at least 3–5 oversized flat geometric shapes in the five accent colors behind any full-bleed hero or section, with 0px radius and no shadow."
      - "Use Martian Mono 12px only for promotional ticker text, tag labels, and code-flavored meta lines — never for paragraphs."
      - "Build cards on #ffffff with a 1px #e1edff hairline border and a hard 0 2px 0 0 #111118 offset shadow — no soft drop shadows."

    don_t:
      - "Don't introduce a second brand chromatic on buttons or links — #2727e6 owns every action; the five accent colors are decoration only."
      - "Don't use bold or semibold weights — the type system runs entirely on 400, and bumping weight breaks the quiet, confident voice."
      - "Don't apply soft blurred drop shadows (rgba 0,0,0,0.x with blur > 4px) — the system uses hard offset shadows or no shadow at all."
      - "Don't use gradients inside decorative shapes or content blocks — only the announcement ticker carries a gradient, and only as a fade-to-clear."
      - "Don't put text directly on the pale-blue canvas without a card or button surface — the contrast ratio of #111118 on #f0f6ff is fine, but layout rhythm requires cards to create the page grid."
      - "Don't use the accent colors (red, yellow, green, pink, sky) on text or borders — they live exclusively as fills of the decorative shape layer."
      - "Don't use border-radius below 16px on any visible component — sharp corners would break the soft, pill-driven visual language."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Chalk Blue Canvas | `#f0f6ff` | Page background — the default stage for the scattered cutout shapes |"
    info: "| 1 | Paper White Card | `#ffffff` | Card surfaces, elevated content blocks, button fills |"
    info: "| 2 | Frost Blue Wash | `#e1edff` | Soft section background and input field rest state |"
    info: "| 3 | Bubblegum Section | `#ffbac4` | Featured content section wash (e.g. 'Most popular') |"
    info: "| 4 | Hi-Yellow Section | `#ffda00` | Promotional section wash for high-attention blocks |"

  elevation:

    - "**Primary CTA button:** `0 4px 0 0 #111118`"
    - "**Secondary dark button:** `0 4px 0 0 #2727e6`"
    - "**Course card:** `0 2px 0 0 #111118`"

  imagery:

    info: "Imagery is split into two distinct registers. The decorative layer is oversized flat paper-cut geometric shapes — pentagons, triangles, semicircles, stars, and circles in marker-red, hi-yellow, jelly-green, powder-sky, and bubblegum-pink — scattered behind content at full-bleed, overlapping the canvas edges, with sharp corners and zero shadow. The content layer is student project cards and course thumbnails shown as tight rectangular crops with 16px radii, no rounded masking, sitting on white card surfaces. Photography (when used) is high-key and product-focused, not lifestyle. There are no gradients in the decorative shapes; the only gradient is a violet-to-transparent left fade on the announcement bar."

  layout:

    info: "Layout is full-bleed with a 1200px content rail. The announcement ticker spans edge to edge at the very top, followed by a sticky white nav bar with the wordmark on the left and account actions on the right. The hero is a centered text block — single headline, subhead, and two pill buttons side by side — with decorative shapes floating in the negative space around the text rather than in a split column. Below the hero, sections alternate between Chalk Blue canvas and white card surfaces, stacking vertically with 80px gaps. Course and student work cards use a 3-column grid that collapses to 2 then 1. Section headers are left-aligned with a right-aligned 'See all' link. The cookie consent is a fixed full-width bar at the bottom with a dark fill and two action buttons aligned right."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #111118"
    - "background: #f0f6ff (canvas) / #ffffff (cards)"
    - "border: #e1edff"
    - "accent shapes: #ffda00, #ff4141, #ffbac4, #91d8ec, #16ab59"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"

    - "Hero text block: center a 48px #2727e6 round icon container at the top, then a two-line headline in Haas Grot Disp 72px weight 400, #111118, letter-spacing -2.16px, line-height 1.0. Subhead in Haas Grot Text 20px #111118, line-height 1.4. Below, two pill buttons with 16px gap: a primary 48px-pill #2727e6 button with white 20px label and trailing → arrow, 12px 24px padding, hard shadow 0 4px 0 0 #111118; beside it a secondary 48px-pill #000000 button with white label, same padding, shadow 0 4px 0 0 #2727e6."

    - "Course card: #ffffff surface, 24px radius, 1px #e1edff border, 24px padding, hard shadow 0 2px 0 0 #111118. Course image at top spanning the card width with 16px top radius. Title in Haas Grot Text 20px #111118, meta in Martian Mono 12px #111118 at 60% opacity, and a 5000px-radius tag pill in #e1edff with #111118 16px label for the category."

    - "Announcement ticker bar: full-bleed #111118 strip, 32px tall, text in Martian Mono 12px #ffffff, letter-spacing -0.156px, repeating message with • separator. Apply a linear-gradient(to left, #2727e6 0%, rgba(0,0,0,0) 50%) as a left-edge mask fade."

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

    - "Cookie consent bar: fixed to bottom, full-width, fill #111118, 16px 24px padding. Left-aligned body copy in Haas Grot Text 16px #ffffff. Right-aligned two buttons with 8px gap: a ghost button (transparent fill, 1px #ffffff border, white text, 48px radius) reading 'Essential cookies only', and a dark pill (#000000 fill, white text, 48px radius) reading 'Sure thing'."

  decorative_shape_system:

    info: "The scattered paper-cut shape layer is the brand's most distinctive visual signature — treat it as a first-class component. Build a reusable shape library with five primitives: pentagon, triangle, semicircle, star, and circle. Each instance picks one of the five accent colors (#ffda00, #ff4141, #ffbac4, #91d8ec, #16ab59) as its fill, uses 0px border-radius, zero shadow, and is placed at absolute position behind the content layer with a random rotation between -15° and +15°. Sizes range from 200px to 600px. Shapes should always be clipped by the viewport edge — they spill off the page, they don't sit fully inside it. On any full-bleed section, include 3–5 shapes minimum; on the home hero, include 6–8."

  elevation_philosophy:

    info: "Elevation in this system is not about soft Gaussian shadows — it's about hard, offset, sticker-like pop. Every shadow is a 0px-blur offset shadow (e.g. 0 4px 0 0 #111118), creating the impression that cards and buttons are physically stuck onto the page rather than floating above it. This pairs naturally with the paper-cut decorative layer: both the content cards and the background shapes are flat cutouts, and the offset shadow is the only thing telling you which layer is on top."

  similar_brands:

    - "**Skillshare** — Same creative-education positioning with a bright, illustrative decorative layer behind content and pill-shaped CTA buttons"
    - "**Canva's design school pages** — Same single-vibrant-accent-plus-pastel-canvas treatment and oversized flat geometric shapes used as atmospheric background"
    - "**Maven** — Same soft-blue canvas, confident centered hero typography, and pill-radius buttons with trailing arrow glyphs"
    - "**Glitch** — Same playful, creative-platform tone with a pale pastel background and one saturated brand color doing all the action-button work"
    - "**Are.na** — Same clean, near-white canvas with quiet typography and the visual personality carried by scattered color accents rather than chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-iris: #2727e6;
          --color-ink-black: #111118;
          --color-paper-white: #ffffff;
          --color-chalk-blue: #f0f6ff;
          --color-frost-blue: #e1edff;
          --color-carbon: #000000;
          --color-marker-red: #ff4141;
          --color-hi-yellow: #ffda00;
          --color-powder-sky: #91d8ec;
          --color-bubblegum-pink: #ffbac4;
          --color-jelly-green: #16ab59;
          --color-sunbeam: #ffe54d;
        
          /* Typography — Font Families */
          --font-haas-grot-disp: 'Haas Grot Disp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text: 'Haas Grot Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-martian-mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption-mono: 12px;
          --leading-caption-mono: 1.35;
          --tracking-caption-mono: -0.156px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.32px;
          --text-body: 20px;
          --leading-body: 1.4;
          --tracking-body: -0.2px;
          --text-subheading: 22px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.176px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.168px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.378px;
          --text-display: 52px;
          --leading-display: 1.1;
          --tracking-display: -0.468px;
          --text-display-lg: 62px;
          --leading-display-lg: 1.05;
          --tracking-display-lg: -0.558px;
          --text-display-xl: 72px;
          --leading-display-xl: 1;
          --tracking-display-xl: -0.648px;
          --text-mega: 92px;
          --leading-mega: 1;
          --tracking-mega: -2.76px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 48px;
          --radius-full-2: 500px;
          --radius-full-3: 800px;
          --radius-full-4: 5000px;
        
          /* Named Radii */
          --radius-tags: 5000px;
          --radius-cards: 24px;
          --radius-small: 16px;
          --radius-inputs: 5000px;
          --radius-shapes: 0px;
          --radius-buttons: 48px;
        
          /* Surfaces */
          --surface-chalk-blue-canvas: #f0f6ff;
          --surface-paper-white-card: #ffffff;
          --surface-frost-blue-wash: #e1edff;
          --surface-bubblegum-section: #ffbac4;
          --surface-hi-yellow-section: #ffda00;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-iris: #2727e6;
          --color-ink-black: #111118;
          --color-paper-white: #ffffff;
          --color-chalk-blue: #f0f6ff;
          --color-frost-blue: #e1edff;
          --color-carbon: #000000;
          --color-marker-red: #ff4141;
          --color-hi-yellow: #ffda00;
          --color-powder-sky: #91d8ec;
          --color-bubblegum-pink: #ffbac4;
          --color-jelly-green: #16ab59;
          --color-sunbeam: #ffe54d;
        
          /* Typography */
          --font-haas-grot-disp: 'Haas Grot Disp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text: 'Haas Grot Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-martian-mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption-mono: 12px;
          --leading-caption-mono: 1.35;
          --tracking-caption-mono: -0.156px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.32px;
          --text-body: 20px;
          --leading-body: 1.4;
          --tracking-body: -0.2px;
          --text-subheading: 22px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.176px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.168px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.378px;
          --text-display: 52px;
          --leading-display: 1.1;
          --tracking-display: -0.468px;
          --text-display-lg: 62px;
          --leading-display-lg: 1.05;
          --tracking-display-lg: -0.558px;
          --text-display-xl: 72px;
          --leading-display-xl: 1;
          --tracking-display-xl: -0.648px;
          --text-mega: 92px;
          --leading-mega: 1;
          --tracking-mega: -2.76px;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 48px;
          --radius-full-2: 500px;
          --radius-full-3: 800px;
          --radius-full-4: 5000px;
        }