# Convex

> # Convex — Style Reference

## Prompt Content

```
# Convex — Style Reference
> Sổ tay kỹ thuật giấy kem

**Theme:** mixed

Convex mang đến một không gian làm việc kỹ thuật ấm áp trên nền giấy kem: canvas beige không bão hòa (#f6f6f6 đến #f7f1ff) làm nền cho cả giao diện sản phẩm lẫn ảnh chụp màn hình sản phẩm, trong khi các bề mặt code tối (#141414, #292929) hiển thị TypeScript và bản xem trước dashboard với dấu câu syntax highlight màu hồng, tím, xanh lá và vàng. GT America grotesque ở các weight rất nhẹ tạo nên một giọng văn kỹ thuật editorial nhẹ nhàng, điềm tĩnh — negative tracking dày trên headline 40-56px nén wordmark thành các khối chữ tự tin, gọn gàng. Các component vuông vức và nhỏ gọn: border-radius 8-12px, viền than mỏng, padding tối thiểu tạo ra mật độ giống bản thiết kế (blueprint), đọc giống sổ tay developer hơn là trang web marketing.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink Black | `#141414` | `--color-ink-black` | Văn bản chính, bề mặt card tối, nền code editor, filled neutral buttons — màu tối chủ đạo trên toàn site |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt sáng hỗ trợ cho nền nhẹ và phân cách section. Không dùng làm màu CTA chính |
| Cream Surface | `#f6f6f6` | `--color-cream-surface` | Canvas trang và nền section — màu trắng ấm giúp Convex khác biệt với SaaS trắng lạnh |
| Lilac Wash | `#f7f1ff` | `--color-lilac-wash` | Panel nền pha màu nhẹ, vùng icon wash, phân cách section mềm |
| Charcoal Surface | `#292929` | `--color-charcoal-surface` | Bề mặt tối thứ cấp, navigation pills, khung code block chế độ tối |
| Graphite Border | `#38383a` | `--color-graphite-border` | Viền trên bề mặt tối, đường phân cách trong code block, đường viền outlined button trên nền tối |
| Slate Text | `#4f4f52` | `--color-slate-text` | Văn bản nội dung thứ cấp, metadata nav, label phụ nhẹ nhàng |
| Fog Text | `#6d6d70` | `--color-fog-text` | Văn bản trợ giúp mờ, mục nav cấp ba, label kiểu breadcrumb |
| Ash Text | `#a9a9ac` | `--color-ash-text` | Văn bản placeholder, label bị vô hiệu hóa, metadata rất ít nhấn mạnh |
| Mist Divider | `#e5e5e5` | `--color-mist-divider` | Đường phân cách mảnh (hairline), viền input trên bề mặt sáng, đường kẻ ngăn cách hàng trong bảng |
| Signal Blue | `#69bee2` | `--color-signal-blue` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không dùng làm màu CTA chính |
| Plum Button | `#8d2676` | `--color-plum-button` | Accent button filled thay thế trên các section marketing cụ thể — màu đỏ tía đậm trên nền kem |
| Ember Orange | `#de5d33` | `--color-ember-orange` | Accent highlight trên CTA hoặc callout chips cụ thể — màu cam ấm bổ sung cho xanh lạnh |
| Hot Pink | `#fc618d` | `--color-hot-pink` | Accent đỏ hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |
| Iris Violet | `#948ae3` | `--color-iris-violet` | Accent tím hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |
| Mint Green | `#7bd88f` | `--color-mint-green` | Accent xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |
| Canary Yellow | `#f8e67a` | `--color-canary-yellow` | Accent vàng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |
| Dusk Gradient | `linear-gradient(135deg, rgb(34, 31, 29), rgb(49, 43, 43) 28%, rgba(41, 57, 105, 0.9) 50%)` | `--color-dusk-gradient` | Gradient nền section tối — chuyển sắc chéo từ gần đen ấm qua than đến một lớp sương xanh mát |

## Tokens — Typography

### GT America — Kiểu chữ chính cho mọi UI, heading, body, nav và button — grotesque sans với khoảng cách quang học chặt; weight 400/500 cho body, weight 700 dành riêng cho nhấn mạnh và label button · `--font-gt-america`
- **Thay thế:** Inter, Switzer, hoặc General Sans
- **Weights:** 400, 500, 700
- **Kích cỡ:** 10, 12, 13, 14, 15, 16, 18, 20, 36, 40, 56
- **Line height:** 1.00, 1.25, 1.38, 1.50
- **Letter spacing:** -0.05em ở 56px, -0.025em ở 40px, 0.025em ở 10-12px, 0.05em ở 10-12px
- **Vai trò:** Kiểu chữ chính cho mọi UI, heading, body, nav và button — grotesque sans với khoảng cách quang học chặt; weight 400/500 cho body, weight 700 dành riêng cho nhấn mạnh và label button

### ui-monospace / monospace — Code snippet, đầu ra terminal, đường dẫn file, inline code — chỉ dùng trong code block và bề mặt hướng đến developer · `--font-ui-monospace-monospace`
- **Thay thế:** JetBrains Mono, IBM Plex Mono
- **Weights:** 400
- **Kích cỡ:** 13
- **Line height:** 1.40
- **Letter spacing:** normal
- **Vai trò:** Code snippet, đầu ra terminal, đường dẫn file, inline code — chỉ dùng trong code block và bề mặt hướng đến developer

### monospace — monospace — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-monospace`
- **Weights:** 400
- **Kích cỡ:** 13px
- **Line height:** 1.4
- **Vai trò:** monospace — đượ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 cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.25 | 0.5px | `--text-caption` |
| body | 14px | 1.5 | — | `--text-body` |
| body-lg | 16px | 1.5 | — | `--text-body-lg` |
| subheading | 20px | 1.38 | — | `--text-subheading` |
| heading | 36px | 1.25 | -0.9px | `--text-heading` |
| heading-lg | 40px | 1.25 | -1px | `--text-heading-lg` |
| display | 56px | 1 | -2.8px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 22 | 22px | `--spacing-22` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 48 | 48px | `--spacing-48` |
| 80 | 80px | `--spacing-80` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 12px |
| tags | 4px |
| cards | 12px |
| inputs | 4px |
| buttons | 8px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 12px

## Components

### Top Navigation Bar
**Vai trò:** Header site cố định

Nền trắng (#ffffff), border-radius 12px trên dropdown pills, GT America 14px/500 cho link màu #141414, GitHub stars pill với nền tối #292929 và số sao màu trắng. Chiều cao ~64px, padding ngang 24px.

### Ghost Navigation Button (Log in)
**Vai trò:** Hành động nav thứ cấp

Nền trắng, viền 1px #d7d7d7, border-radius 8px, GT America 14px/500 màu #141414, padding 8px 16px. Không đổ bóng, phẳng.

### Filled Light CTA (Start building)
**Vai trò:** Hành động chính trên nền sáng

Nền trắng (#ffffff), chữ #141414, GT America 15px/500, border-radius 8px, padding 10px 20px. Nằm trên cream canvas và là hành động có độ tương phản cao nhất.

### Filled Dark CTA (Learn more)
**Vai trò:** Hành động chính trên section kem/sáng

Nền #141414, chữ trắng, GT America 15px/500, border-radius 8px, padding 10px 20px. Là CTA filled mặc định trên hầu hết các section nội dung.

### Blue Signal CTA (Learn more on dark)
**Vai trò:** Hành động chính trên section gradient tối

Nền #69bee2, chữ #141414, GT America 15px/500, border-radius 8px, padding 10px 20px. Là filled button có màu sắc duy nhất; chỉ dùng cho hành động hero trên section tối.

### Code Editor Card
**Vai trò:** Xem trước sản phẩm — TypeScript IDE

Nền #141414, border-radius 12px, viền 1px #38383a, ba chấm đèn giao thông kiểu macOS ở góc trên bên trái, thanh tab file màu #292929, code monospace 13px với màu syntax (hot pink cho keyword, iris violet cho type, mint green cho boolean, canary yellow cho constant).

### Dashboard Preview Card
**Vai trò:** Xem trước sản phẩm — giao diện todo app

Bề mặt card sáng #ffffff với viền mảnh #e5e5e5, border-radius 12px, padding 24px. Thanh header hiển thị domain (.convex.dev) bằng chữ #6d6d70 12px, các hàng trong bảng xen kẽ trắng/#f6f6f6 với đường kẻ 1px #e5e5e5, nút 'Add' màu xanh #69bee2 với border-radius 8px.

### Command Snippet Card (npm create convex)
**Vai trò:** Lệnh cài đặt hero

Nền tối #292929, border-radius 8px, chữ trắng monospace 13px, icon copy ở cuối màu #a9a9ac. Nằm inline bên cạnh light CTA trong hero.

### Feature Section Card
**Vai trò:** Card nội dung cho danh sách tính năng

Không có nền rõ ràng (nằm trên cream canvas), không viền, heading GT America 18px/700 màu #141414, body 15px/400 màu #4f4f52, khoảng cách 24px giữa heading và body.

### Dark Gradient Hero Banner
**Vai trò:** Section tối full-bleed với headline căn giữa

Nền là dusk gradient 135 độ (#221f1d → #38383a → rgba blue haze), border-radius 12px cho bất kỳ card nào chứa bên trong, headline GT America 40px/700 màu trắng căn giữa, thẻ nhỏ 'PRODUCT' ở dạng 12px/500 uppercase với tracking 0.05em bên trong pill 1px #38383a có border-radius 4px.

### Chat Prompt Card
**Vai trò:** Card demo AI/LLM trong section tính năng

Nền tối #292929, border-radius 12px, chữ prompt monospace 13px màu trắng, CTA 'Try Convex with Chef' ở góc dưới bên phải, trong đó 'Chef' được đặt bằng một serif/wordmark trang trí màu đỏ tùy chỉnh.

### GitHub Stars Pill
**Vai trò:** Bằng chứng xã hội trong nav

Nền trắng, viền 1px #e5e5e5, border-radius 8px, icon GitHub octocat + '260350 stars' bằng GT America 13px/500 #141414. Số sao được phân cách bằng đường kẻ mảnh.

### Code Token
**Vai trò:** Phần tử inline syntax highlight

Không có nền, monospace 13px, màu sắc lấy từ bảng màu accent: keyword #fc618d, type #948ae3, boolean #7bd88f, constant #f8e67a, string mặc định #e3d0df.

### Pixel Art Illustration
**Vai trò:** Đồ họa trang trí cho tính năng LLM

Lưới pixel khối trên nền kem #f6f6f6, các khối #292929 rải rác tạo thành mê cung/mẫu nhân vật lỏng lẻo, khối accent màu #de5d33 và #69bee2. Border-radius 16px trên container.

## Do's and Don'ts

### Nên làm
- Sử dụng GT America weight 400/500 cho body và 700 cho nhấn mạnh; không bao giờ dùng thêm sans-serif thứ hai
- Chỉ áp dụng letter-spacing -0.05em ở display 56px, -0.025em ở heading 40-36px, và 0.025-0.05em trên label uppercase 10-12px
- Sử dụng border-radius 8px cho button và 12px cho card và nav pill; dành 4px cho tag và chip nhỏ
- Giữ code block tối trên nền #141414 với monospace 13px và màu syntax từ bảng màu accent
- Sử dụng cream canvas #f6f6f6 làm nền trang mặc định; chỉ chuyển sang section tối cho các khoảnh khắc sản phẩm hoặc gradient hero rõ ràng
- Sử dụng 12px cho element gap trong card, 24px cho card internal padding, và 64px giữa các section chính
- Ưu tiên viền mảnh #e5e5e5 hơn đổ bóng để phân cách card trên bề mặt sáng

### Không nên làm
- Không thêm drop shadow cho card hoặc button — sự phân cách chỉ đến từ màu sắc và viền 1px
- Không sử dụng màu syntax highlight (hồng, tím, xanh lá, vàng) bên ngoài code block — chúng mang tính ngữ nghĩa, không phải trang trí
- Không sử dụng #69bee2 (signal blue) làm filled CTA trên section sáng/kem — chỉ dùng cho hành động trên section tối
- Không thêm gradient vào UI element nào khác ngoài dusk gradient nền section tối đã được ghi chép
- Không sử dụng đen thuần #000000 cho văn bản lớn hoặc nền; #141414 là tông màu tối nhất được phép
- Không sử dụng border-radius trên 16px — hệ thống vuông vức và nhỏ gọn, không mềm mại và bo tròn
- Không đặt body text dưới 14px hoặc trên 18px — GT America được tinh chỉnh cho thang đo hẹp ở tầm trung

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#f6f6f6` | Nền kem cấp trang, nền section mặc định |
| 1 | Card | `#ffffff` | Bề mặt card nâng cao, khung code editor, panel dashboard |
| 2 | Tinted Panel | `#f7f1ff` | Panel tính năng pha lilac nhẹ, nền icon, vùng callout tinh tế |
| 3 | Dark Code | `#141414` | Bên trong code editor, bề mặt xem trước dashboard chế độ tối |
| 4 | Dark Section | `#292929` | Section marketing tối full-bleed với lớp phủ gradient |

## Elevation

Convex cố tình tránh drop shadow. Mọi sự phân cách đều đạt được thông qua độ tương phản màu bề mặt (kem → trắng → tối) và viền mảnh 1px màu #e5e5e5 hoặc #38383a. Cách xử lý phẳng này củng cố thẩm mỹ sổ tay kỹ thuật và giữ sự tập trung vào ảnh chụp màn hình sản phẩm, vốn mang chiều sâu thị giác riêng thông qua màu syntax code.

## Imagery

Convex sử dụng ảnh chụp màn hình UI sản phẩm tối (code editor, dashboard) làm nội dung hình ảnh chính — đây là các hero element, không phải ảnh stock. Card code editor hiển thị một file TypeScript thực với token màu syntax, và card dashboard hiển thị một ứng dụng todo thực tế. Yếu tố minh họa duy nhất là một lưới khối kiểu pixel-art được sử dụng trong phần LLM, thể hiện bằng thẩm mỹ 8-bit retro với các khối màu than và accent trên nền kem. Không có ảnh chụp lối sống, không có 3D render trừu tượng. Phong cách icon là mono line icon tối giản (copy, GitHub octocat) với stroke weight 1-1.5px. Hình ảnh phục vụ như trình diễn sản phẩm hơn là trang trí — mọi hình ảnh đều là thứ developer thực sự thấy trong sản phẩm.

## Layout

Container căn giữa max-width 1200px với gutter 24px. Hero là chia hai cột: một phần ba bên trái chứa headline + CTA + accordion tính năng, hai phần ba bên phải xếp chồng hai card xem trước sản phẩm tối (code editor ở trên, dashboard ở dưới) với một chút chồng lấn. Các section xen kẽ giữa dải kem-sáng và dải gradient tối full-bleed với vertical padding 64px. Phần LLM sử dụng mẫu hai cột text-trái/visual-phải với pixel art trên nền kem và một card chat tối chồng lên visual. Navigation là thanh trên cùng cố định màu trắng với logo căn trái, link nav căn trái-giữa, và GitHub pill + nút auth căn phải. Mật độ component nhỏ gọn — feature card xếp chặt với khoảng cách 12-16px thay vì khoảng trắng rộng rãi.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text: #141414
- background: #f6f6f6 (cream canvas) / #ffffff (card)
- border: #e5e5e5 (sáng) / #38383a (tối)
- accent: #69bee2 (Signal Blue — chỉ section tối)
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**

1. Xây dựng một hero headline: GT America 56px/700, #141414, letter-spacing -2.8px, line-height 1.0. Subline ở 18px/400 màu #4f4f52. Bên dưới, một nút trắng filled 'Start building' với border-radius 8px, GT America 15px/500, chữ #141414, padding 10px 20px. Bên cạnh, một card lệnh tối #292929 với border-radius 8px, chữ trắng monospace 13px hiển thị '> npm create convex' kèm icon copy màu #a9a9ac.

2. Xây dựng một code editor card: Nền #141414, border-radius 12px, viền 1px #38383a, ba chấm đèn giao thông 8px (#fc618d, #f8e67a, #7bd88f) ở góc trên bên trái. Thanh tab file màu #292929 cao 32px. Thân code monospace 13px với line-height 1.4. Keyword màu #fc618d, type annotation màu #948ae3, boolean màu #7bd88f, constant màu #f8e67a, comment màu #6d6d70.

3. Xây dựng một dashboard preview card: Nền #ffffff, border-radius 12px, viền 1px #e5e5e5, padding 24px. Hàng header hiển thị label domain bằng GT America 12px/500 màu #6d6d70. Các hàng trong bảng xen kẽ #ffffff và #f6f6f6 với viền dưới 1px #e5e5e5. Nút 'Add' căn phải: nền #69bee2, chữ #141414, GT America 14px/500, border-radius 8px, padding 8px 16px.

Không quan sát thấy màu hành động chính riêng biệt; sử dụng các cách xử lý button neutral đã trích xuất thay vì tự tạo màu CTA filled.

5. Xây dựng một feature accordion row: không có nền, nằm trên cream canvas. Heading GT America 18px/700 màu #141414 với icon chevron ở cuối màu #4f4f52. Khi mở rộng, body text 15px/400 màu #4f4f52 với khoảng cách 12px đến heading. Đường kẻ dưới 1px #e5e5e5 giữa các hàng.

## Syntax Highlight System

Bên trong code block, Convex sử dụng bảng màu syntax bốn màu có chủ đích giúp TypeScript dễ đọc lướt qua. Đây là hệ thống ngữ nghĩa, không phải trang trí: keyword (export, import, const) màu hot pink #fc618d, type annotation và interface màu iris violet #948ae3, boolean và giá trị true/false màu mint green #7bd88f, constant hoặc string literal màu canary yellow #f8e67a. String interpolation rơi vào màu oải hương không bão hòa #e3d0df. Văn bản code mặc định là #d7d7d7 trên nền editor #141414, với comment màu #6d6d70. Không bao giờ tái sử dụng các màu này cho UI button, tag hoặc accent — chúng chỉ dành riêng cho ngữ nghĩa code.

## Similar Brands

- **Linear** — Cùng typography grotesque siêu chặt với negative tracking ở kích cỡ lớn, sử dụng tối thiểu đổ bóng, ảnh chụp màn hình UI sản phẩm tối làm nội dung hero, và bảng màu đơn sắc điềm tĩnh được nhấn bởi một màu accent
- **Vercel** — DNA công cụ developer giống hệt: cream/off-white canvas, code block monospace ở vị trí trung tâm, geometric sans tương tự GT America, và card xem trước sản phẩm làm công việc mà nhiếp ảnh làm trên site tiêu dùng
- **Supabase** — Cùng cách xử lý hero code block tối kết hợp với bề mặt nội dung sáng, border-radius vuông vức 8-12px xuyên suốt, và mật độ nhỏ gọn đọc giống tài liệu hơn là marketing
- **Railway** — Bề mặt trang ấm-trung tính tương tự, ngôn ngữ hình ảnh terminal/code-first, và bảng màu accent hạn chế chỉ xuất hiện trên element tương tác và syntax token
- **Render** — Cùng thẩm mỹ kỹ thuật editorial — kiểu chữ grotesque chặt, nền kem, xem trước sản phẩm tối, và chrome trang trí tối thiểu để ảnh chụp màn hình sản phẩm có không gian thở

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-black: #141414;
  --color-paper-white: #ffffff;
  --color-cream-surface: #f6f6f6;
  --color-lilac-wash: #f7f1ff;
  --color-charcoal-surface: #292929;
  --color-graphite-border: #38383a;
  --color-slate-text: #4f4f52;
  --color-fog-text: #6d6d70;
  --color-ash-text: #a9a9ac;
  --color-mist-divider: #e5e5e5;
  --color-signal-blue: #69bee2;
  --color-plum-button: #8d2676;
  --color-ember-orange: #de5d33;
  --color-hot-pink: #fc618d;
  --color-iris-violet: #948ae3;
  --color-mint-green: #7bd88f;
  --color-canary-yellow: #f8e67a;
  --color-dusk-gradient: #221f1d;
  --gradient-dusk-gradient: linear-gradient(135deg, rgb(34, 31, 29), rgb(49, 43, 43) 28%, rgba(41, 57, 105, 0.9) 50%);

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

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.25;
  --tracking-caption: 0.5px;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.38;
  --text-heading: 36px;
  --leading-heading: 1.25;
  --tracking-heading: -0.9px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.25;
  --tracking-heading-lg: -1px;
  --text-display: 56px;
  --leading-display: 1;
  --tracking-display: -2.8px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-128: 128px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* Named Radii */
  --radius-nav: 12px;
  --radius-tags: 4px;
  --radius-cards: 12px;
  --radius-inputs: 4px;
  --radius-buttons: 8px;

  /* Surfaces */
  --surface-canvas: #f6f6f6;
  --surface-card: #ffffff;
  --surface-tinted-panel: #f7f1ff;
  --surface-dark-code: #141414;
  --surface-dark-section: #292929;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-black: #141414;
  --color-paper-white: #ffffff;
  --color-cream-surface: #f6f6f6;
  --color-lilac-wash: #f7f1ff;
  --color-charcoal-surface: #292929;
  --color-graphite-border: #38383a;
  --color-slate-text: #4f4f52;
  --color-fog-text: #6d6d70;
  --color-ash-text: #a9a9ac;
  --color-mist-divider: #e5e5e5;
  --color-signal-blue: #69bee2;
  --color-plum-button: #8d2676;
  --color-ember-orange: #de5d33;
  --color-hot-pink: #fc618d;
  --color-iris-violet: #948ae3;
  --color-mint-green: #7bd88f;
  --color-canary-yellow: #f8e67a;
  --color-dusk-gradient: #221f1d;

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

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.25;
  --tracking-caption: 0.5px;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.38;
  --text-heading: 36px;
  --leading-heading: 1.25;
  --tracking-heading: -0.9px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.25;
  --tracking-heading-lg: -1px;
  --text-display: 56px;
  --leading-display: 1;
  --tracking-display: -2.8px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
}
```