# Wonder

> Wonder — Style Reference

## Prompt Content

```
# Wonder — Style Reference
> Trung tâm chỉ huy violet neon — màn đêm mận sẫm bị xuyên thủng bởi một nguồn sáng laser tím duy nhất.

**Theme:** mixed

Wonder hoạt động như một vũ trụ thiết kế dark-first: nền canvas violet gần như đen (#0f0217) tạo bối cảnh nhập tâm cho thương hiệu, được điểm xuyết bởi một điểm nhấn violet rực rỡ duy nhất (#d262ff) khiến các hành động trông như đang bật sáng, và một màu xám pha tím dịu (#44374a) làm công việc cấu trúc thầm lặng cho mọi border và divider. Hệ thống xen kẽ giữa các section dark atmosphere full-bleed và các content panel trắng sáng, tạo nhịp điệu qua tương phản thay vì trang trí. Typography dẫn dắt bởi Uncut Sans Variable — hình học, tracking rộng ở cỡ nhỏ, tracking chặt ở cỡ display — kết hợp với Martian Mono cho mọi metadata kỹ thuật, kích thước và chú thích. Bề mặt phẳng với hairline borders thay vì shadow nặng; một số card nâng lên dùng border 1px siêu mảnh và radius lớn (14px) để trông như những tấm kính nổi thay vì panel đặc. Components thưa thớt và tự tin: pill-shaped badges, buttons 8px radius dạng filled violet hoặc ghost outline, và rất ít điểm trang trí ngoài motif nguệch ngoạc vẽ tay.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Void Plum | `#0f0217` | `--color-void-plum` | Page canvas và dark surface chính — nền violet gần đen làm nền cho toàn bộ hero và footer bands nhập tâm |
| Eclipse Black | `#0b0211` | `--color-eclipse-black` | Elevated card và panel surface — tối hơn canvas một bậc, dùng cho UI elements nổi trên nền tối |
| Carbon Ink | `#111111` | `--color-carbon-ink` | Badge fills, icon stroke accents, và dark section surfaces trên ngữ cảnh sáng hơn |
| Lavender Mist | `#44374a` | `--color-lavender-mist` | Màu border và divider chủ đạo trên toàn hệ thống — mọi hairline, cạnh card, và UI outline đều dùng màu xám pha tím dịu này |
| Ghost Violet | `#4b4151` | `--color-ghost-violet` | Helper text nhẹ và iconography ưu tiên thấp — màu xám pha tím nhẹ nhàng nhất |
| Ash Wisp | `#6f6774` | `--color-ash-wisp` | Body text phụ và metadata labels trên nền canvas tối |
| Silver Smoke | `#b7b3b9` | `--color-silver-smoke` | Tertiary text, nav items không hoạt động, và icon fills ở mức ưu tiên thấp |
| Moonstone | `#999999` | `--color-moonstone` | Text ưu tiên trung bình, icon strokes chung, và muted copy trên section sáng |
| Paper White | `#ffffff` | `--color-paper-white` | Primary text trên bề mặt tối, light section backgrounds, và màu highlight sáng nhất |
| Bone | `#f7f6f5` | `--color-bone` | Màu trắng ấm cho light content section backgrounds — hơi kem so với trắng tinh của inner cards |
| Frost | `#f0f0f0` | `--color-frost` | Surface fill cho nested elements và subtle dividers trong section sáng |
| Laser Violet | `#d262ff` | `--color-laser-violet` | Primary action button fill, focus rings, và điểm nhấn đặc trưng của thương hiệu — tím điện rực rỡ trên nền tối tạo sự cấp bách mà không hung hăng |
| Royal Plum | `#6a1791` | `--color-royal-plum` | Decorative stroke accent cho gradient mesh backgrounds và atmospheric purple lighting |
| Merlot Shadow | `#2d063a` | `--color-merlot-shadow` | Heading color đậm và surface tint cho accent cards trong section sáng |
| Mulberry Deep | `#180321` | `--color-mulberry-deep` | Dark section heading color và dramatic text accent trong light-mode areas |
| Coral Spark | `#d97757` | `--color-coral-spark` | Secondary accent ấm cho highlights, callout dots, và emphasis trên bề mặt sáng |

## Tokens — Typography

### Uncut Sans Variable — Primary brand typeface — sans hình học với optical width rộng, dùng cho mọi display headlines, body copy, nav, buttons, và card content. Letter-spacing âm chặt ở cỡ lớn (-0.05em ở 50px = -2.5px) tạo cảm giác tự tin, nén chặt cho display text; letter-spacing dương 0.08em ở small caps tạo eyebrow labels tracking rộng. · `--font-uncut-sans-variable`
- **Thay thế:** Inter Variable, Geist, Satoshi
- **Weights:** 400, 500, 600
- **Cỡ:** 14px, 15px, 16px, 18px, 24px, 38px, 50px
- **Line height:** 1.10–1.56 (thay đổi theo cỡ)
- **Letter spacing:** 50px: -2.5px (-0.05em) | 38px: -1.9px (-0.05em) | 24px: -0.96px (-0.04em) | 18px: -0.45px (-0.025em) | 16px: -0.4px (-0.025em) | 14–15px: -0.21 đến -0.225px (-0.015em)
- **OpenType features:** `"ss01" on (nếu có), "cv11" on (alternate single-storey 'a')`
- **Vai trò:** Primary brand typeface — sans hình học với optical width rộng, dùng cho mọi display headlines, body copy, nav, buttons, và card content. Letter-spacing âm chặt ở cỡ lớn (-0.05em ở 50px = -2.5px) tạo cảm giác tự tin, nén chặt cho display text; letter-spacing dương 0.08em ở small caps tạo eyebrow labels tracking rộng.

### Martian Mono — Technical metadata và dimensional annotations — dimension labels, tọa độ, tên file, và small UI labels cần chữ ký monospaced. Tracking dương 0.05em tạo chất tinh tế, giống bản thiết kế kiến trúc. · `--font-martian-mono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, Geist Mono
- **Weights:** 400
- **Cỡ:** 10px, 11px, 12px
- **Line height:** 1.50–1.63
- **Letter spacing:** 0.5–0.6px (0.05em) ở mọi cỡ
- **Vai trò:** Technical metadata và dimensional annotations — dimension labels, tọa độ, tên file, và small UI labels cần chữ ký monospaced. Tracking dương 0.05em tạo chất tinh tế, giống bản thiết kế kiến trúc.

### Inter — Secondary system font dùng trong tertiary UI elements, labels gần icon, và fallback roles khi không cần Uncut Sans. Bao phủ các cỡ nhỏ nhất (8–12px) với độ rõ nét sạch sẽ. · `--font-inter`
- **Thay thế:** System UI sans, Inter Variable
- **Weights:** 400, 500, 600, 700
- **Cỡ:** 8px, 10px, 11px, 12px, 14px, 15px, 16px, 24px, 28px
- **Line height:** 1.20–1.63
- **Letter spacing:** -0.0400em, -0.0250em, -0.0150em, 0.0500em
- **Vai trò:** Secondary system font dùng trong tertiary UI elements, labels gần icon, và fallback roles khi không cần Uncut Sans. Bao phủ các cỡ nhỏ nhất (8–12px) với độ rõ nét sạch sẽ.

### Type Scale

| Vai trò | Cỡ | Line Height | Letter Spacing | Token |
|---------|-----|-------------|----------------|-------|
| caption | 10px | 1.5 | 0.5px | `--text-caption` |
| body | 14px | 1.43 | -0.21px | `--text-body` |
| heading-sm | 24px | 1.33 | -0.96px | `--text-heading-sm` |
| heading | 38px | 1.1 | -1.9px | `--text-heading` |
| display | 50px | 1.12 | -2.5px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### 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` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| cards | 14px |
| badges | 9999px |
| images | 4px |
| inputs | 8px |
| buttons | 8px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| subtle | `oklab(0 0 0 / 0.03) 0px 0px 0px 1px` | `--shadow-subtle` |
| subtle-2 | `oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-subtle-2` |
| subtle-3 | `oklab(0 0 0 / 0.08) 0px 0px 0px 1px` | `--shadow-subtle-3` |
| subtle-4 | `lab(60.9935 37.0253 35.2355 / 0.2) 0px 0px 0px 1px, rgba(...` | `--shadow-subtle-4` |

### Layout

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

## Components

### Primary CTA Button
**Vai trò:** Filled laser-violet action button — phần tử chromatic đậm duy nhất của hệ thống

Nền filled #d262ff, text trắng, Uncut Sans Variable 14px weight 500, border-radius 8px, padding 10px 20px. Không border, không shadow. Màu violet rực rỡ trên nền tối tạo focal weight tức thì. Hover state: tăng nhẹ độ sáng hoặc outer glow trong #d262ff ở độ mờ 20%.

### Ghost Navigation Button
**Vai trò:** Secondary nav action — button kiểu 'Open app' trong top bar

Nền trong suốt, border 1px #44374a, text trắng, Uncut Sans Variable 14px weight 500, border-radius 8px, padding 8px 16px. Trông như một outline nhẹ nhàng trên canvas tối.

### Text Link Button
**Vai trò:** Nav link ưu tiên thấp — hành động chỉ-text kiểu 'Careers'

Không nền, không border, text trắng full opacity hoặc #b7b3b9 ở trạng thái nghỉ, Uncut Sans Variable 14px weight 400. Hover chuyển sang #d262ff để báo hiệu điểm nhấn thương hiệu.

### Pill Badge
**Vai trò:** Status indicator, feature label, hoặc attribution mark — kiểu 'Featured on Product Hunt'

Bo tròn hoàn toàn (9999px radius), nền tối (#111111 hoặc #0b0211), text trắng hoặc #b7b3b9, Inter hoặc Martian Mono 10–12px, padding 4px 12px, border 1px #44374a để định hình trên bề mặt tối.

### Eyebrow Label
**Vai trò:** Section label tracking rộng — kiểu 'Features', 'PROUDLY SUPPORTED BY'

Uncut Sans Variable 12–14px weight 500, letter-spacing 0.08em (1.12–1.6px dương), màu #d262ff cho accents hoặc #6f6774 cho neutral eyebrows. Tracking dương ở cỡ nhỏ là một thiết bị signature.

### Product Card
**Vai trò:** Floating UI showcase panel — các device mockups và file-tree panels thấy trong screenshots

Border-radius 14px, nền #0b0211 hoặc #ffffff tùy section, border 1px #44374a (tối) hoặc #e1e4e8 (sáng), không shadow nặng — border hairline 1px và radius lớn tạo hiệu ứng kính nổi. Internal padding 12–16px. Panel chat 'Art App' là biến thể với nền trắng và cùng radius 14px.

### Feature Card
**Vai trò:** Feature explanation card ba cột trong section sáng

Nền trong suốt hoặc #ffffff, không border, padding rộng rãi (24px), heading trong Mulberry Deep (#180321) ở 18px weight 500, body trong #737373 ở 14px. Spacing dựa vào whitespace, không phải container.

### Dimension Annotation Tag
**Vai trò:** Monospaced measurement label — chỉ báo tọa độ kiểu '448 × 144'

Martian Mono 10–12px weight 400, letter-spacing 0.05em, text căn giữa trong pill tối nhỏ (nền #111111, text #b7b3b9 hoặc trắng, radius 9999px, padding 2px 8px). Đi kèm selection bounding boxes để truyền tải độ chính xác.

### File Tree Row
**Vai trò:** Sidebar navigation item trong design tool UI

Nền trong suốt, rowGap 4px giữa các item, Uncut Sans Variable 12–14px weight 400 trong #b7b3b9 (không hoạt động) hoặc #ffffff (hoạt động). Folder hiển thị với caret chevron trong #999999. Không hover background — hoàn toàn dựa trên text.

### Investor/Partner Logo Strip
**Vai trò:** Horizontal logo wall cho section 'PROUDLY SUPPORTED BY'

Các logo cách đều nhau trong một hàng trên canvas tối, mỗi logo hiển thị màu trắng hoặc #b7b3b9 ở chiều cao đồng nhất (~24px), gap 64–80px giữa các logo. Không container card — logo nổi trực tiếp trên #0f0217.

### Gradient Mesh Backdrop
**Vai trò:** Atmospheric purple lighting phía sau product showcases

Section background full-width dùng gradient linear hoặc radial nhiều điểm dừng từ #6a1791 qua #d262ff ở độ mờ thấp, chuyển dần vào void canvas. Các tia sáng chéo tạo ấn tượng đèn spotlight từ trên cao. Không cạnh xác định — hòa vào trang.

### Decorative Squiggle
**Vai trò:** Hand-drawn pen-tool accent — icon bút nhỏ và hình blob đầy màu sắc

Minh họa nét mảnh trong #111111 hoặc #d262ff, không fill, stroke 1.5–2px. Dùng làm trang trí không chính thức để phá vỡ sự cứng nhắc hình học của design tool context.

## Do's and Don'ts

### Nên
- Dùng #d262ff làm điểm nhấn chromatic duy nhất — không bao giờ thêm màu bão hòa khác cho UI elements
- Đặt tất cả border thành 1px #44374a trên bề mặt tối; dùng #e1e4e8 trên bề mặt sáng
- Áp dụng radius 14px cho mọi card-level surfaces và radius 8px cho mọi interactive elements (buttons, inputs)
- Dùng Uncut Sans Variable ở letter-spacing -0.05em cho bất kỳ display text nào từ 38px trở lên
- Áp dụng letter-spacing dương +0.08em cho mọi eyebrow labels và small caps ở 12–14px
- Ghép mọi dimension label, tọa độ, hoặc file path với Martian Mono ở tracking 0.05em
- Duy trì nhịp dọc 64px+ giữa các major sections để giữ cảm giác rộng rãi, kiến trúc

### Không nên
- Không dùng drop shadow nặng — hệ thống border 1px #44374a là ngôn ngữ elevation
- Không dùng radius 9999px cho bất cứ thứ gì ngoài badges và pill-shaped indicators
- Không dùng #000000 đen tinh khiết làm nền — luôn dùng #0f0217 pha tím để giữ đúng thương hiệu
- Không áp dụng Inter làm display headline — nó chỉ là secondary system font
- Không dùng letter-spacing values ngoài bộ đã thiết lập: -0.05em, -0.04em, -0.025em, -0.015em, 0.05em, 0.08em
- Không thêm accent colors khác ngoài #d262ff, #6a1791, và #d97757 — hệ thống chỉ dùng violet
- Không xếp chồng card lên card — hệ thống border 1px phẳng yêu cầu không gian mở, không phải bề mặt lồng nhau

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Void Plum Canvas | `#0f0217` | Primary page background cho dark sections — hero, footer, immersive bands |
| 1 | Eclipse Card | `#0b0211` | Elevated cards và floating panels nằm trên void canvas |
| 2 | Carbon Pill | `#111111` | Badge fills, nested UI elements, và micro-surface tối nhất cho icons |
| 3 | Bone Light Section | `#f7f6f5` | Light content section background — màu trắng ấm phá vỡ dark immersion |
| 4 | Paper Pure | `#ffffff` | Innermost card và surface cho độ tương phản tối đa trong section sáng |

## Elevation

- **Product Card (light section):** `oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- **Accent Card (violet-tinted):** `lab(60.99 37.03 -35.24 / 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- **Image Frame:** `oklab(0 0 0 / 0.03) 0px 0px 0px 1px`

## Imagery

Product screenshots chiếm ưu thế trong ngôn ngữ thị giác: mockups chân thực của chính UI design tool (file trees, canvas, chat panels, mobile device frames) được trình bày như hero content thay vì minh họa trừu tượng. Diagonal gradient mesh backdrop (violet đến tím đậm) tạo chiều sâu không khí phía sau product showcase. Hand-drawn squiggle decorations — icon pen tool và một blob hữu cơ đầy màu sắc — phá vỡ độ chính xác hình học của phần còn lại của hệ thống. Không lifestyle photography, không stock imagery; bản thân công cụ LÀ visual content. Iconography là thin-stroke, mono-color, chủ yếu trong #999999 hoặc #ffffff.

## Layout

Full-bleed dark hero section với centered headline stack, tiếp theo là full-bleed gradient-mesh product showcase band (chuyển từ tối sang sáng), sau đó là light content section với headline canh trái và body text canh phải. Trang dùng max-width 1200px cho contained content trong các full-bleed sections. Nhịp section xen kẽ: dark void → light bone (#f7f6f5) → light bone với cards. Hero pattern là centered headline trên void canvas với một CTA duy nhất bên dưới — không split-screen, không background video. Navigation là minimal top bar với logo trái, hai actions phải, và bottom border mảnh 1px #44374a. Content density thoải mái — khoảng thở dọc rộng rãi (section gaps 64px+) thay vì các khối nhồi nhét thông tin.

## Agent Prompt Guide

**Quick Color Reference**
- text (primary): #ffffff
- text (secondary): #6f6774
- text (muted): #b7b3b9 / #999999
- background (dark): #0f0217
- background (light): #f7f6f5
- border: #44374a (tối) / #e1e4e8 (sáng)
- accent: #d262ff
- primary action: #d262ff (filled action)

**Example Component Prompts**

1. Tạo Primary Action Button: nền #d262ff, text #040106, radius 9999px, padding pill gọn. Dùng filled treatment này cho CTA chính.

2. **Product showcase card panel**: Nền trắng (#ffffff), border-radius 14px, border 1px #e1e4e8, padding 16px. Chứa simulated file tree sidebar (Uncut Sans Variable 12px weight 400 trong #999999 cho items, #111111 cho active) và device mockup frames ở radius 4px. Dimension annotation tag tùy chọn: Martian Mono 10px, letter-spacing 0.5px, text trắng trên pill #111111 ở radius 9999px.

3. **Light feature section**: Nền #f7f6f5. Grid ba cột, max-width 1200px, gap 24px. Mỗi card có nền trong suốt, heading ở 18px Uncut Sans Variable weight 500 trong #180321, body ở 14px trong #737373, line-height 1.5. Không borders, không shadows — whitespace định nghĩa sự phân cách.

4. **Investor/partner logo strip**: Dark band trên #0f0217, một hàng căn giữa 4 logo, gap 80px giữa các logo, mỗi logo cao 24px trong #b7b3b9. Phía trên: eyebrow label 'PROUDLY SUPPORTED BY' trong Uncut Sans Variable 12px weight 500, letter-spacing 1.6px, màu #6f6774.

5. **Decorative squiggle accent**: Minh họa nét mảnh trong #111111 trên section sáng hoặc #d262ff trên section tối, stroke 2px, không fill, kích thước khoảng 40–60px. Đặt làm trang trí không chính thức gần feature cards.

## Dark/Light Section Alternation

Trang được chia cấu trúc thành dark immersive bands và light content bands. Dark bands (hero, gradient mesh, footer) dùng canvas #0f0217 với text trắng và accents #d262ff. Light bands (features, product detail) dùng canvas #f7f6f5 hoặc #ffffff với text #180321 hoặc #111111. Không bao giờ trộn hai loại trong một section — sự chuyển tiếp giữa tối và sáng là một thiết bị cấu trúc có chủ đích tạo nhịp điệu và khoảng thở. Gradient mesh product showcase band đóng vai trò cầu nối giữa tối và sáng, với tia sáng chéo chuyển từ violet góc trên trái sang trong suốt góc dưới phải.

## Similar Brands

- **Linear** — Cùng dark-first void canvas với một accent color rực rỡ duy nhất làm mọi hành động — Linear dùng indigo, Wonder dùng violet, nhưng cả hai đều đạt cùng kỷ luật một-accent-làm-mọi-thứ
- **Vercel** — Triết lý elevation hairline-border-over-shadow giống hệt và cùng cặp monospaced font với geometric sans cho technical annotations
- **Framer** — Cùng dark immersive hero với centered display headline và CTA duy nhất, chuyển sang light product showcase band với realistic UI mockups làm visual content chính
- **Raycast** — Cùng cặp Martian Mono / geometric sans cho technical UI labels, và cùng hệ thống pill-badge ở radius 9999px cho status indicators

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void-plum: #0f0217;
  --color-eclipse-black: #0b0211;
  --color-carbon-ink: #111111;
  --color-lavender-mist: #44374a;
  --color-ghost-violet: #4b4151;
  --color-ash-wisp: #6f6774;
  --color-silver-smoke: #b7b3b9;
  --color-moonstone: #999999;
  --color-paper-white: #ffffff;
  --color-bone: #f7f6f5;
  --color-frost: #f0f0f0;
  --color-laser-violet: #d262ff;
  --color-royal-plum: #6a1791;
  --color-merlot-shadow: #2d063a;
  --color-mulberry-deep: #180321;
  --color-coral-spark: #d97757;

  /* Typography — Font Families */
  --font-uncut-sans-variable: 'Uncut Sans Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-martian-mono: 'Martian 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;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 0.5px;
  --text-body: 14px;
  --leading-body: 1.43;
  --tracking-body: -0.21px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.96px;
  --text-heading: 38px;
  --leading-heading: 1.1;
  --tracking-heading: -1.9px;
  --text-display: 50px;
  --leading-display: 1.12;
  --tracking-display: -2.5px;

  /* 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-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-80: 80px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-cards: 14px;
  --radius-badges: 9999px;
  --radius-images: 4px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;

  /* Shadows */
  --shadow-subtle: oklab(0 0 0 / 0.03) 0px 0px 0px 1px;
  --shadow-subtle-2: oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-subtle-3: oklab(0 0 0 / 0.08) 0px 0px 0px 1px;
  --shadow-subtle-4: lab(60.9935 37.0253 35.2355 / 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;

  /* Surfaces */
  --surface-void-plum-canvas: #0f0217;
  --surface-eclipse-card: #0b0211;
  --surface-carbon-pill: #111111;
  --surface-bone-light-section: #f7f6f5;
  --surface-paper-pure: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void-plum: #0f0217;
  --color-eclipse-black: #0b0211;
  --color-carbon-ink: #111111;
  --color-lavender-mist: #44374a;
  --color-ghost-violet: #4b4151;
  --color-ash-wisp: #6f6774;
  --color-silver-smoke: #b7b3b9;
  --color-moonstone: #999999;
  --color-paper-white: #ffffff;
  --color-bone: #f7f6f5;
  --color-frost: #f0f0f0;
  --color-laser-violet: #d262ff;
  --color-royal-plum: #6a1791;
  --color-merlot-shadow: #2d063a;
  --color-mulberry-deep: #180321;
  --color-coral-spark: #d97757;

  /* Typography */
  --font-uncut-sans-variable: 'Uncut Sans Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-martian-mono: 'Martian 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;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 0.5px;
  --text-body: 14px;
  --leading-body: 1.43;
  --tracking-body: -0.21px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.96px;
  --text-heading: 38px;
  --leading-heading: 1.1;
  --tracking-heading: -1.9px;
  --text-display: 50px;
  --leading-display: 1.12;
  --tracking-display: -2.5px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-80: 80px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: oklab(0 0 0 / 0.03) 0px 0px 0px 1px;
  --shadow-subtle-2: oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-subtle-3: oklab(0 0 0 / 0.08) 0px 0px 0px 1px;
  --shadow-subtle-4: lab(60.9935 37.0253 35.2355 / 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
}
```