honeybook___style_reference:
  info: "> creative studio ngập nắng trên nền kem ấm — một marquee vàng tươi mở ra những mảng workspace trắng và những con dấu pill tối màu."

  theme: "light"

  info: "HoneyBook sử dụng ngôn ngữ sunlit-creative-studio: hero vàng tươi bão hòa, text xanh navy đậm ấm áp, và bề mặt sản phẩm trắng. Hệ thống thị giác được xây dựng trên sự căng thẳng giữa giọng display serif (STK Bureau Serif) và một sans geometric đầy tự tin (STK Bureau Sans), với một mặt chữ eyebrow all-caps nhỏ xíu (STK Gerhard) thì thầm 'editorial' phía trên các section header. Các nút là pill tuyệt đối — bo tròn hoàn toàn, màu navy đậm, không đổ bóng — khiến mỗi hành động như một con dấu vật lý đóng lên trang giấy. Các bề mặt vẫn yên tĩnh và trắng bên dưới fold; màu vàng xuất hiện như một khối màu có chủ đích cho các khoảnh khắc hero/marquee thay vì trang trí rải rác, tạo ra nhịp điệu entry-and-rest dễ nhận biết trên các trang dài."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Honey Yellow | `#fffa77` | `--color-honey-yellow` | Yellow wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung. |"
    info: "| Marigold | `#fffa56` | `--color-marigold` | Accent fills trên card, headline underline strokes, icon highlights, secondary callouts — phiên bản hơi mạnh hơn của Honey Yellow cho những khoảnh khắc cần nổi bật trên nền trắng |"
    info: "| Inkwell | `#142127` | `--color-inkwell` | Dark borders và separators cho elevated surfaces và inverted UI. Không dùng làm màu CTA chính |"
    info: "| Carbon | `#131416` | `--color-carbon` | Body text và high-contrast borders trên light surfaces, alt dark fill cho emphasis blocks |"
    info: "| Slate Gray | `#343c40` | `--color-slate-gray` | Dark borders và separators cho elevated surfaces và inverted UI. Không dùng làm màu CTA chính |"
    info: "| Pebble | `#63696c` | `--color-pebble` | Muted helper text, secondary metadata, low-emphasis captions |"
    info: "| River Mist | `#c7d5d9` | `--color-river-mist` | Card và link borders trên white surfaces, hairline dividers — đủ lạnh để tạo cảm giác khác biệt so với hệ thống vàng ấm |"
    info: "| Fog | `#e0e5e7` | `--color-fog` | Subtle borders, disabled state outlines, very light separators |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page và card surfaces, text trên dark fills, primary button text |"

  tokens___typography:

    stk_bureau_serif___mặt_chữ_display_và_large_headline___giọng_editorial_cho_hero_statements__section_titles__và_feature_headlines__tracking_chặt__0_027em_đến__0_05em_kéo_các_chữ_cái_thành_một_khối_dày_đặc__kiểu_tạp_chí__một_serif_trong_hero_của_saas_là_nước_đi_đặc_trưng__nó_nhân_bản_hóa_sản_phẩm_và_báo_hiệu__được_chế_tác_cho_giới_sáng_tạo_____font_stk_bureau_serif:
      - "**Thay thế:** Playfair Display, Lora, hoặc DM Serif Display"
      - "**Weights:** 400"
      - "**Kích thước:** 16px, 28px, 40px, 48px, 56px, 64px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** -0.0500em, -0.0420em, -0.0310em, -0.0270em"
      - "**Vai trò:** Mặt chữ Display và large headline — giọng editorial cho hero statements, section titles, và feature headlines. Tracking chặt (-0.027em đến -0.05em) kéo các chữ cái thành một khối dày đặc, kiểu tạp chí. Một serif trong hero của SaaS là nước đi đặc trưng; nó nhân bản hóa sản phẩm và báo hiệu 'được chế tác cho giới sáng tạo'."

    stk_bureau_sans___mặt_chữ_ui_và_body_chính___navigation__buttons__paragraphs__form_fields__cards__weights_500_700_xử_lý_subheads_và_ctas__sự_kết_hợp_với_serif_display_tạo_ra_một_hệ_thống_phân_cấp_giọng_nói_rõ_ràng__serif_cho_chất_thơ__sans_cho_hướng_dẫn_____font_stk_bureau_sans:
      - "**Thay thế:** Inter, Söhne, hoặc General Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 12px, 14px, 16px, 18px, 20px, 24px, 28px, 32px, 48px"
      - "**Line height:** 1.20–1.80"
      - "**Letter spacing:** -0.0500em, -0.0360em, -0.0300em"
      - "**Vai trò:** Mặt chữ UI và body chính — navigation, buttons, paragraphs, form fields, cards. Weights 500–700 xử lý subheads và CTAs. Sự kết hợp với serif display tạo ra một hệ thống phân cấp giọng nói rõ ràng: serif cho chất thơ, sans cho hướng dẫn."

    stk_gerhard___nhãn_eyebrow_all_caps_nhỏ_xíu_phía_trên_section_headers_ví_dụ__capture_leads____tracking_rộng__0_071em_ở_dạng_uppercase_mang_đến_cho_mỗi_section_một_điểm_vào_được_gắn_nhãn__mang_phong_cách_editorial__được_dùng_có_chừng_mực__một_cái_mỗi_section__không_bao_giờ_trong_body_copy_____font_stk_gerhard:
      - "**Thay thế:** Inter ở 14px với text-transform uppercase và letter-spacing 0.08em"
      - "**Weights:** 500"
      - "**Kích thước:** 14px"
      - "**Line height:** 1.20–1.50"
      - "**Letter spacing:** 0.994px"
      - "**Vai trò:** Nhãn eyebrow all-caps nhỏ xíu phía trên section headers (ví dụ 'CAPTURE LEADS') — tracking rộng (+0.071em) ở dạng uppercase mang đến cho mỗi section một điểm vào được gắn nhãn, mang phong cách editorial. Được dùng có chừng mực; một cái mỗi section, không bao giờ trong body copy."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.7px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.8px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.6px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.72px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.1 | -2.4px | `--text-heading-lg` |"
      info: "| display | 56px | 1.05 | -2.8px | `--text-display` |"
      info: "| display-lg | 64px | 1 | -1.98px | `--text-display-lg` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 216 | 216px | `--spacing-216` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 20px |"
      info: "| images | 20px |"
      info: "| inputs | 10px |"
      info: "| buttons | 9999px |"

    layout:

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

  components:

    dark_pill_cta:
      vai_trò: "Nút call-to-action chính trên hero, nav, và product sections"

      info: "Pill bo tròn hoàn toàn (border-radius: 9999px), background #142127, text #ffffff trong STK Bureau Sans 16px weight 600, padding 20px 32px, không border, không shadow. Hình dạng là điểm đặc trưng — các vòng tròn tuyệt đối ở hai đầu khiến mỗi hành động như một con dấu vật lý."

    ghost_pill_button:
      vai_trò: "Nút outlined thứ cấp dùng trong nav và inline actions"

      border_radius: "9999px, background #ffffff, border 1px solid #c7d5d9, text #142127 trong STK Bureau Sans 16px weight 500, padding 20px 32px. Dùng cho 'Log in' và các CTA ít nhấn mạnh hơn."

    promo_banner_bar:
      vai_trò: "Thông báo theo mùa hoặc ưu đãi ở đầu trang"

      info: "Thanh ngang full-bleed, background xám nhạt (ngụ ý #edf1f3), text căn giữa trong STK Bureau Sans 14px weight 500, được bao quanh bởi họa tiết minh họa hoa, kèm inline ghost pill CTA ('CLAIM OFFER'). Chiều cao ~56px."

    navigation_bar:
      vai_trò: "Navigation chính của trang"

      info: "Background trắng, sticky, max-width 1200px căn giữa, logo bên trái, nav links ở giữa (STK Bureau Sans 16px weight 500, #142127), Log in (ghost) + Start for free (dark pill) bên phải. Không đổ bóng — phân cách bằng border dưới 1px #e0e5e7."

    yellow_hero_section:
      vai_trò: "Value proposition ở màn hình đầu tiên"

      info: "Background full-bleed #fffa77, content stack căn giữa. Hàng social proof (★★★★★ 15K+ REVIEWS) trong STK Gerhard 14px caps. Headline trong STK Bureau Serif 56–64px weight 400, màu #142127, tracking chặt. Subtext trong STK Bureau Sans 18–20px weight 400, #142127. Dark pill CTA bên dưới. Tabbed product preview (Project pipeline, Lead capture, v.v.) ở cạnh dưới với underline active state."

    feature_split_section:
      vai_trò: "Hai cột làm nổi bật tính năng với screenshot bên phải"

      info: "Background trắng, max-width 1200px, grid 2 cột (40% text / 60% visual). Eyebrow label trong STK Gerhard 14px caps (#142127). Headline trong STK Bureau Serif 48px weight 400. Body trong STK Bureau Sans 16px. Bên phải: app screenshot hoặc composite card mockup với radius 20px."

    product_app_screenshot:
      vai_trò: "Ảnh chụp UI sản phẩm hoặc composite illustration nhúng"

      info: "border-radius 20px, white card background, border 1px nhẹ #c7d5d9, không drop shadow. Hiển thị giao diện sản phẩm thực tế (Projects view, Lead form, v.v.) — được dùng làm 'bằng chứng' ở bên phải của feature splits."

    tab_navigation_strip:
      vai_trò: "Bộ chuyển đổi danh mục tính năng bên dưới hero"

      info: "Hàng ngang gồm 5 tab label trong STK Bureau Sans 16px weight 500, text #142127. Tab active có border dưới 2px solid #142127; tab inactive không được tạo kiểu. Không thay đổi background fill — chỉ có underline."

    lead_capture_form_card:
      vai_trò: "Trình diễn tính năng sản phẩm — form builder preview"

      info: "Card trắng, radius 10px, border 1px #c7d5d9, padding 24px. Chứa form fields: text inputs với radius 6px, border 1px #c7d5d9, placeholder #63696c. Phía trên form: stats badge nổi (trắng, radius 10px, shadow nhẹ) hiển thị 'New leads: 7' và 'Unread messages: 8'."

    stats_badge:
      vai_trò: "Metric callout nổi, xếp lớp trên hình ảnh sản phẩm"

      info: "Bề mặt trắng, border-radius 10px, border 1px #c7d5d9, drop shadow mềm (0 4px 12px rgba(20,33,39,0.08)). Bố cục hai cột: label trong STK Bureau Sans 12px weight 500 #63696c, số trong STK Bureau Serif 28px weight 400 #142127."

    eyebrow_section_label:
      vai_trò: "Thẻ danh mục caps nhỏ phía trên section headlines"

      info: "STK Gerhard 14px weight 500, uppercase, letter-spacing 0.994px, màu #142127. Luôn nằm cách 8–12px phía trên section headline. Một cái mỗi section, không bao giờ lặp lại."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng border-radius: 9999px cho tất cả interactive buttons và tag pills — hình dạng bo tròn hoàn toàn là yếu tố dễ nhận biết nhất của hệ thống."
      - "Đặt display headlines trong STK Bureau Serif 48–64px với tracking từ -0.027em đến -0.05em; khối serif chặt là signature editorial."
      - "Áp dụng eyebrow label STK Gerhard 14px all-caps (+0.071em tracking) phía trên mọi major section headline, chính xác một lần mỗi section."
      - "Dùng #fffa77 làm background block full-bleed hero/marquee; không bao giờ dùng làm inline accent nhỏ — sức mạnh của nó nằm ở mảng phẳng lớn."
      - "Dùng Inkwell (#142127) cho tất cả primary CTA fills và body text; nó cung cấp độ tương phản 16:1+ trên cả bề mặt trắng và vàng."
      - "Giữ bề mặt UI sản phẩm trên Paper White (#ffffff) với border 1px River Mist (#c7d5d9); tránh drop shadows trên card."
      - "Duy trì khoảng cách dọc 80px giữa các major section và padding trong 24px trên card."

    không_nên_làm:
      - "Không dùng drop shadows trên card, button, hoặc nav — hệ thống dựa vào border 1px và độ tương phản màu để phân cách."
      - "Không áp dụng màu vàng cho các UI element nhỏ (badges, dots, icon backgrounds); nó chỉ hoạt động ở tỷ lệ hero/marquee."
      - "Không dùng STK Bureau Sans ở kích thước display; dành sans cho 32px trở xuống và để serif chiếm lĩnh những khoảnh khắc lớn."
      - "Không trộn lẫn giá trị radius trong cùng một nhóm component — buttons luôn là 9999px, cards luôn là 20px hoặc 10px, không bao giờ là 16px."
      - "Không thêm gradients; hệ thống hoàn toàn là các khối màu phẳng — ngay cả hero vàng cũng là fill đồng nhất."
      - "Không dùng ghost pill cho primary actions; dark fill được dành riêng cho hành động quan trọng nhất trên một màn hình nhất định."
      - "Không phá vỡ cặp serif/sans bằng cách dùng serif cho body copy hoặc sans cho display headlines — sự tương phản giọng nói chính là hệ thống."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Page canvas mặc định và card surfaces cho product UI và hầu hết content sections |"
    info: "| 1 | Honey Yellow | `#fffa77` | Hero band full-bleed, marquee promotional blocks, attention-anchoring sections |"
    info: "| 2 | Marigold | `#fffa56` | Accent feature panels, highlight cards, decorative inline fills |"

  elevation:

    - "**Stats Badge (floating metric card):** `0 4px 12px rgba(20, 33, 39, 0.08)`"
    - "**Product App Screenshot (elevated variant):** `0 8px 24px rgba(20, 33, 39, 0.06)`"

  imagery:

    info: "Imagery tối giản và mang tính trang trí: minh họa hoa vẽ tay với màu pastel nhẹ nhàng (hồng, vàng, tím, xanh lá) chỉ xuất hiện trong promo banner và một vài khoảnh khắc marketing rải rác. Product screenshots là tài sản hình ảnh chủ đạo — ảnh chụp UI thực tế được hiển thị ở tỷ lệ lớn trên bề mặt card trắng. Không có stock photography, không có lifestyle imagery, không có abstract gradients. Trọng lượng thị giác nằm ở chính sản phẩm và hệ thống typographic."

  layout:

    info: "Container căn giữa max-width 1200px với side padding rộng rãi. Trang mở đầu bằng hero vàng full-bleed (trải dài từ mép này sang mép kia), sau đó xen kẽ giữa các content section trắng và các dải accent vàng thỉnh thoảng. Feature sections sử dụng split 2 cột nhất quán: text bên trái (40%), visual sản phẩm bên phải (60%). Cards xếp chồng theo chiều dọc trong một cột trong các feature blocks, thỉnh thoảng tạo thành grid 3 cột cho feature lists. Nhịp điệu dọc được thiết lập bởi section gaps 80px với internal padding 24px. Navigation là thanh trắng sticky với logo bên trái, links ở giữa, CTAs bên phải. Không có sidebar, không có mega-menu phức tạp."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #142127 (Inkwell)"
    - "background: #ffffff (Paper White)"
    - "border: #c7d5d9 (River Mist)"
    - "accent: #fffa56 (Marigold)"
    - "hero/marquee: #fffa77 (Honey Yellow)"
    - "primary action: #fffa56 (filled action)"

    info: "3-5 Ví dụ Component Prompts:"

    - "Tạo Primary Action Button: background #fffa56, text #131416, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính."

    - "Feature Split Section: Background trắng, max-width 1200px, grid 2 cột (40% / 60% gap 64px). Cột trái: eyebrow STK Gerhard 14px caps #142127, headline STK Bureau Serif 48px weight 400 #142127 letter-spacing -2.4px, body STK Bureau Sans 16px #142127. Cột phải: product app screenshot card với radius 20px, border 1px #c7d5d9, background trắng."

    - "Stats Badge Overlay: Card trắng, radius 10px, border 1px #c7d5d9, padding 24px, shadow 0 4px 12px rgba(20,33,39,0.08). Hai cột: label trái 'New leads' STK Bureau Sans 12px weight 500 #63696c, số trái '7' STK Bureau Serif 28px weight 400 #142127; label phải 'Unread messages' cùng style, số phải '8'."


    - "Tab Navigation Strip: Hàng ngang, 5 mục, STK Bureau Sans 16px weight 500 #142127, gap 32px giữa các mục. Tab active: border dưới 2px solid #142127, padding-bottom 4px. Inactive: không trang trí. Không thay đổi background fill."

  color_block_strategy:

    info: "Màu vàng được triển khai như một 'color block' thay vì accent — nó xuất hiện dưới dạng các dải background full-width đóng khung hoặc ngắt quãng các section, không bao giờ là inline decoration. Điều này tạo ra nhịp điệu trang: vào (vàng) → làm việc (trắng) → làm nổi bật (vàng) → làm việc (trắng). Sự chuyển tiếp giữa các khối luôn là một cạnh cứng với zero gradient hoặc blend, củng cố cảm giác in ấn-editorial."

  similar_brands:

    - "**Squarespace** — Cùng cặp serif/sans editorial, các khối hero màu full-bleed, và display headlines lớn tự tin trên nền bão hòa"
    - "**Notion** — Cách xử lý bề mặt sản phẩm trắng tối giản tương tự với một accent color đậm duy nhất và các điều khiển navigation hình pill"
    - "**ConvertKit** — SaaS dành cho doanh nhân sáng tạo nhắm đến đối tượng tương tự; chia sẻ giọng điệu ấm áp tự tin, pill buttons, và cách tiếp cận banner minh họa phong cách sống"
    - "**Mailchimp** — Cá tính thương hiệu vui tươi được thể hiện qua các khối màu đậm, minh họa, và hệ thống chữ mang cảm giác tùy chỉnh thay vì xám SaaS chung chung"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-honey-yellow: #fffa77;
          --color-marigold: #fffa56;
          --color-inkwell: #142127;
          --color-carbon: #131416;
          --color-slate-gray: #343c40;
          --color-pebble: #63696c;
          --color-river-mist: #c7d5d9;
          --color-fog: #e0e5e7;
          --color-paper-white: #ffffff;
        
          /* Typography — Font Families */
          --font-stk-bureau-serif: 'STK Bureau Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-stk-bureau-sans: 'STK Bureau Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-stk-gerhard: 'STK Gerhard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.7px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.8px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.72px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.96px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -2.4px;
          --text-display: 56px;
          --leading-display: 1.05;
          --tracking-display: -2.8px;
          --text-display-lg: 64px;
          --leading-display-lg: 1;
          --tracking-display-lg: -1.98px;
        
          /* 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-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-216: 216px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-full: 100px;
          --radius-full-2: 999px;
          --radius-full-3: 159984px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 20px;
          --radius-images: 20px;
          --radius-inputs: 10px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-honey-yellow: #fffa77;
          --surface-marigold: #fffa56;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-honey-yellow: #fffa77;
          --color-marigold: #fffa56;
          --color-inkwell: #142127;
          --color-carbon: #131416;
          --color-slate-gray: #343c40;
          --color-pebble: #63696c;
          --color-river-mist: #c7d5d9;
          --color-fog: #e0e5e7;
          --color-paper-white: #ffffff;
        
          /* Typography */
          --font-stk-bureau-serif: 'STK Bureau Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-stk-bureau-sans: 'STK Bureau Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-stk-gerhard: 'STK Gerhard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.7px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.8px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.72px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.96px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -2.4px;
          --text-display: 56px;
          --leading-display: 1.05;
          --tracking-display: -2.8px;
          --text-display-lg: 64px;
          --leading-display-lg: 1;
          --tracking-display-lg: -1.98px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-216: 216px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-full: 100px;
          --radius-full-2: 999px;
          --radius-full-3: 159984px;
        }