# Vercel

> Vercel — Style Reference

## Prompt Content

```
# Vercel — Style Reference
> Khối đơn sắc lăng kính trên giấy kẻ ô — một tam giác tối duy nhất khúc xạ toàn bộ quang phổ hình nón trên nền lưới kỹ thuật mờ, và mọi thứ còn lại trên trang là độ chính xác thuần đen-trên-trắng.

**Theme:** light

Vercel hoạt động như một không gian làm việc kỹ thuật gần như đơn sắc: canvas trắng ngà (#fafafa), text và filled actions gần đen (#171717, không bao giờ là #000 thuần), đường viền siêu mảnh (#ebebeb) đảm nhận cấu trúc thay vì đổ bóng, và một điểm nhấn lăng kính đầy màu sắc duy nhất từ logo prism conic-gradient xuất hiện đúng một lần trên mỗi màn hình. Hệ thống chữ hoàn toàn là Geist — một geometric grotesque với tracking âm rất chặt ở kích thước lớn (-0.06em ở 48px) và không có decorative weights — mang lại cho toàn bộ UI cảm giác chính xác như thiết bị phòng thí nghiệm. Mật độ giao diện là compact: bán kính 6px chiếm ưu thế trên cards và buttons, padding 12px bao phủ hầu hết các bề mặt, và khoảng cách 2–8px kiểm soát nhịp điệu. Màu sắc được phân bổ hạn chế — chromatic blue, red, và teal chỉ xuất hiện dưới dạng điểm nhấn trang trí minh họa; product chrome hoàn toàn achromatic với prism gradient là dấu câu màu sắc duy nhất.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Graphite | `#171717` | `--color-graphite` | Primary text, filled action buttons, primary borders. Màu gần đen có chủ đích — không phải #000000 — giúp các bề mặt có cảm giác ấm hơn, mực hơn so với đen thuần |
| Marble White | `#fafafa` | `--color-marble-white` | Page canvas, card surfaces, elevated panels. Không phải trắng thuần — độ ấm nhẹ đọc như giấy thay vì màn hình |
| Pearl | `#ffffff` | `--color-pearl` | Inset surface white dùng bên trong cards, button text trên nền tối, và inner panel highlights |
| Hairline | `#ebebeb` | `--color-hairline` | Màu border mặc định cho cards, nav, inputs, dividers. Đảm nhận phân cách cấu trúc thay vì đổ bóng |
| Felt Gray | `#4d4d4d` | `--color-felt-gray` | Secondary text, muted nav items, icon strokes, sub-labels. Màu xám trung gian chủ lực cho mọi thứ giữa primary text và placeholder |
| Smoke | `#666666` | `--color-smoke` | Tertiary nav text, metadata, timestamps, non-active UI labels |
| Ash | `#a8a8a8` | `--color-ash` | Placeholder text, disabled borders, low-priority dividers |
| Fog | `#7d7d7d` | `--color-fog` | Subtle body text, helper copy, inactive tab labels |
| Ice Tint | `#f0fbff` | `--color-ice-tint` | Lớp phủ lạnh nhẹ dùng trên một số ít list rows và decorative callouts — là surface tint màu sắc duy nhất trong hệ thống |
| Carbon | `#000000` | `--color-carbon` | SVG icon fills, logo stroke, và các khoảnh khắc tương phản đen thật. Được dùng hạn chế trong vector artwork thay vì UI fill |
| Prism Blue | `#52aeff` | `--color-prism-blue` | Điểm nhấn minh họa trang trí — xuất hiện trong prismatic gradient, diagrams, và hero refraction. Không dùng cho UI controls hay text |
| Prism Red | `#e5484d` | `--color-prism-red` | Điểm nhấn minh họa trang trí trong quang phổ lăng kính và diagram strokes |
| Prism Teal | `#45dec5` | `--color-prism-teal` | Điểm nhấn minh họa trang trí trong quang phổ lăng kính và diagram strokes |
| Vercel Blue | `#0070f3` | `--color-vercel-blue` | Màu xanh thương hiệu dành riêng cho links, logo-tied CTAs, và đôi khi là chart highlight. Xuất hiện nhiều trong nav và footer chrome hơn là body content |

## Tokens — Typography

### Geist — Primary UI and display typeface. Geist là font tùy chỉnh (do Vercel xây dựng) mang hình học neo-grotesque với tracking mặc định rất chặt, phân biệt nó với Inter hoặc system sans. Được dùng cho mọi thứ từ caption 12px đến hero headlines 48px. Weight 400 đảm nhận vai trò của bold trên hầu hết các site — Vercel hiếm khi vượt quá 600 ngay cả cho headings, để letter-spacing âm đảm nhận trọng lượng thị giác · `--font-geist`
- **Thay thế:** Inter
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px
- **Line height:** 1.00, 1.17, 1.20, 1.25, 1.33, 1.43, 1.50, 1.52, 1.56, 1.80
- **Letter spacing:** -0.02em ở 16px, thắt chặt đến -0.06em ở 48px. Body text nằm ở khoảng -0.02em; display type tăng lên -0.06em
- **OpenType features:** `"liga" on, "ss05" on`
- **Vai trò:** Primary UI and display typeface. Geist là font tùy chỉnh (do Vercel xây dựng) mang hình học neo-grotesque với tracking mặc định rất chặt, phân biệt nó với Inter hoặc system sans. Được dùng cho mọi thứ từ caption 12px đến hero headlines 48px. Weight 400 đảm nhận vai trò của bold trên hầu hết các site — Vercel hiếm khi vượt quá 600 ngay cả cho headings, để letter-spacing âm đảm nhận trọng lượng thị giác

### Geist Mono — Monospace companion cho code blocks, terminal output, package names, và inline technical strings. Tracking giữ ở mức bình thường — mono type được phép thoáng hơn so với display sans · `--font-geist-mono`
- **Thay thế:** JetBrains Mono
- **Weights:** 400, 500, 600
- **Kích thước:** 8px, 10px, 12px, 13px, 14px, 16px
- **Line height:** 1.00, 1.20, 1.43, 1.54, 1.67
- **OpenType features:** `"liga"`
- **Vai trò:** Monospace companion cho code blocks, terminal output, package names, và inline technical strings. Tracking giữ ở mức bình thường — mono type được phép thoáng hơn so với display sans

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | -0.02px | `--text-caption` |
| body | 14px | 1.56 | -0.02px | `--text-body` |
| heading-sm | 20px | 1.33 | -0.04px | `--text-heading-sm` |
| heading | 24px | 1.25 | -0.05px | `--text-heading` |
| heading-lg | 32px | 1.2 | -0.05px | `--text-heading-lg` |
| display | 48px | 1.17 | -0.06px | `--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` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 18 | 18px | `--spacing-18` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 44 | 44px | `--spacing-44` |
| 48 | 48px | `--spacing-48` |
| 50 | 50px | `--spacing-50` |
| 135 | 135px | `--spacing-135` |
| 157 | 157px | `--spacing-157` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tab | 64px |
| cards | 6px |
| large | 100px |
| pills | 9999px |
| buttons | 6px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px` | `--shadow-subtle-2` |
| subtle-3 | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle-3` |
| subtle-4 | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0...` | `--shadow-subtle-4` |
| subtle-5 | `rgb(235, 235, 235) 0px 0px 0px 1px` | `--shadow-subtle-5` |
| subtle-6 | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px` | `--shadow-subtle-6` |
| subtle-7 | `rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0...` | `--shadow-subtle-7` |

### Layout

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

## Components

### Filled Primary Button
**Vai trò:** Main action — dùng cho Sign Up, Start Deploying, Deploy Now

Nền #171717, text #ffffff, Geist 14px weight 500, radius 6px, padding 8px 16px, không border. Nằm phẳng trên canvas — độ cao duy nhất đến từ fill gần đen trên nền trang trắng ngà, tương phản đủ để không cần shadow. Luôn đi kèm icon 14px dẫn đầu khi có iconography.

### Outlined Secondary Button
**Vai trò:** Tertiary action — Get a Demo, Learn about Enterprise

Nền trong suốt, border 1px #171717, text #171717, Geist 14px weight 500, radius 6px, padding 8px 16px. Đảo màu sạch sẽ trên các section tối. Variant outlined phổ biến ngang với variant filled — Vercel không bao giờ dùng secondary button nền xám.

### Pill Navigation Chip
**Vai trò:** Category filter tabs (AI Apps, Web Apps, Ecommerce, Marketing, Platforms)

Nền #ffffff, border 1px #ebebeb, text #171717, Geist 13px weight 500, radius 9999px, padding 6px 14px. Active state: chuyển sang nền #fafafa với border hơi đậm hơn. Không shadow — hình dạng pill và border đảm nhận vai trò.

### Top Navigation Bar
**Vai trò:** Global header với logo, product menu, auth actions

Sticky top, nền #fafafa, border dưới 1px #ebebeb, cao ~64px. Logo bên trái (tam giác đen 12px + wordmark Geist), nhóm giữa gồm các nav link Geist 14px weight 500 màu #4d4d4d với caret hình chevron-down trên dropdown items, nhóm phải chứa outlined Ask AI button, text link Log In, và filled Sign Up button. Tất cả link cách nhau 4px.

### Product Feature Card
**Vai trò:** Grid card quảng bá một product surface (Agents, AI Apps, Web Apps, v.v.)

Nền #ffffff, border 1px #ebebeb, radius 6px, padding trong 24px. Heading Geist 18px weight 600 #171717, description Geist 14px weight 400 #4d4d4d, icon container hình tròn (40px, border 1px #ebebeb, icon bên trong) với CTA mũi tên nhỏ trong vòng tròn 32px. Khối minh họa tùy chọn ở dưới cùng. Cards không có shadow — hairline border + độ nâng trắng-trên-canvas là chiến lược tạo độ cao.

### Hero Section
**Vai trò:** First viewport — brand statement và primary CTAs

Nền #fafafa phủ lưới kỹ thuật rất mờ (1px lines, #f2f2f2 hoặc 4% opacity #171717, module 40px). Cụm căn giữa: headline Geist 48px weight 500 màu #171717 với tracking -0.06em, subhead Geist 16px weight 400 màu #4d4d4d, sau đó là hàng chứa filled black CTA và outlined CTA. Bên dưới text, nền prismatic gradient căn giữa với logo Vercel prism hình tam giác tối — đây là khoảnh khắc màu sắc duy nhất trong hệ thống.

### Logo Mark
**Vai trò:** Nhận diện thương hiệu Vercel — tam giác đen / prism

Mark tùy chỉnh: tam giác đều hoặc cân được render bằng #171717 với góc 0px sắc cạnh, dùng ở kích thước 16–20px trong nav, 32–48px trong hero. Variant hero nằm trên conic gradient (vàng → đỏ → xanh thép → bạc hà → trong suốt) tỏa ra từ bên dưới, tạo ra hiệu ứng khúc xạ lăng kính đặc trưng.

### Prismatic Conic Gradient
**Vai trò:** Bầu không khí thương hiệu đặc trưng — xuất hiện một lần trên hero, một lần trên các khoảnh khắc sản phẩm chính

Conic gradient từ 180deg tại 50% 70%: trong suốt → vàng (#eec32d) → đỏ (#ec4b4b) → xanh thép (#709ab9) → bạc hà (#4dffbf) → trong suốt. Được áp dụng như một lớp phủ radial mềm phía sau logo prism, không phải nền full-bleed. Gradient là nơi duy nhất màu sắc chromatic được dùng trong design system.

### Engineer Grid Overlay
**Vui trò:** Pattern nền cấu trúc tinh tế trên hero và section dividers

Grid lines 1px màu #f2f2f2 hoặc #171717 opacity 4%, kích thước module 40–48px, full-bleed trên toàn canvas. Hoạt động như texture bản thiết kế — nhìn thấy khi quan sát kỹ nhưng lùi lại ở khoảng cách xem bình thường. Đôi khi có dấu cross-hair nhỏ (+) ở giao điểm lưới góc trên bên trái như dấu đăng ký của designer.

### Wireframe Globe Illustration
**Vai trò:** Secondary hero visual — narrative về hạ tầng toàn cầu

Quả địa cầu line-art được vẽ bằng stroke #ebebeb độ dày 1px, với các đường lưới vĩ độ/kinh độ. Các tam giác prism Vercel nhỏ (8px, #171717) đánh dấu điểm triển khai dọc theo bề mặt. Blue accent strokes (#52aeff) tỏa ra từ các node chọn lọc để gợi ý kết nối đang hoạt động. Không fill, không shadow — thuần linework.

### Code Block
**Vai trò:** Inline code, terminal output, CLI commands

Nền #fafafa hoặc #f5f5f5 hơi đậm hơn, border 1px #ebebeb, radius 6px, Geist Mono 12–13px weight 400. Syntax highlighting dùng bảng màu hạn chế: xanh lá #297a3a cho strings/keywords, xanh dương #0070f3 cho properties, tím #7820bc cho keywords, đỏ #e5484d cho errors. Không language label, không copy button chrome — chỉ code.

### Tab Bar
**Vai trò:** Chuyển đổi nội dung trong các product sections

Hàng ngang các pill chips (radius 9999px) hoặc tabs radius thấp (6px). Active tab fill với text #171717 và gạch chân 2px #171717; inactive tabs màu #4d4d4d. Geist 13px weight 500. Không thay đổi nền giữa active/inactive — underline là tín hiệu trạng thái duy nhất.

## Do's and Don'ts

### Do
- Dùng #171717 cho tất cả filled buttons và primary text — không bao giờ dùng #000000 cho UI fills, màu gần đen ấm hơn là một phần của thương hiệu
- Mặc định radius 6px cho cards, buttons, và inputs; dành radius 9999px (pill) chỉ cho nav chips, category filters, và tag-style elements
- Áp dụng prismatic conic gradient đúng một lần trên mỗi section chính, luôn phía sau logo triangle mark — nó là logo accent, không phải background fill
- Dùng Geist với letter-spacing âm tỷ lệ thuận với kích thước: -0.02em ở 14–16px, tăng dần đến -0.06em ở 48px. Không bao giờ dùng positive tracking trên Geist
- Giữ trang 99% achromatic — chromatic blue, red, và teal chỉ được xuất hiện trong illustrations, prism gradient, và code syntax highlighting
- Dùng hairline #ebebeb borders để phân cách cấu trúc thay vì shadows trên cards, inputs, và nav — độ nâng bề mặt đến từ #ffffff trên #fafafa, không phải từ drop shadows
- Luôn ghép mỗi primary filled button với một outlined secondary button cùng kích thước và loại — Vercel không bao giờ có hero chỉ một CTA

### Don't
- Không dùng #0070f3 hoặc bất kỳ màu chromatic nào làm button background hoặc primary CTA fill — filled action luôn là #171717
- Không áp dụng drop shadows lớn hơn đuôi 2px/8px trong elevation stack tiêu chuẩn — hệ thống được thiết kế để hoạt động không cần shadow nặng
- Không dùng border-radius khác 6px, 9999px, hoặc 100px cho UI components — 12px, 16px, và 32px chỉ xuất hiện trên imagery
- Không đặt body hoặc heading type trên weight 600 — Vercel dựa vào tracking chặt, không phải bold weight, để nhấn mạnh thị giác
- Không dùng prismatic gradient làm section background, card fill, hoặc text treatment — nó chỉ thuộc về phía sau prism logo
- Không thêm màu chromatic mới ngoài bốn prism hues (#52aeff, #e5484d, #45dec5, cộng với gradient gold và mint) — hệ thống có chủ đích gần như đơn sắc
- Không dùng trắng thuần (#ffffff) làm page canvas — luôn là #fafafa, đọc như giấy thay vì màn hình

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#fafafa` | Page background — nền cơ bản mà mọi thứ đặt lên |
| 1 | Card | `#ffffff` | Inner panel surface bên trong cards và feature blocks, tạo bước nâng 1 cấp tinh tế so với canvas |
| 2 | Wash | `#f0fbff` | Hàng màu lạnh thỉnh thoảng dùng cho highlight strips hoặc callout panels |

## Elevation

- **Card / Button / Link:** `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px 0, #fafafa 0 0 0 1px inset`
- **Image / List:** `rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 2px 0, rgba(0,0,0,0.04) 0 8px 8px -8px, #fafafa 0 0 0 1px inset`
- **Nav Border:** `rgba(0,0,0,0.08) 0 0 0 1px, #fafafa 0 0 0 1px`

## Imagery

Imagery gần như hoàn toàn là minh họa và sơ đồ thay vì nhiếp ảnh. Hero có prism tam giác tối đặc trưng khúc xạ conic spectrum gradient — đây là artwork trang trí duy nhất và nó đồng thời là logo. Hình ảnh hỗ trợ là wireframe line drawings (quả địa cầu với đường vĩ độ, bản đồ node triển khai) được render bằng stroke #ebebeb 1px với các accent stroke #171717 và #52aeff chọn lọc. Product cards bao gồm UI mockup snapshots nhỏ — ảnh chụp màn hình sản phẩm thực tế ở tỷ lệ nhỏ bên trong khung radius 6px với hairline border tiêu chuẩn. Không có lifestyle photography, không có hình ảnh con người, không có bối cảnh môi trường. Icons là mono-line geometric shapes tối giản (hình tròn, mũi tên, tam giác) với stroke weight 1–1.5px, hầu như luôn nằm trong container tròn 32–40px với hairline border. Mật độ hình ảnh tổng thể thấp — hầu hết trang là text và whitespace; visuals phải xứng đáng với vị trí của chúng.

## Layout

Các trang có max-width 1200px căn giữa với outer gutters rộng rãi. Hero là một cụm căn giữa duy nhất (headline → subhead → CTA row → prism visual) trên nền #fafafa full-width với lớp phủ grid 40px mờ. Bên dưới hero, nội dung chia thành các section cách nhau 64–80px theo chiều dọc, mỗi section thường dùng grid card 3 cột (chiều rộng bằng nhau, gap 24px) cho product features và use cases. Một số section dùng split 2 cột text+visual. Không có dải sáng/tối xen kẽ — toàn bộ trang giữ sáng. Navigation là một sticky top bar duy nhất với hairline border dưới cùng. Footer tái sử dụng styling của nav với thêm link columns. Nhịp điệu layout là: hero căn giữa → grid 3 cột → stat bar căn giữa → grid 3 cột → section hạ tầng 2 cột với globe visual → grid 3 cột → footer. Không sidebar, không mega-menu, không floating elements.

## Agent Prompt Guide

## Quick Color Reference
- Text: #171717
- Background: #fafafa
- Card surface: #ffffff
- Border: #ebebeb
- Muted text: #4d4d4d
- Primary action: #171717 (filled action)

## Example Component Prompts

1. **Hero section**: Canvas #fafafa với grid 40px mờ màu #f2f2f2. Headline Geist 48px weight 500 căn giữa màu #171717, letter-spacing -0.06em. Subtext Geist 16px weight 400, #4d4d4d. Bên dưới: logo Vercel triangle căn giữa (32px, #171717, góc sắc) nằm trên conic gradient (từ 180deg tại 50% 70%: trong suốt → #eec32d → #ec4b4b → #709ab9 → #4dffbf → trong suốt). Hai buttons cạnh nhau: filled #171717 với text #ffffff, radius 6px, Geist 14px weight 500, padding 8px 16px, cộng variant outlined với border 1px #171717 và nền trong suốt.

2. **Product feature card**: Nền #ffffff, border 1px #ebebeb, radius 6px, padding 24px. Heading Geist 18px weight 600 #171717, description Geist 14px weight 400 #4d4d4d, góc dưới bên phải là icon container tròn 40px (border 1px #ebebeb) chứa mono-line arrow icon màu #171717. Không shadow.

3. **Category filter row**: Hàng ngang các pill chips, radius 9999px, nền #ffffff, border 1px #ebebeb, text Geist 13px weight 500 #171717, padding 6px 14px, gap 8px giữa các chips. Active chip: nền #fafafa với border 1px #d4d4d4.

4. **Navigation bar**: Sticky top, nền #fafafa, border dưới 1px #ebebeb, cao 64px, flex row với max-width 1200px căn giữa. Trái: logo tam giác đen 12px + wordmark Geist 16px weight 500 #171717. Giữa: nav links Geist 14px weight 500 #4d4d4d với gap 4px, caret chevron trên dropdown items. Phải: outlined "Ask AI" button (radius 6px, border 1px #171717), text link "Log In" #171717, filled "Sign Up" button (nền #171717, text #ffffff, radius 6px).

5. **Stat callout strip**: Headline Geist 32px weight 500 căn giữa #171717 với từ được highlight inline màu #0070f3, subtext Geist 16px weight 400 #4d4d4d bên dưới, không background fill, nằm trực tiếp trên canvas #fafafa với khoảng thở dọc 64px phía trên và dưới.

## Elevation Philosophy

Elevation đạt được thông qua tương phản bề mặt, không phải shadow. Hệ thống có đúng ba surface levels (canvas #fafafa → card #ffffff → wash #f0fbff) và dựa vào hairline borders 1px #ebebeb cộng với bước chói tự nhiên giữa các bề mặt để truyền đạt sự phân lớp. Khi shadow xuất hiện, chúng rất tối thiểu: vòng 1px (rgba(0,0,0,0.08)) để định hình và tối đa là đuôi mềm 2px–8px cho product cards chứa imagery. Không có large diffuse shadow, không neumorphism, không glow. Ngôn ngữ thiết kế coi shadow là chi tiết hoàn thiện, không phải yếu tố cấu trúc.

## Similar Brands

- **Linear** — Cùng UI sáng gần đơn sắc với radius 6px, hairline borders, và một filled action button gần đen duy nhất là khoảnh khắc màu sắc
- **Raycast** — Mật độ compact, type họ Geist với tracking âm chặt, pill-shaped nav chips, và structural borders 1px thay vì shadows
- **Stripe** — Geometric grotesque type (Geist kết hợp với Sohne của Stripe), centered max-width layouts, product card grids với borders tinh tế, và bảng màu rất hạn chế
- **Cursor** — Ngôn ngữ thị giác developer-tool: dark prism icon trên white canvas, tracking chặt trên display type, radius 6px, và yêu thích prismatic accents trên nền chrome achromatic

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-graphite: #171717;
  --color-marble-white: #fafafa;
  --color-pearl: #ffffff;
  --color-hairline: #ebebeb;
  --color-felt-gray: #4d4d4d;
  --color-smoke: #666666;
  --color-ash: #a8a8a8;
  --color-fog: #7d7d7d;
  --color-ice-tint: #f0fbff;
  --color-carbon: #000000;
  --color-prism-blue: #52aeff;
  --color-prism-red: #e5484d;
  --color-prism-teal: #45dec5;
  --color-vercel-blue: #0070f3;

  /* Typography — Font Families */
  --font-geist: 'Geist', 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;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.02px;
  --text-body: 14px;
  --leading-body: 1.56;
  --tracking-body: -0.02px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.04px;
  --text-heading: 24px;
  --leading-heading: 1.25;
  --tracking-heading: -0.05px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.05px;
  --text-display: 48px;
  --leading-display: 1.17;
  --tracking-display: -0.06px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-50: 50px;
  --spacing-135: 135px;
  --spacing-157: 157px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 32px;
  --radius-full: 64px;
  --radius-full-2: 100px;
  --radius-full-3: 9999px;

  /* Named Radii */
  --radius-tab: 64px;
  --radius-cards: 6px;
  --radius-large: 100px;
  --radius-pills: 9999px;
  --radius-buttons: 6px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-subtle-5: rgb(235, 235, 235) 0px 0px 0px 1px;
  --shadow-subtle-6: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  --shadow-subtle-7: rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  /* Surfaces */
  --surface-canvas: #fafafa;
  --surface-card: #ffffff;
  --surface-wash: #f0fbff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-graphite: #171717;
  --color-marble-white: #fafafa;
  --color-pearl: #ffffff;
  --color-hairline: #ebebeb;
  --color-felt-gray: #4d4d4d;
  --color-smoke: #666666;
  --color-ash: #a8a8a8;
  --color-fog: #7d7d7d;
  --color-ice-tint: #f0fbff;
  --color-carbon: #000000;
  --color-prism-blue: #52aeff;
  --color-prism-red: #e5484d;
  --color-prism-teal: #45dec5;
  --color-vercel-blue: #0070f3;

  /* Typography */
  --font-geist: 'Geist', 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;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.02px;
  --text-body: 14px;
  --leading-body: 1.56;
  --tracking-body: -0.02px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.04px;
  --text-heading: 24px;
  --leading-heading: 1.25;
  --tracking-heading: -0.05px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.05px;
  --text-display: 48px;
  --leading-display: 1.17;
  --tracking-display: -0.06px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-50: 50px;
  --spacing-135: 135px;
  --spacing-157: 157px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 32px;
  --radius-full: 64px;
  --radius-full-2: 100px;
  --radius-full-3: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-subtle-5: rgb(235, 235, 235) 0px 0px 0px 1px;
  --shadow-subtle-6: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  --shadow-subtle-7: rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
```