# boords.com

> boords.com — Style Reference

## Prompt Content

```
# boords.com — Style Reference
> Studio storyboard ấm áp trên nền giấy kem — nền cream, điểm nhấn bút chì màu hổ phách, và kiểu chữ hình học phẳng mang cảm giác vẽ tay dù là UI thuần túy.

**Theme:** light

Boords hoạt động trong một không gian thị giác ấm áp, giống như giấy: nền cream (#fafaf5) nằm bên dưới các bề mặt trắng tinh, với một điểm nhấn màu hổ phách duy nhất mang cảm giác như nét bút chì hơn là một CTA kỹ thuật số. Typeface 'matter' tùy chỉnh mang tính hình học, thân thiện ở mọi kích thước, với tracking dương cho small-caps eyebrows và headline chặt chẽ, tự tin ở 32–60px. Giao diện được thiết kế phẳng có chủ đích — góc 6px là bán kính mặc định, shadow gần như vắng bóng, và một phần tối (khu vực developer/API) phá vỡ sự đơn điệu của cream mà không làm xáo trộn sự yên tĩnh. Thẩm mỹ này vay mượn từ thế giới storyboard mà nó phục vụ: tông trung tính ấm, bo tròn mềm mại, màu hành động ấm áp như hổ phách, và chất vẽ tay trong hình ảnh sản phẩm khiến UI cảm giác như một công cụ sáng tạo hơn là một ứng dụng năng suất.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Warm Cream | `#fafaf5` | `--color-warm-cream` | Page canvas, bề mặt nền — thay thế màu trắng tinh khiết để tạo cho giao diện cảm giác ấm áp như giấy |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, panel sản phẩm UI, khối nội dung nâng cao |
| Ink Black | `#121212` | `--color-ink-black` | Văn bản chính, nền phần tối, nút nav đã điền màu, border tương phản cao |
| Stone Gray | `#e9e9e7` | `--color-stone-gray` | Đường phân cách section, bề mặt xen kẽ nhẹ nhàng, nền input field |
| Pebble Border | `#cecdca` | `--color-pebble-border` | Hairline border trên card, đường phân cách giữa các section, dấu phân cách bảng |
| Graphite | `#4d4d4d` | `--color-graphite` | Văn bản phụ, body copy mờ, nhãn hỗ trợ |
| Mid Gray | `#7d7d7d` | `--color-mid-gray` | Văn bản cấp ba, icon strokes, trạng thái disabled, metadata chú thích |
| Muted Ash | `#898989` | `--color-muted-ash` | Văn bản placeholder, border nhẹ, văn bản ít nhấn mạnh |
| Warm Gold | `#e8aa42` | `--color-warm-gold` | Nút CTA chính, highlight trạng thái active — điểm nhấn bút chì màu hổ phách khiến hành động duy nhất trở nên ấm áp và hấp dẫn thay vì công ty |
| Deep Amber | `#eb6c00` | `--color-deep-amber` | Điểm nhấn trang trí màu cam cho icon, dấu hiệu và chi tiết đồ họa nhỏ. Không nâng cấp lên màu CTA chính |
| Burnt Honey | `#b77a1e` | `--color-burnt-honey` | Điểm nhấn trang trí màu vàng cho icon, dấu hiệu và chi tiết đồ họa nhỏ. Không nâng cấp lên màu CTA chính |
| Storyboard Blue | `#214c7e` | `--color-storyboard-blue` | Điểm nhấn màu xanh cho border hành động có đường viền, nhãn liên kết và nhấn mạnh tương tác nhẹ |
| Sketch Blue | `#daeef8` | `--color-sketch-blue` | Hairline border, đường phân cách, input outlines và cạnh card trên bề mặt sáng |

## Tokens — Typography

### matter — Primary typeface — geometric sans-serif tùy chỉnh với tỷ lệ thân thiện, được sử dụng trên mọi ngữ cảnh UI, body và display. Weight 400–500 cho body và UI, 600–700 cho heading và nhấn mạnh. · `--font-matter`
- **Thay thế:** Inter hoặc DM Sans
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 10px, 11px, 12px, 14px, 16px, 17px, 19px, 20px, 24px, 32px, 40px, 60px
- **Line height:** 1.10–1.70 tùy kích thước
- **Letter spacing:** 0.025em ở caption (10px), 0.05em ở body-sm (12px), 0.1em cho small-caps eyebrows (12–14px)
- **Vai trò:** Primary typeface — geometric sans-serif tùy chỉnh với tỷ lệ thân thiện, được sử dụng trên mọi ngữ cảnh UI, body và display. Weight 400–500 cho body và UI, 600–700 cho heading và nhấn mạnh.

### ui-monospace — System monospace cho code blocks, API endpoint paths và metadata kỹ thuật trong phần developer tối · `--font-ui-monospace`
- **Thay thế:** SF Mono, Menlo, Consolas
- **Weights:** 400, 500, 600
- **Kích thước:** 9px, 11px, 16px
- **Line height:** 1.50
- **Vai trò:** System monospace cho code blocks, API endpoint paths và metadata kỹ thuật trong phần developer tối

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.5 | 0.25px | `--text-caption` |
| body-lg | 17px | 1.5 | — | `--text-body-lg` |
| subheading | 20px | 1.45 | 1.2px | `--text-subheading` |
| heading-sm | 24px | 1.45 | — | `--text-heading-sm` |
| heading | 32px | 1.25 | — | `--text-heading` |
| heading-lg | 40px | 1.2 | — | `--text-heading-lg` |
| display | 60px | 1.1 | — | `--text-display` |

## Tokens — Spacing & Shapes

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

**Density:** compact

### 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` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 104 | 104px | `--spacing-104` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 6px |
| pills | 9999px |
| badges | 6px |
| images | 6px |
| inputs | 6px |
| buttons | 6px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| lg | `rgba(255, 255, 255, 0.03) 0px 0px 24px 0px` | `--shadow-lg` |
| subtle | `rgba(108, 188, 244, 0.5) 0px 0px 0px 1px` | `--shadow-subtle` |
| subtle-2 | `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle-2` |
| sm | `rgba(0, 0, 0, 0.1) 0px 2px 8px 0px` | `--shadow-sm` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 16px
- **Element gap:** 8px

## Components

### Amber CTA Button
**Vai trò:** Nút hành động chính dùng cho điểm chuyển đổi chính (Try Boords Free, Sign Up)

Điền màu #e8aa42, chữ màu #121212, border-radius 6px, padding dọc 10px và ngang 20px, matter 500 ở 16px. Một nút warm-gold duy nhất trên mỗi view — không bao giờ ghép với nút amber thứ hai trên cùng một màn hình.

### Dark Filled Button
**Vai trò:** Hành động điều hướng phụ (Log in, dashboard access)

Điền màu #121212, chữ màu #ffffff, border-radius 6px, padding dọc 10px và ngang 20px, matter 500 ở 16px. Được dùng trong nav bar cho các hành động đã xác thực.

### Ghost Text Link
**Vai trò:** Inline link hoặc hành động bổ sung (Watch the demo, Explore API docs)

Không nền hoặc border, chữ màu #121212 (light theme) hoặc #ffffff (dark section), matter 500 ở 16px, gạch chân cho text-only links, ký tự mũi tên phải (→) sau chữ cho navigational links. Padding: 0px.

### Storyboard Frame Card
**Vai trò:** Element UI sản phẩm hiển thị một khung storyboard riêng lẻ với metadata

Nền trắng (#ffffff), border 1px #cecdca, border-radius 6px, padding 12px. Chứa hình ảnh phác thảo bút chì (grayscale), badge số khung, text tiêu đề (matter 500, 14px) và nhãn 'IMAGE GENERATOR' nhỏ kèm icon ở dưới cùng. Không shadow.

### Comment Thread Item
**Vai trò:** Phản hồi của khách hàng trong giao diện đánh giá storyboard

Nền trắng (#ffffff), border 1px #cecdca, border-radius 6px, padding 16px. Chứa avatar người dùng (hình tròn 24px), tên (matter 600, 14px, #121212), timestamp (matter 400, 12px, #7d7d7d) và text bình luận (matter 400, 14px, #4d4d4d). Các reply được highlight sử dụng màu chữ #e8aa42 cho phần được trích dẫn.

### Status Badge
**Vai trò:** Chỉ báo trạng thái dự án hoặc khung hình (In Progress, Approved, Changes Requested)

Border-radius 6px, padding dọc 4px và ngang 10px. Trạng thái mặc định: nền #daeef8 với chữ #214c7e và tiền tố chấm tròn màu 6px. Chữ ở matter 600 tại 11px với letter-spacing 0.05em.

### API Endpoint Row
**Vai trò:** Hiển thị HTTP endpoint trong phần developer tối

Bề mặt tối (nền #121212) với thẻ HTTP method (GET, POST, PATCH, DELETE) dạng pill nhỏ ở lề trái, endpoint path ở ui-monospace 400 tại 11px màu #cecdca và text mô tả ở matter 400 tại 12px màu #7d7d7d. Thẻ method sử dụng màu ngữ nghĩa tắt (xanh lá cho GET, xanh dương cho POST, vàng cho PATCH, đỏ cho DELETE) ở độ bão hòa thấp. Border-radius 6px trên toàn bộ row card.

### Section Eyebrow Label
**Vai trò:** Nhãn danh mục small-caps phía trên headline section (ví dụ: '11 YEARS OF VIDEO PREPRODUCTION SIGN-OFF')

Matter 600 tại 11px, chữ hoa, màu chữ #7d7d7d, letter-spacing 0.1em. Không nền hoặc border. Nằm cách 12px phía trên section heading.

### Testimonial Card
**Vai trò:** Trích dẫn bằng chứng xã hội từ khách hàng

Nền cream (#fafaf5) — nằm trên section trắng để tạo sự tách biệt tinh tế, không border, border-radius 6px, padding 24px. Text trích dẫn ở matter 400 tại 16px, #4d4d4d. Tên công ty bên dưới ở matter 600 tại 14px, #121212.

### Logo Bar Item
**Vai trò:** Logo khách hàng/studio trong dải bằng chứng xã hội

Xử lý đơn sắc đen (#121212), không nền hoặc border, nằm trong section cream. Logo được hiển thị ở chiều cao đồng nhất (~24px) với khoảng cách nhất quán (32px giữa các item) trong một hàng ngang duy nhất.

## Do's and Don'ts

### Nên làm
- Sử dụng #fafaf5 làm page canvas — cream ấm áp là bề mặt đặc trưng của thương hiệu và không bao giờ được thay thế bằng màu trắng tinh khiết ở lớp nền.
- Dành riêng #e8aa42 cho CTA chính duy nhất trên mỗi view. Không có nút amber phụ, không có icon amber trong cùng khung hình với CTA.
- Sử dụng border-radius 6px làm mặc định cho tất cả card, nút, input và hình ảnh. Chỉ sử dụng 9999px cho thẻ dạng pill và biến thể nút pill tùy chọn.
- Áp dụng positive letter-spacing (0.05–0.1em) chỉ cho small-caps eyebrows và nhãn. Body và display text sử dụng tracking bình thường.
- Giữ giao diện phẳng: tách các lớp bằng border 1px #cecdca, không dùng drop shadow. Shadow duy nhất được chấp nhận là rgba(0,0,0,0.1) 0px 2px 8px cho ảnh chụp màn hình sản phẩm nổi.
- Sử dụng matter ở 400 cho body, 500 cho UI và link, 600–700 cho heading. Không bao giờ đặt matter dưới 400 — typeface mất đi tính cách ở weight nhẹ.
- Sử dụng ui-monospace chỉ trong phần developer tối cho API endpoint và code. Body text luôn là matter.

### Không nên làm
- Không sử dụng #ffffff làm nền trang — cream canvas (#fafaf5) là dấu ấn thương hiệu, không phải màu trắng tinh khiết.
- Không sử dụng #214c7e (storyboard blue) cho nút CTA — nó chỉ dành cho link, status badge và điểm nhấn thông tin. CTA luôn là amber.
- Không áp dụng drop shadow cho card hoặc panel — sử dụng border 1px hoặc sự khác biệt bề mặt cream-to-white để tách biệt.
- Không sử dụng border-radius trên 12px cho card hoặc panel — 6px là bán kính tiêu chuẩn tối đa. Bán kính lớn hơn phá vỡ cảm giác phẳng, giống không gian làm việc.
- Không đặt màu sắc làm trang trí — mọi màu bão hòa phải phục vụ một chức năng (CTA, link, status, icon accent).
- Không mở rộng phần tối ra ngoài khu vực developer/API — phần còn lại của giao diện ở trên cream và trắng.
- Không sử dụng màu nội dung/code bị loại trừ (#e5f2d5, #f8dfe6, #ffd1c9, #b6defa) bên ngoài ngữ cảnh code block và syntax-highlighting.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Cream Canvas | `#fafaf5` | Nền cấp trang — lớp nền ấm áp như giấy xác định toàn bộ giao diện |
| 2 | White Card | `#ffffff` | Panel UI sản phẩm, storyboard frame card và khối nội dung nâng cao cần cảm giác sắc nét trên nền cream |
| 3 | Stone Section | `#e9e9e7` | Nền section thay thế để tách biệt thị giác tinh tế mà không cần border cứng |
| 4 | Dark Workspace | `#121212` | Nền phần developer/API — bề mặt tối duy nhất, được sử dụng cho phần trình diễn tích hợp |

## Elevation

Boords gần như tránh hoàn toàn elevation. Card sử dụng border pebble 1px (#cecdca) thay vì shadow để tách biệt khỏi cream canvas. Shadow có ý nghĩa duy nhất là rgba(0, 0, 0, 0.1) 0px 2px 8px 0px được sử dụng một cách tiết kiệm trên ảnh chụp màn hình sản phẩm nổi. Trong phần developer tối, bề mặt được xác định bằng inner highlight (rgba(255, 255, 255, 0.1) 1px inset) thay vì drop shadow. Trạng thái focus sử dụng vòng xanh 1px (rgba(108, 188, 244, 0.5)) thay vì glow. Sự phẳng là có chủ đích: nó giữ cho giao diện cảm giác như một không gian làm việc hơn là một ứng dụng phân lớp.

## Imagery

Ngôn ngữ thị giác ưu tiên minh họa, bắt nguồn từ phương tiện storyboard. Ảnh chụp màn hình sản phẩm hiển thị các khung phác thảo bút chì vẽ tay — line art grayscale với lớp phủ nhẹ, gợi lên hình thu nhỏ của họa sĩ hoạt hình. Bản thân UI sản phẩm là hình ảnh chính: storyboard editor, comment thread và API panel được hiển thị dưới dạng ảnh chụp màn hình lớn được nhúng thay vì đồ họa trừu tượng. Không có nhiếp ảnh, không có stock imagery, không có 3D render. Đồ họa trang trí duy nhất là các khung storyboard vẽ tay trong UI sản phẩm. Các item trong logo bar (Vidico, Digital Brew, Framestore, v.v.) được xử lý đơn sắc đen trên nền cream, củng cố thẩm mỹ phẳng, hạn chế. Xử lý hình ảnh: được chứa trong card bo tròn (bán kính 6px), không bao giờ full-bleed ngoại trừ trong hero product showcase.

## Layout

Container căn giữa max-width 1200px, light theme xuyên suốt ngoại trừ một phần developer tối. Navigation là top bar đơn giản với logo căn trái, nav link căn giữa (Features, Resources, About, Pricing) và hành động căn phải (Log in + amber CTA). Hero pattern: text trái, ảnh chụp màn hình sản phẩm bên dưới, không có hình ảnh toàn viewport — headline và subtext nằm trên cream canvas với ảnh chụp màn hình sản phẩm rộng rãi trải dài toàn bộ chiều rộng nội dung bên dưới. Nhịp điệu section: khoảng trống dọc nhất quán (section gap 64px) với luồng liền mạch giữa bề mặt cream và trắng. Bố cục nội dung xen kẽ giữa các chồng text căn giữa (hero) và lưới 3 cột (testimonials, feature cards, logo bar). Phần developer tối phá vỡ mẫu: nền #121212 full-width với panel API code được nhúng. Sử dụng lưới: lưới testimonial 3 cột, logo bar 3 cột, lưới storyboard frame một cột trong UI sản phẩm. Navigation: top bar tối giản, không có sticky behavior, không có mega-menu.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- Text: #121212 (chính), #4d4d4d (phụ), #7d7d7d (cấp ba)
- Background: #fafaf5 (canvas), #ffffff (bề mặt card)
- Border: #cecdca (hairline), #e9e9e7 (đường phân cách tinh tế)
- Accent: #214c7e (link, status)
- primary action: #e8aa42 (border hành động có đường viền)

**Ví dụ Component Prompts**

1. Tạo một Outlined Primary Action: Nền trong suốt, border và chữ #e8aa42, bán kính 9999px, padding pill nhỏ gọn. Sử dụng nó cho CTA chính thay vì nút đã điền màu.

2. *Tạo một storyboard frame card:* Nền trắng (#ffffff), border 1px #cecdca, bán kính 6px, padding 12px. Vùng hình ảnh placeholder (phong cách phác thảo grayscale) ở trên cùng. Badge số khung (bán kính 6px, nền #daeef8, chữ #214c7e, 11px matter 600). Tiêu đề ở 14px matter 500, #121212. Nhãn 'IMAGE GENERATOR' ở 11px matter 600, #7d7d7d với icon nhỏ.

3. *Tạo một status badge:* Bán kính 6px, padding 4px 10px, nền #daeef8, tiền tố chấm 6px #214c7e, chữ 'In Progress' ở matter 600 tại 11px với letter-spacing 0.05em, màu #214c7e.

4. *Tạo một testimonial card:* Nền #fafaf5 (nằm trên section trắng), bán kính 6px, padding 24px, không border. Text trích dẫn ở 16px matter 400, #4d4d4d. Tên công ty ở 14px matter 600, #121212 bên dưới trích dẫn.

5. *Tạo một navigation bar:* Nền trắng (#ffffff), chiều cao 64px, nav link matter 500 tại 16px màu #121212. Bên trái: logo (wordmark 'BOORDS' màu đen). Bên phải: nút 'Log in' dark filled (nền #121212, chữ #ffffff, bán kính 6px) và nút 'Try Boords Free' amber (nền #e8aa42, chữ #121212, bán kính 6px).

## Similar Brands

- **Pitch** — Cùng cream canvas ấm áp, điểm nhấn chính amber/gold và typography geometric sans-serif — cùng thẩm mỹ không gian làm việc như giấy
- **Frame.io** — Cùng UI sản phẩm light-theme với card phẳng, hairline border và shadow tối thiểu — cả hai đều phục vụ chuyên gia sản xuất video với giao diện sạch sẽ, giống công cụ
- **Linear** — Mật độ nhỏ gọn, bán kính 6px, bề mặt phẳng gần như không shadow và bảng màu hạn chế với một màu nhấn chức năng duy nhất
- **Notion** — Bảng màu trung tính ấm áp, elevation tối thiểu và độ phẳng giống không gian làm việc khiến giao diện cảm giác như một tài liệu hơn là một ứng dụng
- **Figma** — Thẩm mỹ công cụ sáng tạo với panel UI sản phẩm được chứa, logo bar đơn sắc và thiết kế ưu tiên light-theme với chrome trang trí tối thiểu

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-warm-cream: #fafaf5;
  --color-pure-white: #ffffff;
  --color-ink-black: #121212;
  --color-stone-gray: #e9e9e7;
  --color-pebble-border: #cecdca;
  --color-graphite: #4d4d4d;
  --color-mid-gray: #7d7d7d;
  --color-muted-ash: #898989;
  --color-warm-gold: #e8aa42;
  --color-deep-amber: #eb6c00;
  --color-burnt-honey: #b77a1e;
  --color-storyboard-blue: #214c7e;
  --color-sketch-blue: #daeef8;

  /* Typography — Font Families */
  --font-matter: 'matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 0.25px;
  --text-body-lg: 17px;
  --leading-body-lg: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.45;
  --tracking-subheading: 1.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.45;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --text-display: 60px;
  --leading-display: 1.1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --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-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-104: 104px;

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

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

  /* Named Radii */
  --radius-cards: 6px;
  --radius-pills: 9999px;
  --radius-badges: 6px;
  --radius-images: 6px;
  --radius-inputs: 6px;
  --radius-buttons: 6px;

  /* Shadows */
  --shadow-lg: rgba(255, 255, 255, 0.03) 0px 0px 24px 0px;
  --shadow-subtle: rgba(108, 188, 244, 0.5) 0px 0px 0px 1px;
  --shadow-subtle-2: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;

  /* Surfaces */
  --surface-cream-canvas: #fafaf5;
  --surface-white-card: #ffffff;
  --surface-stone-section: #e9e9e7;
  --surface-dark-workspace: #121212;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-warm-cream: #fafaf5;
  --color-pure-white: #ffffff;
  --color-ink-black: #121212;
  --color-stone-gray: #e9e9e7;
  --color-pebble-border: #cecdca;
  --color-graphite: #4d4d4d;
  --color-mid-gray: #7d7d7d;
  --color-muted-ash: #898989;
  --color-warm-gold: #e8aa42;
  --color-deep-amber: #eb6c00;
  --color-burnt-honey: #b77a1e;
  --color-storyboard-blue: #214c7e;
  --color-sketch-blue: #daeef8;

  /* Typography */
  --font-matter: 'matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 0.25px;
  --text-body-lg: 17px;
  --leading-body-lg: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.45;
  --tracking-subheading: 1.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.45;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --text-display: 60px;
  --leading-display: 1.1;

  /* 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-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-104: 104px;

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

  /* Shadows */
  --shadow-lg: rgba(255, 255, 255, 0.03) 0px 0px 24px 0px;
  --shadow-subtle: rgba(108, 188, 244, 0.5) 0px 0px 0px 1px;
  --shadow-subtle-2: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
}
```