# Things

> Things — Style Reference

## Prompt Content

```
# Things — Style Reference
> Apple keynote ở âm lượng vừa phải — một bức tường gallery với các khung sản phẩm nghiêng nổi trên nền canvas xám lạnh tĩnh lặng, với một chấm xanh dương rực rỡ kéo mắt người xem đến mọi khoảnh khắc tương tác.

**Theme:** light

Things tạo ra một trang sản phẩm kiểu gallery nơi ứng dụng tự kể chuyện qua khoảng trắng rộng rãi, các mockup sản phẩm nghiêng, và một điểm nhấn xanh dương duy nhất đầy tự tin. Phong cách thẩm mỹ vay mượn từ sự kiềm chế editorial của Apple — system fonts, gam màu trung tính gần như xám, độ nâng tinh tế, và các card bo tròn với bán kính 18px tạo cảm giác cao cấp mà không hề lạnh lẽo. Màu sắc xuất hiện một cách tiết kiệm và có chức năng: xanh dương rực cho link, icon và nút play tròn; xanh dương nhạt hơn cho heading phụ; và gần như đen (#303336) cho body text trên nền canvas hơi lạnh (#f2f5f7). Các section thở với khoảng cách dọc 40-80px, và hệ thống phân cấp được thể hiện qua type weight (600-800 cho heading) và line-height rộng rãi thay vì các chi tiết trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Ink | `#303336` | `--color-ink` | Primary text, body copy, heading text — gần như đen với một chút ánh lạnh nhẹ, không bao giờ là #000 thuần, giữ cho trang không bị chói |
| Paper | `#ffffff` | `--color-paper` | Bề mặt card, mockup sản phẩm được nâng lên, input fields — trắng tinh khiết trên nền canvas lạnh hơn tạo cảm giác nổi, không phẳng |
| Mist | `#f2f5f7` | `--color-mist` | Canvas trang, các dải nền full-width — màu trắng ngà pha lạnh, mềm hơn trắng thuần nhưng vẫn đọc là sáng |
| Fog | `#838b96` | `--color-fog` | Secondary body text, helper copy, mô tả mờ — neutral được dùng nhiều nhất sau Ink, tạo nên mid-tone chủ đạo của trang |
| Ash | `#55606e` | `--color-ash` | Tertiary text, icon strokes, đường phân cách trang trí — xám lạnh vẫn mang đủ sắc độ để đọc là có chủ đích thiết kế, không phải mặc định |
| Smoke | `#44474b` | `--color-smoke` | Body text đậm thay thế, inline text được nhấn mạnh — nằm giữa Ink và Fog cho các đoạn có mức nhấn trung bình |
| Silver | `#9299a4` | `--color-silver` | Text bị vô hiệu hóa hoặc giảm nhấn mạnh, metadata cấp ba |
| Pebble | `#8e9196` | `--color-pebble` | Link text mờ, navigation phụ kiểu breadcrumb |
| Hairline | `#dfe3e8` | `--color-hairline` | Viền input, đường phân cách tinh tế, cạnh card — lạnh và gần như vô hình, xác định ranh giới mà không làm tối bề mặt |
| Signal Blue | `#2576eb` | `--color-signal-blue` | Accent xanh dương hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Sky Blue | `#5c9cf5` | `--color-sky-blue` | Xanh dương phụ cho heading accent, link state nhạt hơn, icon highlight trang trí — companion mềm hơn của Signal Blue, dùng khi xanh chính sẽ quá chói |

## Tokens — Typography

### ui-sans-serif (system stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display') — Tất cả UI và editorial text. System stack có chủ đích — trên thiết bị Apple, nó chuyển thành SF Pro, khớp với chính ứng dụng Things. Weight 600-800 dùng cho heading; weight 400 dùng cho body. Không có font tùy chỉnh hoặc tải từ web; sự kiềm chế CHÍNH LÀ thương hiệu. · `--font-ui-sans-serif-system-stack-apple-system-blinkmacsystemfont-sf-pro-text-sf-pro-display`
- **Thay thế:** Inter, Helvetica Neue, system-ui
- **Weights:** 400, 600, 700, 800
- **Kích thước:** 13, 14, 15, 16, 17, 18, 20, 24, 36
- **Line height:** 1.00–1.60
- **Letter spacing:** normal ở mọi kích thước; không có display tracking
- **Vai trò:** Tất cả UI và editorial text. System stack có chủ đích — trên thiết bị Apple, nó chuyển thành SF Pro, khớp với chính ứng dụng Things. Weight 600-800 dùng cho heading; weight 400 dùng cho body. Không có font tùy chỉnh hoặc tải từ web; sự kiềm chế CHÍNH LÀ thương hiệu.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 13px | 1.4 | — | `--text-caption` |
| body | 15px | 1.6 | — | `--text-body` |
| subheading | 18px | 1.3 | — | `--text-subheading` |
| heading-sm | 20px | 1.25 | — | `--text-heading-sm` |
| heading | 24px | 1.2 | — | `--text-heading` |
| display | 36px | 1.2 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** 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` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| cards | 18px |
| icons | 3px |
| inputs | 6px |
| buttons | 6px |
| headings | 12.8px |
| playButton | 9999px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| sm | `rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-sm` |

### Layout

- **Page max-width:** 960px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 10px

## Components

### App Icon Badge
**Vai trò:** Brand mark hiển thị trong hero

App icon hình vuông bo tròn (logo Things: trường gradient xanh dương với dấu check trắng) hiển thị ở ~120px. Hoạt động như một điểm neo thị giác ở đầu hero. Không viền, không shadow — bản thân gradient bên trong icon đã cung cấp toàn bộ trọng lượng thị giác.

### Circular Play Button
**Vai trò:** Control tương tác chính cho video giới thiệu

Hình tròn 36-40px, nền #4f91fb (hoặc #2576eb), glyph play hình tam giác trắng ở giữa, border-radius 9999px. Hoạt động như control màu duy nhất được tô đầy trên trang. Kết hợp với text link liền kề màu Signal Blue (#2576eb). Hình tròn là khoảnh khắc tương tác đặc trưng của thương hiệu.

### Inline Text Link
**Vai trò:** Link điều hướng và ngữ cảnh trên toàn trang

Không gạch chân mặc định; màu #2576eb ở 15-17px weight 400. Hover state đậm hơn thành #1a5fb8. Thường đi kèm với mũi tên ▸ nhỏ (bán kính 3px, 12-14px) báo hiệu điều hướng tiếp theo. Không bao giờ là button được tô đầy — thiết kế này ưu tiên text link yên tĩnh hơn CTA dạng button.

### Product Mockup Card
**Vai trò:** Giới thiệu giao diện ứng dụng Things trong ngữ cảnh

Bề mặt trắng (#ffffff) với border-radius 18px và shadow ambient + contact dạng lớp (0 2px 8px rgba(0,0,0,0.1) + 0 0 2px rgba(0,0,0,0.1)). Thường được hiển thị ở góc xoay 3-5° để tạo năng lượng editorial. Chứa UI gốc của ứng dụng: sidebar danh mục với icon màu, vùng nội dung chính với các hàng tác vụ. Không viền, không outline — shadow xác định cạnh.

### Hero Section Stack
**Vai trò:** Giới thiệu sản phẩm ở màn hình đầu tiên

Canh giữa theo chiều dọc và ngang trên canvas Mist. Thứ tự stack: app icon (~120px), display heading 'Things' ở 36px weight 700 màu Ink, body description ở 17-18px weight 400 màu Fog (1.6 line-height để thoáng), sau đó là play button + text link. Không có background image, không gradient — hero là typography thuần túy trên canvas.

### Feature Heading Row
**Vai trò:** Giới thiệu một khối nội dung mới

Icon (24-32px, bo tròn 3px radius, thường là Signal Blue) canh trái với heading text ở 24px weight 700 màu Ink. Ví dụ: icon play-circle trước 'Prepare Presentation', icon ứng dụng Things trước 'Simply Powerful'. Khoảng cách icon-text: 10-12px.

### Section Divider
**Vai trò:** Phân cách các dải nội dung riêng biệt

Được triển khai dưới dạng chuyển màu ngang full-width giữa các dải Mist và trắng, hoặc dưới dạng khoảng trắng dọc rộng rãi (80px) mà không có đường kẻ nhìn thấy. Không bao giờ là đường kẻ 1px hairline — divider là không gian, không phải đường thẳng.

### Top Navigation Bar
**Vai trò:** Navigation tối giản

Wordmark 'Things' với icon nhỏ (bán kính 3px) ở góc trái, ba text link (Features, Support, Blog) canh phải. Tất cả text ở 15px weight 400 màu Ash (#55606e) hoặc Ink. Không có nền, không border-bottom, không shadow — nav nổi trên canvas.

### Product Category Icon
**Vai trò:** Icon trang trí đại diện cho danh mục tác vụ tích hợp sẵn của ứng dụng

Hình vuông bo tròn (3px radius), ~16-18px, mỗi icon một màu riêng: Inbox (Signal Blue), Today (vàng), Upcoming (hồng/đỏ), Anytime (xanh lá), Someday (xanh ngọc). Đây là nội dung sản phẩm, không phải token của design system, nhưng chúng xác định các khoảnh khắc màu phụ của trang bên cạnh brand blue.

### Body Description Block
**Vai trò:** Đoạn văn hỗ trợ dưới heading

Canh giữa hoặc canh trái, 17-18px weight 400 màu Fog (#838b96), max-width ~540px để dễ đọc, line-height 1.6. Không bao giờ dùng Ink — màu xám nhạt hơn báo hiệu copy hỗ trợ mà không xung đột phân cấp.

### Tilted Product Showcase
**Vai trò:** Thiết bị bố cục editorial cho ảnh chụp màn hình ứng dụng

Hai card mockup sản phẩm chồng lên nhau ở góc nghiêng nhẹ (một xoay -4°, một xoay +3°), tạo chiều sâu mà không cần 3D. Card có bán kính 18px và shadow dạng lớp tiêu chuẩn. Độ nghiêng là đặc trưng — nó phá vỡ lưới canh giữa cứng nhắc và tạo nhịp điệu editorial cho trang.

## Do's and Don'ts

### Nên làm
- Chỉ dùng system sans-serif stack — không bao giờ tải web font; sự kiềm chế của trang phụ thuộc vào điều này
- Dành #2576eb cho các khoảnh khắc tương tác: link, nút play, icon accent. Không bao giờ tô một bề mặt lớn bằng brand blue
- Dùng #f2f5f7 làm canvas full-bleed và #ffffff chỉ cho bề mặt card được nâng lên — ngôn ngữ bề mặt hai tông màu này là xương sống cấu trúc của trang
- Đặt body copy ở 17-18px weight 400 màu #838b96 với 1.6 line-height và ~540px max-width để dễ đọc
- Áp dụng border-radius 18px cho tất cả card được nâng lên và mockup sản phẩm; 6px cho button và input; 9999px cho nút play tròn
- Dùng shadow stack kết hợp (0 2px 8px + 0 0 2px ở 10% black) cho bất kỳ bề mặt nào được nâng lên — độ nâng ambient cộng với contact shadow mảnh
- Phân cách section bằng 80px khoảng trắng dọc hoặc chuyển màu dải full-width, không bao giờ dùng đường kẻ divider nhìn thấy được

### Không nên làm
- Không thêm CTA button được tô đầy — ngôn ngữ thiết kế dùng text link và nút play tròn, không phải action button hình chữ nhật
- Không dùng đen thuần (#000000) cho body text — #303336 là Ink, và đen thuần sẽ phá vỡ ánh lạnh, mềm mại của trang
- Không thêm gradient trang trí, texture, hoặc background imagery vào hero hoặc section — canvas chính là thiết kế
- Không dùng màu icon danh mục (vàng, hồng, xanh lá, xanh ngọc) làm màu accent UI — chúng là nội dung sản phẩm từ ứng dụng, không phải token thương hiệu
- Không áp dụng shadow cho text, icon, hoặc element UI nhỏ — shadow chỉ dành cho card được nâng lên và mockup sản phẩm
- Không thêm border-bottom hoặc nền cho navigation — nó phải nổi vô hình trên canvas
- Không thu hẹp body line-height dưới 1.5 — nhịp điệu dọc thoáng đãng quan trọng như chính kích thước type

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 1 | Canvas | `#f2f5f7` | Nền trang full-bleed, dải section |
| 2 | Card | `#ffffff` | Bề mặt mockup sản phẩm, card nội dung được nâng lên, input fields |
| 3 | Accent Surface | `#4f91fb` | Tô màu xanh dương bão hòa cho nút play tròn — nơi duy nhất màu sắc tô đầy một bề mặt |

## Elevation

- **Product mockup card:** `0 2px 8px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.1)`
- **Elevated content card:** `0 2px 8px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.1)`

## Imagery

Hình ảnh gần như hoàn toàn là mockup sản phẩm — ảnh chụp màn hình thực của giao diện ứng dụng Things được trình bày dưới dạng card editorial nghiêng. Không có lifestyle photography, không có minh họa trừu tượng, không có đồ họa trang trí ngoài chính app icon. Khi icon xuất hiện, chúng là glyph danh mục của chính ứng dụng (Inbox, Today, Upcoming, Anytime, Someday) được hiển thị ở bán kính 3px với các màu danh mục riêng biệt. Icon play control là một hình tam giác trắng đơn giản trên nền tròn Signal Blue. Cách xử lý là thô: ảnh chụp màn hình không có viền, không khung, không device chrome — chúng nằm như những hình chữ nhật nổi trên canvas lạnh, độ nghiêng và shadow làm tất cả công việc thị giác. Phong cách icon là filled, không outlined, với góc bo tròn. Mật độ thấp: text và hình ảnh sản phẩm xen kẽ trong khoảng trống rộng rãi, không bao giờ chật chội.

## Layout

Trang có max-width ~960px canh giữa trên canvas full-bleed #f2f5f7. Hero là một stack dọc canh giữa (icon → heading → description → play link) không có background image. Bên dưới fold, các section xen kẽ giữa dải trưng bày sản phẩm trắng và dải canvas Mist, mỗi section cách nhau 80px khoảng trắng. Mockup sản phẩm được hiển thị ở góc xoay nhẹ (-4° đến +3°) để tạo năng lượng editorial, thường chồng lên nhau theo cặp. Khối text canh giữa hoặc canh trái ở max-width 540px. Không có sidebar, không có lưới đa cột trong body — bố cục là một cột với lề ngang rộng rãi. Top nav là một thanh ngang duy nhất nổi trên canvas không có nền, không viền, không shadow. Việc sử dụng lưới là tối thiểu: feature heading là một cột, product showcase là bố cục 2 card, và nội dung đa cột duy nhất là UI của chính ứng dụng được hiển thị trong mockup.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text: #303336 (primary), #838b96 (body), #55606e (tertiary)
- background: #f2f5f7 (canvas), #ffffff (card)
- border: #dfe3e8
- accent: #2576eb (link, icon, nút play), #5c9cf5 (xanh dương phụ)
- primary action: không có màu CTA riêng biệt

Ví dụ Component Prompts:
1. Xây dựng hero section trên canvas #f2f5f7. Canh giữa app icon Things 120px, sau đó display heading 36px màu #303336 weight 700. Bên dưới, đoạn body 17px màu #838b96 weight 400, line-height 1.6, max-width 540px. Kết thúc với nút play tròn 40px (nền #4f91fb, tam giác play trắng, border-radius 9999px) bên cạnh text link 15px Signal Blue 'Watch Introduction Video' màu #2576eb.

2. Xây dựng product mockup card: border-radius 18px, bề mặt trắng (#ffffff), shadow 0 2px 8px rgba(0,0,0,0.1) + 0 0 2px rgba(0,0,0,0.1). Xoay card -4° để tạo độ nghiêng editorial. Bên trong, hiển thị UI ứng dụng với sidebar gồm icon danh mục (mỗi icon 3px radius, màu riêng biệt) và vùng nội dung chính với các hàng tác vụ text màu #303336.

3. Xây dựng feature heading row: icon Signal Blue 28px (#2576eb, 3px radius) canh trái, sau đó text 24px weight 700 màu #303336. Khoảng cách 10-12px giữa icon và text. Bên dưới, đoạn mô tả 17px màu #838b96 với 1.6 line-height và 540px max-width.

4. Xây dựng top navigation: không nền, không viền. Bên trái: wordmark Things 20px màu #303336 weight 700 với icon nhỏ 3px-radius. Bên phải: ba text link (Features, Support, Blog) ở 15px #55606e weight 400, mỗi link cách nhau 24px khoảng trống ngang.

5. Xây dựng product showcase hai card: hai card trắng với bán kính 18px và shadow dạng lớp tiêu chuẩn, một xoay -4° và một xoay +3°, chồng nhẹ lên nhau ở giữa. Nền section là #f2f5f7, với padding 80px phía trên và dưới.

## Visual Language

Hình ảnh gần như hoàn toàn là mockup sản phẩm — ảnh chụp màn hình thực của giao diện ứng dụng Things được trình bày dưới dạng card editorial nghiêng. Không có lifestyle photography, không có minh họa trừu tượng, không có đồ họa trang trí ngoài chính app icon. Khi icon xuất hiện, chúng là glyph danh mục của chính ứng dụng (Inbox, Today, Upcoming, Anytime, Someday) được hiển thị ở bán kính 3px với các màu danh mục riêng biệt. Icon play control là một hình tam giác trắng đơn giản trên nền tròn Signal Blue. Cách xử lý là thô: ảnh chụp màn hình không có viền, không khung, không device chrome — chúng nằm như những hình chữ nhật nổi trên canvas lạnh, độ nghiêng và shadow làm tất cả công việc thị giác. Phong cách icon là filled, không outlined, với góc bo tròn. Mật độ thấp: text và hình ảnh sản phẩm xen kẽ trong khoảng trống rộng rãi, không bao giờ chật chội.

## Layout

Trang có max-width ~960px canh giữa trên canvas full-bleed #f2f5f7. Hero là một stack dọc canh giữa (icon → heading → description → play link) không có background image. Bên dưới fold, các section xen kẽ giữa dải trưng bày sản phẩm trắng và dải canvas Mist, mỗi section cách nhau 80px khoảng trắng. Mockup sản phẩm được hiển thị ở góc xoay nhẹ (-4° đến +3°) để tạo năng lượng editorial, thường chồng lên nhau theo cặp. Khối text canh giữa hoặc canh trái ở max-width 540px. Không có sidebar, không có lưới đa cột trong body — bố cục là một cột với lề ngang rộng rãi. Top nav là một thanh ngang duy nhất nổi trên canvas không có nền, không viền, không shadow. Việc sử dụng lưới là tối thiểu: feature heading là một cột, product showcase là bố cục 2 card, và nội dung đa cột duy nhất là UI của chính ứng dụng được hiển thị trong mockup.

## Similar Brands

- **Apple product pages (apple.com/mac, apple.com/iphone)** — Cùng system-font typography, ảnh hero sản phẩm nghiêng, một accent màu duy nhất kiềm chế, và bề mặt card bo tròn 18px với shadow ambient
- **Linear** — Chung phong cách product-showcase với ảnh chụp UI nghiêng trên canvas sạch, nhưng Linear thêm dark theme trong khi Things luôn giữ light theme
- **Notion** — Trang marketing sản phẩm tối giản tương tự với khoảng trắng rộng rãi, nhưng Notion dùng neutral ấm hơn và minh họa trang trí trong khi Things giữ lạnh và chỉ tập trung vào sản phẩm
- **Bear (notes app)** — Sản phẩm cùng hệ sinh thái Apple với cách tiếp cận gần như giống hệt: system-font + light-canvas + một accent duy nhất, cùng kỳ vọng của khán giả về sự kiềm chế editorial

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #303336;
  --color-paper: #ffffff;
  --color-mist: #f2f5f7;
  --color-fog: #838b96;
  --color-ash: #55606e;
  --color-smoke: #44474b;
  --color-silver: #9299a4;
  --color-pebble: #8e9196;
  --color-hairline: #dfe3e8;
  --color-signal-blue: #2576eb;
  --color-sky-blue: #5c9cf5;

  /* Typography — Font Families */
  --font-ui-sans-serif-system-stack-apple-system-blinkmacsystemfont-sf-pro-text-sf-pro-display: 'ui-sans-serif (system stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display')', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.4;
  --text-body: 15px;
  --leading-body: 1.6;
  --text-subheading: 18px;
  --leading-subheading: 1.3;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.25;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --text-display: 36px;
  --leading-display: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* 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-36: 36px;
  --spacing-40: 40px;
  --spacing-200: 200px;

  /* Layout */
  --page-max-width: 960px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-xl: 12.8px;
  --radius-2xl: 18px;

  /* Named Radii */
  --radius-cards: 18px;
  --radius-icons: 3px;
  --radius-inputs: 6px;
  --radius-buttons: 6px;
  --radius-headings: 12.8px;
  --radius-playbutton: 9999px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px;

  /* Surfaces */
  --surface-canvas: #f2f5f7;
  --surface-card: #ffffff;
  --surface-accent-surface: #4f91fb;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #303336;
  --color-paper: #ffffff;
  --color-mist: #f2f5f7;
  --color-fog: #838b96;
  --color-ash: #55606e;
  --color-smoke: #44474b;
  --color-silver: #9299a4;
  --color-pebble: #8e9196;
  --color-hairline: #dfe3e8;
  --color-signal-blue: #2576eb;
  --color-sky-blue: #5c9cf5;

  /* Typography */
  --font-ui-sans-serif-system-stack-apple-system-blinkmacsystemfont-sf-pro-text-sf-pro-display: 'ui-sans-serif (system stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display')', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.4;
  --text-body: 15px;
  --leading-body: 1.6;
  --text-subheading: 18px;
  --leading-subheading: 1.3;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.25;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --text-display: 36px;
  --leading-display: 1.2;

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

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-xl: 12.8px;
  --radius-2xl: 18px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px;
}
```