frame_io___style_reference:
  info: "> Midnight cinema projection room."

  info: "A dark suite where a single blue spotlight does all the work and the UI recedes so creative content can project forward."

  theme: "dark"

  info: "Frame.io is a midnight projection room for creative teams: a near-black canvas layered with deep cosmic gradients, where large confident display type floats above product surfaces like film titles above a reel. The palette is almost entirely achromatic — only one vivid blue (#6199f6) and a muted violet border tone (#4f4f80) break the monochrome, used sparingly for icons, eyebrow labels, and card edges. Typography is the loudest voice: a single geometric sans (FrameGothic) carries everything from 80px display headlines to 14px body copy, with custom inktrap letterforms reserved for tiny all-caps section labels. Components stay thin and editorial: pill-shaped nav buttons, ghost CTAs, 10px-radius cards with violet-tinted borders, and zero decorative ornament — every element exists to frame the work, not compete with it."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Carbon Vellum | `#fcfcfc` | `--color-carbon-vellum` | Primary text, inverse button text, icon strokes — near-white reads as paper against the void |"
    info: "| Obsidian | `#0a0a13` | `--color-obsidian` | Primary page canvas and dominant background; the slight blue undertone keeps it from feeling flat black |"
    info: "| Pitch | `#000000` | `--color-pitch` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Void | `#040407` | `--color-void` | Secondary canvas layer and topmost nav background, one shade lighter than Pitch |"
    info: "| Graphite | `#08080c` | `--color-graphite` | Card surface for elevated product mockups, sits one step above Obsidian |"
    info: "| Smoke | `#757580` | `--color-smoke` | Secondary body text and metadata — cool gray, never warm, stays quiet under headlines |"
    info: "| Ash | `#a3a3b3` | `--color-ash` | Tertiary text, card descriptions, inactive nav, most frequently used muted foreground |"
    info: "| Charcoal | `#2a2a32` | `--color-charcoal` | Subtle card border on light-mode-adjacent surfaces; hairline divider |"
    info: "| Iris Glow | `#6199f6` | `--color-iris-glow` | Sole chromatic accent — icons, eyebrow labels, links, active states, feature marks. One blue, used surgically, carries the entire brand identity |"
    info: "| Twilight | `#4f4f80` | `--color-twilight` | Muted violet used for card borders, glow halos, and atmospheric tints — the only color allowed to live near content surfaces |"
    info: "| Specter Lilac | `#dedfee` | `--color-specter-lilac` | Soft highlight on violet accents and light-mode card edges; cool, desaturated lavender |"

  tokens___typography:

    times___times___detected_in_extracted_data_but_not_described_by_ai____font_times:
      - "**Weights:** 400"
      - "**Sizes:** 10px"
      - "**Line height:** 1"
      - "**Role:** Times — detected in extracted data but not described by AI"

    framegothic___primary_brand_typeface_for_everything_from_80px_display_headlines_down_to_10px_metadata__the_custom_geometric_sans_carries_the_entire_voice___tight_letter_spacing__0_045em_at_display_sizes_makes_large_type_feel_compressed_and_modern__while_the_wide_weight_range_400_500_600_lets_hierarchy_do_the_talking_without_changing_family_____font_framegothic:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10px, 11px, 12px, 13px, 14px, 15px, 16px, 18px, 24px, 30px, 38px, 48px, 80px"
      - "**Line height:** 0.96 to 1.50"
      - "**Letter spacing:** -3.6px at 80px, -1.92px at 48px, -1.33px at 38px, -0.9px at 30px, -0.72px at 24px, +0.16px at 16px"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Role:** Primary brand typeface for everything from 80px display headlines down to 10px metadata. The custom geometric sans carries the entire voice — tight letter-spacing (-0.045em at display sizes) makes large type feel compressed and modern, while the wide weight range (400/500/600) lets hierarchy do the talking without changing family."

    neuemachinainktrap___reserved_exclusively_for_all_caps_eyebrow_labels_e_g___the_frame_io_platform___sharing___presenting___workflow_management__wide_tracking_0_06em_and_inktrap_cuts_give_a_mechanical__stamped_feel___these_labels_are_always_iris_glow_or_a_light_tone__never_the_body_color_____font_neuemachinainktrap:
      - "**Substitute:** Space Mono"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 0.90"
      - "**Letter spacing:** +0.72px at 12px"
      - "**Role:** Reserved exclusively for all-caps eyebrow labels (e.g. 'THE FRAME.IO PLATFORM', 'SHARING & PRESENTING', 'WORKFLOW MANAGEMENT'). Wide tracking (0.06em) and inktrap cuts give a mechanical, stamped feel — these labels are always Iris Glow or a light tone, never the body color."

    arial___system_fallback_and_small_ui_text_inside_embedded_product_mockups__carries_no_brand_weight____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.20"
      - "**Role:** System fallback and small UI text inside embedded product mockups; carries no brand weight"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.45 | 0.72px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.45 | 0.16px | `--text-body` |"
      info: "| subheading | 18px | 1.3 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | -0.72px | `--text-heading-sm` |"
      info: "| heading | 38px | 1.04 | -1.33px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.02 | -1.92px | `--text-heading-lg` |"
      info: "| display | 80px | 0.96 | -3.6px | `--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: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 176 | 176px | `--spacing-176` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 100px |"
      info: "| cards | 10px |"
      info: "| pills | 100px |"
      info: "| buttons | 100px |"
      info: "| dividers | 1px |"
      info: "| featureCards | 24px |"

    layout:

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

  components:

    pill_navigation_button:
      role: "Primary action in the top nav bar (e.g. 'Start Free Trial', 'Contact Us')"

      info: "100px border-radius pill, 12px 20px padding, Carbon Vellum fill, Obsidian text at 14px FrameGothic 500. Zero border, no shadow. The pill geometry is the brand's most repeated shape."

    ghost_nav_link:
      role: "Secondary navigation items (Features, Enterprise, Resources, Pricing)"

      info: "Transparent fill, no border, Carbon Vellum text at 14px FrameGothic 400. Underline appears on hover; no background shift. Stays nearly invisible until interacted with."

    sign_in_text_link:
      role: "Authenticated user entry point in nav"

      info: "Plain text button, Carbon Vellum at 14px FrameGothic 400, no background, no border. The lightest possible interactive element."

    hero_cta_pill:
      role: "Primary conversion button in hero sections ('Start Free Trial')"

      info: "100px radius, Carbon Vellum fill, Obsidian text, 14px FrameGothic 500, 14px 28px padding. Casts no shadow. The white pill against the cosmic gradient is the page's most contrasting element."

    ghost_cta_button:
      role: "Secondary conversion button in hero sections ('Take a Product Tour')"

      info: "100px radius, transparent fill, 1px Carbon Vellum border, Carbon Vellum text, 14px FrameGothic 400, 14px 28px padding. Inverts to filled Carbon Vellum on hover."

    announcement_banner:
      role: "Top-of-page product update notification"

      info: "Full-width strip with deep blue-to-violet gradient, Carbon Vellum text at 13px centered, dismiss 'x' on the right. Height ~40px, sits above the main nav."

    eyebrow_label:
      role: "Tiny all-caps section identifiers ('THE FRAME.IO PLATFORM', 'SHARING & PRESENTING')"

      info: "NeueMachinaInktrap 12px, weight 400, letter-spacing 0.06em, color Iris Glow (#6199f6) or Smoke. Line-height 0.90. Always sits above the section headline, left-aligned."

    display_headline:
      role: "Hero and major section headlines (e.g. 'One platform for all your creative work.')"

      info: "FrameGothic 400 at 48–80px, line-height 0.96–1.02, letter-spacing -1.92 to -3.6px, Carbon Vellum. Weight 400 (not bold) is a deliberate restraint choice — the size does the work, the weight whispers."

    subheadline_paragraph:
      role: "Supporting body copy under hero and section headlines"

      info: "FrameGothic 400 at 18px, line-height 1.30, Smoke (#757580). Max-width ~560px. Stays quiet — its job is to inform, not to compete with the headline."

    feature_column_card:
      role: "Four-column feature grid items in mid-page sections"

      info: "Transparent background, no card surface. Layout: Iris Glow icon (24px) at top, FrameGothic 500 18px Carbon Vellum heading, 14px Smoke body copy below. 24px column gap. The feature 'card' is really just a typographic block — no border, no background."

    product_ui_mockup_container:
      role: "Hero and feature visual: the actual Frame.io app interface shown as marketing imagery"

      info: "10px border-radius, 1px Twilight (#4f4f80) border, inner surface is the native dark UI of the product (Graphite, ~#181826 with violet shadow #181826). The container is intentionally minimal — a thin violet halo, nothing else."

    video_showcase_player:
      role: "Cinematic full-width video preview in lower sections"

      info: "10px border-radius, embedded video player with Iris Glow play button overlay (48px circle, 60% opacity). Caption strip below at 12px Smoke. The video itself is the hero — the player chrome is nearly invisible."

    section_divider:
      role: "Visual separation between full-width content bands"

      info: "No physical divider — sections flow seamlessly using the cosmic gradient background. When separation is needed, a 1px Charcoal (#2a2a32) hairline."

    adobe_logo_mark_nav:
      role: "Adobe acquisition indicator in top nav"

      info: "Tiny stacked-triangle Adobe 'A' mark at far right of nav, Carbon Vellum, 16px height. Pure brand signal, no interaction."

  do_s_and_don_ts:

    do:
      - "Use 100px border-radius for all buttons, nav items, and pills — the pill geometry is the brand's most repeated shape"
      - "Set display headlines at weight 400 with tight negative letter-spacing (-1.92px at 48px, -3.6px at 80px) — never go bold for impact"
      - "Reserve Iris Glow (#6199f6) for icons, eyebrow labels, links, and active states — one accent color, used surgically"
      - "Place the NeueMachinaInktrap eyebrow label (12px, uppercase, 0.06em tracking) above every section headline as a section marker"
      - "Layer at least one gradient on every page background — never use flat #0a0a13 alone, the cosmic atmosphere requires depth"
      - "Set the max content width to 1280px and center all content within it, while backgrounds run full-bleed"
      - "Use FrameGothic at 14–18px for all body and feature text in #a3a3b3 or #757580 — these two grays carry all secondary information"
      - "Frame product imagery in 10px-radius containers with a 1px #4f4f80 violet border — the halo is the only frame allowed"

    don_t:
      - "Do not use weight 600 or 700 for display headlines — the 400 weight is a signature restraint choice"
      - "Do not introduce additional accent colors — Iris Glow is the only chromatic accent in the system"
      - "Do not use flat black (#000000) as a full-page background — always layer gradients to create the cosmic atmosphere"
      - "Do not add card backgrounds or heavy borders to feature columns — they are typographic blocks, not cards"
      - "Do not use serif fonts, decorative typefaces, or any font other than FrameGothic, NeueMachinaInktrap, or system fallbacks"
      - "Do not add drop shadows to buttons or nav items — the fill contrast alone carries the hierarchy"
      - "Do not center-align body paragraphs — left-align with a max-width of ~560px for readable line lengths"
      - "Do not use the eyebrow label style (NeueMachinaInktrap caps) for any text other than section identifiers — it's a stamp, not a label"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cosmic Canvas | `#0a0a13` | Primary page background with deep purple/blue radial gradient overlay |"
    info: "| 1 | Nav Veil | `#040407` | Slightly darker topmost layer behind navigation bar |"
    info: "| 2 | Product Surface | `#08080c` | Embedded app UI mockups and product chrome |"
    info: "| 3 | Card Halo | `#181826` | Inset shadow tint for cards with violet borders, creates depth without lifting the surface |"

  elevation:

    - "**Product UI Mockup Container:** `inset 0 0 0 1px #4f4f80, 0 0 60px rgba(79, 79, 128, 0.15)`"
    - "**Hero CTA Pill:** `none — relies on fill contrast, no shadow`"
    - "**Video Showcase Player:** `0 24px 48px rgba(0, 0, 0, 0.5)`"

  imagery:

    imagery_is_the_product_itself: "high-fidelity screenshots of the Frame.io app interface dominate the hero, showing real video thumbnails, review threads, and version stacks. Below the fold, cinematic stills from actual films/projects (a silhouetted figure against warm light, a close-up portrait of a performer) are presented as full-bleed video showcases with minimal player chrome. No stock photography, no abstract illustrations, no 3D renders — the visual language is 'show, don't decorate.' The cosmic gradient backgrounds (deep purples, midnight blues, near-black) create an atmosphere of a dark editing suite or projection room. Icons throughout the UI are thin-stroke, single-color Iris Glow, 24px, outlined style. No filled iconography anywhere."

  layout:

    info: "Full-bleed dark canvas with all content constrained to a max-width of ~1280px centered. The hero is a split composition: left half carries the display headline and stacked CTAs (left-aligned), right half shows the product UI mockup floating against the cosmic gradient. Section rhythm alternates between text-dominant bands and product-visual bands, with 80px vertical gaps. Mid-page uses a 4-column feature grid (icon + heading + body) that reads more like editorial columns than cards. No sidebar, no mega-menu — navigation is a single slim top bar with pill buttons. Lower sections are full-width video showcases with centered text above. The overall density is spacious and cinematic — sections breathe, with generous padding and a single horizontal scroll metaphor implied by the flowing gradient background."

  agent_prompt_guide:

  quick_color_reference:
    - "background: #0a0a13 (cosmic canvas) or full cosmic gradient"
    - "text: #fcfcfc (primary), #757580 (secondary), #a3a3b3 (tertiary)"
    - "border: #4f4f80 (violet halo) or #2a2a32 (charcoal hairline)"
    - "accent: #6199f6 (Iris Glow — icons, eyebrow labels, links)"
    - "primary action: no distinct CTA color"
    - "secondary action: ghost border in #fcfcfc"

  example_component_prompts:

    1__hero_section_with_display_headline:
    info: "Full-bleed cosmic gradient background (linear: #0a0010 → #02000a → #0c1d32). Left half: eyebrow label 'THE FRAME.IO PLATFORM' in NeueMachinaInktrap 12px, #6199f6, letter-spacing 0.06em. Display headline below in FrameGothic 400, 80px, line-height 0.96, letter-spacing -3.6px, color #fcfcfc. Subheadline at FrameGothic 400, 18px, #757580, max-width 560px. Two CTAs stacked: filled pill (#fcfcfc bg, #0a0a13 text, 100px radius, 14px 28px padding) and ghost pill (transparent, 1px #fcfcfc border, #fcfcfc text). Right half: product UI mockup in 10px-radius container with 1px #4f4f80 border."

    2__feature_column:
    info: "Four-column grid, 24px gap. No card background. Iris Glow (#6199f6) outlined icon at 24px at top. FrameGothic 500, 18px, #fcfcfc heading. FrameGothic 400, 14px, line-height 1.50, #a3a3b3 body copy below heading."

    3__eyebrow_label___section_headline:
    stack_with_6px_gap__eyebrow: "NeueMachinaInktrap 12px, #6199f6, uppercase, letter-spacing 0.06em, line-height 0.90. Headline: FrameGothic 400, 48px, line-height 1.02, letter-spacing -1.92px, #fcfcfc."

    4__video_showcase_block:
    info: "Full-width container with 80px top padding. Centered eyebrow label and headline above. Below: video player in 10px-radius frame, Carbon Vellum play button overlay, 1px #4f4f80 border, subtle shadow (0 24px 48px rgba(0,0,0,0.5)). Optional caption strip at 12px #757580."

    5__ghost_nav_item:
    info: "Transparent, no border, FrameGothic 400, 14px, #fcfcfc. On hover: underline appears. No background change ever."

  gradient_system:

    info: "Frame.io's background is not a flat color — it's a layered cosmic atmosphere built from 3-4 radial and linear gradients stacked on the Obsidian canvas. The hero combines a diagonal linear gradient (195deg, #0a0010 → #02000a → #0c1d32) with a radial glow (centered bottom, #000b35 → transparent). Mid-page sections use a different radial (top-left origin, #0e0f20 → #0c0c19 → #000000) to shift the light. The result: a page that feels like the same dark room but with light pooling in different corners. Never use a flat #000000 for a full background — always layer at least one gradient to create depth. Gradient colors should stay within the palette: deep indigos (#0c1d32), midnight purples (#0a001e), and near-blacks with blue undertones (#0e0f20)."

  type_as_identity:

    info: "Frame.io's typographic system is its strongest brand signal after the accent color. Three rules carry the entire identity: (1) Display type is always weight 400, not 700 — the size and tight letter-spacing do the heavy lifting, the weight whispers. This is a deliberate anti-SaaS-hero choice. (2) The NeueMachinaInktrap eyebrow label is the only place where the inktrap geometry appears; it stamps each section like a mechanical serial number. (3) Letter-spacing scales inversely with size: -0.045em at 80px, -0.01em at 16px, +0.06em at 12px caps. Large type compresses, body type relaxes, labels expand. Do not flatten this — each size has its own tracking value."

  similar_brands:

    - "**Adobe Premiere Pro** — Same dark editing-suite atmosphere with deep purple gradient backgrounds and one blue accent for active tools"
    - "**Vimeo** — Dark-mode creative platform with pill-shaped CTAs and video-first product mockups dominating the hero"
    - "**Linear** — Similar commitment to a single accent color against near-black, with display type at weight 400 and tight letter-spacing doing all the visual work"
    - "**Pitch** — Dark product pages with cosmic gradient backgrounds, oversized thin-weight headlines, and one vivid accent for interactive elements"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-carbon-vellum: #fcfcfc;
          --color-obsidian: #0a0a13;
          --color-pitch: #000000;
          --color-void: #040407;
          --color-graphite: #08080c;
          --color-smoke: #757580;
          --color-ash: #a3a3b3;
          --color-charcoal: #2a2a32;
          --color-iris-glow: #6199f6;
          --color-twilight: #4f4f80;
          --color-specter-lilac: #dedfee;
        
          /* Typography — Font Families */
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-framegothic: 'FrameGothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neuemachinainktrap: 'NeueMachinaInktrap', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', 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.72px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.45;
          --tracking-body: 0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.72px;
          --text-heading: 38px;
          --leading-heading: 1.04;
          --tracking-heading: -1.33px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.02;
          --tracking-heading-lg: -1.92px;
          --text-display: 80px;
          --leading-display: 0.96;
          --tracking-display: -3.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-144: 144px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-lg: 10px;
          --radius-3xl: 24px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-nav: 100px;
          --radius-cards: 10px;
          --radius-pills: 100px;
          --radius-buttons: 100px;
          --radius-dividers: 1px;
          --radius-featurecards: 24px;
        
          /* Surfaces */
          --surface-cosmic-canvas: #0a0a13;
          --surface-nav-veil: #040407;
          --surface-product-surface: #08080c;
          --surface-card-halo: #181826;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-carbon-vellum: #fcfcfc;
          --color-obsidian: #0a0a13;
          --color-pitch: #000000;
          --color-void: #040407;
          --color-graphite: #08080c;
          --color-smoke: #757580;
          --color-ash: #a3a3b3;
          --color-charcoal: #2a2a32;
          --color-iris-glow: #6199f6;
          --color-twilight: #4f4f80;
          --color-specter-lilac: #dedfee;
        
          /* Typography */
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-framegothic: 'FrameGothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neuemachinainktrap: 'NeueMachinaInktrap', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', 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.72px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.45;
          --tracking-body: 0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.72px;
          --text-heading: 38px;
          --leading-heading: 1.04;
          --tracking-heading: -1.33px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.02;
          --tracking-heading-lg: -1.92px;
          --text-display: 80px;
          --leading-display: 0.96;
          --tracking-display: -3.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-144: 144px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-lg: 10px;
          --radius-3xl: 24px;
          --radius-full: 100px;
        }