# Warp

> Warp — Style Reference

## Prompt Content

```
# Warp — Style Reference
> Deep-space command shell — một buồng lái obsidian mờ đục, nơi mỗi pixel đều có giá trị và màu sắc là một tín hiệu hiếm hoi, mang ý nghĩa.

**Theme:** dark

Warp vận hành trong một vũ trụ than chì sâu thẳm: canvas gần như đen (#121212) được xếp lớp với các bề mặt sáng hơn một cách tinh tế (#1e1e1d, #353534) và không có shadow — độ cao được truyền tải hoàn toàn qua các bước màu nền. Typeface chính, Matter, đảm nhận toàn bộ trọng trách biểu cảm: negative tracking dày đặc ở kích thước display (-0.04em ở 56-64px) thì thầm sự tự tin thay vì la hét, và các tính năng OpenType tùy chỉnh (cv03, cv04, cv09, cv11) mang đến cảm giác được thiết kế chính xác đến từng chi tiết mà các sans-serif thông thường không có. Màu sắc gần như vắng bóng hoàn toàn — ngoại lệ màu sắc duy nhất, một màu xanh xô thơm dịu (#799c92), chỉ xuất hiện làm điểm nhấn trên các tiêu đề phụ của section, khiến nó trông giống như màu prompt của terminal vô tình lọt vào UI. Ảnh chụp màn hình sản phẩm terminal là hero; giao diện tự tái hiện chính nó như một tài liệu tiếp thị, xóa nhòa ranh giới giữa sản phẩm và trang web.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Void Canvas | `#121212` | `--color-void-canvas` | Nền trang chính, bề mặt chiếm ưu thế bên dưới mọi nội dung |
| Obsidian Deep | `#090909` | `--color-obsidian-deep` | Lớp sâu nhất — nav overlays, nền announcement bar |
| Charcoal Surface | `#1e1e1d` | `--color-charcoal-surface` | Nền footer, bề mặt hơi nâng cao hơn canvas |
| Iron Surface | `#353534` | `--color-iron-surface` | Bề mặt card được nâng lên, nền pill button, interactive containers |
| Graphite Lift | `#2f2f2f` | `--color-graphite-lift` | Nav borders, nền dark filled button — interactive fill chính |
| Slate Hover | `#40403f` | `--color-slate-hover` | Bề mặt trạng thái hover, overlays hơi nâng cao |
| Ash Text | `#868684` | `--color-ash-text` | Body text phụ, link text mờ, hairline borders |
| Fog Text | `#afaeac` | `--color-fog-text` | Body text cấp ba, label bị vô hiệu hóa hoặc giảm nhấn mạnh |
| Smoke Text | `#e3e2e0` | `--color-smoke-text` | Announcement bar text, code snippet text, subheading ở mức giảm nhấn mạnh |
| Warm White | `#faf9f6` | `--color-warm-white` | Text có độ tương phản cao nhất trên nền tối, nền light filled button |
| Pure White | `#ffffff` | `--color-pure-white` | Nav background khi cuộn, download button fill, icon fills |
| Terminal Sage | `#799c92` | `--color-terminal-sage` | Gray outline accent cho tags, dividers và các cạnh UI được focus. |

## Tokens — Typography

### 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:** 12px
- **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ả

### Matter — Giọng nói chính của hệ thống — tất cả headings, body copy, buttons và nav labels. Các tính năng OpenType tùy chỉnh mang đến cho ký tự những góc cắt chính xác mà các lựa chọn thay thế thông thường không có. Negative tracking thay đổi từ -0.04em ở 64px xuống -0.01em ở 20px, siết chặt display headline thành một khối nguyên khối. Weight 400 xử lý mọi thứ từ caption đến headline lớn — 600 được sử dụng một cách tiết kiệm để nhấn mạnh. · `--font-matter`
- **Thay thế:** General Sans, Manrope hoặc DM Sans
- **Weights:** 400, 600
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px, 56px, 64px
- **Line height:** 0.90–1.56 (dày ở display: 0.90–1.00; thoải mái ở body: 1.40–1.56)
- **Letter spacing:** -0.04em ở 64px, -0.03em ở 56px, -0.02em ở 32-48px, -0.01em ở 20-24px, 0.01em ở 12-14px (tracking hơi mở cho label nhỏ)
- **OpenType features:** `"blwf", "cv03", "cv04", "cv09", "cv11"`
- **Vai trò:** Giọng nói chính của hệ thống — tất cả headings, body copy, buttons và nav labels. Các tính năng OpenType tùy chỉnh mang đến cho ký tự những góc cắt chính xác mà các lựa chọn thay thế thông thường không có. Negative tracking thay đổi từ -0.04em ở 64px xuống -0.01em ở 20px, siết chặt display headline thành một khối nguyên khối. Weight 400 xử lý mọi thứ từ caption đến headline lớn — 600 được sử dụng một cách tiết kiệm để nhấn mạnh.

### Inter — Secondary UI text — xuất hiện trong body descriptions và headings bên trong ảnh chụp màn hình UI sản phẩm. Mang các tính năng OpenType giống như Matter để duy trì sự hài hòa thị giác. Được sử dụng khi Matter không có sẵn trong ngữ cảnh nhúng. · `--font-inter`
- **Thay thế:** Inter (đã là Google font)
- **Weights:** 400, 500
- **Sizes:** 14px, 16px
- **Line height:** 1.00–1.38
- **Letter spacing:** -0.02em ở 16px, -0.014em ở 16px, -0.012em ở 14px
- **OpenType features:** `"blwf", "cv03", "cv04", "cv09", "cv11"`
- **Vai trò:** Secondary UI text — xuất hiện trong body descriptions và headings bên trong ảnh chụp màn hình UI sản phẩm. Mang các tính năng OpenType giống như Matter để duy trì sự hài hòa thị giác. Được sử dụng khi Matter không có sẵn trong ngữ cảnh nhúng.

### Geist Mono — Terminal commands và code snippets — 'brew install --cask warp' được hiển thị trong hero. Kết xuất monospaced củng cố bản sắc terminal của sản phẩm. · `--font-geist-mono`
- **Thay thế:** JetBrains Mono, Fira Code
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.00
- **Vai trò:** Terminal commands và code snippets — 'brew install --cask warp' được hiển thị trong hero. Kết xuất monospaced củng cố bản sắc terminal của sản phẩm.

### Matter Mono Regular — Inline code và terminal output text trong ngữ cảnh văn xuôi — khác biệt với Geist Mono nhờ tinh chỉnh quang học tùy chỉnh phù hợp với họ Matter. · `--font-matter-mono-regular`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.00
- **Letter spacing:** -0.012em
- **Vai trò:** Inline code và terminal output text trong ngữ cảnh văn xuôi — khác biệt với Geist Mono nhờ tinh chỉnh quang học tùy chỉnh phù hợp với họ Matter.

### Matter Regular — Matter Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-matter-regular`
- **Weights:** 400, 600
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px, 56px, 64px
- **Line height:** 0.9, 1, 1.1, 1.12, 1.15, 1.19, 1.2, 1.35, 1.38, 1.4, 1.5, 1.56
- **Letter spacing:** -0.04, -0.03, -0.02, -0.01, 0.01, 0.1, 0.2
- **OpenType features:** `"blwf", "cv03", "cv04", "cv09", "cv11"`
- **Vai trò:** Matter Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Matter Medium — Matter Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-matter-medium`
- **Weights:** 400, 500
- **Sizes:** 16px, 20px, 22px
- **Line height:** 1, 1.14, 1.2
- **Letter spacing:** 0.001
- **Vai trò:** Matter Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### DM Mono — DM Mono — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-dm-mono`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.4
- **Vai trò:** DM Mono — đượ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 |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.2 | 1.2px | `--text-caption` |
| body-sm | 14px | 1.38 | -0.2px | `--text-body-sm` |
| body | 16px | 1.5 | -0.19px | `--text-body` |
| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |
| heading-sm | 24px | 1.35 | -0.48px | `--text-heading-sm` |
| heading | 32px | 1.2 | -0.64px | `--text-heading` |
| heading-lg | 48px | 1.1 | -0.96px | `--text-heading-lg` |
| display | 64px | 0.9 | -2.56px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 18 | 18px | `--spacing-18` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 26 | 26px | `--spacing-26` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 16px |
| badges | 200px |
| images | 10px |
| inputs | 4px |
| buttons | 4px |
| largeCards | 20px |
| pillButtons | 50px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| md | `rgba(18, 18, 18, 0.2) 0px 0px 16px 0px` | `--shadow-md` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 16px
- **Element gap:** 10px

## Components

### Primary Download Button
**Vai trò:** CTA có mức độ ưu tiên cao nhất — hành động tải xuống

Nền #ffffff, text #121212 (hoặc gần đen), border-radius 6px, padding 12px 20px. Matter weight 600 ở 16px. Xuất hiện trong nav và hero. Màu trắng trên nền gần đen khiến đây là interactive element có độ tương phản cao duy nhất có thể nhìn thấy ngay lập tức.

### Dark Filled Button
**Vai trò:** Các hành động phụ trong bảng UI tối

Nền #2f2f2f, text #faf9f6, không có border nhìn thấy được, border-radius 4px, padding 8px 12px. Matter weight 400 ở 14px. Được sử dụng bên trong terminal product UI cho các hành động phụ. Subtle box-shadow: rgba(18,18,18,0.2) 0 0 16px.

### Ghost Surface Button
**Vai trò:** Các hành động cấp ba trên nền tối

Nền rgba(255,255,255,0.04), fill gần như vô hình, border-radius 4px, padding 8px 12px. Text #faf9f6. Được sử dụng cho các hành động có mức độ nhấn mạnh thấp cần vùng click target mà không có trọng lượng thị giác.

### Pill Icon Button
**Vai trò:** Điều khiển chuyển đổi hoặc chế độ

Nền #353534, text/icon #afaeac, border-radius 50px, padding 10px. Các nút tròn hoặc tỷ lệ khung hình hẹp cho các điều khiển UI chrome như view toggles. Icon đơn sắc ở độ sáng giảm.

### Code Snippet Block
**Vai trò:** Hiển thị lệnh inline trong hero

Nền #353534, text #e3e2e0, font Geist Mono 400 16px, border-radius 10px, padding 12px 16px. Hiển thị 'brew install --cask warp' dưới dạng lệnh có thể sao chép. Icon button cho hành động copy ở cạnh cuối.

### Primary Feature Card
**Vai trò:** Card nội dung chính trong suốt các feature sections

Nền #121212, border-radius 16px, không border, không shadow, padding 0 (nội dung bên trong tự xử lý padding riêng). Được sử dụng trong 12+ trường hợp. Nội dung tràn ra các cạnh card — hình ảnh được giới hạn bởi radius, không phải inset padding.

### Elevated Content Card
**Vai trò:** Container nâng cao phụ trong một section

Nền #353534, border-radius 20px, không shadow, không border. Cao hơn canvas một bậc trong ngăn xếp bề mặt — được sử dụng cho dropdown/panel containers trong ảnh chụp màn hình sản phẩm.

### Padded Inner Card
**Vai trò:** Sub-container nội dung văn bản

Nền #1e1e1d, border-radius 10px, padding 16px tất cả các cạnh. Được sử dụng cho các khối văn bản có cấu trúc như panel 'Problem Statement' trong giao diện ảnh chụp màn hình sản phẩm.

### Announcement Bar
**Vai trò:** Thanh thông báo đầu trang

Nền #090909 (gần như đen tuyền), text #e3e2e0 ở 14px Matter weight 400, link ở #faf9f6 có gạch chân. Full-width, chiều cao 40px. Một dòng văn bản và link duy nhất tạo ra footprint tối thiểu.

### Navigation Bar
**Vai trò:** Điều hướng trang chính

Nền #ffffff (khi cuộn) hoặc trong suốt, chiều cao ~48px. Logo bên trái, nav links ở giữa bằng Matter Medium 16px màu #868684, CTA buttons bên phải. Nav links sử dụng 'Book a demo' dưới dạng ghost text và 'Download for Mac' dưới dạng primary white-fill. backdrop-filter: blur(20px) khi cuộn.

### Section Eyebrow Label
**Vai trò:** Đánh dấu danh mục feature section

Text #799c92, Matter weight 400, 14-16px, letter-spacing 0.1em (tracking rộng). Được đặt phía trên section headings. Màu sắc duy nhất trong hệ thống — hoạt động giống như con trỏ terminal prompt chảy vào bản sao.

### Trust Logo Bar
**Vai trò:** Hàng logo bằng chứng xã hội

Nền #121212 (canvas), logo ở #868684 đến #afaeac (desaturated, fill độ tương phản thấp). Full-width horizontal flex, logo căn giữa, không có borders hoặc dividers. Density: nhỏ gọn, khoảng cách 12-16px giữa các logo.

## Do's and Don'ts

### Do
- Sử dụng #121212 làm canvas trang mặc định — mọi section thiếu override cụ thể sẽ kế thừa nền này.
- Chỉ áp dụng Terminal Sage (#799c92) cho eyebrow/subheading text phía trên tiêu đề section — không bao giờ dùng làm màu button, nền hoặc trang trí.
- Đặt display headings (48px+) ở Matter weight 400 với letter-spacing -0.03em đến -0.04em — negative tracking ở các kích thước này là bắt buộc, không phải tùy chọn.
- Nâng cấp bề mặt theo từng bước chỉ bằng màu nền: #121212 → #1e1e1d → #353534. Không bao giờ sử dụng borders hoặc shadows để phân cách các section đồng phẳng.
- Sử dụng border-radius 16px cho tất cả feature cards, 4px cho tất cả rectangular buttons và 50px cho pill/circular controls — ba radius này bao phủ 90% UI components.
- Kết xuất tất cả terminal commands và code samples bằng Geist Mono 400 16px trên nền #353534 với text #e3e2e0.
- Giữ nút tải xuống màu trắng (#ffffff) chỉ dành riêng cho primary navigation CTAs — đây là element có độ tương phản tối đa duy nhất và sẽ bị loãng nếu tái sử dụng.

### Don't
- Không bao giờ giới thiệu thêm màu sắc nào ngoài Terminal Sage (#799c92) — hệ thống có chủ đích gần như đơn sắc và một hue thứ hai phá vỡ sự kiềm chế lấy cảm hứng từ terminal.
- Không sử dụng box shadows hoặc drop shadows trên cards hoặc sections — chiều sâu được truyền tải qua các bước màu bề mặt, không phải hiệu ứng độ cao.
- Tránh font weights trên 600 cho Matter — hệ thống type sống trong phạm vi 400-600; weights nặng hơn tạo ra nhiễu thị giác trên nền tối.
- Không sử dụng border-radius trên 20px cho cards và không bao giờ áp dụng góc tròn (50px+) cho rectangular content containers — pill radius được dành riêng cho icon-button controls.
- Không bao giờ đặt nền sáng (#faf9f6 hoặc #ffffff) phía sau toàn bộ sections như một lựa chọn thiết kế — nền sáng chỉ xuất hiện trên nav bar khi cuộn và primary download button fill.
- Không thêm decorative gradients, glows hoặc colored backgrounds vào content sections — ảnh aurora trong hero là màu sắc không khí duy nhất; UI components vẫn giữ achromatic.
- Tránh đặt body hoặc paragraph text trên 18px — Matter ở 16px là kích thước đọc thoải mái; body text lớn hơn phá vỡ mật độ dày đặc, hướng đến thông tin của bố cục.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Deep Base | `#090909` | Sàn tuyệt đối — nav overlay backgrounds, announcement bar |
| 1 | Canvas | `#121212` | Nền trang chính được sử dụng trên hầu hết các section |
| 2 | Elevated Card | `#1e1e1d` | Nền footer, vùng nội dung hơi nâng cao |
| 3 | Raised Surface | `#353534` | Card backgrounds, pill button fills, dropdown containers |
| 4 | Interactive Surface | `#40403f` | Trạng thái hover, focused overlay containers |

## Elevation

- **Button (dark filled):** `rgba(18, 18, 18, 0.2) 0px 0px 16px 0px`

## Imagery

Warp sử dụng sự pha trộn chặt chẽ giữa ảnh chụp màn hình sản phẩm và nhiếp ảnh không khí. Hero có nền tối full-bleed với nhiếp ảnh phong cách cực quang (xanh đậm, xanh lục, đỏ trên nền trời đen) đóng vai trò là tâm trạng môi trường — không phải nội dung theo nghĩa đen. Cửa sổ terminal sản phẩm là đối tượng hero thực sự, được kết xuất dưới dạng ảnh chụp màn hình macOS chrome thực tế với traffic-light controls, tab bars và trạng thái UI thực tế. Điều này xóa nhòa ranh giới giữa tiếp thị và sản phẩm: giao diện chính là hero. Bên dưới fold, ảnh chụp màn hình sản phẩm được chứa trong các card bo tròn tối (16px radius) và được hiển thị ở góc nhẹ hoặc dưới dạng panel cắt. Video thumbnails xuất hiện với lớp phủ nút play ở giữa trên mặt nạ gradient tối. Không có ảnh chụp lối sống, không có minh họa trừu tượng — hoặc UI sản phẩm thực tế hoặc phong cảnh tối không khí. Icons tối giản, được outline ở ~16-20px, đơn sắc (#868684), kiểu nét đơn trọng lượng. Logo đối tác tích hợp (Docker, GitHub, Asana, v.v.) được desaturated thành tông màu Ash Text (#868684).

## Layout

Max-width ~1200px căn giữa, nhưng hero sections là full-bleed tối. Màn hình đầu tiên là hero tối full-viewport với ngăn xếp headline căn giữa, một hàng CTA hai nút (white filled + code snippet block cạnh nhau) và ảnh chụp màn hình sản phẩm bên dưới cạnh fold. Các section xen kẽ giữa vùng canvas #121212 full-bleed và vùng footer #1e1e1d có sự khác biệt nhẹ — không có dải sáng/tối xen kẽ. Sắp xếp nội dung chủ yếu là các ngăn xếp căn giữa cho nhóm headline+body+CTA, chuyển sang bố cục hai cột text-left / product-right không đối xứng cho feature sections (tỷ lệ 55/45). Feature detail sections sử dụng danh sách đánh số bên trái với panel ảnh chụp màn hình sản phẩm bên phải. Nhịp điệu dọc của section sử dụng khoảng cách ~80px. Điều hướng là thanh trên cùng cố định cao ~48px với logo, nav links ở giữa và CTA buttons kép bên phải. Một announcement bar full-width nằm phía trên nav, thêm ~32px vào chrome trên cùng.

## Agent Prompt Guide

**Quick Color Reference**
- text (primary): #faf9f6
- text (secondary): #868684
- text (muted): #afaeac
- background (canvas): #121212
- border / divider: #2f2f2f
- accent (eyebrow): #799c92
- primary action: #2f2f2f (filled action)

**Example Component Prompts**

1. **Hero Section**: Full-bleed nền #121212. Headline căn giữa 'The best terminal to build with agents' ở 56px Matter weight 400 màu #faf9f6 letter-spacing -0.03em line-height 1.0. Subtext ở 18px Matter weight 400 #868684. Bên dưới: white button (nền #ffffff, text #121212, radius 6px, padding 12px 20px, 'Download for Mac') cạnh một code block (nền #353534, text #e3e2e0, Geist Mono 16px, radius 10px, padding 12px 16px).

2. **Feature Section Opener**: Eyebrow label 'Prompt to shippable feature' ở #799c92, Matter 400 14px, letter-spacing 0.1em. Bên dưới là heading 'The editor features you need to work with agents' ở 40px Matter weight 400 #faf9f6 letter-spacing -0.02em. Nền section #121212.

3. **Feature Card**: Nền #121212, border-radius 16px, không shadow, không border. Hình ảnh lấp đầy card đến các cạnh (được che bởi radius). Nội dung văn bản bên dưới hình ảnh: heading 16px Matter weight 600 #faf9f6, body 14px Matter weight 400 #868684, element gap 8px.

4. **Pill Control Button**: Nền #353534, icon/text #afaeac, border-radius 50px, padding 10px. Không border. Được sử dụng cho view-toggle hoặc mode-switch controls trong terminal chrome.

5. **Trust Logo Bar**: Nền #121212, full-width flex row, logo được kết xuất ở #868684 fill. Text label phía trên: 'Trusted by over 700,000 developers' ở 14px Matter 400 #868684, căn giữa. Khoảng cách hàng logo 24px, không có borders.

## Motion System

Transitions chạy ở 0.4s cho các thay đổi trạng thái (màu sắc, độ mờ) sử dụng cubic-bezier(0.44, 0, 0.56, 1) — một ease-in-out giảm tốc nhẹ, cảm giác cơ học hơn là nảy. Các microinteractions nhanh (thay đổi màu hover trên links) sử dụng 0.15s ease. Thời lượng 0.4s dài bất thường cho trạng thái hover, mang lại cho các tương tác một chất lượng có chủ đích, nặng nề phù hợp với nhịp điệu của ứng dụng terminal. Chỉ transition màu sắc, độ mờ, text-decoration-color và text-underline-offset — không bao giờ transform hoặc scale khi hover cho các phần tử điều hướng.

## Similar Brands

- **Vercel** — Bảng màu tối achromatic gần như giống hệt với canvas #000000/#111111, white primary CTA và ảnh chụp màn hình sản phẩm làm hero object
- **Linear** — Cùng UI tối độ tương phản cao với display type negative tracking dày đặc và màu nhấn chromatic đơn trên hệ thống đơn sắc
- **Railway** — Chủ đề tối dành cho developer tool với terminal product UI làm hero tiếp thị và sử dụng brand color tối thiểu
- **Fig / Warp competitors** — Thẩm mỹ terminal/devtool: canvas tối, code blocks monospaced được inline vào marketing copy và lưới logo desaturated để làm bằng chứng xã hội
- **Raycast** — Cùng mẫu sử dụng typeface Matter, bề mặt tối với độ sâu surface-color-step (không shadow) và chính sách chromatic accent hạn chế

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void-canvas: #121212;
  --color-obsidian-deep: #090909;
  --color-charcoal-surface: #1e1e1d;
  --color-iron-surface: #353534;
  --color-graphite-lift: #2f2f2f;
  --color-slate-hover: #40403f;
  --color-ash-text: #868684;
  --color-fog-text: #afaeac;
  --color-smoke-text: #e3e2e0;
  --color-warm-white: #faf9f6;
  --color-pure-white: #ffffff;
  --color-terminal-sage: #799c92;

  /* Typography — Font Families */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-matter: 'Matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-matter-mono-regular: 'Matter Mono Regular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-matter-regular: 'Matter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-matter-medium: 'Matter Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 1.2px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.38;
  --tracking-body-sm: -0.2px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.19px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.35;
  --tracking-heading-sm: -0.48px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.64px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.96px;
  --text-display: 64px;
  --leading-display: 0.9;
  --tracking-display: -2.56px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 16.1px;
  --radius-2xl-2: 20px;
  --radius-full: 50px;
  --radius-full-2: 200px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-badges: 200px;
  --radius-images: 10px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;
  --radius-largecards: 20px;
  --radius-pillbuttons: 50px;

  /* Shadows */
  --shadow-md: rgba(18, 18, 18, 0.2) 0px 0px 16px 0px;

  /* Surfaces */
  --surface-deep-base: #090909;
  --surface-canvas: #121212;
  --surface-elevated-card: #1e1e1d;
  --surface-raised-surface: #353534;
  --surface-interactive-surface: #40403f;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void-canvas: #121212;
  --color-obsidian-deep: #090909;
  --color-charcoal-surface: #1e1e1d;
  --color-iron-surface: #353534;
  --color-graphite-lift: #2f2f2f;
  --color-slate-hover: #40403f;
  --color-ash-text: #868684;
  --color-fog-text: #afaeac;
  --color-smoke-text: #e3e2e0;
  --color-warm-white: #faf9f6;
  --color-pure-white: #ffffff;
  --color-terminal-sage: #799c92;

  /* Typography */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-matter: 'Matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-matter-mono-regular: 'Matter Mono Regular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-matter-regular: 'Matter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-matter-medium: 'Matter Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 1.2px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.38;
  --tracking-body-sm: -0.2px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.19px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.35;
  --tracking-heading-sm: -0.48px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.64px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.96px;
  --text-display: 64px;
  --leading-display: 0.9;
  --tracking-display: -2.56px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 16.1px;
  --radius-2xl-2: 20px;
  --radius-full: 50px;
  --radius-full-2: 200px;

  /* Shadows */
  --shadow-md: rgba(18, 18, 18, 0.2) 0px 0px 16px 0px;
}
```