# Freitag

> # Freitag — Style Reference

## Prompt Content

```
# Freitag — Style Reference
> Catalog công nghiệp Thụy Sĩ — một bản in manifest của những tấm bạt xe tải trải phẳng trên nền bê tông đổ, nơi màu sắc duy nhất chính là sản phẩm tái chế.

**Theme:** light

Freitag hoạt động như một catalog công nghiệp Thụy Sĩ đơn sắc: một hệ thống gần như không màu, nơi bề mặt có sắc độ duy nhất là chính sản phẩm (túi bạt xe tải với các mảng đỏ, vàng, xanh dương, xanh lá). UI là một grid gồm đen, trắng và xám bê tông, đóng vai trò sân khấu trung tính cho hàng hóa kinh tế tuần hoàn. Typography được nén và viết hoa (Akkurat Standard), line-height chặt như máy móc, letter-spacing rộng trên label, và các thành phần tương tác có dạng pill ngang với đường viền 1px sắc cạnh. Layout tuân theo modular grid nghiêm ngặt — hero full-bleed 50/50, tiếp đến là khối danh mục 3 cột, rồi ma trận sản phẩm 6 cột. Thủ thuật đặc trưng: trang web đọc như một bảng thông số kỹ thuật hoặc vận đơn, không phải cửa hàng thời trang. Các component có cảm giác như được dập lên trang thay vì thiết kế — pill buttons, đường kẻ mảnh, hairline grids, và hầu như không có độ sâu đổ bóng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Carbon Black | `#000000` | `--color-carbon-black` | Văn bản chính, logo plate, pill-button fills, hairline borders, icon strokes — mực in chủ đạo mang mọi label, heading và đường viền |
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, nền ảnh sản phẩm, văn bản trên nền tối, văn bản đảo màu trên overlay danh mục |
| Concrete Gray | `#cacaca` | `--color-concrete-gray` | Card borders, thumbnail dividers, đường phân cách thứ cấp giữa các ô sản phẩm — màu trung tính cấu trúc tạo khung cho grid |
| Mist Gray | `#f1f1f1` | `--color-mist-gray` | Màu nền nhẹ cho trạng thái nút không hoạt động và các lớp fill mềm, không bao giờ dùng làm nền trang |
| Iron Gray | `#404040` | `--color-iron-gray` | Tông đổ bóng đậm và viền dày hơn cho container nâng cao và ngắt section |
| Ash Gray | `#616161` | `--color-ash-gray` | Văn bản phụ mờ, body helpers, viền cấp ba — màu xám thì thầm bên dưới mực in |
| Ink | `#1a1b1e` | `--color-ink` | Accent gần đen hiếm gặp cho solid button fills cần một chút ấm áp mà không lệch sang carbon thuần |
| Caution Yellow | `#ffdd00` | `--color-caution-yellow` | Lớp vàng cho highlight backgrounds, dải trang trí và điểm nhấn mềm phía sau nội dung. |

## Tokens — Typography

### ui-sans-serif — ui-sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-ui-sans-serif`
- **Weights:** 400
- **Sizes:** 11px, 16px
- **Line height:** 1.15, 1.5
- **Letter spacing:** 0.02
- **Vai trò:** ui-sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### AkkStdRg (Akkurat Standard) — Typeface thương hiệu duy nhất. Con ngựa thồ neo-grotesque Thụy Sĩ dùng cho mọi thứ từ display headlines đến eyebrow labels 8px. Weight luôn ở 400 — không có bold weight trong hệ thống; điểm nhấn đạt được qua kích thước, chữ hoa và tracking. Line-height 0.74 ở kích thước display là phản quy ước và tạo hiệu ứng poster công nghiệp nén chặt. Tracking rộng ở kích thước nhỏ (0.04–0.05em) mang lại cho label khoảng cách của số serial dập máy. · `--font-akkstdrg-akkurat-standard`
- **Thay thế:** Inter, Helvetica Neue, Aktiv Grotesk
- **Weights:** 400
- **Sizes:** 8px, 10px, 11px, 16px, 24px, 32px, 48px
- **Line height:** 0.74 / 0.97 / 1.10 / 1.15 / 1.28 / 1.50
- **Letter spacing:** −0.48px ở 48px, −0.16px ở 32px, +0.32px ở 16px, +0.44px ở 11px, +0.50px ở 10px, +0.40px ở 8px
- **OpenType features:** `"tnum" on, "ss01" on`
- **Vai trò:** Typeface thương hiệu duy nhất. Con ngựa thồ neo-grotesque Thụy Sĩ dùng cho mọi thứ từ display headlines đến eyebrow labels 8px. Weight luôn ở 400 — không có bold weight trong hệ thống; điểm nhấn đạt được qua kích thước, chữ hoa và tracking. Line-height 0.74 ở kích thước display là phản quy ước và tạo hiệu ứng poster công nghiệp nén chặt. Tracking rộng ở kích thước nhỏ (0.04–0.05em) mang lại cho label khoảng cách của số serial dập máy.

### FRg (Freitag Regular) — Dành riêng cho mã model sản phẩm (F141 CLARK, F531 ARCHER) — xử lý condensed-mark thứ cấp khiến SKU đọc như số bộ phận được dập trên thùng hàng · `--font-frg-freitag-regular`
- **Thay thế:** Akkurat Standard Small Caps
- **Weights:** 400
- **Sizes:** 10px
- **Line height:** 0.74
- **Letter spacing:** +0.50px
- **Vai trò:** Dành riêng cho mã model sản phẩm (F141 CLARK, F531 ARCHER) — xử lý condensed-mark thứ cấp khiến SKU đọc như số bộ phận được dập trên thùng hàng

### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial`
- **Weights:** 400
- **Sizes:** 10px
- **Line height:** 1
- **Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### sans-serif — sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-sans-serif`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.2
- **Vai trò:** sans-serif — đượ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ò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| label-sm | 11px | 1.15 | 0.44px | `--text-label-sm` |
| body | 16px | 1.5 | 0.32px | `--text-body` |
| subheading | 24px | 1.28 | — | `--text-subheading` |
| heading | 32px | 0.97 | -0.16px | `--text-heading` |
| display | 48px | 0.97 | -0.48px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ sở:** 4px

**Mật độ:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 48 | 48px | `--spacing-48` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| badges | 9999px |
| images | 12px |
| buttons | 9999px |
| inline-links | 4px |
| nav-elements | 16px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| md | `rgba(0, 0, 0, 0.12) 2px 2px 10px 0px` | `--shadow-md` |
| subtle | `rgb(64, 64, 64) 0px -1px 0px 0px` | `--shadow-subtle` |
| sm | `rgba(45, 45, 45, 0.5) 2px 2px 5px 0px` | `--shadow-sm` |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 64-80px
- **Card padding:** 12px
- **Element gap:** 12px

## Components

### Primary Pill Button
**Vai trò:** Hành động ưu tiên cao nhất — hero CTAs, lối vào danh mục, khám phá sản phẩm

Solid Carbon Black (#000000) fill, Paper White (#ffffff) text, border-radius 9999px (pill tròn hoàn toàn), padding 12px 22px, Akkurat 10–11px weight 400 uppercase với +0.5px tracking. Đổ bóng nhẹ rgba(0,0,0,0.12) 2px 2px 10px. Hình dạng pill là đặc trưng — không có nút hình chữ nhật nào trong hệ thống này.

### Ghost Pill Button
**Vai trò:** Hành động thứ cấp — 'DISCOVER ONE-OFF ITEMS', 'ABOUT PRODUCTION' trên category cards

Paper White (#ffffff) fill, 1px Carbon Black border, Carbon Black text, 9999px radius, 12px 22px padding. Nằm trên nền ảnh danh mục, nơi lớp fill trắng làm cho CTA dễ đọc mà không cạnh tranh với hình ảnh.

### Category Card (3-Column)
**Vai trò:** Lối vào danh mục sản phẩm cấp cao nhất — Shoulder Bags, Laptop Sleeves, Made in Europe

Tỷ lệ khung hình vuông, ảnh sản phẩm full-bleed (không bị giới hạn — ảnh CHÍNH LÀ card), tùy chọn viền 1px Concrete Gray (#cacaca). Heading overlay ở góc dưới bên trái bằng Paper White, 32–48px Akkurat weight 400 uppercase. Ghost pill button đặt ngay bên dưới heading. Ba card trong một hàng ngang, cách nhau bằng gutter trắng 1px thay vì margin.

### Product Cell (6-Column Grid)
**Vai trò:** Hiển thị SKU riêng lẻ trong ma trận catalog

Bề mặt trắng với viền 1px Concrete Gray (#cacaca) ở tất cả các cạnh — các ô tạo thành một ruled grid liên tục. Phía trên: ảnh sản phẩm trên nền trắng, corner radius 12px. Bên dưới: mã model FRg 10px (ví dụ 'F141 CLARK'), giá bằng Akkurat 11px (ví dụ '175.75 CHF'). Không có card shadow — các đường grid cung cấp toàn bộ sự phân cách. Status badges nổi ở góc dưới bên phải của ảnh.

### Status Badge (NEW / BESTSELLER)
**Vai trò:** Chỉ báo nổi bật sản phẩm

Hình pill (9999px radius), Paper White fill, 1px Carbon Black border, 8px Akkurat uppercase text. Đặt absolute ở góc dưới bên phải của ảnh sản phẩm. Biến thể 'NEW' đôi khi sử dụng chấm accent Caution Yellow (#ffdd00) bên cạnh pill trắng. Hạn chế — không bao giờ quá 5% ô catalog có badge.

### Top Navigation Bar
**Vai trò:** Site chrome cố định

Nền trắng, viền dưới 1px Concrete Gray. Bên trái: eyebrow label 'FREITAG' và các link 'PRODUCTS' / 'MISSION' bằng Akkurat 10px uppercase. Giữa: logo plate hình chữ nhật đen (Carbon Black fill, wordmark 'FREITAG' trắng, corner radius 16px). Bên phải: language switcher (LANGUAGE (EN), DELIVER TO (CH)), icon giỏ hàng, icon tài khoản. Chiều cao khoảng 56–64px. Sticky khi cuộn.

### Language & Region Switcher
**Vai trò:** Tiện ích góc trên bên phải — ngôn ngữ và điểm đến vận chuyển

Hai pill container nội tuyến (16px radius), mỗi cái có eyebrow label màu xám mờ + giá trị hoạt động bằng Carbon Black uppercase, cách nhau bởi khoảng cách 8px. Đọc như một control có nhãn thay vì dropdown khi thu gọn.

### Hero Section (50/50 Split)
**Vai trò:** Module editorial / chiến dịch phía trên fold

Full-bleed, hai panel dọc bằng nhau — ảnh trái trên nền xanh lá, ảnh phải trên nền trung tính. Display headline (48px Akkurat weight 400) overlay ở góc dưới bên trái của panel đầu tiên bằng Paper White, tiếp theo là primary pill button. Bên dưới các panel: eyebrow label ('WE THINK AND ACT IN CYCLES') bằng 10px uppercase, sau đó là display heading 48–56px thường bị cắt giữa chừng — việc cắt CHÍNH LÀ layout, không phải lỗi.

### Section Heading Block
**Vai trò:** Giới thiệu một dải nội dung mới (ví dụ 'FRESHLY UPLOADED')

Akkurat 32px weight 400 uppercase căn trái, bề mặt Paper White, không trang trí. Theo sau là đoạn body 16px tùy chọn bằng Iron Gray (#404040). Padding dọc 64–80px để phân cách với grid bên dưới.

### Scroll-to-Top Indicator
**Vai trò:** Affordance ở giữa dưới cùng trên các trang catalog dài

Glyph mũi tên tối giản (↑) bằng Carbon Black trên nền trắng, đặt ở cạnh dưới của ma trận sản phẩm phía trên footer. Không có button chrome — chỉ là dấu typographic.

### Chat Bubble (Góc dưới bên phải)
**Vai trò:** Lối vào dịch vụ khách hàng

Icon hình tròn đen (44px) ở góc cố định dưới bên phải với glyph bong bóng thoại trắng. Thành phần nổi duy nhất trên trang.

## Do's and Don'ts

### Nên làm
- Sử dụng Akkurat Standard (hoặc Inter / Aktiv Grotesk thay thế) cho MỌI văn bản — không có typeface khác, không có decorative scripts, không có display serifs
- Đặt display headlines ở 48px với line-height 0.97 và letter-spacing −0.48px để tạo hiệu ứng poster công nghiệp nén chặt
- Sử dụng pill radius 9999px cho mọi button, badge và pill-shaped control — nút hình chữ nhật không tồn tại trong hệ thống này
- Áp dụng letter-spacing 0.04–0.05em trên tất cả văn bản 11px và nhỏ hơn để label đọc như số serial dập
- Giữ product grid trên lưới ruled 1px Concrete Gray (#cacaca) nghiêm ngặt — không có card shadows, không có rounded card containers xung quanh từng SKU
- Chỉ dành #ffdd00 (Caution Yellow) cho chấm accent 'NEW' — không bao giờ dùng làm lớp nền, background hoặc bề mặt lớn
- Để ảnh sản phẩm mang toàn bộ màu sắc — UI chrome phải không màu để hàng hóa bạt tái chế đọc như yếu tố có sắc độ duy nhất

### Không nên làm
- Không đưa vào color fills, gradients hoặc brand chromatic washes — hệ thống cố tình 0% màu sắc ở lớp UI
- Không sử dụng bold (600+) hoặc semibold (500) weights — toàn bộ hệ thống là weight 400, điểm nhấn đến từ kích thước, chữ hoa và tracking
- Không thêm drop shadows vào product cells hoặc category cards — shadow chỉ dành cho floating primary buttons
- Không căn giữa body text hoặc section headings — mọi thứ đều căn trái với lề trái cứng
- Không sử dụng màu 'primary action' riêng — buttons là Carbon Black thuần trên trắng hoặc trắng trên Carbon Black, không có gì ở giữa
- Không thêm rounded card containers xung quanh sản phẩm bên trong ma trận catalog — ruled grid CHÍNH LÀ container
- Không để line-height vượt quá 1.5 trên body text hoặc giảm xuống dưới 0.74 trên display — đó là các giới hạn nén chặt của hệ thống

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Page Canvas | `#ffffff` | Nền trang mặc định và nền ảnh sản phẩm |
| 1 | Muted Surface | `#f1f1f1` | Button fills không hoạt động và các lớp tông màu nhẹ |
| 2 | Ruled Cell | `#cacaca` | Viền 1px tạo thành lưới catalog |
| 3 | Logo Plate | `#000000` | Bề mặt đen đảo màu cho wordmark FREITAG ở giữa và button fill chính duy nhất |

## Elevation

- **Primary Pill Button:** `rgba(0, 0, 0, 0.12) 2px 2px 10px 0px`
- **Section Divider:** `rgb(64, 64, 64) 0px -1px 0px 0px`

## Imagery

Nhiếp ảnh tập trung vào sản phẩm và trực tiếp một cách tàn bạo — không có lifestyle, không có người mẫu trong bối cảnh, không có ảnh môi trường. Túi được chụp chính giữa trên nền trắng tinh, cắt ở quai, chiếm toàn bộ ô của grid catalog. Hero photography sử dụng hai ảnh editorial bổ sung cạnh nhau: một trên nền màu thương hiệu bão hòa (xanh lá, xanh dương) và một trên nền xám trung tính, để màu bạt nổi bật trên nền màu đặc trong khi ảnh thứ hai neo nó vào hệ thống đơn sắc. Category card 'Made in Europe' hiển thị bàn tay đang làm việc — da, chỉ, vải công nghiệp — như bằng chứng tài liệu về quy trình sản xuất thay vì lifestyle khát vọng. Không có illustrations, không có 3D renders, không có đồ họa trừu tượng. Icons chỉ là line-only, single-weight và giới hạn trong nav (giỏ hàng, tài khoản, tìm kiếm). Mật độ thị giác chủ yếu do sản phẩm dẫn dắt: grid catalog chiếm khoảng 70% không gian dọc của bất kỳ trang catalog nào.

## Layout

Hero full-bleed xen kẽ với các dải nội dung căn giữa max-width 1440px. Hero là split dọc 50/50 nghiêm ngặt không có margin giữa hai panel ảnh — đường nối giữa các ảnh chính là layout. Sau hero, nội dung chảy qua các khối section căn trái với padding dọc 64–80px, mỗi khối được giới hạn bởi heading Akkurat uppercase. Bản thân catalog sử dụng grid 6 cột gồm các ô sản phẩm có chiều rộng bằng nhau, cách nhau bởi rules 1px Concrete Gray (không có gutter — các viền chạm nhau), tạo thành một tấm ruled liên tục. Lối vào danh mục sử dụng hàng 3 cột gồm các card ảnh tỷ lệ khung hình vuông. Navigation là một thanh trắng sticky duy nhất với logo plate đen ở giữa — logo-on-black là bề mặt đảo màu duy nhất trong header. Footer (hiển thị một phần) tiếp tục xử lý trắng phẳng với các link uppercase thưa thớt. Không có sidebar, không có mega-menu, không có modal overlay chrome — mọi tương tác đều dẫn hướng hoặc mở một lightbox tối giản.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #000000
- background: #ffffff
- border: #cacaca
- muted text: #616161
- accent (chỉ chấm NEW tag): #ffdd00
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**

Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý nút trung tính đã trích xuất thay vì phát minh ra màu CTA fill.

2. *Category card row*: Ba ô vuông bằng nhau trong một hàng ngang trên nền trắng, mỗi ô có ảnh sản phẩm full-bleed (không viền, không padding xung quanh ảnh). Heading Paper White 'SHOULDER BAGS' bằng 48px Akkurat weight 400 uppercase, đặt ở góc dưới bên trái. Ghost pill button 'DISCOVER ONE-OFF ITEMS' bên dưới: white fill, 1px Carbon Black border, black text, 9999px radius. Các đường dọc 1px Concrete Gray (#cacaca) giữa ba ô.

3. *Product catalog cell*: Bề mặt trắng, viền 1px Concrete Gray (#cacaca) ở cả bốn cạnh. Ảnh sản phẩm căn giữa trên nền trắng với corner radius 12px. Bên dưới ảnh: mã model FRg 10px uppercase 'F141 CLARK' với +0.5px tracking, sau đó '175.75 CHF' bằng Akkurat 11px weight 400. Tùy chọn badge pill 'BESTSELLER' absolute ở góc dưới bên phải của ảnh: 9999px radius, white fill, 1px black border, 8px Akkurat uppercase.

4. *Navigation bar*: Nền trắng, viền dưới 1px Concrete Gray. Bên trái: eyebrow 'FREITAG' + các link 'PRODUCTS' / 'MISSION' bằng Akkurat 10px uppercase. Giữa: logo plate hình chữ nhật Carbon Black corner radius 16px, wordmark 'FREITAG' trắng bên trong. Bên phải: 'LANGUAGE (EN)' và 'DELIVER TO (CH)' dưới dạng pill nội tuyến 16px radius, sau đó icon giỏ hàng và icon tài khoản dưới dạng glyph line-only. Tổng chiều cao 56px, sticky.

5. *Section heading block*: Căn trái trên canvas trắng, top padding 64px. 'FRESHLY UPLOADED' bằng Akkurat 32px weight 400 uppercase, letter-spacing −0.16px, line-height 0.97. Tùy chọn subhead bên dưới bằng 16px Akkurat weight 400, Iron Gray (#404040), line-height 1.5. Không gạch chân, không accent rule, không trang trí.

## Similar Brands

- **Patagonia** — Cùng ngôn ngữ catalog công nghiệp-tiện ích — UI đơn sắc làm sân khấu trung tính cho ảnh sản phẩm đầy màu sắc và eyebrow labels uppercase dẫn dắt mọi section
- **Carhartt WIP** — Cùng hệ thống đơn sắc gốc workwear: logo plate đen, pill-shaped CTAs, ruled grid các ô sản phẩm và hoàn toàn không có decorative gradients hoặc color washes
- **VEJA** — Cùng cách tiếp cận thương hiệu sinh thái Thụy Sĩ — không có màu sắc trong lớp UI để sản phẩm tái chế/hữu cơ mang toàn bộ trọng lượng sắc độ, với các ô grid viền 1px nghiêm ngặt
- **Café du Cycliste** — Cùng thẩm mỹ editorial-cycling với ảnh full-bleed, headline neo-grotesque kiểu Akkurat cỡ lớn và grid catalog trắng phẳng
- **Aesop** — Cùng sự kiềm chế catalog dược phẩm Thụy Sĩ: hệ thống phân cấp typographic làm công việc mà màu sắc thường làm, với ma trận sản phẩm dày đặc và hairline grid rules

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-carbon-black: #000000;
  --color-paper-white: #ffffff;
  --color-concrete-gray: #cacaca;
  --color-mist-gray: #f1f1f1;
  --color-iron-gray: #404040;
  --color-ash-gray: #616161;
  --color-ink: #1a1b1e;
  --color-caution-yellow: #ffdd00;

  /* Typography — Font Families */
  --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-akkstdrg-akkurat-standard: 'AkkStdRg (Akkurat Standard)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-frg-freitag-regular: 'FRg (Freitag Regular)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-label-sm: 11px;
  --leading-label-sm: 1.15;
  --tracking-label-sm: 0.44px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.32px;
  --text-subheading: 24px;
  --leading-subheading: 1.28;
  --text-heading: 32px;
  --leading-heading: 0.97;
  --tracking-heading: -0.16px;
  --text-display: 48px;
  --leading-display: 0.97;
  --tracking-display: -0.48px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-48: 48px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 64-80px;
  --card-padding: 12px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-badges: 9999px;
  --radius-images: 12px;
  --radius-buttons: 9999px;
  --radius-inline-links: 4px;
  --radius-nav-elements: 16px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.12) 2px 2px 10px 0px;
  --shadow-subtle: rgb(64, 64, 64) 0px -1px 0px 0px;
  --shadow-sm: rgba(45, 45, 45, 0.5) 2px 2px 5px 0px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-muted-surface: #f1f1f1;
  --surface-ruled-cell: #cacaca;
  --surface-logo-plate: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-carbon-black: #000000;
  --color-paper-white: #ffffff;
  --color-concrete-gray: #cacaca;
  --color-mist-gray: #f1f1f1;
  --color-iron-gray: #404040;
  --color-ash-gray: #616161;
  --color-ink: #1a1b1e;
  --color-caution-yellow: #ffdd00;

  /* Typography */
  --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-akkstdrg-akkurat-standard: 'AkkStdRg (Akkurat Standard)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-frg-freitag-regular: 'FRg (Freitag Regular)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-label-sm: 11px;
  --leading-label-sm: 1.15;
  --tracking-label-sm: 0.44px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.32px;
  --text-subheading: 24px;
  --leading-subheading: 1.28;
  --text-heading: 32px;
  --leading-heading: 0.97;
  --tracking-heading: -0.16px;
  --text-display: 48px;
  --leading-display: 0.97;
  --tracking-display: -0.48px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-48: 48px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.12) 2px 2px 10px 0px;
  --shadow-subtle: rgb(64, 64, 64) 0px -1px 0px 0px;
  --shadow-sm: rgba(45, 45, 45, 0.5) 2px 2px 5px 0px;
}
```