# Foundry

> Foundry — Style Reference

## Prompt Content

```
# Foundry — Style Reference
> 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

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

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.4 | 0.04px | `--text-caption` |
| body-sm | 14px | 1.29 | -0.02px | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.32 | — | `--text-subheading` |
| display | 120px | 0.95 | 0.01px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 100 | 100px | `--spacing-100` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 2.8px |
| tags | 2.8px |
| cards | 8px |
| 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

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

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

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

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

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

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

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

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

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ị

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

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#121212` | Nền trang full-bleed — căn phòng tối nơi chữ được treo |
| 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

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

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

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

Quick Color Reference
- text (primary): #efefef
- text (muted/helper): #747474
- background (canvas): #121212
- border (hairline): #e2e8f0
- accent: #ff4d00
- primary action: #efefef (filled action)

3–5 Example Component Prompts
1. **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.

2. 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.

3. **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".

4. **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.

5. **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

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;
}
```