eindhoven_design_district___style_reference:
  info: "> editorial brutalism trên nền giấy trắng — một tuyên ngôn thiết kế đô thị được thể hiện qua type cỡ lớn, ảnh thưa thớt và sự kiềm chế tuyệt đối."

  theme: "light"

  info: "Eindhoven Design District mang phong cách editorial brutalism trên nền giấy trắng: một canvas gần như đơn sắc, nơi typography đảm nhận vai trò chủ lực và nhiếp ảnh giành được không gian nhờ vào tỷ lệ và cách bố trí bất đối xứng. Toàn bộ giao diện là cuộc đối thoại giữa display type HelveticaNow cỡ lớn và phần text hỗ trợ nhẹ nhàng, với đen-trên-trắng chiếm 95% khối lượng công việc. Sắc màu duy nhất là một tông đỏ rực dùng làm điểm nhấn nội dung (nhãn danh mục bài viết) — không bao giờ dùng cho UI chrome. Các component được thiết kế phẳng một cách có chủ đích: pill-shaped ghost buttons, article card với ảnh phía trên, viền mảnh (hairline), không shadow hay gradient. Kết quả không phải là một website mà giống một tạp chí thiết kế in ấn tình cờ có tính tương tác."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Charcoal Ink | `#000000` | `--color-charcoal-ink` | Toàn bộ text, border, icon strokes, nav links, button outlines và đường kẻ cấu trúc. Mực in chủ đạo của hệ thống — mọi hình khối và ký tự đều mang trọng lượng này |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang chính, bề mặt card, button fills và text đảo màu trên các khối tối. Nền tảng để mọi thứ khác được đặt lên |"
    info: "| Newsprint Gray | `#e8e8e8` | `--color-newsprint-gray` | Nền section cho các dải nội dung (article grid, footer) — tạo ra sự chuyển tông nhẹ nhàng giữa các section trắng mà không đưa thêm một hue thứ hai |"
    info: "| Pewter | `#bfbfbf` | `--color-pewter` | Helper text mờ, list divider, border link phụ — dùng tiết kiệm ở nơi thông tin bị giảm ưu tiên nhưng vẫn hiện diện |"
    info: "| Signal Red | `#ff0000` | `--color-signal-red` | Điểm nhấn outline đỏ cho tag, divider và cạnh UI khi focus. |"

  tokens___typography:

    helveticanow___typeface_duy_nhất_trong_toàn_bộ_hệ_thống__weight_600_đảm_nhận_headline__button_label_và_card_title__weight_400_xử_lý_body__navigation_và_text_hỗ_trợ__các_kích_thước_display_50px_trở_lên_nén_với_line_height_chặt__0_93_1_00__cho_phép_các_từ_cỡ_lớn_như__eindhoven__và__design_district__xếp_chồng_với_mật_độ_điêu_khắc__letter_spacing_thắt_chặt_mạnh_ở_kích_thước_lớn__0_05em_và_nới_lỏng_nhẹ_ở_kích_thước_nhỏ__0_015em__tạo_cho_type_một_sự_tự_tin_mang_tính_editorial_khi_thay_đổi_theo_tỷ_lệ_____font_helveticanow:
      - "**Thay thế:** Helvetica Neue, Inter, Neue Haas Grotesk"
      - "**Weights:** 400, 600"
      - "**Kích thước:** 14px, 16px, 18px, 19px, 23px, 35px, 46px, 50px, 150px+ (display)"
      - "**Line height:** 0.93, 1.00, 1.15, 1.20, 1.31, 1.40, 1.47"
      - "**Letter spacing:** -0.05em ở 150px+ display, -0.03em ở 50px heading, -0.02em ở 35px subheading, -0.004em ở 18px body, +0.005em ở 16px body-sm, +0.015em ở 14px caption"
      - "**Vai trò:** Typeface duy nhất trong toàn bộ hệ thống. Weight 600 đảm nhận headline, button label và card title; weight 400 xử lý body, navigation và text hỗ trợ. Các kích thước display (50px trở lên) nén với line-height chặt ~0.93–1.00, cho phép các từ cỡ lớn như 'Eindhoven' và 'Design District' xếp chồng với mật độ điêu khắc. Letter-spacing thắt chặt mạnh ở kích thước lớn (-0.05em) và nới lỏng nhẹ ở kích thước nhỏ (+0.015em), tạo cho type một sự tự tin mang tính editorial khi thay đổi theo tỷ lệ."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|-------------|----------------|-------|-------|"
      info: "| caption | 14px | 1.4 | 0.21px | `--text-caption` |"
      info: "| body-sm | 16px | 1.4 | 0.08px | `--text-body-sm` |"
      info: "| body | 18px | 1.31 | -0.07px | `--text-body` |"
      info: "| subheading | 23px | 1.2 | -0.39px | `--text-subheading` |"
      info: "| heading-sm | 35px | 1.15 | -0.7px | `--text-heading-sm` |"
      info: "| heading | 46px | 1 | -1.38px | `--text-heading` |"
      info: "| heading-lg | 50px | 1 | -1.5px | `--text-heading-lg` |"
      info: "| display | 150px | 0.93 | -7.5px | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 35 | 35px | `--spacing-35` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 500px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 500px |"

    layout:

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

  components:

    pill_ghost_button:
      vai_trò: "Interactive element chính trên toàn site — dùng cho navigation, CTA và content links"

      border: "1px solid #000000. Border-radius: 500px (full pill). Background: #ffffff. Text: #000000 ở 16px weight 400, letter-spacing 0.005em. Padding: 10px 15px (compact) hoặc 16px 20px (standard). Không fill, không shadow, không hover background change — button là một dòng text bên trong một oval outline. Xuất hiện trong 'Meer over Eindhoven Design District' và 'Zie alle artikelen'."

    pill_filled_button:
      vai_trò: "Biến thể action phụ khi cần nhấn mạnh cao hơn"

      border: "none. Border-radius: 500px. Background: #000000. Text: #ffffff ở 16px weight 400. Padding: 10px 18px. Đảo ngược pattern của ghost — solid black pill với white text cho những khoảnh khắc cần cam kết mạnh hơn."

    display_headline:
      vai_trò: "Hero và typography định nghĩa section"

      font: "HelveticaNow weight 400 (weight nhẹ hơn ở kích thước tối đa là signature — weight 600 không bao giờ dùng cho display). Kích thước: 150px+ với line-height 0.93. Letter-spacing: -0.05em. Màu: #000000. Có thể đặt ngang hoặc xoay 90° cho bố cục kiến trúc. Line-height nén và negative tracking cực đoan khiến các letterform có cảm giác được chạm khắc hơn là gõ."

    navigation_bar:
      vai_trò: "Navigation cấp cao nhất của site"

      vị_trí: "đầu trang, non-sticky. Background: #ffffff. Chứa logo (góc trên bên trái, 'Eindhoven / Design District' hai dòng, weight 400, ~14px), và các control căn phải: language selector ('NL ▾' trong pill outline), search icon (vòng tròn với kính lúp), và 'Menu ≡' pill button. Tất cả element dùng 14–16px weight 400. Padding rộng rãi tạo khoảng thở phía trên hero."

    article_card:
      vai_trò: "Content card cho các bài viết editorial trong grid layout"

      background: "#ffffff (trên section #e8e8e8). Không border, không shadow, không radius. Cấu trúc: ảnh full-bleed ở trên, sau đó là vùng nội dung không có padding gap. Content stack: nhãn 'Interview' ở 14px weight 400 #ff0000, sau đó title ở 19px weight 600 #000000 line-height 1.2, sau đó excerpt ở 16px weight 400 #000000 cắt ngắn 3 dòng. Card là một hình chữ nhật sạch — ảnh cung cấp toàn bộ năng lượng thị giác."

    hero_composition:
      vai_trò: "Nhận diện thị giác màn hình đầu tiên cho landing page"

      info: "Canvas trắng full-viewport. Display headline cỡ lớn (150px+) được chia thành hai từ đặt bất đối xứng — một từ nằm ngang, một từ xoay 90° dọc. Subtitle ở 19px weight 400 bên dưới từ nằm ngang. Ảnh (kiến trúc, con người, đồ vật) được đặt trong một collage grid lỏng lẻo, rộng khoảng 300–400px, không border, không bo góc, được tích hợp vào bố cục type thay vì tách rời."

    language_selector:
      vai_trò: "Bộ chuyển đổi ngôn ngữ trong navigation"

      pill_shaped_outline_button__border: "1px solid #000000. Border-radius: 500px. Text: 'NL ▾' ở 14px weight 400 #000000. Padding: ~8px 12px. Dấu chân tối thiểu, ghost style nhất quán với các interactive element khác."

    search_button:
      vai_trò: "Kích hoạt tìm kiếm trong navigation"

      circular_icon_button__border: "1px solid #000000. Border-radius: 50%. Chứa glyph kính lúp ở 16px #000000. Không background, không fill. Đường kính: ~40px."

    intro_paragraph_block:
      vai_trò: "Giới thiệu body text cho các section trang"

      max_width: "~600px. Font: HelveticaNow 18px weight 400, line-height 1.31, letter-spacing -0.004em. Màu: #000000. Không drop cap, không element trang trí. Nằm trên #ffffff với khoảng trống dọc rộng rãi phía trên và dưới."

    section_divider:
      vai_trò: "Chuyển tiếp ngầm giữa các dải nội dung"

      info: "Không có đường kẻ hoặc ornament nhìn thấy được. Các section được phân cách bằng khoảng trống dọc (80px+) và sự chuyển background từ #ffffff sang #e8e8e8. Sự thay đổi tông màu CHÍNH LÀ divider."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng HelveticaNow weight 400 cho mọi display-size text trên 50px — weight nhẹ hơn ở tỷ lệ cực đoan là signature tension của hệ thống"
      - "Đặt border-radius thành 500px trên mọi button, tag và language selector — hình pill là bất di bất dịch"
      - "Duy trì kỷ luật ba màu đen/trắng/#e8e8e8 — kháng cự việc thêm accent color vào UI chrome"
      - "Chỉ dùng #ff0000 cho editorial category labels trong vùng nội dung, không bao giờ dùng cho button, link hoặc structural element"
      - "Đặt letter-spacing thành -0.05em ở kích thước display 150px+ và nới lỏng dần về +0.015em ở 14px caption"
      - "Xen kẽ background section giữa #ffffff và #e8e8e8 để tạo nhịp điệu mà không cần ornament"
      - "Đặt ảnh trong crop hình chữ nhật không border, radius hoặc shadow — để ảnh nằm raw trên trang"

    không_nên_làm:
      - "Không dùng weight 600 cho display headline trên 50px — hệ thống thì thầm ở tỷ lệ lớn, không hét lên"
      - "Không thêm drop shadow, gradient hoặc glass effect vào bất kỳ component nào — hệ thống phẳng vì niềm tin"
      - "Không đưa thêm action color thứ hai — button luôn là black-outline-on-white hoặc solid-black-on-white"
      - "Không dùng border-radius khác 0px (hình chữ nhật) hoặc 500px (pill) — không có rounding 4px, 8px hay 16px"
      - "Không đặt line-height trên 1.0 cho display text — việc xếp chồng nén của các từ cỡ lớn là nhận diện thị giác"
      - "Không tách ảnh khỏi bố cục typographic bằng frame, whitespace buffer hoặc container"
      - "Không dùng red accent cho interactive state, hover effect hoặc focus ring — nó là content mark, không phải system token"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper White | `#ffffff` | Canvas trang chính và content section |"
    info: "| 2 | Newsprint Gray | `#e8e8e8` | Background section xen kẽ cho article grid và footer band |"

  elevation:

    info: "Hệ thống cố tình không có shadow. Elevation đạt được thông qua phân cách không gian, tương phản tông màu giữa #ffffff và #e8e8e8, và nhịp điệu dọc rộng rãi — không phải qua drop shadow. Card nằm phẳng trên bề mặt của chúng; button được xác định bằng stroke, không phải độ sâu."

  imagery:

    info: "Nhiếp ảnh mang tính tài liệu và editorial, không trang trí. Chủ đề là kiến trúc (mặt tiền hiện đại, pattern hình học của tòa nhà), con người trong môi trường làm việc (nhà thiết kế, thợ thủ công, bối cảnh công nghiệp) và đồ vật tại chỗ. Xử lý raw: màu tự nhiên full-saturation, không filter, không duotone, không overlay effect. Ảnh được trình bày dưới dạng crop hình chữ nhật (không vuông, không bo tròn) ở nhiều tỷ lệ khác nhau — một số lấp đầy nửa viewport, số khác là chi tiết inline nhỏ. Ảnh được đặt với sự bất đối xứng có chủ đích, thường tiếp giáp hoặc chồng lấn ranh giới của bố cục typographic. Không có lifestyle staging, không có model photography, không có stock imagery — mọi thứ trông như được chụp tại chỗ với con mắt tài liệu. Iconography hầu như vắng mặt trong UI hiển thị; navigation dùng text label và geometric glyph đơn giản (≡, ▾, kính lúp)."

  layout:

    info: "Full-bleed page không có outer frame. Content section tối đa ~1200px nhưng ảnh thường xuyên phá vỡ container. Hero là một bố cục typographic full-viewport với các crop ảnh rải rác — không phải banner căn giữa. Bên dưới hero, các section xen kẽ giữa background trắng và #e8e8e8 với nhịp điệu dọc 80px+. Nội dung chủ yếu căn trái với left margin rộng rãi. Article section dùng grid 3 cột bằng nhau. Navigation là top bar tối giản (logo trái, control phải). Nhịp điệu tổng thể là editorial-magazine: thưa thớt, lớn, typographic, với nhiếp ảnh như dấu câu hơn là minh họa."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "secondary surface: #e8e8e8"
    - "border: #000000 (hairline) hoặc #bfbfbf (muted)"
    - "accent: #ff0000 (chỉ editorial category labels)"
    - "primary action: không có màu CTA riêng biệt"

  3_5_ví_dụ_component_prompts:
    - "**Display Hero Headline**: Tạo một headline cỡ lớn hiển thị 'Eindhoven' ở 150px, HelveticaNow weight 400, #000000, letter-spacing -7.5px, line-height 0.93. Đặt nó ở góc trên bên trái của canvas trắng. Thêm từ thứ hai 'Design' xoay 90° ở bên phải từ đầu tiên, cùng kích thước và weight."

    - "**Pill Ghost Button**: Tạo một button với text 'Meer over Eindhoven Design District' ở 16px HelveticaNow weight 400, #000000, letter-spacing 0.08px. Border: 1px solid #000000. Border-radius: 500px. Background: #ffffff. Padding: 10px 15px. Không shadow, không fill."

    - "**Article Card**: Tạo một card trên background #e8e8e8. Phía trên: ảnh kiến trúc full-bleed (không border, không radius). Bên dưới: nhãn 'Interview' ở 14px weight 400 #ff0000, sau đó title ở 19px weight 600 #000000 line-height 1.2, sau đó excerpt 3 dòng ở 16px weight 400 #000000. Card không có padding, không border, không shadow."

    - "**Navigation Bar**: Tạo một nav ngang với background trắng. Bên trái: logo text 'Eindhoven / Design District' hai dòng, 14px weight 400 #000000. Bên phải: language pill ('NL ▾' ở 14px, 1px black border, 500px radius), search circle (đường kính 40px, 1px black border, icon kính lúp), và 'Menu ≡' pill button (cùng style với language pill)."

    - "**Section Band**: Tạo một section full-width với background #e8e8e8, padding dọc 80px. Bên trong: grid 3 cột article card (mô tả ở trên), với gap 20px giữa các cột. Bên dưới grid, một pill ghost button căn giữa 'Zie alle artikelen' (16px, 1px black border, 500px radius, #ffffff background)."

  typographic_system:

  weight_philosophy:
    info: "Hệ thống dùng chính xác hai weight (400 và 600) của một typeface duy nhất. Sức mạnh editorial đến từ KÍCH THƯỚC, không phải từ tương phản weight. Display text luôn là 400 — sự kiềm chế của weight nhẹ hơn ở 150px+ tạo ra uy quyền thông qua tỷ lệ đơn thuần, không phải qua độ đậm. Weight 600 được dành riêng cho card title (19px), button label và heading ngắn nơi cần nhấn mạnh cấu trúc ở kích thước nhỏ."

  tracking_rules:
    - "Display (150px+): -0.05em — các chữ gần như chạm nhau, tạo khối điêu khắc"
    - "Heading (46–50px): -0.03em — chặt nhưng dễ đọc"
    - "Subheading (35px): -0.02em — vẫn nén"
    - "Body (18–23px): -0.004 đến -0.017em — gần như bình thường, hơi thắt nhẹ"
    - "Caption (14–16px): +0.005 đến +0.015em — hơi mở ra để dễ đọc ở kích thước nhỏ"

  line_height_rules:
    - "Display: 0.93–1.00 — các dòng gần như chạm nhau, mật độ dọc là thẩm mỹ"
    - "Heading: 1.0–1.15 — vẫn nén"
    - "Body: 1.31–1.47 — rộng rãi để dễ đọc, tạo khoảng nghỉ thị giác sau mật độ display"

  editorial_layout_grammar:

  hero_pattern:
    info: "Hero không phải là banner — nó là một tác phẩm sắp đặt typographic. Một từ nằm ngang ở kích thước display tối đa, từ thứ hai xoay 90° (đọc từ dưới lên), và ảnh được rải rác dưới dạng crop hình chữ nhật trong không gian âm. Bố cục cố tình bất đối xứng: không bao giờ căn giữa, không bao giờ cân bằng. Text và ảnh tạo ra sự căng thẳng thông qua overlap-adjacency thay vì căn chỉnh grid."

  section_rhythm:
    info: "Full-width band xen kẽ giữa #ffffff và #e8e8e8. Chuyển tiếp liền mạch — không border, không divider. Khoảng cách dọc giữa các section là 80px+. Nội dung trong section dùng max-width 1200px nhưng thường xuyên phá vỡ container cho ảnh full-bleed."

  content_density:
    info: "Thông tin thưa thớt. Một section có thể chỉ chứa một đoạn văn (3-4 dòng) và một button duy nhất. Thiết kế tin tưởng người đọc sẽ tương tác với nội dung hạn chế thay vì choáng ngợp với các lựa chọn. Article grid (3 cột) là pattern dày đặc nhất trên site."

  navigation_model:
    info: "Chỉ top bar. Không sidebar, không sticky header, không mega-menu. Nút 'Menu' ở góc trên bên phải có thể mở một fullscreen overlay, nhưng trạng thái mặc định là bar tối giản. Logo nhỏ (14px) và không phô trương — hero text CHÍNH LÀ tuyên ngôn thương hiệu, không phải nav logo."

  similar_brands:

    - "**Vitra** — Cùng sự kiềm chế editorial với sans-serif type cỡ lớn, bảng màu gần như đơn sắc và crop ảnh hình chữ nhật đặt trong bố cục typographic"
    - "**Muji** — Cùng triết lý bề mặt phẳng, không shadow, không gradient, pill-shaped ghost button và chủ nghĩa tối giản typographic tuyệt đối làm ngôn ngữ thiết kế chính"
    - "**Karlsruhe Design University (HfG)** — Cùng cách tiếp cận display-type-as-identity với headline Helvetica-family khổng lồ, canvas trắng và ảnh kiến trúc"
    - "**Pentagram** — Editorial brutalism với type cỡ lớn, hairline border, không element trang trí và ảnh được tích hợp vào type grid"
    - "**Swiss Design Archive** — Dòng dõi trực tiếp từ truyền thống typographic Thụy Sĩ/Quốc tế — tracking chặt ở kích thước display, whitespace rộng rãi, bảng màu trung tính, Helvetica là giọng nói duy nhất"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-charcoal-ink: #000000;
          --color-paper-white: #ffffff;
          --color-newsprint-gray: #e8e8e8;
          --color-pewter: #bfbfbf;
          --color-signal-red: #ff0000;
        
          /* Typography — Font Families */
          --font-helveticanow: 'HelveticaNow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.4;
          --tracking-caption: 0.21px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: 0.08px;
          --text-body: 18px;
          --leading-body: 1.31;
          --tracking-body: -0.07px;
          --text-subheading: 23px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.39px;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.7px;
          --text-heading: 46px;
          --leading-heading: 1;
          --tracking-heading: -1.38px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.5px;
          --text-display: 150px;
          --leading-display: 0.93;
          --tracking-display: -7.5px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-25: 25px;
          --spacing-27: 27px;
          --spacing-30: 30px;
          --spacing-35: 35px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-full: 500px;
        
          /* Named Radii */
          --radius-tags: 500px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 500px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-newsprint-gray: #e8e8e8;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-charcoal-ink: #000000;
          --color-paper-white: #ffffff;
          --color-newsprint-gray: #e8e8e8;
          --color-pewter: #bfbfbf;
          --color-signal-red: #ff0000;
        
          /* Typography */
          --font-helveticanow: 'HelveticaNow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.4;
          --tracking-caption: 0.21px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: 0.08px;
          --text-body: 18px;
          --leading-body: 1.31;
          --tracking-body: -0.07px;
          --text-subheading: 23px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.39px;
          --text-heading-sm: 35px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.7px;
          --text-heading: 46px;
          --leading-heading: 1;
          --tracking-heading: -1.38px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.5px;
          --text-display: 150px;
          --leading-display: 0.93;
          --tracking-display: -7.5px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-25: 25px;
          --spacing-27: 27px;
          --spacing-30: 30px;
          --spacing-35: 35px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-full: 500px;
        }