ortto___style_reference:
  info: "> blueprint on midnight paper"

  theme: "light"

  info: "Ortto reads as a product brief on quality stock: near-black hero panels yield to warm-white editorial sections, held together by a single vivid blue that is the only chromatic voice in an otherwise monochrome system. Display headlines use a humanist serif (Ivar Text) at 64–72px with negative tracking, while body and UI sit in a precise neo-grotesque sans (Haas Grot Text) — the pairing gives marketing copy the gravity of print journalism and product surfaces the neutrality of a control panel. Buttons are pill-shaped and filled blue, product screenshots float on a six-layer diffuse shadow, and embedded app captures are treated as first-class content rather than decoration. The overall effect is a marketing site that feels like the product's own manual — confident, specific, almost entirely black-and-white with one electric blue accent."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Blue | `#1070ff` | `--color-electric-blue` | Primary action buttons, active nav, accent borders, eyebrow labels, full-width announcement band — the single chromatic voice in the system |"
    info: "| Midnight Ink | `#14171f` | `--color-midnight-ink` | Dark hero panels, navigation bar, and logo strip backgrounds — creates high-contrast showcase zones before the light editorial sections |"
    info: "| Charcoal | `#252525` | `--color-charcoal` | Primary body text, display headlines in light sections, and strong borders — the workhorse text and edge color above the fold |"
    info: "| Graphite | `#6d6b70` | `--color-graphite` | Secondary body text, muted helper copy, and subtle borders — quiet supporting type that recedes behind Charcoal |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Primary canvas, product screenshot backgrounds, card surfaces, and inverse text on dark panels |"
    info: "| Cream | `#f9f8f7` | `--color-cream` | Warm-tinted surface for subtle differentiation from pure white — used on alternate section bands and soft card fills |"
    info: "| Onyx | `#000000` | `--color-onyx` | Hairline borders, icon strokes, and high-emphasis outlines — the structural linework color |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px, 16px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    ivar_text___display_and_editorial_headlines_at_48_72px__subheading_at_20_24px__and_italic_blockquotes___a_humanist_serif_that_lends_marketing_copy_print_journalism_weight____font_ivar_text:
      - "**Substitute:** Source Serif 4, Lora, or Tiempos Text"
      - "**Weights:** 400"
      - "**Sizes:** 20, 24, 48, 64, 72px"
      - "**Line height:** 1.00–1.40"
      - "**Letter spacing:** -0.48px at 48px, -0.26px at 64px, -0.29px at 72px; -0.20px at 20px; 0.07px at 24px"
      - "**Role:** Display and editorial headlines at 48–72px, subheading at 20–24px, and italic blockquotes — a humanist serif that lends marketing copy print-journalism weight"

    haas_grot_text_r___body__navigation__ui_labels__and_secondary_sans_headings___a_precise_neo_grotesque_that_keeps_product_surfaces_neutral_and_readable____font_haas_grot_text_r:
      - "**Substitute:** Inter, Söhne, or Neue Haas Grotesk"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 12, 13, 14, 16, 19, 24px"
      - "**Line height:** 1.20–1.43"
      - "**Letter spacing:** 0.25px at 12px, 0.20px at 13px, 0.15px at 14px, -0.34px at 16px, 0.22px at 24px"
      - "**Role:** Body, navigation, UI labels, and secondary sans headings — a precise neo-grotesque that keeps product surfaces neutral and readable"

    haas_grot_disp_r___display_weight_sans_variant_for_bold_sans_headlines___secondary_to_ivar_text__used_when_a_sans_display_is_preferred_over_the_serif____font_haas_grot_disp_r:
      - "**Substitute:** Inter, Söhne, or Helvetica Neue"
      - "**Weights:** 400"
      - "**Sizes:** 48, 64px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.48px at 48px, -0.26px at 64px"
      - "**Role:** Display-weight sans variant for bold sans headlines — secondary to Ivar Text, used when a sans display is preferred over the serif"

    haas_grot_text_r_web_55_roman___haas_grot_text_r_web_55_roman___detected_in_extracted_data_but_not_described_by_ai____font_haas_grot_text_r_web_55_roman:
      - "**Weights:** 400"
      - "**Sizes:** 12px, 13px, 14px, 16px, 24px"
      - "**Line height:** 1.2, 1.33, 1.38, 1.4, 1.43"
      - "**Letter spacing:** -0.021, 0.009, 0.011, 0.015, 0.021"
      - "**Role:** Haas Grot Text R Web 55 Roman — detected in extracted data but not described by AI"

    haas_grot_text_r_web_65_medium___haas_grot_text_r_web_65_medium___detected_in_extracted_data_but_not_described_by_ai____font_haas_grot_text_r_web_65_medium:
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.25, 1.38, 1.43"
      - "**Letter spacing:** 0.009, 0.011, 0.013"
      - "**Role:** Haas Grot Text R Web 65 Medium — detected in extracted data but not described by AI"

    ivar_text_regular___ivar_text_regular___detected_in_extracted_data_but_not_described_by_ai____font_ivar_text_regular:
      - "**Weights:** 400"
      - "**Sizes:** 20px, 24px, 48px, 64px, 72px"
      - "**Line height:** 1, 1.33, 1.4"
      - "**Letter spacing:** -0.01, -0.004, 0.003"
      - "**Role:** Ivar Text Regular — detected in extracted data but not described by AI"

    haas_grot_text_r_web_75_bold___haas_grot_text_r_web_75_bold___detected_in_extracted_data_but_not_described_by_ai____font_haas_grot_text_r_web_75_bold:
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 24px"
      - "**Line height:** 1.2, 1.38, 1.43"
      - "**Letter spacing:** -0.021, 0.009, 0.011"
      - "**Role:** Haas Grot Text R Web 75 Bold — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.25px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | 0.15px | `--text-body-sm` |"
      info: "| body | 16px | 1.38 | -0.34px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | 0.07px | `--text-heading-sm` |"
      info: "| heading | 48px | 1 | -0.48px | `--text-heading` |"
      info: "| heading-lg | 64px | 1 | -0.26px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -0.29px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| tags | 999px |"
      info: "| cards | 16px |"
      info: "| icons | 50px |"
      info: "| images | 16px |"
      info: "| buttons | 40px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.04) 0px 4px 4px 0px, rgba(0, 0, 0, 0.05) ...` | `--shadow-sm` |"

    layout:

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

  components:

    announcement_banner:
      role: "Full-width promotional strip above the navigation"

      info: "Full-width #1070ff band, ~44px tall, centered 14px Haas Grot Text in #ffffff, with an optional inline link underlined. Used sparingly for product news."

    primary_navigation_bar:
      role: "Sticky dark header with brand, links, and CTA"

14171f_background___64px_tall__sticky__white_logotype_left__white_14px_haas_grot_text_nav_links_centered__blue_filled_cta_button_1070ff__white_text__40px_radius_right__no_visible_bottom_border:

    primary_cta_button:
      role: "Filled action button for trial signup and demo requests"

1070ff_background__ffffff_text__40px_border_radius_pill_shape__12px_vertical___24px_horizontal_padding__14px_haas_grot_text_weight_700__0_15px_letter_spacing__no_drop_shadow__used_on_both_dark_and_light_backgrounds:

    ghost_button:
      role: "Secondary outlined action paired with the primary CTA"

      info: "Transparent background, 1.5px #ffffff border, #ffffff text, 40px border-radius, 12px 24px padding, 14px Haas Grot Text weight 700. Sits beside the filled CTA in the hero. On light backgrounds, border and text switch to Charcoal #252525."

    hero_panel:
      role: "Dark above-the-fold showcase section"

      info: "Full-width #14171f background, ~560–640px tall. Left column: 64–72px Ivar Text weight 400 headline in #ffffff with -0.26 to -0.29px tracking, 18px body text in #ffffff at 70% opacity, CTA pair below. Right column: product screenshot card floating on the six-layer diffuse shadow."

    product_screenshot_card:
      role: "Embedded app capture treated as primary visual content"

      info: "16px border-radius, overflow hidden, sits on the six-layer diffuse shadow stack. White interior, 1px Onyx border at 8% opacity. The product UI itself uses white surfaces, hairline borders, and small green/blue/violet data accents."

    logo_strip:
      role: "Social proof band of client logos"

      info: "Full-width #14171f band, ~80–100px tall, centered horizontal row of 8–10 client logos in #ffffff at 60% opacity, evenly spaced with 40–60px gaps."

    feature_section:
      role: "Editorial product feature block with eyebrow, headline, screenshot, and bullet list"

ffffff_or_f9f8f7_background__max_width_1200px_centered__blue_12px_uppercase_eyebrow_1070ff__0_25px_tracking__48_64px_ivar_text_headline_in_charcoal_252525__product_screenshot_card_on_one_side__16px_haas_grot_text_bullet_list_on_the_other__80_120px_vertical_padding:

    eyebrow_label:
      role: "Small uppercase category tag above section headlines"

1070ff_color__12px_haas_grot_text_weight_700__uppercase__0_25px_letter_spacing__sits_16px_above_the_headline__only_chromatic_text_in_the_system_besides_links_and_ctas:

    testimonial_block:
      role: "Full-width quote with attribution"

ffffff_background__max_width_900px_centered__24px_ivar_text_italic_in_charcoal_252525__40px_vertical_padding_to_attribution__50px_circular_avatar__14px_haas_grot_text_weight_700_name__14px_regular_role_in_graphite_6d6b70:

    dashboard_gauge_card:
      role: "Product UI metric card with semicircular progress gauge"

      info: "White surface, 16px border-radius, subtle hairline border. Contains a 11px caption label in Graphite, a 24px Ivar Text metric value in Charcoal, and a green (#2dbb6f) gauge arc at 270° representing progress."

    data_table_row:
      role: "Product UI row in the customer data platform"

      info: "White background, 14px Haas Grot Text in Charcoal, 1px #000000 border at 6% opacity between rows. Avatar (24px circle), name, organization, MRR value, ticket count, and a 5-dot product score row. 40px row height, 16px horizontal padding."

    workflow_builder_node:
      role: "Product UI decision node in the journey builder"

      info: "White card with 12px radius, 1px #000000 border at 8% opacity, purple #533afd diamond icon, 14px Haas Grot Text label, and a YES/NO branch split below. Connected by thin 1px gray lines to child email/SMS action cards."

  do_s_and_don_ts:

    do:
      - "Use #1070ff Electric Blue exclusively for primary actions, active states, eyebrow labels, and the announcement band — no other color carries a functional role"
      - "Pair Ivar Text serif at 48–72px with Haas Grot Text sans at 14–16px; the serif-sans contrast is the system's signature typographic move"
      - "Set display headlines with negative tracking (-0.26 to -0.48px) and tight 1.0 line-height so the serif feels cut and editorial, not airy"
      - "Use 40px border-radius for all buttons and tags to maintain the pill-shaped language across every interactive element"
      - "Apply the six-layer diffuse shadow stack only to product screenshot cards and large elevated surfaces — never to buttons, text, or small UI elements"
      - "Alternate between Midnight Ink #14171f panels and Paper White #ffffff sections to create the dark-to-light editorial rhythm"
      - "Keep body copy at 16px Haas Grot Text with 1.38 line-height and -0.34px tracking for compact, readable density"

    don_t:
      - "Do not introduce additional chromatic colors — the system is monochrome plus exactly one blue, and a second hue breaks the discipline"
      - "Do not use Ivar Text for body copy, UI labels, or navigation — the serif belongs only at 20px and above, never at functional text sizes"
      - "Do not use square or slightly-rounded buttons — every button is a 40px-radius pill, and sharp corners signal a different product"
      - "Do not apply the diffuse shadow to text, icons, or small elements — it is reserved for large floating surfaces and looks muddy at small scale"
      - "Do not use blue accent text on dark Midnight Ink backgrounds without testing contrast — use #ffffff for body text on dark panels"
      - "Do not break the editorial-print rhythm with full-bleed colored sections or decorative gradients — color appears only as small functional punctuation"
      - "Do not set letter-spacing wider than 0.25px on any text — tracking stays tight or negative throughout the entire type scale"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Primary page canvas and product screenshot backgrounds |"
    info: "| 1 | Cream | `#f9f8f7` | Warm-tinted section background for subtle differentiation from pure white |"
    info: "| 2 | Midnight Ink | `#14171f` | Dark hero, navigation, and logo strip panels |"

  elevation:

    - "**Product Screenshot Card:** `rgba(0, 0, 0, 0.04) 0px 4px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 12px 0px, rgba(0, 0, 0, 0.06) 0px 24px 24px 0px, rgba(0, 0, 0, 0.07) 0px 50px 50px 0px, rgba(0, 0, 0, 0.08) 0px 136px 136px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`"

  imagery:

    info: "Product screenshots are the dominant visual element, treated as first-class content rather than decoration: they float on a six-layer diffuse shadow, sit inside 16px-radius white cards, and are clipped with overflow hidden so the product UI fills the frame edge-to-edge. A dark client-logo strip appears once below the hero as social proof. No lifestyle photography, no abstract illustrations, no decorative gradients — the visual language is product UI, monochrome surfaces, and typographic weight."

  layout:

    info: "Full-width dark hero at the top with left-aligned serif headline and right-side product screenshot, followed by a dark client-logo strip, then alternating light editorial sections (white and cream #f9f8f7) with a consistent 80–120px vertical rhythm. Each feature section uses a two-column layout: text stack on the left, product screenshot card on the right, max-width 1200px centered. Testimonial blocks break the grid as full-width centered quotes. Navigation is a sticky dark bar above all content, with a blue announcement band stacked above it. No sidebar, no mega-menu, no masonry — every section is either a two-column feature block, a centered quote, or a logo strip."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #252525"
    - "background: #ffffff"
    - "border: #000000 (at 6–8% opacity for hairlines)"
    - "accent: #1070ff"
    - "dark surface: #14171f"
    - "muted text: #6d6b70"
    - "primary action: #1070ff (filled action)"

    example_component_prompts:

    - "**Hero section**: #14171f background, full-width, ~600px tall. Headline at 64px Ivar Text weight 400, #ffffff, letter-spacing -0.26px. Body at 18px Haas Grot Text weight 400, #ffffff. Blue filled CTA (#1070ff, #ffffff text, 40px radius, 12px 24px padding, 14px weight 700) beside ghost button (transparent, 1.5px #ffffff border, #ffffff text, 40px radius). Product screenshot card on the right (16px radius, white interior, six-layer diffuse shadow)."

    - "**Feature section**: #ffffff background, max-width 1200px centered, 100px vertical padding. Blue eyebrow (#1070ff, 12px uppercase, weight 700, 0.25px tracking). Headline at 48px Ivar Text weight 400, #252525, letter-spacing -0.48px. Product screenshot card on the right (16px radius, diffuse shadow). Bullet list on the left: 16px Haas Grot Text, #252525, 8px row gap, 2px square markers in #1070ff."

    - "**Primary CTA button**: #1070ff background, #ffffff text, 40px border-radius, 12px 24px padding, 14px Haas Grot Text weight 700, 0.15px letter-spacing. No shadow. No hover state change beyond a slight darken to #0d5fd6."

    - "**Ghost button**: transparent background, 1.5px #ffffff border, #ffffff text, 40px border-radius, 12px 24px padding, 14px Haas Grot Text weight 700. On light backgrounds, border and text switch to #252525."

    - "**Testimonial block**: #ffffff background, max-width 900px centered, 120px vertical padding. Quote at 24px Ivar Text italic, #252525, line-height 1.33. Attribution row below: 50px circular avatar, 14px Haas Grot Text weight 700 name in #252525, 14px regular role in #6d6b70."

  similar_brands:

    - "**Linear** — Same dark-hero-over-light-body structure with a single vivid accent color and near-zero decoration — both let the product screenshot do the talking"
    - "**Webflow** — Editorial serif headlines paired with clean sans body, and a marketing site that reads like a print designer's portfolio rather than a SaaS template"
    - "**Customer.io** — Marketing automation category peer with the same dark hero, monochrome palette, and blue accent — the products are direct competitors and the visual language reflects that positioning"
    - "**Pitch** — Editorial presentation-product aesthetic: serif display type, generous whitespace, product screenshots treated as primary visuals, and a single accent color held in reserve"
    - "**Vercel** — Black-and-white system with one electric accent, product-forward marketing pages, and the same confidence in letting typography and spacing carry the design without chromatic noise"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-blue: #1070ff;
          --color-midnight-ink: #14171f;
          --color-charcoal: #252525;
          --color-graphite: #6d6b70;
          --color-paper-white: #ffffff;
          --color-cream: #f9f8f7;
          --color-onyx: #000000;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ivar-text: 'Ivar Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text-r: 'Haas Grot Text R', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-disp-r: 'Haas Grot Disp R', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text-r-web-55-roman: 'Haas Grot Text R Web 55 Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text-r-web-65-medium: 'Haas Grot Text R Web 65 Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ivar-text-regular: 'Ivar Text Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text-r-web-75-bold: 'Haas Grot Text R Web 75 Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.25px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: 0.15px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: -0.34px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: 0.07px;
          --text-heading: 48px;
          --leading-heading: 1;
          --tracking-heading: -0.48px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.26px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.29px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* 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-60: 60px;
          --spacing-64: 64px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 50px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-tags: 999px;
          --radius-cards: 16px;
          --radius-icons: 50px;
          --radius-images: 16px;
          --radius-buttons: 40px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.04) 0px 4px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 12px 0px, rgba(0, 0, 0, 0.06) 0px 24px 24px 0px, rgba(0, 0, 0, 0.07) 0px 50px 50px 0px, rgba(0, 0, 0, 0.08) 0px 136px 136px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-cream: #f9f8f7;
          --surface-midnight-ink: #14171f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-blue: #1070ff;
          --color-midnight-ink: #14171f;
          --color-charcoal: #252525;
          --color-graphite: #6d6b70;
          --color-paper-white: #ffffff;
          --color-cream: #f9f8f7;
          --color-onyx: #000000;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ivar-text: 'Ivar Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text-r: 'Haas Grot Text R', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-disp-r: 'Haas Grot Disp R', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text-r-web-55-roman: 'Haas Grot Text R Web 55 Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text-r-web-65-medium: 'Haas Grot Text R Web 65 Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ivar-text-regular: 'Ivar Text Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grot-text-r-web-75-bold: 'Haas Grot Text R Web 75 Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.25px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: 0.15px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: -0.34px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: 0.07px;
          --text-heading: 48px;
          --leading-heading: 1;
          --tracking-heading: -0.48px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.26px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.29px;
        
          /* 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-60: 60px;
          --spacing-64: 64px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 50px;
          --radius-full-2: 999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.04) 0px 4px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 12px 0px, rgba(0, 0, 0, 0.06) 0px 24px 24px 0px, rgba(0, 0, 0, 0.07) 0px 50px 50px 0px, rgba(0, 0, 0, 0.08) 0px 136px 136px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        }