notion___style_reference:
  info: "> Midnight co-working command center — a dark studio at 2am where soft cream desks hold luminous white cards lit by cobalt-blue instrument panels."

  theme: "mixed"

  info: "Notion operates as a midnight co-working command center: a deeply saturated midnight-navy hero dissolves into warm cream content surfaces, with cobalt-blue actions that pop like switched-on instrument panels. The design is typographically confident, using a custom humanist sans (Notion Inter) at all UI levels paired with occasional Lyon Text serif flourishes for editorial warmth. Color is rationed — most of the page lives in near-black ink and warm off-white, reserving chromatic energy for CTA fills, emoji-icon accents, badge highlights, and decorative card borders. Components are soft and rounded (12px cards, 5px inputs, pill badges) with almost no drop shadow; the depth comes from surface contrast (dark navy → cream → white card) rather than elevation. The overall feel is a working studio that stays open after hours — functional, quiet, slightly nocturnal."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Navy | `#02093a` | `--color-midnight-navy` | Hero and feature-section canvas — the signature dark surface that makes white headlines and cobalt CTAs feel like glowing panels in a night-shift control room |"
    info: "| Cobalt Blue | `#455dd3` | `--color-cobalt-blue` | Violet action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Signal Blue | `#0075de` | `--color-signal-blue` | Outlined action borders, inline text links, and chromatic hover states — a slightly cooler blue for secondary interactivity |"
    info: "| Ice Blue | `#62aef0` | `--color-ice-blue` | Blue outline accent for tags, dividers, and focused UI edges |"
    info: "| Info Blue | `#097fe8` | `--color-info-blue` | Semantic info badges and accent borders on dark surfaces |"
    info: "| Indigo | `#2537b1` | `--color-indigo` | Decorative illustration strokes, SVG accent fills, gradient transition points |"
    info: "| Deep Indigo | `#213183` | `--color-deep-indigo` | Hover/pressed state of Cobalt Blue on dark surfaces |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, heavy borders, high-contrast strokes |"
    info: "| Ink | `#0b0b0b` | `--color-ink` | Primary text on light surfaces, card borders, strong dividers |"
    info: "| Charcoal | `#31302e` | `--color-charcoal` | Navigation text, dense bordered text blocks, tertiary heading color |"
    info: "| Warm Gray | `#615d59` | `--color-warm-gray` | Muted body text, icon strokes, helper captions on light backgrounds |"
    info: "| Stone | `#a39e98` | `--color-stone` | Disabled states, secondary icon fills, low-emphasis borders |"
    info: "| Silver | `#c6c6c5` | `--color-silver` | Subtle borders, placeholders, divider hairlines on light surfaces |"
    info: "| Cream | `#f6f5f4` | `--color-cream` | Page background, off-white content canvas, the warm neutral that makes navy sections feel deliberate |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, button text, input fields — the clean reading surface |"
    info: "| Ice Wash | `#f2f9ff` | `--color-ice-wash` | Soft info-badge background wash paired with Info Blue text |"

  tokens___typography:

    notion_inter___primary_interface_and_heading_family___the_only_sans_used_across_the_entire_product_surface__from_12px_helper_text_to_64px_hero_headlines__tabular_lining_numerals_and_localized_forms_are_always_on__weight_600_700_carries_headings_and_button_labels__weight_400_carries_body_and_descriptions_____font_notion_inter:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12, 14, 15, 16, 20, 22, 24, 26, 40, 42, 54, 64"
      - "**Line height:** 1.14–1.50 (UI), 1.20 (headings), 1.04–1.14 (display)"
      - "**Letter spacing:** -0.0360em at 64px, -0.0350em at 54px, -0.0330em at 42px, -0.0240em at 40px, -0.0110em at 26px, -0.0060em at 24px, 0.0100em at 12px"
      - "**OpenType features:** `\"lnum\" 0, \"locl\" 0`"
      - "**Role:** Primary interface and heading family — the only sans used across the entire product surface, from 12px helper text to 64px hero headlines. Tabular lining numerals and localized forms are always on. Weight 600–700 carries headings and button labels; weight 400 carries body and descriptions."

    lyon_text___sparingly_used_editorial_serif_at_32px_for_moments_that_need_a_magazine_cover_feel___never_repeated_in_dense_ui__its_appearance_is_a_deliberate_counterpoint_to_the_otherwise_all_sans_system_____font_lyon_text:
      - "**Substitute:** Source Serif Pro"
      - "**Weights:** 400"
      - "**Sizes:** 32"
      - "**Line height:** 1.25"
      - "**Role:** Sparingly used editorial serif at 32px for moments that need a magazine-cover feel — never repeated in dense UI. Its appearance is a deliberate counterpoint to the otherwise all-sans system."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | 0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.22px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.27 | -0.14px | `--text-heading-sm` |"
      info: "| heading | 26px | 1.23 | -0.29px | `--text-heading` |"
      info: "| heading-lg | 42px | 1.14 | -1.39px | `--text-heading-lg` |"
      info: "| display | 64px | 1.04 | -2.3px | `--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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| images | 12px |"
      info: "| inputs | 5px |"
      info: "| buttons | 5px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) ...` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_cta_button_cobalt_fill:
      role: "Highest-emphasis action — the only chromatic filled button in the system"

      info: "Background #455dd3, white text at 14px/600, 5px radius, 8px vertical × 16px horizontal padding. Always paired with a ghost secondary beside it. The cobalt fill is deliberately cooler than typical SaaS indigo — it reads as 'on' rather than 'important'."

    ghost_text_link_button:
      role: "Secondary action that defers to the primary CTA visually"

      info: "No background, no border. White text at 14px/500 on dark surfaces, Ink (#0b0b0b) text on light surfaces. Optional underline on hover. Used for 'Request a demo' and all low-commitment navigation."

    outlined_action_button_signal_blue:
      role: "Tertiary action with a chromatic border to distinguish from neutral ghost buttons"

      info: "Transparent background, 1.5px #0075de border, #0075de text at 14px/500, 5px radius, 8px × 16px padding. Used when a ghost button needs more presence without competing with the cobalt primary."

    pill_badge_info:
      role: "Small status indicator — 'New', 'Beta', category tags"

      info: "Light blue (#f2f9ff) background with Info Blue (#097fe8) text at 12px/500, 9999px radius, 2px × 8px padding. The pill geometry is reserved for badges and small tags — never used for buttons."

    announcement_banner:
      role: "Slim top-of-page bar for time-sensitive promos (developer events, launches)"

      info: "Thin strip above the main navigation, dark Ink (#0b0b0b) background, white text at 13px/500, dismissable × icon at the right edge. Padding 8px vertical."

    top_navigation_bar:
      role: "Persistent site navigation"

      info: "Transparent over the midnight hero, 8px-radius dropdowns for menu flyouts, 14px/500 nav items in white on dark and Ink on light. 'Get Notion free' sits in the top-right as a 5px-radius Cobalt button."

    product_ui_screenshot_card:
      role: "Hero visual — embeds a realistic product mockup that dominates the dark canvas"

      info: "White surface with 12px radius, five-layer ambient shadow stack, 1px Ink hairline border. Positioned center-stage, overlapping the midnight background. The product frame is a real Notion workspace — no abstract illustration."

    feature_card_paper_white:
      role: "Default content card on the cream page background"

      info: "White (#ffffff) surface, 12px radius, 24px padding, no shadow. Optional 1px Silver (#c6c6c5) hairline border. Houses an emoji or small icon at the top, bold title, supporting description."

    accent_bordered_feature_card:
      role: "Highlighted feature card that needs to stand out from its neighbors"

      info: "White surface, 12px radius, 24px padding, but with a 4px solid colored top border (peach, yellow, mint — one of several accent hues). Used to anchor the first card in a feature row."

    dark_feature_card_midnight:
      role: "Inverted card for emphasis sections on the cream page"

02093a_background__white_text__12px_radius__24px_padding__no_shadow__hosts_an_emoji_icon_and_a_short_cta_link_in_cobalt_blue:

    emoji_icon_tile:
      role: "Compact icon+label card for grid sections"

      info: "White surface, 12px radius, 16px padding, 36px emoji rendered in color at the top-left, 14px/600 title and optional arrow link. Used in tight 5-column rows."

    section_heading:
      role: "Top-of-section title in Ink or white depending on surface"

      info: "Notion Inter weight 700 at 40–42px, tight tracking (-1.39px at 42px), line-height 1.14. Ends with a period on hero/feature headings — 'Meet the night shift.', 'Keep work moving 24/7.' — the trailing period is a signature tic."

    logo_trust_bar:
      role: "Social-proof row of customer logos"

      info: "Evenly spaced monochrome wordmarks in white (on dark sections) or Charcoal (on light sections), 14–16px height, with optional 'Trusted by 98% of the Forbes Cloud 100' caption above. Logos are desaturated — no brand color leakage."

    input_field:
      role: "Form input and search fields"

      info: "White surface, 5px radius, 6px vertical × 12px horizontal padding, 1px Silver (#c6c6c5) border, Ink text at 14px. Focus ring uses Cobalt Blue (#455dd3) at 2px outline."

    footer:
      role: "Site footer with link columns and legal text"

      info: "Midnight Navy background on dark pages, Cream on light pages. White or Charcoal text, 14px link columns, 12px/500 legal caption. No drop shadow."

  do_s_and_don_ts:

    do:
      - "Use Cobalt Blue (#455dd3) exclusively for the single primary CTA on any given view — never two filled chromatic buttons side by side"
      - "Alternate between Midnight Navy sections and Cream sections to create the dark-to-light rhythm; full-page cream is as wrong as full-page navy"
      - "End hero and section headlines with a period — 'Meet the night shift.', 'Keep work moving 24/7.'"
      - "Apply pill (9999px) radius only to badges and small tags; use 12px for all cards and 5px for all buttons and inputs"
      - "Use emoji icons in their full native color on white feature cards — they are the chromatic accent system for grids, not decorative illustrations"
      - "Pair every primary CTA with a ghost text link to its right — 'Get Notion free' + 'Request a demo' is the standard action pair"
      - "Reserve Lyon Text for one editorial moment per page (a pull quote or a magazine-style section title); never use it in dense UI"

    don_t:
      - "Don't use drop shadows on standard cards — depth must come from surface contrast (navy → cream → white), not blur"
      - "Don't introduce new chromatic colors outside the Midnight Navy / Cobalt / Signal Blue / Ice Blue family; the palette is rationed"
      - "Don't use 8px radius on cards (it belongs to nav) or 12px radius on buttons (it belongs to cards) — radii are role-specific"
      - "Don't stack the Cobalt primary CTA above a secondary filled button; always demote secondary to ghost or outlined"
      - "Don't render customer logos in their brand colors — desaturate to white on dark and Charcoal on light"
      - "Don't use Lyon Text at sizes other than 32px — it's an editorial accent, not a body face"
      - "Don't break the trailing-period headline pattern; it's the single most recognizable verbal tic and removing it kills the voice"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Midnight Canvas | `#02093a` | Hero and dark feature sections — the signature nocturnal surface |"
    info: "| 1 | Cream Page | `#f6f5f4` | Default body content background — warm, slightly off-white to avoid clinical starkness |"
    info: "| 2 | Paper Card | `#ffffff` | Elevated card surfaces for features, testimonials, product UI embeds |"
    info: "| 3 | Dark Card | `#02093a` | Inverted cards on light backgrounds for contrast and emphasis |"

  elevation:

    - "**Product UI Embed Card:** `rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px`"

  imagery:

    info: "Visuals are dominated by realistic product UI screenshots — actual Notion workspace captures (Ramp HQ kanban, Q&A tables, chat windows) embedded as large rounded cards on the midnight hero and cream content sections. No stock photography, no lifestyle imagery, no abstract illustration backgrounds. The only graphical elements beyond the product UI are small colorful emoji icons (🤖 🛠️ 🧑‍🚒 🏗️ 🦺) used as functional icons in feature card grids — they provide the only chromatic energy in the white card rows. Background graphics on the dark hero consist of thin, slightly-glowing curved lines and small floating emoji illustrations in muted cobalt and ice blue — atmospheric scaffolding, not focal content. The design language is overwhelmingly product-screenshot-centric: the workspace IS the marketing."

  layout:

    info: "Full-bleed dark hero section transitions into a max-width 1200px centered content column on Cream (#f6f5f4). The hero stacks vertically: announcement banner at the very top, transparent nav bar, centered headline + subhead + dual CTA, then a wide product UI screenshot that extends nearly to viewport edges. Below the hero, a logo trust bar spans full-width in white text on midnight. Content sections alternate: large left-aligned section heading (40–42px weight 700), followed by a 2-column or grid arrangement of feature cards. The 'Custom Agents' section uses a 1+1 layout — a single highlighted card with colored top border on the left, a wider illustrated product card on the right. The 'See what Custom Agents can do' row is a 5-column tight grid of icon tiles. The 'Ask your on-demand assistants' section returns to a 2-column layout with a dark Midnight card on the left and a yellow-tinted illustrated card on the right. Vertical rhythm is generous — 80px between major sections — giving the dark-to-light alternation room to breathe."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #0b0b0b (on light) / #ffffff (on dark)"
    - "background: #f6f5f4 (page) / #02093a (dark sections) / #ffffff (cards)"
    - "border: #c6c6c5 (hairline) / #0b0b0b (strong)"
    - "accent: #62aef0 (Ice Blue)"
    - "primary action: #ffffff (filled action)"
    - "link: #0075de (Signal Blue)"

    3_5_example_component_prompts:

    - "**Hero Section**: Midnight Navy (#02093a) background spanning full viewport. Centered headline at 64px Notion Inter weight 700, white, letter-spacing -2.30px, ending with a period. Subtext at 16px weight 400, warm-gray (#a39e98). Dual actions: Cobalt (#455dd3) filled button 'Get Notion free' (14px/600 white, 5px radius, 8px×16px padding) + ghost text link 'Request a demo' (white, 14px/500). Below: a 12px-radius white card containing a realistic product UI screenshot, with a five-layer ambient shadow stack (rgba 0.01→0.05, 1px→23px blur steps)."

    - "**Feature Card Row on Cream Page**: Cream (#f6f5f4) page background. Section heading at 42px Notion Inter weight 700, Ink (#0b0b0b), letter-spacing -1.39px, ending with a period. Below: a 5-column grid of white (#ffffff) emoji icon tiles, each 12px radius, 16px padding, containing a 36px colored emoji + 14px/600 Ink title + 14px/400 Warm Gray description. First tile has a 4px solid peach top border."

    - "**Pill Badge + Outlined Action**: A Pill Badge with 9999px radius, #f2f9ff background, #097fe8 text at 12px/500, labeled 'New'. Beside it, an Outlined Action Button: transparent background, 1.5px #0075de border, #0075de text at 14px/500, 5px radius, 8px×16px padding."

    - "**Dark Inverted Feature Card**: Midnight Navy (#02093a) card, 12px radius, 24px padding, no shadow. 36px emoji icon at the top, white title at 20px/600, white description at 14px/400, Cobalt Blue (#455dd3) text link at 14px/500 with right arrow."

    - "**Logo Trust Bar**: Full-width bar on Midnight Navy background. Above: 'Trusted by 98% of the Forbes Cloud 100' caption in 12px/500 white. Below: a single row of 8–9 customer wordmarks rendered in white at ~16px height, evenly distributed across 1200px max-width with 32px gaps."

  visual_identity_notes:

    info: "The 'Meet the night shift.' headline is the most identifiable verbal pattern in the system — short, period-terminated, and present-tense. The emoji-as-icon approach (🤖 🛠️ 🦺) is deliberately casual: it signals approachability in a way that line-icons cannot. The hero product screenshot is never a marketing render — it's a literal capture of Notion's own interface filled with fictional-but-realistic workspace content, so the product is always demonstrating itself. The midnight-to-cream alternation is the structural backbone: every major content section either sits on Midnight Navy or on Cream, never on a third neutral, so the eye can always tell which 'mode' it's in."

  similar_brands:

    - "**Linear** — Same dark-navy hero → light content alternation, same tight letter-spacing on display headings, same restrained shadow-free card treatment with 12px radii"
    - "**Stripe** — Same period-terminated editorial headlines, same single-accent-blue CTA discipline, same product-screenshot-as-hero philosophy rather than abstract illustration"
    - "**Vercel** — Same black/navy canvas with minimal chromatic punctuation, same Notion Inter-grade custom humanist sans at all UI levels"
    - "**Figma** — Same emoji-as-functional-icon approach in feature grids, same soft 12px-radius cards on warm off-white page background"
    - "**Arc Browser** — Same confidently mixed dark-hero + cream-content rhythm, same color rationing where chromatic accents appear only on specific interactive elements"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-navy: #02093a;
          --color-cobalt-blue: #455dd3;
          --color-signal-blue: #0075de;
          --color-ice-blue: #62aef0;
          --color-info-blue: #097fe8;
          --color-indigo: #2537b1;
          --color-deep-indigo: #213183;
          --color-obsidian: #000000;
          --color-ink: #0b0b0b;
          --color-charcoal: #31302e;
          --color-warm-gray: #615d59;
          --color-stone: #a39e98;
          --color-silver: #c6c6c5;
          --color-cream: #f6f5f4;
          --color-paper-white: #ffffff;
          --color-ice-wash: #f2f9ff;
        
          /* Typography — Font Families */
          --font-notion-inter: 'Notion Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lyon-text: 'Lyon Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.22px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.27;
          --tracking-heading-sm: -0.14px;
          --text-heading: 26px;
          --leading-heading: 1.23;
          --tracking-heading: -0.29px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.39px;
          --text-display: 64px;
          --leading-display: 1.04;
          --tracking-display: -2.3px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --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-36: 36px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-images: 12px;
          --radius-inputs: 5px;
          --radius-buttons: 5px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px;
        
          /* Surfaces */
          --surface-midnight-canvas: #02093a;
          --surface-cream-page: #f6f5f4;
          --surface-paper-card: #ffffff;
          --surface-dark-card: #02093a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-navy: #02093a;
          --color-cobalt-blue: #455dd3;
          --color-signal-blue: #0075de;
          --color-ice-blue: #62aef0;
          --color-info-blue: #097fe8;
          --color-indigo: #2537b1;
          --color-deep-indigo: #213183;
          --color-obsidian: #000000;
          --color-ink: #0b0b0b;
          --color-charcoal: #31302e;
          --color-warm-gray: #615d59;
          --color-stone: #a39e98;
          --color-silver: #c6c6c5;
          --color-cream: #f6f5f4;
          --color-paper-white: #ffffff;
          --color-ice-wash: #f2f9ff;
        
          /* Typography */
          --font-notion-inter: 'Notion Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lyon-text: 'Lyon Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.22px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.27;
          --tracking-heading-sm: -0.14px;
          --text-heading: 26px;
          --leading-heading: 1.23;
          --tracking-heading: -0.29px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.39px;
          --text-display: 64px;
          --leading-display: 1.04;
          --tracking-display: -2.3px;
        
          /* 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-36: 36px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px;
        }