# Dimension

> Dimension — Style Reference

## Prompt Content

```
# Dimension — Style Reference
> Command deck glassmorphism trước bình minh

**Theme:** dark

Dimension nói bằng giọng dark gần như đơn sắc: một canvas gần đen, các bề mặt glassmorphic nổi lên trên nó, và một chút indigo nhạt chỉ xuất hiện như dấu chấm câu nhấn mạnh. Typography tiết chế và mang tính humanist — DM Sans cho body, Geist cho display — để headline 72px siêu nhẹ dẫn dắt không gian màu sắc không cần phải la hét. Các component có dạng pill hoặc bo tròn mềm; hầu như mọi interactive element (buttons, nav, tags, floating dock) đều dùng radius 9999px, trong khi cards nằm trong khoảng cong 24–40px. Trang thở: nhịp dọc rộng rãi, đường viền hairline mảnh màu #e5e5e5 ở độ mờ thấp, và elevation tối thiểu — chiều sâu đến từ độ trong suốt và blur, không phải chồng shadow.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Void | `#0a0a0a` | `--color-void` | Nền trang, bề mặt sâu — canvas mà mọi thứ nổi lên trên |
| Char | `#1d1d1d` | `--color-char` | Bề mặt card nâng cao, nền modal |
| Iron | `#3d3d3d` | `--color-iron` | Bề mặt trung cấp, hover state trên các phần tử tối |
| Slate | `#505050` | `--color-slate` | Bề mặt disabled, nền secondary button |
| Smoke | `#797979` | `--color-smoke` | Bề mặt inactive, placeholder fill |
| Graphite | `#161616` | `--color-graphite` | Fill phần tử UI sâu nhất, icon strokes trên vùng sáng |
| Ink | `#282828` | `--color-ink` | Đường chia hairline, viền mờ trên bề mặt kính |
| Fog | `#686868` | `--color-fog` | Văn bản link mờ, metadata thứ cấp |
| Mist | `#c2c2c2` | `--color-mist` | Body text thứ cấp, caption mềm |
| Ash | `#b2b2b2` | `--color-ash` | Màu icon ở trạng thái nghỉ, nhãn button không hoạt động |
| Bone | `#e5e5e5` | `--color-bone` | Văn bản chính, tông viền chủ đạo (thường ở độ mờ giảm), icon strokes — neutral workhorse |
| Paper | `#ffffff` | `--color-paper` | Fill action trung tính sáng cho button trên bề mặt tối |
| Onyx | `#000000` | `--color-onyx` | Icon fill trên bề mặt sáng, shadow SVG illustration |
| Indigo Haze | `linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(107,98,242,0.565) 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0))` | `--color-indigo-haze` | Điểm nhấn màu duy nhất — dùng trong hero wash gradient và radial spotlight phía sau nội dung hero; indigo tiết chế, không bao giờ dùng cho button đặc |
| Dawn Wash | `linear-gradient(180deg, rgb(72,103,175), rgb(156,175,184), rgb(196,149,119))` | `--color-dawn-wash` | Bầu không khí nền hero — dải slate-xanh mát nằm giữa navy đậm và tông đất ấm, gợi bầu trời trước bình minh |

## Tokens — Typography

### DM Sans — Workhorse chính — body copy, nav items, buttons, list rows, tags. Weight 500 cho nav/button labels, 700 cho inline emphasis. Ở 72px nó đảm nhận hero headline; tracking -0.035em thắt chặt bộ display cỡ lớn và tạo cho các letterform hình học một tư thế condensed, editorial. · `--font-dm-sans`
- **Thay thế:** Inter, Manrope
- **Weights:** 400, 500, 700
- **Kích thước:** 14px, 15px, 16px, 18px, 40px, 72px
- **Line height:** 1.00–1.56 (phụ thuộc kích thước)
- **Letter spacing:** -0.035em ở 72px; 0.025em ở kích thước nhỏ (all-caps labels)
- **OpenType features:** `"ss01" on, "cv11" on`
- **Vai trò:** Workhorse chính — body copy, nav items, buttons, list rows, tags. Weight 500 cho nav/button labels, 700 cho inline emphasis. Ở 72px nó đảm nhận hero headline; tracking -0.035em thắt chặt bộ display cỡ lớn và tạo cho các letterform hình học một tư thế condensed, editorial.

### Geist — Mặt chữ thứ cấp — dùng cho subheading trọng lượng trung bình, card titles và tabular UI text bên trong product mockup. x-height hơi cao hơn và tính trung tính hình học của Geist khiến nó giống như body type UI-native, bổ sung cho giọng editorial ấm áp của DM Sans mà không cạnh tranh. · `--font-geist`
- **Thay thế:** Inter, Satoshi
- **Weights:** 400, 500, 600
- **Kích thước:** 14px, 16px, 18px, 24px, 32px, 36px, 48px
- **Line height:** 1.14–1.71
- **Vai trò:** Mặt chữ thứ cấp — dùng cho subheading trọng lượng trung bình, card titles và tabular UI text bên trong product mockup. x-height hơi cao hơn và tính trung tính hình học của Geist khiến nó giống như body type UI-native, bổ sung cho giọng editorial ấm áp của DM Sans mà không cạnh tranh.

### system-ui — Fallback cho văn bản gần icon và ảnh chụp màn hình UI sản phẩm đã render — không bao giờ xuất hiện trên bề mặt marketing · `--font-system-ui`
- **Weights:** 400, 500
- **Kích thước:** 18px
- **Line height:** 1.50
- **Vai trò:** Fallback cho văn bản gần icon và ảnh chụp màn hình UI sản phẩm đã render — không bao giờ xuất hiện trên bề mặt marketing

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 14px | 1.5 | 0.35px | `--text-caption` |
| body | 16px | 1.5 | — | `--text-body` |
| body-lg | 18px | 1.43 | — | `--text-body-lg` |
| subheading | 24px | 1.33 | — | `--text-subheading` |
| heading-sm | 32px | 1.25 | — | `--text-heading-sm` |
| heading | 40px | 1.2 | — | `--text-heading` |
| heading-lg | 48px | 1.14 | — | `--text-heading-lg` |
| display | 72px | 1 | -2.52px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 44 | 44px | `--spacing-44` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |

### Border Radius

| Phần tử | Giá trị |
|---------|---------|
| pill | 9999px |
| tags | 9999px |
| cards | 24px |
| inputs | 10px |
| buttons | 9999px |
| iconContainers | 4px |
| largeContainers | 40px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 8px

## Components

### Floating Pill Navigation
**Vai trò:** Site navigation chính

Thanh cố định dưới cùng-giữa, cao 40px, radius 9999px, nền #1d1d1d ở độ mờ ~80% với backdrop blur, viền hairline 1px #e5e5e5 ở độ mờ 10%. Chứa wordmark, 3–4 nav links bằng DM Sans 15px weight 500 #e5e5e5, và một CTA pill trắng nằm sát cạnh phải. Nổi với margin 24px từ đáy viewport trên desktop.

### Primary CTA Button (White Pill)
**Vai trò:** Hành động chuyển đổi chính

Hình pill, radius 9999px, cao ~40px, padding ngang 16–20px. Nền #ffffff, chữ #0a0a0a, DM Sans 15px weight 500. Không shadow. Bao gồm ký tự mũi tên (→) cùng màu ở 14px. Nằm sát bên trong floating nav hoặc đứng một mình trên hero — không bao giờ được tô màu.

### Hero Display Headline
**Vai trò:** Value proposition phía trên fold

DM Sans 72px weight 400, line-height 1.00, letter-spacing -0.035em (~-2.5px), màu #ffffff. Lựa chọn siêu nhẹ ở kích thước này là điểm đặc trưng: hầu hết các SaaS dark-mode la hét ở weight 700; Dimension nói nhẹ nhàng. Xuống hai dòng, căn trái, max-width ~520px.

### Glass Product Mockup
**Vai trò:** Hình ảnh hero / product showcase

Container bo tròn, radius 24px, nền #1d1d1d với backdrop-filter blur ~20px, viền 1px #e5e5e5 ở độ mờ 8%. Chứa ba hàng pill xếp chồng: một dock icon app (pill 9999px, cao 64px, 5 icon sản phẩm mỗi icon trong một well tròn 40px #282828, trên cùng là badge thông báo đỏ kiểu #ef4444); một hàng status/chat (pill 9999px, nền #3d3d3d, avatar + nhãn 'Dimension' + 'Reviewing team chats…' màu #c2c2c2). Glassmorphism — độ trong suốt trên nền gradient ấm/mát — làm công việc mà shadow sẽ làm trong một hệ thống thông thường.

### App Icon Dock
**Vai trò:** Trưng bày tích hợp bên trong product mockup

Inner pill, radius 9999px, cao ~64px, nền #2a2a2a, gap 4px giữa các well icon. Mỗi icon nằm trong một ô vuông 40px với radius 8px và fill #282828. Badge thông báo là hình tròn 18px, màu đỏ, góc trên bên phải, chữ số DM Sans 11px weight 700 màu trắng.

### Feature List (Numbered)
**Vai trò:** Liệt kê khả năng trên cột trái hero

Chồng dọc với row gap 8px. Section header bằng DM Sans 16px weight 500 #e5e5e5. Mỗi hàng: cao 40px, grid hai cột (nhãn trái, số thứ tự phải). Nhãn là DM Sans 16px weight 400 #c2c2c2; số thứ tự ('01'–'05') là DM Sans 14px weight 500 #686868. Các hàng được phân cách bởi viền 1px #e5e5e5 ở độ mờ 6% — không phải divider, chỉ là hairline.

### Feature Bullet Row
**Vai trò:** Điểm phụ cột trái hero

Hàng một dòng, cao 24px, column gap 8px giữa icon và chữ. Icon stroke 14px #b2b2b2 (glyph giống kỳ lân: paw, compass, chat, lock). Chữ DM Sans 15px weight 400 #c2c2c2. Không có bullet, không có chevron — icon là dấu hiệu.

### Status Pill
**Vai trò:** Chỉ báo trạng thái nội tuyến trong product UI

Radius 9999px, cao ~36px, padding 8px 16px, nền #3d3d3d. Bên trái: avatar tròn 20px với monogram 'D'. Giữa: DM Sans 14px weight 500 #e5e5e5 'Dimension'. Phải: DM Sans 14px weight 400 #c2c2c2 văn bản trạng thái với dấu ba chấm ở cuối.

### Hairline Divider
**Vai trò:** Phân cách section

Đường 1px, full container width, #e5e5e5 ở độ mờ 6–10%. Thay thế border và divider nặng — hệ thống truyền đạt sự phân cách qua những đường gần như vô hình, không phải tương phản.

### Gradient Hero Backdrop
**Vai trò:** Nền bầu không khí phía trên fold

Dải full-bleed, cao khoảng 100vh, gradient chuyển từ xanh navy đậm ở trên (rgb(72,103,175)) qua slate mát (rgb(156,175,184)) đến tông đất ấm ở dưới (rgb(196,149,119)) — bảng màu 'trước bình minh'. Nằm phía sau glass mockup với radial spotlight #6b62f2→#ffffff lan tỏa từ trung tâm phía trên. Bên dưới fold, trang trở lại #0a0a0a đặc.

### Tag / Chip
**Vai trò:** Đánh dấu danh mục nội tuyến

Radius 9999px, cao 28px, padding 6px 14px, nền #1d1d1d, viền 1px #e5e5e5 ở độ mờ 10%. DM Sans 13px weight 500 #c2c2c2. Được sử dụng tiết kiệm — một hoặc hai cái mỗi section, không bao giờ là trang trí.

### Icon Button
**Vai trò:** Kích hoạt hành động nhỏ gọn (close, menu, v.v.)

Hình vuông 32px, radius 8px, nền trong suốt, viền 1px #e5e5e5 ở độ mờ 10% khi hover. Icon 16px, stroke #e5e5e5 ở độ mờ 60%, weight 1.5px.

## Do's and Don'ts

### Nên làm
- Dùng radius 9999px cho mọi button, nav element, tag và status pill — hình pill là dạng interactive mặc định
- Đặt màu chữ là #e5e5e5 làm màu đọc chính; dành #ffffff nguyên chất cho wordmark, icon fills và nền primary CTA
- Dùng DM Sans 72px weight 400 cho hero headline với letter-spacing -0.035em — siêu nhẹ ở kích thước display là điểm đặc trưng
- Thể hiện chiều sâu qua backdrop-filter blur và độ trong suốt trên bề mặt tối, không qua chồng shadow
- Render accent indigo (#6b62f2) chỉ bên trong hero gradient hoặc dưới dạng radial glow — không bao giờ là button fill đặc, badge background hoặc màu chữ
- Phân cách nội dung bằng hairline 1px #e5e5e5 ở độ mờ 6–10% thay vì chỉ dùng tương phản hoặc spacing
- Neo mọi hero bằng một artifact sản phẩm glassmorphic (pattern floating UI mockup) — chữ không bao giờ đứng một mình trên dải gradient

### Không nên làm
- Không đưa màu thương hiệu bão hòa vào button, link hoặc accent — hệ thống là đơn sắc theo thiết kế và indigo chỉ mang tính bầu không khí
- Không dùng box-shadows trên bề mặt tối phẳng; chỉ dành hai giá trị shadow cho floating nav và glass mockup
- Không dùng góc nhọn (0–4px) trên cards hoặc container — tối thiểu là 10px trên inputs, 24px trên cards, 40px trên hero artifacts
- Không đặt body type dưới 16px hoặc trên 18px — DM Sans đọc tốt nhất trong khoảng đó ở weight 400
- Không dùng màu để truyền đạt thứ bậc; dùng weight (400 → 500 → 700) và độ mờ (#e5e5e5 → #c2c2c2 → #686868)
- Không đặt product mockup trên nền đặc — nó cần gradient hero hoặc bề mặt phân lớp để đọc được là kính
- Không dùng Geist cho hero headline hoặc DM Sans cho tabular UI text của mockup — việc đổi font giữa marketing và sản phẩm là có chủ đích

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Void | `#0a0a0a` | Canvas nền — trang nằm trên gần đen |
| 1 | Char | `#1d1d1d` | Bề mặt card, panel nâng cao |
| 2 | Iron | `#3d3d3d` | Hover state, active surface |
| 3 | Slate | `#505050` | Pressed state, selected surface |

## Elevation

- **Floating Pill Navigation:** `0 8px 32px rgba(0,0,0,0.4)`
- **Glass Product Mockup:** `0 24px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06)`

## Imagery

Không có nhiếp ảnh hoặc minh họa ngoài product UI mockup. Bầu không khí hero được tạo hoàn toàn thông qua dawn-wash gradient và glassmorphic product container, hiển thị UI đã render thực tế (app icons, notification badges, status row). Ngôn ngữ hình ảnh là 'show, don't illustrate' — sản phẩm là hero, được đóng khung như một artifact kính nổi trên gradient bầu trời. Không stock photography, không 3D trừu tượng, không hình trang trí. Iconography là monoline 1.5px stroke màu #b2b2b2/#e5e5e5, cực kỳ tối giản — glyph paw, compass, chat, lock gợi ý khả năng mà không cần quá cụ thể.

## Layout

Container max-width căn giữa 1200px với hero hai cột (text-trái ~40%, mockup-phải ~60%) trên desktop. Hero nằm trên dải gradient full-bleed trở về #0a0a0a bên dưới fold. Nhịp section: gap dọc 80px giữa các dải, xen kẽ full-bleed gradient → solid dark. Floating pill nav là navigation cố định duy nhất — không có top bar, không sidebar. Mật độ nội dung thưa thớt và mang tính editorial: mỗi màn hình trình bày một ý tưởng, một headline, một hình ảnh. Card grids là 3-column trên desktop, 1-column trên mobile, với gap 24px. Product mockup luôn là neo hình ảnh trên hero/section pages; chữ không bao giờ đứng một mình mà không có glass artifact bên phải.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- background: #0a0a0a
- surface (card): #1d1d1d
- border: #e5e5e5 ở độ mờ 8–10%
- text primary: #e5e5e5
- text secondary: #c2c2c2
- accent: #6b62f2 (indigo, chỉ gradient — không bao giờ đặc)
- primary action: #ffffff (filled action)

**Ví dụ Component Prompts**

1. Tạo một Primary Action Button: nền #ffffff, chữ #000000, radius 9999px, padding pill nhỏ gọn. Dùng treatment filled này cho CTA chính.

2. *Hero headline.* DM Sans 72px weight 400, line-height 1.00, letter-spacing -2.5px, màu #ffffff, căn trái, max-width 520px. Nằm phía trên feature list trên cột căn giữa max-width 1200px.

3. *Glass product mockup.* Container radius 24px, bg #1d1d1d ở độ mờ 85%, backdrop-filter blur(24px), viền 1px #e5e5e5 ở độ mờ 8%, padding 24px, shadow 0 24px 48px rgba(0,0,0,0.35). Chứa một app-icon dock bên trong: pill radius 9999px, cao 64px, bg #2a2a2a, 5 well icon tròn (40px, radius 8px, fill #282828) cách nhau 4px gap, mỗi well có badge thông báo đỏ 18px phía trên.

4. *Numbered feature list.* Chồng dọc, row gap 8px. Header DM Sans 16px weight 500 #e5e5e5. Mỗi hàng: cao 40px, grid hai cột (nhãn DM Sans 16px weight 400 #c2c2c2 trái, số thứ tự '01'–'05' bằng DM Sans 14px weight 500 #686868 phải). Các hàng được phân cách bởi hairline 1px #e5e5e5 ở độ mờ 6%.

5. *Gradient hero backdrop.* Dải full-bleed, 100vh trên hero, linear-gradient(180deg, rgb(72,103,175) 0%, rgb(156,175,184) 50%, rgb(196,149,119) 100%) với radial-gradient(50% 50% at 50% 35%, rgba(107,98,242,0.565) 0%, rgba(255,255,255,0) 100%) phủ từ trung tâm phía trên.

## Gradient System

Gradient mang tính bầu không khí, không bao giờ là chrome trang trí. Chỉ ba cách dùng: (1) hero 'dawn wash' full-bleed — xanh mát chuyển sang đất ấm, gợi bầu trời trước bình minh; (2) radial spotlight indigo căn giữa phía sau nội dung hero, nơi duy nhất accent thương hiệu xuất hiện và chỉ dưới dạng glow, không bao giờ là fill; (3) hairline indigo ngang mỏng (linear-gradient với các stop trong suốt ở hai bên của một dải rgba(107,98,242,0.565) trung tâm) dùng làm divider section hoặc accent strokes — luôn là transparent→indigo→transparent, không bao giờ đặc. Không gradient nào xuất hiện trên button, card hoặc bề mặt interactive.

## Glassmorphism Recipe

Surface treatment đặc trưng. Kết hợp: background #1d1d1d hoặc #282828 ở độ mờ 70–85%, backdrop-filter blur(16–24px), viền 1px #e5e5e5 ở độ mờ 6–10%, tùy chọn inset top highlight (inset 0 1px 0 rgba(255,255,255,0.06)). Radius 24px cho cards, 40px cho large containers, 9999px cho pills. Luôn nổi trên gradient hero hoặc bề mặt tối phân lớp — glassmorphism trên #0a0a0a phẳng trông chết; nó cần thứ gì đó có màu sắc hoặc được chiếu sáng phía sau để đọc được là kính.

## Similar Brands

- **Linear** — Cùng thẩm mỹ dark-mode gần đơn sắc với một accent tiết chế, display type siêu nhẹ và interactive elements hình pill
- **Vercel** — Cùng dòng typeface Geist và pattern black-canvas-cộng-glassmorphism product-mockup trong hero sections
- **Raycast** — Dark glassmorphic product UI nổi trên gradient hero, iconography monoline, pill-shaped dock components
- **Arc Browser** — Bề mặt tối mềm mại, sử dụng nhiều pill radii 9999px và atmospheric color washes làm công việc của solid accents
- **Cron** — Cùng canvas gần đen, accent indigo nhạt chỉ dùng làm gradient/glow và editorial whisper-weight headlines

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void: #0a0a0a;
  --color-char: #1d1d1d;
  --color-iron: #3d3d3d;
  --color-slate: #505050;
  --color-smoke: #797979;
  --color-graphite: #161616;
  --color-ink: #282828;
  --color-fog: #686868;
  --color-mist: #c2c2c2;
  --color-ash: #b2b2b2;
  --color-bone: #e5e5e5;
  --color-paper: #ffffff;
  --color-onyx: #000000;
  --color-indigo-haze: #6b62f2;
  --gradient-indigo-haze: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(107,98,242,0.565) 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0));
  --color-dawn-wash: #9cafb8;
  --gradient-dawn-wash: linear-gradient(180deg, rgb(72,103,175), rgb(156,175,184), rgb(196,149,119));

  /* Typography — Font Families */
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: 0.35px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.43;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.25;
  --text-heading: 40px;
  --leading-heading: 1.2;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.14;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.52px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 19px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 64px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-pill: 9999px;
  --radius-tags: 9999px;
  --radius-cards: 24px;
  --radius-inputs: 10px;
  --radius-buttons: 9999px;
  --radius-iconcontainers: 4px;
  --radius-largecontainers: 40px;

  /* Surfaces */
  --surface-void: #0a0a0a;
  --surface-char: #1d1d1d;
  --surface-iron: #3d3d3d;
  --surface-slate: #505050;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void: #0a0a0a;
  --color-char: #1d1d1d;
  --color-iron: #3d3d3d;
  --color-slate: #505050;
  --color-smoke: #797979;
  --color-graphite: #161616;
  --color-ink: #282828;
  --color-fog: #686868;
  --color-mist: #c2c2c2;
  --color-ash: #b2b2b2;
  --color-bone: #e5e5e5;
  --color-paper: #ffffff;
  --color-onyx: #000000;
  --color-indigo-haze: #6b62f2;
  --color-dawn-wash: #9cafb8;

  /* Typography */
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: 0.35px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.43;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.25;
  --text-heading: 40px;
  --leading-heading: 1.2;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.14;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.52px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 19px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 64px;
  --radius-full-2: 9999px;
}
```