# Warp

> # Warp — Style Reference

## Prompt Content

```
# Warp — Style Reference
> obsidian command center — một IDE cockpit dành cho developer, nơi ánh sáng duy nhất là một tia phosphor tím trên nền đen mờ, và typography mang mọi tín hiệu

**Theme:** dark

Warp nói bằng ngôn ngữ của một terminal cao cấp: một canvas đen obsidian nơi hầu như mọi bề mặt đều không màu, typography đảm nhiệm vai trò chính, và một tia tím nhẹ (#cbb0f7) hoạt động như dấu câu chức năng thay vì trang trí. Hệ thống được xây dựng cho mật độ gọn — tracking chặt, cỡ body nhỏ, và khoảng cách hẹp tạo cảm giác tự tin như một IDE, tôn trọng thời gian và diện tích màn hình của người dùng. Custom typeface Matter với negative tracking cực đoan ở cỡ display (lên đến -0.04em ở 56px) tạo ra những headline có cảm giác được kỹ thuật hóa thay vì thiết kế, trong khi màu trắng ấm (#faf9f6) thay vì trắng tinh khiết giữ cho bề mặt tối không bị lạnh lẽo. Ngôn ngữ button được định nghĩa bằng hình pill (33-50px radius) trên nền trung tính — không có chromatic CTA, vì vậy thứ bậc hành động chỉ đến từ độ tương phản giữa filled và ghost. Các bề mặt nâng lên qua các bước xám tinh tế (#121212 → #1e1e1d → #333333) thay vì đổ bóng kịch tính, tạo ấn tượng về các panel phẳng xếp chồng trong không gian âm.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Obsidian | `#000000` | `--color-obsidian` | Canvas trang chính, nền nav, cửa sổ preview terminal — khoảng không mà mọi bề mặt khác nổi trên đó |
| Graphite | `#121212` | `--color-graphite` | Bề mặt trang thứ cấp, nền body phía sau hero section, footer base |
| Onyx | `#1e1e1d` | `--color-onyx` | Bề mặt card và panel nâng cao — bước đầu tiên từ canvas cho product cards và testimonials |
| Carbon | `#333333` | `--color-carbon` | Bề mặt trung cấp cho nested UI, secondary buttons, và nền tag/badge |
| Slate Deep | `#40403f` | `--color-slate-deep` | Bề mặt trung tính cao nhất — hover states, elevated modals, và nền pill chip |
| Bone | `#faf9f6` | `--color-bone` | Màu text chính và headline — trắng ấm tránh cảm giác lạnh lẽo của trắng tinh trên nền đen |
| Paper | `#ffffff` | `--color-paper` | Bề mặt hỗ trợ sáng cho nền nhẹ và phân cách section. Không dùng làm màu CTA chính |
| Ash Light | `#e3e2e0` | `--color-ash-light` | Text heading thứ cấp, divider mềm, border nhẹ trên elevated cards |
| Ash Mid | `#b4b4b2` | `--color-ash-mid` | Body copy, text thứ cấp, text button trên nền tối, mô tả muted |
| Ash | `#868684` | `--color-ash` | Text cấp ba, caption, nav links ở trạng thái nghỉ, metadata, timestamp |
| Ash Mute | `#a0a0a0` | `--color-ash-mute` | Nhấn sub-heading, text muted trung bình khi Ash quá tối |
| Iron | `#666469` | `--color-iron` | Text ưu tiên thấp nhất, label disabled, nav metadata |
| Ink | `#080808` | `--color-ink` | Gần đen cho border mảnh, text sâu trên nền sáng, separator strokes |
| Phosphor Violet | `#cbb0f7` | `--color-phosphor-violet` | Màu sắc duy nhất trong hệ thống — icon strokes trang trí, code accents, product mark highlights, và border nhẹ. Không bao giờ dùng cho filled CTAs; nó là một lời thì thầm, không phải tiếng hét |

## Tokens — Typography

### 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, 700
- **Sizes:** 10px, 12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 42px, 56px
- **Line height:** 0.96, 1, 1.1, 1.15, 1.19, 1.2, 1.25, 1.33, 1.35, 1.38, 1.4
- **Letter spacing:** -0.04, -0.027, -0.02, -0.012, -0.011, -0.01, 0.01, 0.02, 0.1, 0.2
- **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 — Primary display and UI typeface — một geometric sans tùy chỉnh với tỷ lệ được kỹ thuật hóa. Weight 400 đảm nhiệm body và nav, 600–700 nâng lên subheadings và emphasis. Negative tracking cực đoan ở cỡ lớn (-0.04em ở 56px) siết chặt headline thành một khối thị giác duy nhất. Thay thế miễn phí: Inter hoặc General Sans · `--font-matter`
- **Thay thế:** Inter
- **Weights:** 400, 600, 700
- **Sizes:** 10, 12, 13, 14, 16, 18, 20, 24, 32, 40, 42, 56
- **Line height:** 0.96–1.40 tùy theo kích thước
- **Letter spacing:** Display: -2.24px ở 56px (-0.04em), -1.13px ở 42px (-0.027em), -0.8px ở 40px (-0.02em). Headings: -0.29px ở 24px (-0.012em), -0.22px ở 20px (-0.011em). Body: -0.18px ở 18px (-0.01em), siết gần về 0 ở 14-16px. Labels: 0.2px ở 10px (+0.02em) và 1px ở 10px (+0.1em) cho eyebrow/uppercase tags
- **Vai trò:** Primary display and UI typeface — một geometric sans tùy chỉnh với tỷ lệ được kỹ thuật hóa. Weight 400 đảm nhiệm body và nav, 600–700 nâng lên subheadings và emphasis. Negative tracking cực đoan ở cỡ lớn (-0.04em ở 56px) siết chặt headline thành một khối thị giác duy nhất. Thay thế miễn phí: Inter hoặc General Sans

### Geist Mono — Monospace cho code snippets, terminal output, và technical micro-copy bên trong buttons và tags. Thay thế miễn phí: JetBrains Mono hoặc IBM Plex Mono · `--font-geist-mono`
- **Weights:** 400
- **Sizes:** 16
- **Line height:** 1.00
- **Vai trò:** Monospace cho code snippets, terminal output, và technical micro-copy bên trong buttons và tags. Thay thế miễn phí: JetBrains Mono hoặc IBM Plex Mono

### Matter Mono — Companion monospace cho inline code và signature terminal callouts — kết nối trực quan với primary type family. Thay thế miễn phí: Berkeley Mono hoặc IBM Plex Mono · `--font-matter-mono`
- **Weights:** 400
- **Sizes:** 16
- **Line height:** 1.00
- **Letter spacing:** -0.0120em
- **Vai trò:** Companion monospace cho inline code và signature terminal callouts — kết nối trực quan với primary type family. Thay thế miễn phí: Berkeley Mono hoặc IBM Plex Mono

### Inter — Secondary body fallback cho long-form content blocks, testimonial quotes, và support copy khi Matter không load được. Tracking chặt (-0.012 đến -0.014em) khớp với cảm giác geometric của Matter · `--font-inter`
- **Weights:** 400, 500
- **Sizes:** 14, 16
- **Line height:** 1.00–1.38
- **Letter spacing:** -0.0140em, -0.0120em
- **Vai trò:** Secondary body fallback cho long-form content blocks, testimonial quotes, và support copy khi Matter không load được. Tracking chặt (-0.012 đến -0.014em) khớp với cảm giác geometric của Matter

### system-ui sans-serif — Ultra-small UI labels (icon captions, footer micro-text) khi system rendering được chấp nhận và load web font là lãng phí · `--font-system-ui-sans-serif`
- **Weights:** 400
- **Sizes:** 12
- **Line height:** 1.20
- **Vai trò:** Ultra-small UI labels (icon captions, footer micro-text) khi system rendering được chấp nhận và load web font là lãng phí

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| eyebrow | 10px | 1.2 | 2px | `--text-eyebrow` |
| caption | 12px | 1.2 | 0.12px | `--text-caption` |
| body | 14px | 1.25 | -0.14px | `--text-body` |
| body-lg | 16px | 1.33 | -0.18px | `--text-body-lg` |
| subheading | 18px | 1.2 | -0.18px | `--text-subheading` |
| heading-sm | 20px | 1.2 | -0.22px | `--text-heading-sm` |
| heading | 24px | 1.19 | -0.29px | `--text-heading` |
| heading-lg | 32px | 1.15 | -0.64px | `--text-heading-lg` |
| display | 42px | 1 | -1.13px | `--text-display` |
| display-lg | 56px | 0.96 | -2.24px | `--text-display-lg` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 11 | 11px | `--spacing-11` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 25 | 25px | `--spacing-25` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 50px |
| cards | 20px |
| icons | 4px |
| links | 7px |
| inputs | 7px |
| buttons | 33px |

### Layout

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

## Components

### Top Navigation Bar
**Vai trò:** Global site header

Nền Obsidian (#000000), cao 60-72px, flex row. Bên trái: Warp wordmark logo (cao 12px, màu trắng). Giữa: nav links (Matter 400, 14px, #868684) với khoảng cách 24px. Bên phải: ghost link 'Contact sales' và một filled white pill button 'Download for Mac'. Không có border-bottom, không có shadow — thanh bar nổi trên khoảng không.

### Announcement Banner
**Vai trò:** Dải quảng cáo đầu trang

Full-width, cao 36-40px, text căn giữa 'Introducing Oz: the orchestration platform for cloud agents.' ở Matter 400 cỡ 12px, màu #b4b4b2, với inline link 'Learn more.' màu Phosphor Violet (#cbb0f7) có gạch chân. Nền là obsidian thuần với border-bottom 1px màu #1e1e1d.

### Filled Pill Button (Primary)
**Vai trò:** Hành động chính — download, sign up

Nền #ffffff, text #080808, Matter 600 ở 14px, border-radius 33px (gần full pill), padding ngang 20px 22px, không border. Hover: nền #e3e2e0, transition 150ms ease. Căn giữa theo chiều dọc với inner highlight 1px nhẹ để giữ cạnh sắc nét trên canvas tối.

### Ghost Button (Secondary)
**Vai trò:** Hành động phụ — learn more, contact sales

Nền trong suốt, border 1px màu #333333, text #b4b4b2, Matter 400 ở 14px, border-radius 33px, padding 9px 20px. Hover: border #b4b4b2, text #faf9f6. Được dùng cho mọi hành động không phải primary trên bề mặt tối.

### Text Link Button
**Vai trò:** Hành động cấp ba dạng inline

Không nền, không border, text ở Matter 400 cỡ 14px, màu #868684, radius 4px trên gạch chân. Hover chuyển màu thành #faf9f6 và hiện gạch chân 1px. Nằm inline với descriptive product copy.

### Product Showcase Card
**Vai trò:** Preview sản phẩm song song (Warp Terminal / Oz)

Hình chữ nhật bo tròn radius 20px, border 1px màu #1e1e1d, nền #000000 với gradient nội bộ nhẹ (0% đến 8% violet tint ở góc trên bên trái). Padding 0px — product screenshot lấp đầy toàn bộ card. Khối caption phía trên card: icon (16px, trắng), tên sản phẩm đậm (Matter 700, 18px, #faf9f6), mô tả (Matter 400, 14px, #868684), và một hàng Learn More + secondary button.

### Testimonial Card
**Vai trò:** Trích dẫn khách hàng với branded banner

Xếp dọc: trên cùng là ảnh branded banner cao 200-240px (logo công ty trên màu/gradient đặc trưng của thương hiệu, ví dụ Microsoft dark gray, IBM blue, OpenAI pink-violet). Bên dưới ảnh, một panel đen với padding 24px chứa attribution (Matter 600, 13px, #b4b4b2) và pull quote (Matter 400, 16px, #faf9f6, line-height 1.38, letter-spacing -0.01em). Bản thân card có radius 7px và border 1px #1e1e1d.

### Trusted-By Logo Grid
**Vai trò:** Bằng chứng xã hội — logo doanh nghiệp khách hàng

Grid responsive các logo công ty, 6 cột trên desktop. Mỗi ô rộng 120-160px với logo hiển thị dưới dạng đơn sắc trắng (#faf9f6) ở độ mờ 40-50% để tạo cảm giác nhẹ nhàng. Chiều cao ô 80px, gap 40px ngang / 32px dọc. Không border, không nền — logo nổi trực tiếp trên obsidian.

### Featured Partner Card
**Vai trò:** Liên kết case-study hoặc livestream nổi bật

Card bo tròn radius 20px, bề mặt tối #121212 với border 1px #1e1e1d. Chứa logo đối tác màu trắng (Matter 700, 32px), một category tag hình pill nhỏ bên dưới (ví dụ 'Livestream', 'Case Study') với radius 50px, nền trong suốt, border 1px #333333, Matter 400 ở 10px, letter-spacing 0.1em, uppercase, #b4b4b2.

### Section Heading (Centered)
**Vai trò:** Tiêu đề section giữa trang

Căn giữa theo chiều ngang, Matter 400 (không đậm — hệ thống tin tưởng kích thước để mang thứ bậc), 32-42px, màu #faf9f6, letter-spacing -0.02em đến -0.027em, line-height 1.10-1.15. Không có eyebrow text phía trên trừ khi giới thiệu sản phẩm mới. Top margin rộng (80px) để tạo khoảng thở giữa các section.

### Pill Tag / Category Chip
**Vai trò:** Badge metadata cho phân loại nội dung

Nền trong suốt, border 1px #333333, text ở Matter 400 cỡ 10px, uppercase, letter-spacing 0.1em, màu #b4b4b2. Radius 50px (full pill). Padding ngang 10px 12px, padding dọc 4px. Được dùng cho case study categories, feature tags, và filter pills.

### Terminal Preview Window
**Vai trò:** Nhúng ảnh chụp màn hình code/terminal

Full-bleed bên trong product cards. Nền đen, text monospace (Geist Mono 16px). Hiển thị terminal giả với thanh tiêu đề (3 chấm đèn giao thông ở góc trên bên trái màu #333333, tên file màu #868684), và các dòng lệnh với Phosphor Violet (#cbb0f7) được dùng tiết kiệm cho path/command highlights. Output text màu #b4b4b2.

### Icon Glyph (Product Mark)
**Vai trò:** Icon thương hiệu nhỏ bên cạnh tên sản phẩm

Hình vuông 16-20px, radius 4px, stroke/fill trắng hoặc Phosphor Violet. Warp Terminal dùng glyph dạng lưới 2x2; Oz dùng mark hình khối/hộp. Luôn đi kèm với product label đậm ở 18px Matter 700.

### Footer Base
**Vai trò:** Footer trang

Nền Obsidian (#000000), top padding 64px, bottom padding 40px. Chứa secondary nav links ở Matter 400, 12px, #666469, sắp xếp trong 4-5 cột. Hàng dưới cùng: copyright text ở 11px, #666469, với social icons (trắng ở độ mờ 60%) căn phải.

## Do's and Don'ts

### Do
- Dùng #faf9f6 (Bone) cho mọi primary text trên bề mặt tối — không bao giờ dùng #ffffff, tông ấm ngăn cảm giác lạnh lẽo
- Áp dụng negative letter-spacing mạnh ở cỡ display: -2.24px ở 56px, -1.13px ở 42px, -0.29px ở 24px
- Dùng radius 33px cho mọi action buttons và 50px cho category tags — hình pill là chữ ký button của hệ thống
- Sử dụng Matter 400 (không phải 700) cho headline lên đến 42px; tin tưởng kích thước và tracking để mang thứ bậc
- Xếp lớp bề mặt bằng #121212 → #1e1e1d → #333333 → #40403f — không bao giờ dùng drop shadows để tạo độ cao
- Dành riêng #cbb0f7 (Phosphor Violet) cho icon strokes, code highlights, và link accents — không bao giờ dùng cho filled buttons hoặc nền lớn
- Giữ khoảng cách gọn: 10px cho inline elements, 8-12px cho component padding, 64px cho section separation

### Don't
- Đừng thêm điểm nhấn màu thứ hai — việc không có màu sắc là một phần của hệ thống, không phải sơ suất
- Đừng dùng drop shadows hoặc hiệu ứng blur để phân cách card; hệ thống dùng flat 1px borders và surface stepping thay thế
- Đừng dùng weight bold (700) cho body copy hoặc UI labels — Matter 400 và 600 là hai weight duy nhất trong giao diện
- Đừng dùng trắng tinh (#ffffff) làm màu text trên bề mặt tối — #faf9f6 ấm là lựa chọn có chủ đích
- Đừng dùng radius 9999px cho buttons — hệ thống dùng 33px trung thực (hơi ít hơn full pill) trên filled actions
- Đừng thêm gradient vào nền, buttons, hoặc cards — xử lý bề mặt hoàn toàn phẳng
- Đừng dùng bất kỳ font nào khác ngoài Matter cho headline và UI; Inter chỉ là fallback, không bao giờ là lựa chọn phong cách

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Obsidian | `#000000` | Canvas trang, nền nav, cửa sổ preview terminal, full-bleed sections |
| 1 | Graphite | `#121212` | Nền section, body panels, footer base — bước nâng đầu tiên từ khoảng không |
| 2 | Onyx | `#1e1e1d` | Bề mặt card và panel — product cards, testimonial containers, content blocks |
| 3 | Carbon | `#333333` | Nested UI — secondary buttons, input borders, tag outlines, code text contrast |
| 4 | Slate Deep | `#40403f` | Độ cao trung tính cao nhất — hover states, modal overlays, elevated popovers |

## Elevation

Hệ thống cố tình tránh drop shadows. Độ cao được thể hiện hoàn toàn qua flat surface stepping: một card trên page canvas sáng hơn parent một hoặc hai bước hex, được phân cách bằng border mảnh 1px màu #1e1e1d. Điều này giữ cho giao diện có cảm giác như một IDE cao cấp — phẳng, nhanh, terminal-native — nơi shadows sẽ cảm thấy lạc lõng trên nền obsidian.

## Imagery

Product photography và UI screenshots chiếm ưu thế hơn lifestyle imagery. Hero có hai product preview cards đặt cạnh nhau hiển thị terminal output thực tế và một bảng dữ liệu — sản phẩm CHÍNH LÀ hero. Customer testimonial cards sử dụng ảnh branded banner full-bleed (IBM blue, Microsoft dark gray, OpenAI pink-violet gradient) làm neo thị giác, với quote text trong một panel tối riêng bên dưới. Không có stock photography, không có illustrations, không có 3D renders. Logo grid là đơn sắc trắng ở độ mờ giảm. Phong cách icon là geometric, tối giản, và đơn sắc trắng với tùy chọn Phosphor Violet accent.

## Layout

Full-bleed dark canvas với nội dung được giới hạn trong cột căn giữa rộng 1200px. Pattern hero: headline căn giữa (56px) phía trên hai product preview cards đặt cạnh nhau với khối icon + label + description + dual-button caption phía trên mỗi card. Bên dưới hero: một hàng logo grid (6 cột) của các đối tác đáng tin cậy, sau đó là testimonial grid 3 cột, sau đó là các full-width sections xen kẽ. Navigation chỉ là top bar — không có sidebar, không có sticky mega-menu. Nhịp điệu section nhất quán: vertical gap 64px giữa các section chính, flat borders thay vì divider, dòng chảy liền mạch trên canvas obsidian. Card grids là 2 và 3 cột; content blocks là một cột với lề ngang rộng rãi.

## Agent Prompt Guide

## Quick Color Reference
- Text: #faf9f6 (Bone, trắng ấm)
- Background: #000000 (Obsidian)
- Card surface: #1e1e1d (Onyx)
- Border: #1e1e1d (hairline) hoặc #333333 (Carbon, cho interactive)
- Accent: #cbb0f7 (Phosphor Violet — icons, code, links only)
- primary action: không có màu CTA riêng biệt

## Example Component Prompts

1. **Xây dựng hero section.** Nền #000000. Headline: 'Warp is the agentic development environment' ở Matter 400 cỡ 56px, màu #faf9f6, letter-spacing -2.24px, line-height 0.96. Bên dưới: hai product cards đặt cạnh nhau, mỗi card có icon glyph trắng 16px, tên sản phẩm ở Matter 700 cỡ 18px #faf9f6, mô tả ở Matter 400 cỡ 14px #868684, và một hàng chứa ghost button (border 1px #333333, radius 33px, text #b4b4b2) cùng filled white pill button (nền #ffffff, text #080808, radius 33px, Matter 600 ở 14px).

2. **Tạo testimonial card.** Radius 7px, border 1px #1e1e1d, nền #1e1e1d. Phần trên cao 200px là ảnh branded banner full-bleed. Bên dưới với padding 24px: attribution ở Matter 600 cỡ 13px #b4b4b2 (tên, vai trò), sau đó quote ở Matter 400 cỡ 16px #faf9f6, letter-spacing -0.18px, line-height 1.38.

3. **Xây dựng section heading.** Căn giữa trên nền #000000, Matter 400 cỡ 42px #faf9f6, letter-spacing -1.13px, line-height 1.0. Top margin 80px, bottom margin 64px.

4. **Tạo category pill tag.** Border-radius 50px, border 1px #333333, nền trong suốt, text ở Matter 400 cỡ 10px, uppercase, letter-spacing 1px, màu #b4b4b2. Padding 4px 12px.

5. **Xây dựng trusted-by logo row.** Sáu cột trên grid 1200px, column gap 40px. Mỗi logo màu trắng (#faf9f6) ở độ mờ 50%, rộng 40-50px, căn giữa theo chiều dọc trong ô cao 80px, không border hoặc nền.

## Similar Brands

- **Linear** — Cùng aesthetic dark-mode IDE, bảng màu đơn sắc với một điểm nhấn tím/violet duy nhất, pill-shaped buttons, và tight geometric sans-serif typography
- **Vercel** — Canvas obsidian gần như giống hệt, text trắng ấm, spacing gọn, và cùng triết lý để typography làm việc với trang trí màu sắc tối thiểu
- **Raycast** — Developer-tool dark UI với bề mặt phẳng, hairline borders thay vì shadows, và pill-shaped action buttons trên nền trung tính
- **Arc Browser** — Product showcase trên dark-canvas với headline lớn căn giữa, tracking chặt, và triết lý single-accent màu sắc hạn chế

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-graphite: #121212;
  --color-onyx: #1e1e1d;
  --color-carbon: #333333;
  --color-slate-deep: #40403f;
  --color-bone: #faf9f6;
  --color-paper: #ffffff;
  --color-ash-light: #e3e2e0;
  --color-ash-mid: #b4b4b2;
  --color-ash: #868684;
  --color-ash-mute: #a0a0a0;
  --color-iron: #666469;
  --color-ink: #080808;
  --color-phosphor-violet: #cbb0f7;

  /* Typography — Font Families */
  --font-matter-regular: 'Matter Regular', 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-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-matter-mono: 'Matter Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui-sans-serif: 'system-ui sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-eyebrow: 10px;
  --leading-eyebrow: 1.2;
  --tracking-eyebrow: 2px;
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.12px;
  --text-body: 14px;
  --leading-body: 1.25;
  --tracking-body: -0.14px;
  --text-body-lg: 16px;
  --leading-body-lg: 1.33;
  --tracking-body-lg: -0.18px;
  --text-subheading: 18px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.22px;
  --text-heading: 24px;
  --leading-heading: 1.19;
  --tracking-heading: -0.29px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.64px;
  --text-display: 42px;
  --leading-display: 1;
  --tracking-display: -1.13px;
  --text-display-lg: 56px;
  --leading-display-lg: 0.96;
  --tracking-display-lg: -2.24px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-md-2: 7px;
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 33.17px;
  --radius-full: 50px;

  /* Named Radii */
  --radius-tags: 50px;
  --radius-cards: 20px;
  --radius-icons: 4px;
  --radius-links: 7px;
  --radius-inputs: 7px;
  --radius-buttons: 33px;

  /* Surfaces */
  --surface-obsidian: #000000;
  --surface-graphite: #121212;
  --surface-onyx: #1e1e1d;
  --surface-carbon: #333333;
  --surface-slate-deep: #40403f;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #000000;
  --color-graphite: #121212;
  --color-onyx: #1e1e1d;
  --color-carbon: #333333;
  --color-slate-deep: #40403f;
  --color-bone: #faf9f6;
  --color-paper: #ffffff;
  --color-ash-light: #e3e2e0;
  --color-ash-mid: #b4b4b2;
  --color-ash: #868684;
  --color-ash-mute: #a0a0a0;
  --color-iron: #666469;
  --color-ink: #080808;
  --color-phosphor-violet: #cbb0f7;

  /* Typography */
  --font-matter-regular: 'Matter Regular', 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-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-matter-mono: 'Matter Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui-sans-serif: 'system-ui sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-eyebrow: 10px;
  --leading-eyebrow: 1.2;
  --tracking-eyebrow: 2px;
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.12px;
  --text-body: 14px;
  --leading-body: 1.25;
  --tracking-body: -0.14px;
  --text-body-lg: 16px;
  --leading-body-lg: 1.33;
  --tracking-body-lg: -0.18px;
  --text-subheading: 18px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.22px;
  --text-heading: 24px;
  --leading-heading: 1.19;
  --tracking-heading: -0.29px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.64px;
  --text-display: 42px;
  --leading-display: 1;
  --tracking-display: -1.13px;
  --text-display-lg: 56px;
  --leading-display-lg: 0.96;
  --tracking-display-lg: -2.24px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-md-2: 7px;
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 33.17px;
  --radius-full: 50px;
}
```