# Allbirds

> Allbirds — Style Reference

## Prompt Content

```
# Allbirds — Style Reference
> Chất liệu tự nhiên trên nền vải lanh trắng

**Theme:** light

Allbirds vận hành dựa trên sự tự nhiên, tự tin và nhẹ nhàng — một bảng màu gần như hoàn toàn achromatic, được chấm phá bởi tông cát ấm (#e0dacf) và các gam màu đất trầm lấy trực tiếp từ ảnh sản phẩm. UI luôn đứng sang một bên để nhường chỗ cho sản phẩm: bề mặt trắng, đường viền mảnh (hairline borders), navigation chữ in hoa với tracking dày, và các pill controls trông như nút bấm vật lý chứ không phải element web. Self Modern (một custom serif) chỉ được dùng cho những khoảnh khắc mang tính editorial — hero headlines và tên bộ sưu tập — trong khi Geograph đảm nhận mọi label, body text, button ở ba trọng lượng được kiểm soát chặt chẽ. Category cards trở thành hệ thống màu sắc: mỗi card lấy màu nền từ chính sản phẩm nó giới thiệu, biến navigation thành một bảng Pantone sống động.

## Tokens — Colors

| Name | Value | Token | Vai trò |
|------|-------|-------|---------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, nền card sản phẩm |
| Charcoal | `#212121` | `--color-charcoal` | Màu trung tính hỗ trợ cho secondary UI, divider, label mờ. Không dùng làm màu CTA chính |
| True Black | `#000000` | `--color-true-black` | Headline, icon, border tương phản cao, nav text |
| Warm Sand | `#e0dacf` | `--color-warm-sand` | Nền hero section, tông bề mặt phụ, panel editorial lớn |
| Olive Char | `#222519` | `--color-olive-char` | Màu trung tính hỗ trợ cho secondary UI, divider, label mờ. Không dùng làm màu CTA chính |
| Iron Gray | `#525252` | `--color-iron-gray` | Secondary text, helper copy, border nhẹ |
| Stone | `#737373` | `--color-stone` | Border mờ, divider disabled, footer separator |
| Slate Border | `#6a6767` | `--color-slate-border` | Màu border của outlined button |
| Oat Milk | `#ece9e2` | `--color-oat-milk` | Bề mặt cấp ba, nav tint nhẹ, nền thay thế trắng ấm |
| Mist | `#bdbab5` | `--color-mist` | Tông shadow mềm cho các element nổi |

## Tokens — Typography

### Self Modern — Display headlines và editorial copy — dùng có chọn lọc cho hero statements và tên bộ sưu tập. Dáng chữ serif nghiêng nhẹ phá vỡ sự đơn điệu của sans-serif và báo hiệu 'đây là câu chuyện'. · `--font-self-modern`
- **Thay thế:** Playfair Display, DM Serif Display, Cormorant Garamond
- **Trọng lượng:** 400
- **Cỡ chữ:** 18px, 40px
- **Line height:** 1.00, 1.20, 1.50, 1.78
- **Letter spacing:** normal
- **Vai trò:** Display headlines và editorial copy — dùng có chọn lọc cho hero statements và tên bộ sưu tập. Dáng chữ serif nghiêng nhẹ phá vỡ sự đơn điệu của sans-serif và báo hiệu 'đây là câu chuyện'.

### Geograph — Typeface UI chủ lực — body copy, nav labels, button, tên sản phẩm, footer, input, badge. 500 cho label nhấn mạnh, 700 cho tên sản phẩm. Letter-spacing rộng (0.025em–0.10em) trên nav và category labels dạng uppercase tạo nhịp điệu editorial cho thương hiệu. · `--font-geograph`
- **Thay thế:** Inter, Söhne, GT America, Neue Haas Grotesk
- **Trọng lượng:** 400, 500, 700
- **Cỡ chữ:** 12px, 14px, 16px, 20px, 24px
- **Line height:** 1.00, 1.25, 1.33, 1.40, 1.43, 1.50, 1.67
- **Letter spacing:** 0.025em ở 12–14px, 0.05em ở 16px, 0.10em trên nav labels dạng uppercase
- **Vai trò:** Typeface UI chủ lực — body copy, nav labels, button, tên sản phẩm, footer, input, badge. 500 cho label nhấn mạnh, 700 cho tên sản phẩm. Letter-spacing rộng (0.025em–0.10em) trên nav và category labels dạng uppercase tạo nhịp điệu editorial cho thương hiệu.

### HurmeGeometricSans3 — Hiếm khi dùng — biến thể fallback hoặc button label chuyên biệt. Geograph đảm nhận hệ thống hàng ngày. · `--font-hurmegeometricsans3`
- **Thay thế:** Inter, Söhne
- **Trọng lượng:** 400
- **Cỡ chữ:** 14px
- **Line height:** 1.14
- **Vai trò:** Hiếm khi dùng — biến thể fallback hoặc button label chuyên biệt. Geograph đảm nhận hệ thống hàng ngày.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|---------|--------|-------------|----------------|-------|
| caption | 12px | 1.25 | 0.3px | `--text-caption` |
| body-sm | 14px | 1.43 | 0.35px | `--text-body-sm` |
| body | 16px | 1.5 | 0.8px | `--text-body` |
| subheading | 20px | 1.4 | 1px | `--text-subheading` |
| heading-sm | 24px | 1.33 | 1.2px | `--text-heading-sm` |
| heading | 40px | 1.2 | — | `--text-heading` |

## Tokens — Spacing & Shapes

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

**Mật độ:** compact

### Spacing Scale

| Name | Value | 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` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 108 | 108px | `--spacing-108` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| nav | 12px |
| cards | 16px |
| inputs | 4px |
| buttons | 9999px (pill) |
| large-surfaces | 20-24px |

### Shadows

| Name | Giá trị | Token |
|------|---------|-------|
| subtle | `rgb(87, 87, 87) 0px 0px 0px 1px inset, rgb(0, 0, 0) 0px 0...` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 40-56px
- **Card padding:** 32-40px
- **Element gap:** 8-16px

## Components

### Pill Button (Primary)
**Vai trò:** Primary action trigger — Shop Men, Shop Women, Shop Now

Pill bo tròn hoàn toàn (9999px radius), Geograph 500 14px, uppercase, letter-spacing 0.10em, padding dọc 12px / ngang 24px, nền #ffffff trên hero hoặc #212121 trên nền tối, text màu tương phản. Không shadow, không border.

### Pill Button (Dark Surface)
**Vai trò:** CTA trên nền sáng hoặc nền cát

Cùng hình học pill, fill #212121 hoặc #222519, text #ffffff. Dùng trên hero warm sand nơi pill tối tạo điểm tương phản mạnh duy nhất trên trang.

### Category Color Card
**Vai trò:** Mục navigation cho một bộ sưu tập sản phẩm

Grid 4 cột, mỗi card là ảnh full-bleed của một đôi giày đặt giữa nền màu muted solid (xanh bụi, nâu ấm, hồng bụi, xô). Category label nằm trong một pill trắng nhỏ với chữ đen và tracking 0.10em ở góc trên bên trái của giày. Không card shadow — swatch chính là card.

### Product Detail Card
**Vai trò:** PDP hoặc mục trong collection grid

Bề mặt trắng (#ffffff), ảnh giày đặt giữa, không border nhìn thấy được. Tên sản phẩm Geograph 700 16px, giá bên dưới Geograph 400 14px màu #525252. Radius 16px trên image container hoặc cạnh card.

### Editorial Hero Panel
**Vai trò:** Section kể chuyện đầu trang

Dải full-width trên nền #e0dacf warm sand. Headline Self Modern 400 40px, màu trắng. Eyebrow text Geograph 500 uppercase 12px với tracking 0.10em phía trên headline. Không gradient, không shadow — khối editorial phẳng.

### Split Lifestyle + Product Block
**Vai trò:** Brand storytelling section bên dưới hero

Hai cột: trái = ảnh lifestyle full-bleed với Self Modern headline overlay và nút Shop Now pill; phải = panel swatch sản phẩm hình vuông lớn hiển thị giày trên nền màu muted phù hợp với một thẻ swatch PANTONE nhỏ overlay. Sự kết hợp màu-chồng-màu là signature move.

### Top Navigation Bar
**Vai trò:** Primary site navigation

Trắng #ffffff, padding dưới 12px, logo trái (Geograph 700 20px), nav giữa (MEN / WOMEN / SALE Geograph 500 uppercase 12px, tracking 0.10em, padding ngang 32px giữa các mục), utility icons + account/return links phải Geograph 400 14px. Hairline #e0dacf hoặc border trong suốt ở dưới.

### Free Shipping Announcement Bar
**Vai trò:** Dải utility trên cùng

Thanh đen full-bleed #212121, text trắng Geograph 400 12px, căn giữa, padding dọc 8px. Luôn bật, không cần tạo kiểu — chức năng, không trang trí.

### Badge / Tag (NEW COLOR, PANTONE COLOR)
**Vai trò:** Chip chú thích sản phẩm

Label inline, Geograph 500 12px uppercase với tracking 0.10em, không fill, không border, chỉ text trên card sản phẩm. Nằm ở góc trên bên trái card màu #212121. Zero chrome.

### Inset-Border Input
**Vai trò:** Trường newsletter hoặc tìm kiếm

Radius 4px, fill trắng, border inset 1px qua box-shadow stack: inset rgb(87,87,87) 0 0 0 1px + rgb(0,0,0) 0 0 0 1px. Placeholder màu #525252, Geograph 400 14px. Phẳng, có cảm giác xúc giác, không floating label.

### Carousel Arrow Button
**Vai trò:** Navigation cho product carousels

Nút outline hình tròn (~32px), border 1px màu #212121, icon chevron ở giữa, fill trắng. Dùng cho mũi tên carousel New Arrivals.

### Section Title with Underline
**Vai trò:** Geograph 700 16px uppercase căn giữa, tracking 0.10em, với gạch chân đen 1px ngắn bên dưới text (rộng 24-40px). Dấu câu period tối thiểu hoặc dấu chấm phân cách.

Geograph 700 16px uppercase căn giữa, tracking 0.10em, với gạch chân đen 1px ngắn bên dưới text (rộng 24-40px). Dấu câu period tối thiểu hoặc dấu chấm phân cách.

### Footer
**Vai trò:** Site footer

Bề mặt trắng hoặc trắng ngà #ece9e2, grid link nhiều cột Geograph 400 14px #525252, heading Geograph 500 14px #212121, country/region selector và legal copy ở dưới 12px. Không icon mạng xã hội có màu — tất cả đều đơn sắc.

## Do's and Don'ts

### Nên làm
- Dùng pill radius 9999px cho mọi button, tag, icon button — pill là hình dạng control đặc trưng của thương hiệu
- Lấy nền hero và section từ họ warm sand (#e0dacf, #ece9e2) thay vì xám trung tính để giữ bảng màu mang tông đất
- Áp dụng letter-spacing 0.10em trên tất cả uppercase labels (nav, badges, category pills) — tracking là signature typographic của thương hiệu
- Dành Self Modern cho một hoặc hai headline lớn nhất mỗi màn hình; để Geograph làm mọi thứ còn lại
- Dùng solid color swatches làm nền card full-bleed cho category navigation — mỗi category card chính là câu chuyện màu sắc của nó
- Duy trì spacing base 4px; ưu tiên bước nhảy 8/16/32 cho element gaps, 40-56px cho section gaps
- Giữ shadow ở mức zero hoặc gần zero — sự phân tách đến từ các khối màu và border 1px, không phải độ cao

### Không nên làm
- Không đưa vào saturated hoặc chromatic brand colors — hệ thống cố tình gần như achromatic, màu sắc đến từ ảnh sản phẩm
- Không dùng drop shadows trên card hoặc button — Allbirds phân tách bề mặt bằng flat color và hairline borders
- Không trộn nhiều display fonts — Self Modern xuất hiện tối đa một hoặc hai lần mỗi trang, luôn ở 40px+
- Không dùng xám tương phản thấp cho body text — body copy luôn ở #212121 hoặc #525252 trên nền trắng, không bao giờ nhạt hơn
- Không phá vỡ quy tắc pill với button vuông hoặc rounded-rect — mọi interactive control đều được bo tròn hoàn toàn
- Không dùng gradient trên bề mặt UI — thương hiệu là các khối màu phẳng, không có gradient fill ở bất kỳ đâu
- Không thêm màu icon trang trí hoặc bộ icon nhiều màu — icon luôn đơn sắc ở #212121 hoặc #000000

## Surfaces

| Cấp độ | Name | Giá trị | Mục đích |
|--------|------|---------|----------|
| 1 | Canvas | `#ffffff` | Nền trang, footer, bề mặt card, nền card sản phẩm |
| 2 | Warm Sand | `#e0dacf` | Nền hero section, dải editorial full-bleed, panel swatch sản phẩm |
| 3 | Oat Milk | `#ece9e2` | Bề mặt cấp ba, nav tint nhẹ, nền thay thế trắng ấm |
| 4 | Charcoal Surface | `#212121` | Bề mặt gần dark mode cho announcement bar, dark CTA buttons, vùng tối footer |
| 5 | Category Swatch | `#d1b0a4` | Nền category card (tông hồng ấm cho Women's v.v.) |

## Elevation

Elevation về cơ bản không tồn tại. Các bề mặt được phân tách bằng khối màu phẳng, hairline borders 1px, hoặc thay đổi solid background swatch. Shadow duy nhất được phát hiện là inset border stack trên input fields — hiệu ứng xúc giác, không phải nâng lên. Cards, button, panel nằm trên canvas mà không có shadow lift, củng cố thẩm mỹ chất liệu-tự nhiên của thương hiệu, nơi mọi thứ nằm phẳng như giấy trên bàn.

## Imagery

Nhiếp ảnh là toàn bộ hệ thống hình ảnh. Mọi product shots đều được crop sát vào giày ở góc nhẹ, đặt trên nền màu solid phù hợp hoặc bổ sung cho màu nhấn của giày — biến mỗi bức ảnh thành một nghiên cứu màu sắc. Lifestyle photography ấm áp, tràn ngập ánh nắng, ngoài trời tự nhiên (cánh đồng agave, lối đi bằng gỗ, địa hình đất), hơi giảm bão hòa để hòa hợp với bảng màu muted. Không illustration, không 3D render, không đồ họa trừu tượng. Sự hợp tác với Pantone giới thiệu một thẻ swatch màu chữ (literal color swatch card) như một thiết bị đồ họa. Iconography tối giản và đơn sắc (icon stroke outline ở vị trí nav và utility).

## Layout

Max-width ~1200px căn giữa với side padding rộng rãi. Hero là dải editorial full-bleed trên nền warm sand với carousel sản phẩm lớn tỏa ra từ trung tâm. Category navigation là grid 4 cột đều nhau gồm các card màu solid, mỗi card chứa một đôi giày đặt giữa. Bên dưới fold, layout xen kẽ giữa split panels full-bleed (lifestyle photo trái + product swatch phải) và product carousels căn giữa dưới section title gạch chân nhỏ. Nhịp điệu tổng thể là: full-bleed editorial → grid 4 cột → product carousel căn giữa → split 2 cột → product carousel căn giữa. Spacing giữa các section là 40-56px, tạo chuyển tiếp thoáng nhưng không rộng quá mức. Navigation là sticky top bar tối giản với primary links căn giữa.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text: #212121 (primary), #525252 (secondary)
- background: #ffffff (page), #e0dacf (hero/section bands)
- border: #737373 (subtle), #212121 (strong)
- accent: không có chromatic accent — màu sắc đến từ product imagery
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**

1. **Hero editorial band**: Nền #e0dacf full-bleed, không max-width. Eyebrow text Geograph 500, 12px, uppercase, letter-spacing 0.10em, #212121. Headline Self Modern 400, 40px, #212121, line-height 1.20. Hai pill buttons bên dưới: fill #ffffff với text #212121, và fill #212121 với text #ffffff. Cả hai radius 9999px, padding dọc 12px / ngang 24px, Geograph 500 14px uppercase 0.10em tracking.

2. **Category color card**: Grid 4 cột, mỗi ô là một khối màu muted solid (#8b9aa4 xanh bụi, #8a7466 nâu ấm, #c4a4a4 hồng bụi, #8a9a8c xô). Một ảnh giày đặt giữa bên trong. Category label trong pill trắng, Geograph 500 12px uppercase 0.10em tracking, đặt ở góc trên bên trái. Radius 16px ở góc card.

3. **Product carousel card**: Bề mặt trắng #ffffff, không border, không shadow. Ảnh giày đặt giữa ở 70% phía trên. Tên sản phẩm Geograph 700, 16px, #212121. Giá Geograph 400, 14px, #525252. Tùy chọn label 'NEW COLOR' hoặc 'PANTONE COLOR' Geograph 500, 12px, uppercase, 0.10em tracking, #212121, đặt ở góc trên bên trái card không nền hoặc border.

4. **Top navigation**: Trắng #ffffff, padding dưới 12px. Logo 'allbirds' Geograph 700, 20px, lowercase, #212121, căn trái. Nav giữa: MEN / WOMEN / SALE Geograph 500, 12px, uppercase, 0.10em tracking, #212121, gap 32px giữa các mục. Phải: account links Geograph 400, 14px, #525252, cộng icon đơn sắc outline cho search, account, cart.

5. **Split lifestyle + product block**: Hai cột bằng nhau. Trái: ảnh lifestyle full-bleed (ngoài trời, ánh nắng ấm, bối cảnh tự nhiên). Overlay ở góc dưới trái: Self Modern 400 40px headline #ffffff với Geograph 500 12px eyebrow tracking 0.10em phía trên và nút pill trắng 'Shop Now' bên dưới. Phải: panel swatch màu solid (#4a4a6a chàm đậm) với giày sản phẩm đặt giữa và thẻ swatch Pantone trắng nhỏ (hình chữ nhật trắng có border + label) ở góc dưới trái.

## Color Philosophy

Hệ thống màu của Allbirds cố tình trống rỗng — bản sắc màu sắc đến từ chính sản phẩm, không phải từ UI chrome. Giao diện là một khung trắng và cát dành cho giày. Các ngoại lệ duy nhất là các tông màu đất muted được dùng làm nền full-bleed phía sau ảnh sản phẩm trong category cards và editorial sections. Các tông màu này được lấy trực tiếp từ bảng màu sản phẩm (xanh bụi, taupe ấm, hồng bụi, xô, chàm đậm) thay vì được khai báo là brand tokens. Kết quả: UI có thể hoán đổi với bất kỳ bộ sưu tập nào, và sản phẩm luôn mang câu chuyện màu sắc.

## Typography Voice

Geograph là giọng nói — nó nói bằng giọng đều đều, hơi có tracking, mang cảm giác như text trên tường bảo tàng. Self Modern là câu cảm thán — dành riêng cho hai hoặc ba khoảnh khắc mỗi trang nơi headline cần cảm giác như một pull quote trên tạp chí hơn là một UI label. Letter-spacing 0.10em trên mọi uppercase element là thứ mang lại nhịp điệu editorial cho thương hiệu: không phải lựa chọn font, mà là khoảng thở giữa các chữ cái. Một trang thiếu tracking đó sẽ trông giống một thương hiệu hoàn toàn khác.

## Similar Brands

- **Everlane** — Cùng UI gần như achromatic với nền trắng ấm, editorial serif display headlines kết hợp với clean sans-serif body, và pill-shaped minimal buttons để ảnh sản phẩm mang toàn bộ màu sắc
- **Aesop** — Cùng sự kiềm chế — neutrals warm sand và oat-milk, uppercase labels tracking rộng, serif display type dùng có chọn lọc, zero shadows, và chính sản phẩm là nguồn màu duy nhất
- **Glossier** — Cùng sự tự tin editorial — white canvas, thin uppercase nav, serif display accents trên các trang sans-serif, và ảnh sản phẩm làm mọi việc nặng nhọc về màu sắc
- **M.Gemi** — Cùng cách tiếp cận product-card-as-color-swatch — category cards dùng solid muted color blocks mở rộng bảng màu lấy từ chính đôi giày
- **Cuyana** — Cùng hero backgrounds warm sand, pill buttons, uppercase category labels tracking rộng, và triết lý rằng UI nên biến mất để chất liệu lên tiếng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-charcoal: #212121;
  --color-true-black: #000000;
  --color-warm-sand: #e0dacf;
  --color-olive-char: #222519;
  --color-iron-gray: #525252;
  --color-stone: #737373;
  --color-slate-border: #6a6767;
  --color-oat-milk: #ece9e2;
  --color-mist: #bdbab5;

  /* Typography — Font Families */
  --font-self-modern: 'Self Modern', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geograph: 'Geograph', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hurmegeometricsans3: 'HurmeGeometricSans3', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.25;
  --tracking-caption: 0.3px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 0.35px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.8px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 1px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: 1.2px;
  --text-heading: 40px;
  --leading-heading: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --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-40: 40px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-108: 108px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 40-56px;
  --card-padding: 32-40px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;

  /* Named Radii */
  --radius-nav: 12px;
  --radius-cards: 16px;
  --radius-inputs: 4px;
  --radius-buttons: 9999px (pill);
  --radius-large-surfaces: 20-24px;

  /* Shadows */
  --shadow-subtle: rgb(87, 87, 87) 0px 0px 0px 1px inset, rgb(0, 0, 0) 0px 0px 0px 1px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-warm-sand: #e0dacf;
  --surface-oat-milk: #ece9e2;
  --surface-charcoal-surface: #212121;
  --surface-category-swatch: #d1b0a4;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-charcoal: #212121;
  --color-true-black: #000000;
  --color-warm-sand: #e0dacf;
  --color-olive-char: #222519;
  --color-iron-gray: #525252;
  --color-stone: #737373;
  --color-slate-border: #6a6767;
  --color-oat-milk: #ece9e2;
  --color-mist: #bdbab5;

  /* Typography */
  --font-self-modern: 'Self Modern', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geograph: 'Geograph', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hurmegeometricsans3: 'HurmeGeometricSans3', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.25;
  --tracking-caption: 0.3px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 0.35px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.8px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 1px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: 1.2px;
  --text-heading: 40px;
  --leading-heading: 1.2;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-108: 108px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;

  /* Shadows */
  --shadow-subtle: rgb(87, 87, 87) 0px 0px 0px 1px inset, rgb(0, 0, 0) 0px 0px 0px 1px;
}
```