foundry___style_reference: info: "> thánh đường chữ cam rực — một căn phòng đen nơi những ký tự khổng lồ được chiếu sáng treo như tác phẩm triển lãm, và những thanh dẫn đường duy nhất là viền wireframe nhạt cùng một màu đánh dấu neon." theme: "dark" info: "Foundry là một xưởng đúc chữ (type foundry) được trình bày như một bàn làm việc tối, nơi sản phẩm cũng chính là giao diện. Canvas gần như đen (#121212) làm nền cho UI chrome góc vuông được xây dựng gần như hoàn toàn từ monospaced text và hairline borders, mang lại cho toàn bộ website cảm giác như terminal của developer kết hợp với tường gallery. Giọng màu duy nhất là cam rực (#ff4d00) — được dùng làm điểm nhấn cấu trúc trên logo, đường viền action có outline, và highlight chọn lọc — không bao giờ dùng làm nền button đặc, giữ cho điểm nhấn mang cảm giác như đèn cảnh báo hoặc nét bút marker, chứ không phải một lớp sơn thương hiệu. Mọi màn hình đều là một specimen: các display face khổng lồ (90–234px) chiếm ưu thế trong viewport, UI lùi lại xung quanh chúng, và ngay cả sidebar items cũng được tạo kiểu như các tag có nhãn. Khoảng cách dày đặc (compact spacing), bán kính gần như bằng không (2.8px), và metadata monospace viết hoa củng cố một cảm giác chính xác, công nghiệp, không trang trí — trang trí hoàn toàn sống bên trong chính các typeface." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|---------|" info: "| Ember Orange | `#ff4d00` | `--color-ember-orange` | Điểm nhấn cam cho đường viền action có outline, linked labels, và emphasis tương tác nhẹ. Không nâng cấp nó thành màu CTA chính |" info: "| Foundry Black | `#121212` | `--color-foundry-black` | Nền trang, canvas section, bề mặt chính — nền tối chủ đạo giúp chữ trắng và điểm nhấn cam trông phát sáng |" info: "| Chalk White | `#e2e8f0` | `--color-chalk-white` | Hairline borders, nav rules, link underlines, tag outlines — màu wireframe xây dựng toàn bộ khung UI |" info: "| Bone White | `#efefef` | `--color-bone-white` | Văn bản body và UI chính, icon strokes, button text, secondary surface fills — màu chữ có thể đọc được và màu nền đảo ngược dùng cho các control được nhấn mạnh |" info: "| Soot | `#3a3a3a` | `--color-soot` | Structural borders tương phản thấp, dải phân cách tinh tế giữa các section xếp chồng — đường rule nhẹ nhất, chỉ hiện rõ trên các bề mặt đảo ngược bone-white |" info: "| Ash | `#747474` | `--color-ash` | Helper text mờ, inactive labels, secondary metadata — lùi lại để monospace chrome có thể mang hierarchy mà không cạnh tranh với display type |" tokens___typography: jetbrains_mono___font_hệ_điều_hành__điều_khiển_sidebar_navigation__font_spec_labels__button_text__metadata_strips__và_body_copy__được_xem_như_một_ui_element___viết_hoa__tracking_out_0_04_0_06em_cho_labels__tight__0_02em_cho_body__hình_học_monospaced_của_nó_là_chữ_ký_thị_giác_của_mọi_chrome_component_____font_jetbrains_mono: - "**Thay thế:** JetBrains Mono, IBM Plex Mono, Space Mono" - "**Weights:** 400, 700" - "**Cỡ chữ:** 12px, 14px, 18px" - "**Line height:** 1.14, 1.29, 1.30, 1.32, 1.40, 1.50" - "**Letter spacing:** -0.02em, 0.01em, 0.04em, 0.06em" - "**Vai trò:** Font hệ điều hành: điều khiển sidebar navigation, font-spec labels, button text, metadata strips, và body copy. Được xem như một UI element — viết hoa, tracking-out (0.04–0.06em) cho labels, tight (-0.02em) cho body. Hình học monospaced của nó là chữ ký thị giác của mọi chrome component." inter___giọng_văn_bản_thứ_cấp_cho_các_khối_copy_dài_và_đoạn_hỗ_trợ_cần_nhịp_điệu_ít_kỹ_thuật_hơn_monospace__xuất_hiện_tiết_kiệm_để_monospace_vẫn_là_tín_hiệu_chủ_đạo_____font_inter: - "**Thay thế:** Inter, system-ui, -apple-system, Segoe UI" - "**Weights:** 400" - "**Cỡ chữ:** 14px, 16px, 18px" - "**Line height:** 1.29, 1.30, 1.50" - "**Letter spacing:** normal" - "**Vai trò:** Giọng văn bản thứ cấp cho các khối copy dài và đoạn hỗ trợ cần nhịp điệu ít kỹ thuật hơn monospace. Xuất hiện tiết kiệm để monospace vẫn là tín hiệu chủ đạo." basement_grotesque__ffflauta__b_mecha__bunker__caniche__carpenter__curia__adhesion__trovador__xer0__blob___display_specimens___các_sản_phẩm__mỗi_font_lấp_đầy_một_section_full_width_ở_kích_thước_monumental__set_tight_leading_0_95_1_10_với_một_chút_positive_tracking__ai_agent_nên_xem_các_font_này_là_content_blocks_cần_được_tạo_ra__không_phải_system_fonts_cần_tái_tạo__thay_thế_bằng_display_typefaces_của_người_dùng_ở_kích_thước_tương_ứng_____font_basement_grotesque_ffflauta_b_mecha_bunker_caniche_carpenter_curia_adhesion_trovador_xer0_blob: - "**Weights:** 400 (mỗi font là specimen một weight)" - "**Cỡ chữ:** 90px (FFFLAUTA) → 120px (Basement Grotesque, B-Mecha) → 156–234px (các font còn lại)" - "**Line height:** 0.95–1.20" - "**Letter spacing:** 0.01em" - "**Vai trò:** Display specimens — các sản phẩm. Mỗi font lấp đầy một section full-width ở kích thước monumental, set tight (leading 0.95–1.10) với một chút positive tracking. AI agent nên xem các font này là content blocks cần được tạo ra, không phải system fonts cần tái tạo; thay thế bằng display typefaces của người dùng ở kích thước tương ứng." ffflauta_400___ffflauta_400___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_ffflauta_400: - "**Weights:** 400" - "**Cỡ chữ:** 90px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** FFFLAUTA 400 — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" basement_grotesque_black_expanded___basement_grotesque_black_expanded___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_basement_grotesque_black_expanded: - "**Weights:** 400" - "**Cỡ chữ:** 120px" - "**Line height:** 0.95" - "**Letter spacing:** 0.01" - "**Vai trò:** Basement Grotesque Black Expanded — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" mecha_regular___mecha_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_mecha_regular: - "**Weights:** 400" - "**Cỡ chữ:** 120px" - "**Line height:** 1.2" - "**Letter spacing:** 0.01" - "**Vai trò:** Mecha Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" curia_regular___curia_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_curia_regular: - "**Weights:** 400" - "**Cỡ chữ:** 156px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** Curia Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" adhesion_regular___adhesion_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_adhesion_regular: - "**Weights:** 400" - "**Cỡ chữ:** 164px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** Adhesion Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" carpenter_regular___carpenter_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_carpenter_regular: - "**Weights:** 400" - "**Cỡ chữ:** 169px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** Carpenter Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" bunker_regular___bunker_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_bunker_regular: - "**Weights:** 400" - "**Cỡ chữ:** 185px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** Bunker Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" trovador_regular___trovador_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_trovador_regular: - "**Weights:** 400" - "**Cỡ chữ:** 198px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** Trovador Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" xer0_regular___xer0_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_xer0_regular: - "**Weights:** 400" - "**Cỡ chữ:** 198px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** XER0 Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" caniche_regular___caniche_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_caniche_regular: - "**Weights:** 400" - "**Cỡ chữ:** 203px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** Caniche Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" blob_regular___blob_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_blob_regular: - "**Weights:** 400" - "**Cỡ chữ:** 234px" - "**Line height:** 1.1" - "**Letter spacing:** 0.01" - "**Vai trò:** Blob Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" type_scale: info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |" info: "|------|------|-------------|----------------|-------|" info: "| caption | 12px | 1.4 | 0.04px | `--text-caption` |" info: "| body-sm | 14px | 1.29 | -0.02px | `--text-body-sm` |" info: "| body | 16px | 1.5 | — | `--text-body` |" info: "| subheading | 18px | 1.32 | — | `--text-subheading` |" info: "| display | 120px | 0.95 | 0.01px | `--text-display` |" tokens___spacing___shapes: đơn_vị_cơ_bản: "4px" mật_độ: "compact" 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: "| 20 | 20px | `--spacing-20` |" info: "| 24 | 24px | `--spacing-24` |" info: "| 100 | 100px | `--spacing-100` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| nav | 2.8px |" info: "| tags | 2.8px |" info: "| cards | 8px |" info: "| buttons | 2.8px |" layout: - "**Page max-width:** 1440px" - "**Section gap:** 64px" - "**Card padding:** 15px" - "**Element gap:** 8px" components: sidebar_nav_item_tag: vai_trò: "Mục điều hướng được tạo kiểu như một tag có nhãn, yếu tố định hướng chính" info: "Nền bề mặt đảo ngược (#efefef) với chữ #121212; radius 2.8px; padding dọc ~10px và padding ngang 6–10px; JetBrains Mono 400 cỡ 12–14px, viết hoa, letter-spacing 0.04em. Khi có count badge (ví dụ \"10\"), số là một inline pill riêng cùng màu, không có dấu phân cách." sidebar_section_header: vai_trò: "Nhãn nhóm phía trên các cụm nav tag" info: "Không nền; JetBrains Mono 700 (hoặc 400 với tracking +0.06em) cỡ 12–14px, viết hoa, màu #efefef; đứng trước một geometric marker nhỏ (dấu ngoặc L màu #efefef)." outlined_action_button_buy_now: vai_trò: "Hành động thương mại chính" info: "Nền trong suốt; viền 1px solid #ff4d00; radius 2.8px; padding 10px 15px; JetBrains Mono 400 cỡ 12–14px, viết hoa, letter-spacing 0.04em, chữ #ff4d00. Đường viền cam là toàn bộ tín hiệu — không nền, không shadow." ghost_action_button_explore: vai_trò: "Hành động thứ cấp đi kèm với outlined CTA" info: "Nền trong suốt; viền 1px solid #efefef; radius 2.8px; padding 10px 15px; JetBrains Mono 400 cỡ 12–14px, viết hoa, chữ và viền #efefef." font_specimen_card: vai_trò: "Khối trưng bày cho một typeface trong lưới catalog" info: "Dải full-width trên canvas #121212, được phân cách bởi hairline 1px #e2e8f0 ở phía trên. Bên trong: một metadata strip phía trên (tên font bên trái, \"N STYLES / N HEIGHTS\" cùng glyph-size toggle và mode toggle ở giữa, action buttons bên phải), sau đó là một khoảng cách dọc rộng rãi đến display specimen được đặt ở 90–234px. Không có nền card, không shadow — hairline border CHÍNH LÀ chrome của card." metadata_strip: vai_trò: "Thanh tiện ích phía trên của mỗi section specimen" info: "Một hàng ngang duy nhất, JetBrains Mono 400 viết hoa cỡ 12–14px, chữ #efefef; viền dưới 1px #e2e8f0. Chứa: tên section (trái), thống kê type và toggles (giữa), action buttons (phải). Padding dọc 10–15px." ticker___announcement_bar: vai_trò: "Thông báo cuộn ở đầu trang" info: "Viền hairline 1px #e2e8f0, nền tối; văn bản monospaced cuộn ngang; các geometric triangle markers nhỏ làm dấu phân cách giữa các cụm từ." logo_mark: vai_trò: "Nhận diện thương hiệu, góc trên bên trái, xuất hiện xuyên suốt các màn hình" info: "Wordmark hai dòng xếp chồng bằng Basement Grotesque (hoặc heavy display face tương đương) đặt màu #ff4d00 — \"BASEMENT\" trên \"FOUNDRY.\" Dấu chấm là một phần của mark. Cam trên nền đen là element duy nhất nổi bật nhất trên mọi màn hình." body_copy_block: vai_trò: "Đoạn văn mô tả dài" info: "Inter 400, 14–16px, line-height 1.5, #efefef; nằm dưới specimen như một chú thích giải thích nhẹ nhàng. Giới hạn ở độ rộng cột khoảng 40–50ch." glyph_toggle___mode_pill: vai_trò: "Control nhỏ chuyển đổi bộ ký tự hiển thị hoặc chế độ hiển thị" info: "JetBrains Mono inline cỡ 12–14px, viết hoa; trạng thái hiện tại được hiển thị bằng một icon glyph nhỏ (Aa, ¶, v.v.) thay vì nền màu; nằm bên trong metadata strip." do_s_and_don_ts: nên_làm: - "Dùng JetBrains Mono 400 cho tất cả UI chrome — nav, labels, metadata, buttons, section headers. Đây là font hệ điều hành." - "Đặt sidebar items và button text ở dạng viết hoa với letter-spacing 0.04em; chỉ dùng tight tracking (-0.02em) cho running body text." - "Chỉ dùng cam #ff4d00 làm viền 1px có outline hoặc làm text accent — không bao giờ dùng làm nền đặc. Outlined buy-now button là cách dùng chuẩn." - "Giữ tất cả góc vuông: 2.8px cho nav, tags, và buttons; chỉ 8px cho các card container lớn hơn. Không có gì bo tròn." - "Tạo chiều sâu thông qua đảo ngược màu (bone-white panel trên canvas gần đen) và hairline borders #e2e8f0 — không bao giờ dùng drop shadows." - "Để một display typeface lấp đầy toàn bộ chiều rộng của section ở 90–234px; xem khu vực specimen như một triển lãm, không phải một content card bị giới hạn." - "Ghép mỗi action button với một ghost companion (ví dụ: outlined orange BUY NEXT cạnh ghost white EXPLORE) trên cùng một hàng." không_nên_làm: - "Không đổ nền #ff4d00 cho buttons hoặc surfaces — nó chỉ dùng làm stroke và text accent." - "Không thêm accent colors mới; bảng màu là monochromatic neutrals cộng với đúng một giọng màu." - "Không áp dụng drop shadows hoặc elevation nặng cho bất kỳ component nào; hệ thống flat theo thiết kế." - "Không đặt body copy hoặc metadata bằng display typefaces — đó là specimen content, không phải UI fonts." - "Không dùng radii lớn hơn 8px ở bất kỳ đâu; radius 2.8px của tag là chữ ký và bất kỳ bo tròn nào lớn hơn sẽ phá vỡ cảm giác blueprint." - "Không dùng Inter cho labels, buttons, hoặc metadata — chỉ dành nó cho paragraph-length supporting copy." - "Không căn giữa page layout: sidebar cố định bên trái, content canh trái trong cột của nó, và canvas mở rộng về bên phải." surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|-------|---------|" info: "| 0 | Canvas | `#121212` | Nền trang full-bleed — căn phòng tối nơi chữ được treo |" info: "| 1 | Inverted Surface | `#efefef` | Bone-white panels dùng cho các phần đảo ngược nổi bật và control được nhấn mạnh; hiếm nhưng tương phản cao |" elevation: info: "Thiết kế cố tình tránh drop shadows. Chiều sâu được truyền tải thông qua đảo ngược màu (dark canvas so với bone-white panels) và hairline borders, không phải qua shadow stacks — một cách xử lý bề mặt phẳng, giống blueprint, giữ sự tập trung vào chính type." imagery: info: "Imagery hoàn toàn là typographic. Hero là một kết xuất 3D graffiti-style lớn của một display face màu cam trên nền đen lấp đầy viewport; các section tiếp theo là full-bleed type specimens ở 90–234px. Không có photography, không illustration, không icons ngoài các geometric monospace markers nhỏ (dấu ngoặc L dẫn section, triangle separator trong ticker, icon Aa glyph-toggle). Ngôn ngữ thị giác là type-as-image, với texture duy nhất đến từ lớp đùn 3D (3D extrusion) của hero specimen." layout: info: "Fixed-left sidebar (≈200px) chứa tất cả điều hướng chính dưới dạng các tag có nhãn được nhóm theo section, với logo cố định ở trên cùng và một footer block nhỏ (liên kết pháp lý, mạng xã hội, hỗ trợ). Khu vực nội dung chính mở rộng về bên phải đến max-width ~1440px, bắt đầu bằng một ticker bar full-bleed, sau đó là hero section chiếm toàn bộ chiều rộng nội dung với một specimen khổng lồ và một body-copy footnote nhẹ nhàng, sau đó là một chồng dọc các specimen card full-width được phân cách bởi hairline rules 1px. Không có hero căn giữa, không có dải sáng/tối xen kẽ — canvas vẫn gần như đen xuyên suốt và sự nhấn mạnh đến từ các bề mặt bone-white đảo ngược thỉnh thoảng và accent cam. Khoảng cách dày đặc: ~64px giữa các section chính, ~8–10px giữa các chrome elements." agent_prompt_guide: info: "Quick Color Reference" - "text (primary): #efefef" - "text (muted/helper): #747474" - "background (canvas): #121212" - "border (hairline): #e2e8f0" - "accent: #ff4d00" - "primary action: #efefef (filled action)" info: "3–5 Example Component Prompts" - "**Sidebar tag nav item**: Nền #efefef đảo ngược, chữ #121212, radius 2.8px, padding 10px 10px. Nhãn bằng JetBrains Mono 14px, weight 400, viết hoa, letter-spacing 0.04em. Nếu có số đếm theo sau (ví dụ \"BUNKER 4\"), hiển thị số dưới dạng inline text trên cùng một dòng, không có dấu phân cách." - "Tạo Primary Action Button: Nền #efefef, chữ #747474, radius 9999px, padding pill dày đặc. Dùng filled treatment này cho CTA chính." - "**Ghost secondary action button**: Nền trong suốt, viền 1px solid #efefef, radius 2.8px, padding 10px 15px. Chữ bằng JetBrains Mono 12px, weight 400, viết hoa, letter-spacing 0.04em, màu #efefef. Nhãn \"EXPLORE\"." - "**Font specimen card**: Dải full-width trên canvas #121212 với viền trên 1px #e2e8f0. Metadata strip phía trên: tên font bằng JetBrains Mono 12px viết hoa #efefef bên trái, \"N STYLES / N HEIGHTS\" + glyph/mode toggles ở giữa, action buttons bên phải. Bên dưới, khoảng cách dọc 60–80px, sau đó một display specimen duy nhất đặt full-width ở 120–200px màu #efefef." - "**Top ticker bar**: Full-bleed, cao 1px, nền #121212, viền dưới 1px #e2e8f0. Văn bản cuộn inline bằng JetBrains Mono 12px viết hoa, #efefef, được phân cách bởi các triangle markers nhỏ." typeface_as_content_rule: info: "Mọi display face trong catalog (Basement Grotesque, Bunker, Curia, Adhesion, Trovador, XER0, v.v.) là content, không phải system typography. AI agent tái tạo một trang nên chọn một trong các custom families này để lấp đầy khu vực hero/specimen, nhưng phần còn lại của UI phải luôn fall back về JetBrains Mono (UI) và Inter (body copy dài). Không bao giờ dùng specimen face cho nav, buttons, labels, hoặc metadata." similar_brands: - "**Dinamo Font Gauntlet (ABC Dinamo)** — Cùng logic product-as-interface — homepage là một bức tường các type specimens khổng lồ, dark canvas, monospaced chrome" - "**OH no Type** — Type foundry site với fixed left sidebar, nền tối, và display specimens cỡ lớn lấp đầy viewport với trang trí UI tối thiểu" - "**Grilli Type** — Dark-mode catalog site xem specimen type như hero content và giữ UI chrome chặt chẽ và monospaced" - "**Pangram Pangram** — Bold display-first type foundry với góc vuông, dark canvas, và UI tối giản màu sắc để các typeface làm tất cả công việc thị giác" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-ember-orange: #ff4d00; --color-foundry-black: #121212; --color-chalk-white: #e2e8f0; --color-bone-white: #efefef; --color-soot: #3a3a3a; --color-ash: #747474; /* Typography — Font Families */ --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-basement-grotesque-ffflauta-b-mecha-bunker-caniche-carpenter-curia-adhesion-trovador-xer0-blob: 'Basement Grotesque, FFFLAUTA, B-Mecha, Bunker, Caniche, Carpenter, Curia, Adhesion, Trovador, XER0, Blob', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-ffflauta-400: 'FFFLAUTA 400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-basement-grotesque-black-expanded: 'Basement Grotesque Black Expanded', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mecha-regular: 'Mecha Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-curia-regular: 'Curia Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-adhesion-regular: 'Adhesion Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-carpenter-regular: 'Carpenter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-bunker-regular: 'Bunker Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-trovador-regular: 'Trovador Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-xer0-regular: 'XER0 Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-caniche-regular: 'Caniche Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-blob-regular: 'Blob Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.4; --tracking-caption: 0.04px; --text-body-sm: 14px; --leading-body-sm: 1.29; --tracking-body-sm: -0.02px; --text-body: 16px; --leading-body: 1.5; --text-subheading: 18px; --leading-subheading: 1.32; --text-display: 120px; --leading-display: 0.95; --tracking-display: 0.01px; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-bold: 700; /* Spacing */ --spacing-unit: 4px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-20: 20px; --spacing-24: 24px; --spacing-100: 100px; /* Layout */ --page-max-width: 1440px; --section-gap: 64px; --card-padding: 15px; --element-gap: 8px; /* Border Radius */ --radius-sm: 2.8px; --radius-lg: 8px; /* Named Radii */ --radius-nav: 2.8px; --radius-tags: 2.8px; --radius-cards: 8px; --radius-buttons: 2.8px; /* Surfaces */ --surface-canvas: #121212; --surface-inverted-surface: #efefef; } tailwind_v4: css: | @theme { /* Colors */ --color-ember-orange: #ff4d00; --color-foundry-black: #121212; --color-chalk-white: #e2e8f0; --color-bone-white: #efefef; --color-soot: #3a3a3a; --color-ash: #747474; /* Typography */ --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-basement-grotesque-ffflauta-b-mecha-bunker-caniche-carpenter-curia-adhesion-trovador-xer0-blob: 'Basement Grotesque, FFFLAUTA, B-Mecha, Bunker, Caniche, Carpenter, Curia, Adhesion, Trovador, XER0, Blob', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-ffflauta-400: 'FFFLAUTA 400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-basement-grotesque-black-expanded: 'Basement Grotesque Black Expanded', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mecha-regular: 'Mecha Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-curia-regular: 'Curia Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-adhesion-regular: 'Adhesion Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-carpenter-regular: 'Carpenter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-bunker-regular: 'Bunker Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-trovador-regular: 'Trovador Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-xer0-regular: 'XER0 Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-caniche-regular: 'Caniche Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-blob-regular: 'Blob Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.4; --tracking-caption: 0.04px; --text-body-sm: 14px; --leading-body-sm: 1.29; --tracking-body-sm: -0.02px; --text-body: 16px; --leading-body: 1.5; --text-subheading: 18px; --leading-subheading: 1.32; --text-display: 120px; --leading-display: 0.95; --tracking-display: 0.01px; /* Spacing */ --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-20: 20px; --spacing-24: 24px; --spacing-100: 100px; /* Border Radius */ --radius-sm: 2.8px; --radius-lg: 8px; }