henry___style_reference:
  info: "> Poster broadside Gothic trên giấy kem ấm. Một trăm phần trăm đơn sắc, không có điểm nhấn màu, toàn bộ cường độ thị giác được tạo ra bởi display type và các đảo ngược mực-giấy full-bleed."

  theme: "mixed"

  info: "Henry Codes mang phong cách broadside biên tập in bằng mực ấm: headline gần đen khắc trên nền giấy kem, xen kẽ với các mảng tối full-bleed nơi serif type màu kem phát sáng. Bảng màu là đơn sắc ấm một trăm phần trăm — không có điểm nhấn màu, không có màu sản phẩm, không có link xanh — mọi quyết định thị giác đều đến từ scale, weight và đảo ngược. Type chính là thương hiệu: một display serif (Louize) đặt thơ và văn xuôi biên tập, một condensed display sans (Manuka) đóng dấu header section ở 200–370px, và một neo-grotesque (Neue Montreal) đảm nhận toàn bộ UI ở 12–24px. Hệ thống spacing hà khắc: bước nhảy 4–32px, một radius duy nhất (12px), không có shadow. Các section lật giữa giấy và mực như một tờ broadsheet, và hầu hết màn hình nên bị chi phối bởi hai hoặc ba từ khổng lồ thay vì ảnh sản phẩm minh họa."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Paper | `#fafafa` | `--color-paper` | Nền trang, bề mặt card, type trong section inverted — nền kem trắng nơi mọi chữ tối nằm trên |"
    info: "| Hairline | `#eeeeee` | `--color-hairline` | Viền card và tile — chỉ hiện khi đặt trên Paper |"
    info: "| Midstone | `#9f9f9f` | `--color-midstone` | Viền nav, viền muted, viền trang trí nhạt trên section tối |"
    info: "| Ash | `#666666` | `--color-ash` | Viền thứ cấp, UI text muted, divider ưu tiên thấp |"
    info: "| Pebble | `#b3b3b3` | `--color-pebble` | Text và viền nav không hoạt động |"
    info: "| Sepia | `#3e3b36` | `--color-sepia` | Viền đậm, text heading thứ cấp — màu nâu-đen ấm nằm cạnh Headline Ink |"
    info: "| Headline Ink | `#2a2722` | `--color-headline-ink` | Text chính, body ink, viền chủ đạo, nav rules — màu đen ấm mang mọi từ trên trang |"

  tokens___typography:

    neue_montreal___toàn_bộ_ui__body__nav_và_label_nhỏ_ở_12_32px__weight_400_cho_body__700_cho_nav_items_và_label__tracking__0_01em_siêu_chặt_ngay_cả_ở_body_size___type_condensed__không_thoáng____font_neue_montreal:
      - "**Thay thế:** Inter, Söhne, General Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px, 16px, 20px, 24px, 32px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** -0.01em ở mọi size"
      - "**Vai trò:** Toàn bộ UI, body, nav và label nhỏ ở 12–32px. Weight 400 cho body, 700 cho nav items và label. Tracking -0.01em siêu chặt ngay cả ở body size — type condensed, không thoáng"

    louize_display___display_serif_biên_tập_cho_headline__section_title_và_khối_văn_xuôi_căn_giữa_trong_section_tối__italic_serif_hẹp__tương_phản_cao_kết_hợp_với_roman_tạo_cảm_giác_broadside__77px_là_section_hero_tiêu_chuẩn__116_132px_là_marquee_headline____font_louize_display:
      - "**Thay thế:** Fraunces, GT Sectra, Lyon Display"
      - "**Weights:** 400"
      - "**Sizes:** 32px, 35px, 77px, 116px, 126px, 132px"
      - "**Line height:** 0.80–1.20"
      - "**Vai trò:** Display serif biên tập cho headline, section title và khối văn xuôi căn giữa trong section tối. Italic serif hẹp, tương phản cao kết hợp với roman tạo cảm giác broadside. 77px là section hero tiêu chuẩn, 116–132px là marquee headline"

    louize___serif_thứ_cấp_cho_copy_biên_tập_ngắn_và_link_text_đi_cùng_louize_display____font_louize:
      - "**Thay thế:** Fraunces, GT Sectra"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 20px, 24px"
      - "**Line height:** 1.20–1.30"
      - "**Letter spacing:** -0.0100em"
      - "**Vai trò:** Serif thứ cấp cho copy biên tập ngắn và link text đi cùng Louize Display"

    manuka___ultra_condensed_display_sans_đóng_dấu_ở_scale_gần_kiến_trúc_226_371px_cho_masthead_section_như_selected_works__line_height_0_75_khóa_glyph_thành_một_slab_ngang_chặt_chẽ_trải_dài_edge_to_edge__chỉ_dùng_white_on_ink_hoặc_ink_on_paper__luôn_một_weight__luôn_uppercase____font_manuka:
      - "**Thay thế:** Druk, Condor, Antonio"
      - "**Weights:** 400"
      - "**Sizes:** 226px, 371px"
      - "**Line height:** 0.75–0.80"
      - "**Vai trò:** Ultra-condensed display sans đóng dấu ở scale gần kiến trúc (226–371px) cho masthead section như SELECTED WORKS. Line-height 0.75 khóa glyph thành một slab ngang chặt chẽ trải dài edge-to-edge. Chỉ dùng white-on-ink hoặc ink-on-paper, luôn một weight, luôn uppercase"

    type_scale:

      info: "| Vai trò | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.12px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.1 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 77px | 0.9 | — | `--text-heading-lg` |"
      info: "| display | 132px | 0.8 | — | `--text-display` |"
      info: "| display-xl | 371px | 0.75 | — | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "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: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 224 | 224px | `--spacing-224` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 12px |"
      info: "| cards | 12px |"
      info: "| buttons | 12px |"

    layout:

      - "**Section gap:** 64-96px"
      - "**Card padding:** 16px"
      - "**Element gap:** 16px"

  components:

    masthead_display_headline:
      vai_trò: "Typography định nghĩa hero và section"

      info: "Louize Display ở 116–132px, weight 400, line-height 0.8, màu #2a2722 trên Paper hoặc #fafafa trên Ink. Đôi khi được xen với một cụm italic Louize Display ở nửa kích thước đặt trong cùng baseline (ví dụ: 'of the' italic ở 35px đặt trong 'TRUE TERRORS / NEW DARK WEB' ở 132px). Không tracking, không all-caps, dựa vào tương phản serif để tạo sự hiện diện."

    stamped_display_section_header:
      vai_trò: "Tiêu đề section full-bleed trên dải inverted tối"

      info: "Manuka ở 226–371px, weight 400, line-height 0.75, uppercase, màu #fafafa trên #2a2722. Trải dài edge-to-edge với dấu em-dash hoặc rule theo sau. Một weight, một màu — slab type condensed là toàn bộ bản sắc của section."

    top_ticker_banner:
      vai_trò: "Dải thông báo full-bleed phía trên masthead"

      info: "Neue Montreal 12px, weight 400, letter-spacing -0.12px, màu #2a2722, đặt uppercase trên Paper. Tùy chọn hairline divider ngang #2a2722 1px ở trên và dưới. Padding 4–6px dọc, full-bleed."

    inverted_editorial_letter:
      vai_trò: "Khối văn xuôi căn giữa trên section tối full-bleed"

      info: "Nền #2a2722, padding 48–64px dọc, full-bleed. Body text trong Louize Display ở 32px, weight 400, line-height 1.2, màu #fafafa, text-align center. Tùy chọn small-caps eyebrow ở trên và dưới ('A BRIEF LETTER FROM THE EDITOR', 'A LETTER FROM THE WORK DESK') trong Neue Montreal 12px, weight 400, letter-spacing -0.12px, màu #fafafa, opacity 0.6."

    nav_link_uppercase:
      vai_trò: "Mục điều hướng đầu trang"

      info: "Neue Montreal 12–16px, weight 700, uppercase, màu #2a2722, letter-spacing -0.12px. Không gạch chân, không nền. Trạng thái active giữ nguyên màu nhưng được đặt ở size lớn hơn (16–20px) — sự nhấn mạnh đến từ scale, không phải màu sắc hay weight."

    section_divider_rule:
      vai_trò: "Phân cách ngang giữa các section biên tập"

      info: "1px solid #2a2722, rộng full-bleed, không margin. Dùng làm ngắt typographic, không bao giờ trang trí."

    brand_ticker_strip:
      vai_trò: "Tên thương hiệu lặp lại trong dải marquee ngang"

      info: "Dải tối full-bleed (#2a2722). Tên thương hiệu trong Louize Display ở 24–32px, weight 400, màu #fafafa, lặp lại ngang với gap chặt. Xen kẽ với tag 'COMING SOON' nhỏ (Neue Montreal 12px, weight 400, uppercase, #fafafa, radius 12px, padding 4px 8px, border 1px #fafafa)."

    coming_soon_tag:
      vai_trò: "Status pill phủ trên mục nhập brand ticker"

      info: "Neue Montreal 12px, weight 400, uppercase, màu #fafafa, border 1px solid #fafafa, radius 12px, padding 4px 8px. Không nền fill — chỉ biến thể ghost outline."

    coordinate_footer:
      vai_trò: "Dòng footer nhỏ phong cách monospaced"

      info: "Neue Montreal 12px, weight 400, letter-spacing -0.12px, màu #2a2722, định dạng một dòng '° 43°31'56\" N 104° 58' 0.94\" (DENVER, COLORADO) — 11:27 PM — ● 48°9 @ N 39°43'31'56\" W 104°58' 0.94\" (DENVER, COLOR...'. Uppercase với dấu phân cách em-dash."

    hero_halftone_plate:
      vai_trò: "Khối minh họa bên phải trong hero"

      info: "Vùng ảnh full-height (~60% chiều rộng hero), không border-radius (góc vuông), minh họa halftone đơn sắc trong Headline Ink trên Paper. Hoạt động như đối trọng typographic với display headline — không caption, không label."

    footnotes___meta_line:
      vai_trò: "Caption small-caps nhỏ bên dưới tác phẩm chính"

      info: "Neue Montreal 12px, weight 400, uppercase, letter-spacing -0.12px, màu #2a2722. Dùng cho dòng attribution kiểu 'READ THE CASE STUDY ON GODCOMMON.COM'."

  do_s_and_don_ts:

    do:
      - "Dùng Louize Display ở 77px+ cho mọi headline định nghĩa section; dưới mức đó, cảm giác biên tập sụp đổ thành web type chung chung"
      - "Đặt body và UI type trong Neue Montreal ở 12/16/20/24/32px với letter-spacing -0.01em — không bao giờ để body text thoáng hơn line-height 1.5"
      - "Xen kẽ section Paper (#fafafa) và Ink (#2a2722) dưới dạng dải full-bleed; không bao giờ gradient-blend giữa chúng, không bao giờ đặt card vượt qua ranh giới"
      - "Dùng 12px làm border-radius duy nhất cho card, button và tag — không góc vuông, không pill shapes (không 9999px)"
      - "Đặt toàn bộ display typography trong #2a2722 trên Paper hoặc #fafafa trên Ink — không màu bề mặt thứ ba, không card có shadow, không panel tinted"
      - "Chỉ dùng Manuka cho masthead section lớn nhất (226–371px) và luôn một weight, một case, một màu — type tự làm việc một mình"
      - "Để 90% trang là Paper hoặc Ink trống; vùng dày đặc chỉ giới hạn ở brand ticker và bottom-byline"

    don_t:
      - "Không bao giờ đưa màu nhấn chromatic vào — hệ thống là đơn sắc ấm một trăm phần trăm, bất kỳ màu xanh/đỏ/xanh lá nào cũng phá vỡ bản sắc broadside"
      - "Không bao giờ dùng button CTA màu có fill — role evidence cho thấy không có action background nào; sự nhấn mạnh đến từ scale và inversion, không phải fill"
      - "Không bao giờ áp box-shadow, drop-shadow hoặc glow — không có shadow nào được phát hiện và thêm chúng biến cảm giác in ấn biên tập thành card UI SaaS chung chung"
      - "Không bao giờ đặt body copy trong Louize Display ở 116–132px; display serif chỉ dành cho headline và trở nên khó đọc dưới 32px trên đoạn văn dài"
      - "Không bao giờ dùng border-radius khác 12px; không 0px sắc, không pill, không làm tròn bất đối xứng"
      - "Không bao giờ phá vỡ nhị phân Paper/Ink bằng panel xám, bề mặt muted hoặc hero gradient tinted — những thứ đó không tồn tại trong token set"
      - "Không bao giờ căn giữa body copy trong Neue Montreal; chỉ Louize Display/Louize editorial block dùng căn giữa, và chỉ bên trong Ink section"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#fafafa` | Canvas trang — nền kem trắng |"
    info: "| 2 | Ink | `#2a2722` | Section tối full-bleed nơi serif type màu kem được đặt inverted |"

  elevation:

    info: "Hệ thống không có shadow theo thiết kế. Không phát hiện box-shadow, drop-shadow hay elevation token nào. Hierarchy được truyền đạt hoàn toàn qua type scale, color inversion và viền hairline 1px — không bao giờ qua depth. Đây là phép ẩn dụ in ấn biên tập, không phải mô hình elevation Material/iOS: trang nằm phẳng trên bề mặt giấy, và section tối đạt được bằng cách lật canvas sang mực, không phải bằng cách thả panel nổi phía trên."

  imagery:

    info: "Hình ảnh chỉ được xử lý dưới dạng minh họa halftone đơn sắc — không nhiếp ảnh, không ảnh chụp màn hình sản phẩm, không gradient, không ảnh màu. Hero dùng một plate vuông bên phải hiển thị sinh vật bướm/ngài đen trong chấm halftone trên nền giấy kem. Tất cả hình ảnh có độ tương phản cao đen-trên-trắng hoặc trắng-trên-đen, góc vuông sắc, không mặt nạ bo tròn, không chồng lấn với type. Minh họa hoạt động như đối trọng typographic trong bố cục giấy/mực chứ không phải hình ảnh độc lập. Iconography không xuất hiện trong interface — không system icons, không nav icons, không UI pictograms. Social proof và client logo được thể hiện dưới dạng wordmark Louize Display trong dải ticker tối thay vì file ảnh."

  layout:

    info: "Layout là biên tập full-bleed — không max-width container, không sidebar, không card grid theo nghĩa truyền thống. Trang xếp chồng dưới dạng chuỗi section tràn ngang xen kẽ dải Paper và Ink. Hero là bố cục chia đôi: headline Louize Display cỡ lớn chiếm hai phần ba bên trái không có ràng buộc padding, và một plate minh họa halftone vuông neo bên phải một phần ba. Các section tiếp theo là khối biên tập một cột căn giữa (inverted letter) hoặc dải marquee ticker ngang. Navigation là danh sách dọc tối thiểu các mục uppercase ở góc trên bên trái, không có thanh nền. Mô hình trang là zine/broadsheet, không phải SaaS dashboard: nhịp dọc lỏng lẻo (64–96px giữa các section) nhưng mỗi section bên trong dày đặc type. Không có grid card tính năng, không bảng giá, không khối so sánh — nội dung được phân phối dưới dạng văn xuôi biên tập dài và một works ticker duy nhất."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #2a2722 (Headline Ink) trên #fafafa (Paper)"
    - "background: #fafafa (Paper) cho mặc định, #2a2722 (Ink) cho section inverted"
    - "border: #2a2722 cho rule đậm, #9f9f9f cho muted, #eeeeee cho hairline trên card"
    - "accent: không (hệ thống hoàn toàn đơn sắc)"
    - "primary action: không có màu CTA riêng biệt"

    info: "3-5 Ví dụ Component Prompt:"
    info: "Không quan sát thấy màu primary action riêng biệt; dùng các xử lý button neutral đã trích xuất thay vì phát minh màu CTA có fill."
    - "Tạo một section editorial inverted: nền #2a2722 full-bleed, padding 64px dọc. Eyebrow 'A BRIEF LETTER FROM THE EDITOR' trong Neue Montreal 12px weight 400 uppercase letter-spacing -0.12px màu #fafafa căn giữa ở trên. Body trong Louize Display 32px weight 400 line-height 1.2 màu #fafafa text-align center, 3–5 dòng ngắn. Phản chiếu eyebrow ở dưới."
    - "Tạo một section header đóng dấu: nền #2a2722 full-bleed, padding 48px dọc. Một dòng 'SELECTED WORKS' trong Manuka 226px weight 400 line-height 0.75 màu #fafafa uppercase, với một rule ngang trắng kéo dài đến cạnh phải."
    - "Tạo một brand ticker band: nền #2a2722 full-bleed, không padding. Tên thương hiệu Louize Display 24px weight 400 màu #fafafa ('Stripe', 'YouTube', 'The New York Times', 'Matter', 'Uber Eats x Taco Bell') lặp lại ngang với gap 32px, một hàng. Phủ tag 'COMING SOON' ghost (Neue Montreal 12px weight 400 uppercase, border 1px solid #fafafa, radius 12px, padding 4px 8px) trên các mục chọn."
    - "Tạo một top nav: nền Paper (#fafafa), không bar. Danh sách dọc căn trái các mục Neue Montreal 12px weight 700 uppercase trong #2a2722, row gap 12px. Mục active hiển thị lớn hơn (16px) nhưng cùng màu/weight. Không gạch chân, không highlight nền."

  similar_brands:

    - "**Pentagram** — Cùng cách tiếp cận broadsheet biên tập: display serif headline, canvas giấy trắng, không điểm nhấn màu, type là tài sản thị giác duy nhất"
    - "**Manual (manualcreative.com)** — Cùng condensed display sans (họ Druk/Manuka) đóng dấu ở scale gần kiến trúc cho masthead section, cùng bảng màu đơn sắc giấy ấm"
    - "**Locomotive (locomotive.ca)** — Cùng hero display-serif cỡ lớn với xử lý subhead italic inline, cùng dải biên tập sáng/tối full-bleed xen kẽ"
    - "**Cereal magazine** — Cùng phép ẩn dụ tạp chí in: giấy kem, mực đen ấm, serif display cho headline, không shadow, một radius (12px), không điểm nhấn màu"
    - "**Rauno Freiberg** — Cùng bản năng portfolio cá nhân brutalist: hero chỉ type, bảng màu đơn sắc, không CTA, không ảnh sản phẩm, thiết kế CHÍNH LÀ tác phẩm"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper: #fafafa;
          --color-hairline: #eeeeee;
          --color-midstone: #9f9f9f;
          --color-ash: #666666;
          --color-pebble: #b3b3b3;
          --color-sepia: #3e3b36;
          --color-headline-ink: #2a2722;
        
          /* Typography — Font Families */
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-louize-display: 'Louize Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-louize: 'Louize', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-manuka: 'Manuka', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.12px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.32px;
          --text-heading-lg: 77px;
          --leading-heading-lg: 0.9;
          --text-display: 132px;
          --leading-display: 0.8;
          --text-display-xl: 371px;
          --leading-display-xl: 0.75;
        
          /* 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-32: 32px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-224: 224px;
        
          /* Layout */
          --section-gap: 64-96px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-xl: 12px;
        
          /* Named Radii */
          --radius-tags: 12px;
          --radius-cards: 12px;
          --radius-buttons: 12px;
        
          /* Surfaces */
          --surface-paper: #fafafa;
          --surface-ink: #2a2722;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper: #fafafa;
          --color-hairline: #eeeeee;
          --color-midstone: #9f9f9f;
          --color-ash: #666666;
          --color-pebble: #b3b3b3;
          --color-sepia: #3e3b36;
          --color-headline-ink: #2a2722;
        
          /* Typography */
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-louize-display: 'Louize Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-louize: 'Louize', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-manuka: 'Manuka', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.12px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.32px;
          --text-heading-lg: 77px;
          --leading-heading-lg: 0.9;
          --text-display: 132px;
          --leading-display: 0.8;
          --text-display-xl: 371px;
          --leading-display-xl: 0.75;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-224: 224px;
        
          /* Border Radius */
          --radius-xl: 12px;
        }