# Panxo

> Panxo — Style Reference

## Prompt Content

```
# Panxo — Style Reference
> Data terminal trong tông mực ấm — mọi bề mặt đều gợi giấy sổ cái, mọi điểm nhấn đều giống như một ô được tô sáng trong bảng tính.

**Theme:** light

Panxo mang phong cách một data terminal khoác lên mình tủ đồ của startup — số liệu và chỉ số được đặt ở vị trí trung tâm, nhưng bảng màu lại là kem ấm và gần đen thay vì xanh lạnh. Bề mặt nền là #fafafa nghiêng về #f7f3eb (màu trắng ngà hơi ấm), trong khi khối text chính là màu gần đen đậm #1c1a17 — ấm hơn đen tinh khiết, gần như màu cà phê. Hero visualization sử dụng gradient màu kẹo (teal → violet → amber) làm điểm nhấn màu sắc duy nhất giữa cấu trúc achromatic. Mona Sans ở weight 700 và negative tracking mạnh (-0.04em ở 56px) khiến headline trông nén chặt và có chủ đích — giống nhãn dữ liệu hơn là tuyên bố. Interactive elements sử dụng một màu cam đậm duy nhất (#ff6020) cho CTA, khác biệt với màu violet dùng cho data-highlight (#777eff, #731fff) dùng cho tín hiệu phân loại ngữ nghĩa bên trong UI demo.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Coal Ink | `#1c1a17` | `--color-coal-ink` | Text chính, nền button CTA filled, bề mặt card tối — ấm hơn đen tinh khiết, tránh cảm giác lạnh dù có độ tương phản cao |
| Ledger White | `#fafafa` | `--color-ledger-white` | Nền trang, bề mặt card, badge fill — bề mặt chủ đạo; hơi ấm hơn #ffffff, tạo cảm giác giấy mờ |
| Parchment | `#f7f3eb` | `--color-parchment` | Lớp nền hero section — tông bề mặt ấm nhất, dùng cho vùng không gian lớn |
| Ash | `#f1f1f1` | `--color-ash` | Border, đường kẻ phân cách, ghost button border |
| Slate Mid | `#7e7d7b` | `--color-slate-mid` | Body text phụ, metadata label, muted heading |
| Graphite | `#5a5957` | `--color-graphite` | Text cấp ba, icon stroke, nav link trạng thái mặc định |
| Stone | `#969594` | `--color-stone` | Placeholder text, trạng thái disabled |
| Fossil | `#bab9b8` | `--color-fossil` | Hairline border, divider mờ |
| Smolder | `#ff6020` | `--color-smolder` | Button CTA chính, link trên announcement bar, interactive trigger cường độ cao — cam ấm trên nền gần đen tạo cảm giác khẩn cấp nhưng không hung hăng |
| Signal Violet | `#777eff` | `--color-signal-violet` | Nhãn phân loại dữ liệu, AI confidence highlight, link color bên trong product demo — báo hiệu trí tuệ máy móc thay vì hành động của con người |
| Deep Violet | `#731fff` | `--color-deep-violet` | Điểm nhấn violet phụ, gradient midpoint stop, classification marker đậm hơn |
| Spectrum Gradient | `linear-gradient(90deg, rgb(16, 185, 129) 0%, rgb(168, 85, 247) 50%, rgb(245, 158, 11) 100%)` | `--color-spectrum-gradient` | Nền gradient cho hero demo — dải teal-to-violet-to-amber dùng làm backdrop không gian cho product visualization |
| Mint Pulse | `#05933b` | `--color-mint-pulse` | Badge chỉ báo 'High' của AI Traffic, trạng thái tín hiệu dương |
| Emerald Tag | `#10b981` | `--color-emerald-tag` | Nền success ngữ nghĩa, gradient anchor (đầu xanh của spectrum gradient) |
| Sky Blush | `linear-gradient(rgb(189, 216, 255) 0%, rgb(255, 234, 214) 100%)` | `--color-sky-blush` | Nền gradient dọc hero section (top stop, xanh-trắng) |

## Tokens — Typography

### Mona Sans — Tất cả display và section heading. Variable font tùy chỉnh gần giống GitHub ở weight 700 với -0.04em tracking ở kích thước lớn nén headline thành nhãn dữ liệu dày đặc — chúng đọc như output chính xác thay vì copy marketing. Weight 500 ở 24-32px xử lý subheading. · `--font-mona-sans`
- **Thay thế:** Plus Jakarta Sans hoặc Geist
- **Weights:** 500, 700
- **Kích thước:** 24px, 32px, 40px, 48px, 56px
- **Line height:** 1.00–1.20
- **Letter spacing:** -0.04em ở 56px, -0.03em ở 48–40px, -0.01em ở 32–24px
- **OpenType features:** `"blwf", "cv03", "cv04", "cv09", "cv11"`
- **Vai trò:** Tất cả display và section heading. Variable font tùy chỉnh gần giống GitHub ở weight 700 với -0.04em tracking ở kích thước lớn nén headline thành nhãn dữ liệu dày đặc — chúng đọc như output chính xác thay vì copy marketing. Weight 500 ở 24-32px xử lý subheading.

### Inter — Tất cả body copy, UI label, badge, nav link, button text, card metadata. Dải weight rộng (400 body, 600 stat label, 700 metric numeral) tạo phân cấp nội bộ trong component dày đặc dữ liệu mà không cần đổi font family. · `--font-inter`
- **Thay thế:** Inter (có sẵn miễn phí trên Google Fonts)
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 18px
- **Line height:** 1.20–1.67
- **Letter spacing:** -0.03em ở UI label, +0.02em đến +0.05em ở kích thước badge/caption
- **OpenType features:** `"blwf", "cv03", "cv04", "cv09", "cv11"`
- **Vai trò:** Tất cả body copy, UI label, badge, nav link, button text, card metadata. Dải weight rộng (400 body, 600 stat label, 700 metric numeral) tạo phân cấp nội bộ trong component dày đặc dữ liệu mà không cần đổi font family.

### sans-serif — System fallback cho UI chrome không quan trọng. Không phải lựa chọn thiết kế — browser default trong trường hợp ngoại lệ. · `--font-sans-serif`
- **Thay thế:** Inter
- **Weights:** 400
- **Kích thước:** 12px
- **Line height:** 1.20
- **Vai trò:** System fallback cho UI chrome không quan trọng. Không phải lựa chọn thiết kế — browser default trong trường hợp ngoại lệ.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 10px | 1.2 | 0.5px | `--text-caption` |
| body | 14px | 1.5 | — | `--text-body` |
| heading-sm | 24px | 1.2 | -0.24px | `--text-heading-sm` |
| heading | 32px | 1.13 | -0.96px | `--text-heading` |
| heading-lg | 48px | 1 | -1.44px | `--text-heading-lg` |
| display | 56px | 1 | -2.24px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### 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` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 88 | 88px | `--spacing-88` |
| 96 | 96px | `--spacing-96` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| cards | 10px |
| badges | 6-8px |
| images | 8px |
| buttons | 48px (filled primary), 999px (outlined/ghost), 20px (filter chips) |
| demoPanels | 12-20px |
| inputFields | 12px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| subtle | `rgba(95, 99, 106, 0.08) 0px 0px 0px 1px, rgba(43, 43, 48,...` | `--shadow-subtle` |
| subtle-2 | `rgba(95, 99, 106, 0.12) 0px 0px 0px 1px, rgba(43, 43, 48,...` | `--shadow-subtle-2` |

### Layout

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

## Components

### Primary Filled CTA Button
**Vai trò:** Hành động ưu tiên cao nhất: 'Get Started', 'Try Free'

Nền #1c1a17, text trắng (#ffffff), border-radius 48px, padding 7px 12px. Ở tỷ lệ nav: pill nhỏ gọn. Màu gần đen phân biệt nó với cam (#ff6020) dùng cho announcement CTA — nav primary action mang tính uy quyền, không khẩn cấp.

### Outlined Ghost Button
**Vai trò:** Hành động phụ: 'Explore Marketplace', 'Sign In'

Nền trong suốt, text #1c1a17 ở độ mờ 72%, border 1px solid rgba(0,0,0,0.12), border-radius 20px, padding 8px 16px. Màu text bán trong suốt trên nền gần trắng tạo cảm giác thụ động có chủ đích — thu hút mắt vào filled CTA mà không biến mất.

### White Card Button / Chip
**Vai trò:** Clickable panel trigger, demo tab selector

Nền #ffffff, text dùng accent color (#777eff), border 1px solid #f1f1f1, border-radius 12px, padding 24px. Các phần tử này đóng vai trò kép: vừa là filter pill vừa là bề mặt card tương tác trong product demo UI.

### Filter Pill
**Vai trò:** Bộ lọc danh mục Publisher Directory: 'All 1291', 'Arts & Entertainment'

Nền trong suốt, border 1px solid rgba(0,0,0,0.12), border-radius 999px, padding 7px 12px, text Inter 400 14px #1c1a17 ở độ mờ 72%. Trạng thái active chưa được chỉ định đầy đủ nhưng được ngụ ý bằng nền filled #1c1a17.

### Content Card (Light)
**Vai trò:** Card danh sách Publisher Directory, card giải thích tính năng

Nền #fafafa, border-radius 10px, không shadow, không border. Nội dung bên trong dùng Inter 400 14px body text màu #5a5957, tên publisher in đậm màu #1c1a17 Inter 600 15px. Hàng dưới cùng hiển thị metric badge màu (Mint Pulse xanh cho 'High AI Traffic', cam cho doanh thu).

### Dark Stat Card
**Vai trò:** Trust/social proof hero metric, 'Trusted by publishers' card

Nền radial-gradient(81% 66% at 1.8% 1.1%, #545454 0%, #1c1a17 100%), border-radius 10px, text trắng. Headline Inter 700 ở kích thước display, sub-label Inter 400 14px trắng ở độ mờ 70%. Card tối duy nhất này neo giữ lưới 4 cột stats.

### Metric Stat Cell
**Vai trò:** Hiển thị KPI số: '$0M+ Paid to Publishers', '0M+ AI Reach'

Nền #fafafa, border-radius 10px, không shadow. Label Inter 400 14px #7e7d7b ở trên, numeral Mona Sans 700 40-48px #1c1a17 với -0.03em tracking. Padding nhỏ gọn 24px bên trong cell.

### Category Badge
**Vai trò:** Thẻ phân loại trên publisher card: 'Internet & Telecom', 'en', 'Arts & Entertainment'

Nền #fafafa, text Inter 400 12px #52525b, border-radius 6px, padding 4px 10px. Xếp ngang với khoảng cách 4px. Không border — độ tương phản nền/bề mặt tạo sự phân biệt.

### Announcement Bar
**Vai trò:** Dải quảng bá sự kiện đầu trang

Nền full-bleed #000000, text body Inter 400 14px trắng căn giữa, link text 'Schedule a meeting' màu cam (#ff6020) ở bên phải. Chiều cao cố định ~36px. Là phần tử đen full-bleed duy nhất trên trang sáng — ngay lập tức thu hút sự chú ý.

### Top Navigation Bar
**Vai trò:** Site navigation cố định

Nền #ffffff, border-bottom 1px solid #f1f1f1, chiều cao ~60px. Bên trái: wordmark Mona Sans 'panxo' + label 'AI' Inter 500 11px. Giữa: nav link Inter 500 14px màu #5a5957 với chevron dropdown. Phải: ghost text 'Sign In', pill 'Get Started' #1c1a17 radius 48px. Badge 'Early Access' dùng màu xanh #10b981 với Inter 600 10px uppercase tracking.

### Product Demo UI Card
**Vai trò:** Hero section interactive visualization của AI traffic classification

Card nền trắng với radius 12-20px, shadow: rgba(95,99,106,0.08) 0 0 0 1px + rgba(43,43,48,0.1) 0 1px 4px. Tab bên trong dùng mẫu White Card Button / Chip. Body text hiển thị inline color-coded classification: #777eff cho AI source tag, #731fff cho segment label, #ff6020 cho CPM value, #05933b cho confidence percentage.

### Spectrum Gradient Panel
**Vai trò:** Hero visualization backdrop, atmospheric visual section divider

linear-gradient(90deg, #10b981 0%, #a855f7 50%, #f59e0b 100%) áp dụng cho panel lớn có chứa, border-radius 15px hoặc full-bleed. Đây là phần tử có độ bão hòa màu cao duy nhất của site — mọi màu sắc khác đều mang tính chức năng dữ liệu.

### Trust Logo Strip
**Vai trò:** Social proof publisher logo: Business Insider, Yahoo Finance, Investing.com

Thanh cuộn ngang toàn chiều rộng trên nền trắng. Logo hiển thị ở chế độ grayscale (#000000 hoặc desaturated), khớp Inter weight, không border hoặc card. Trọng lượng thị giác bằng nhau giữa các thương hiệu — không có vị trí nổi bật.

## Do's and Don'ts

### Do
- Dùng Mona Sans weight 700 với letter-spacing -0.04em cho tất cả headline từ 40px trở lên — tracking nén là signature của headline.
- Giữ màu cam #ff6020 chỉ dành riêng cho CTA và link quảng bá; không bao giờ dùng cho data label hoặc classification UI — vai trò đó thuộc về #777eff và #731fff.
- Dùng border-radius 48px cho filled primary button và 999px cho outlined/ghost button — sự bất đối xứng giữa hai loại là có chủ đích.
- Áp dụng gradient teal→violet→amber (linear-gradient(90deg, #10b981 0%, #a855f7 50%, #f59e0b 100%)) chỉ cho panel không gian lớn hoặc product visualization backdrop, không bao giờ cho text hoặc UI element nhỏ.
- Xây dựng data metric cell bằng Mona Sans 700 cho numeral và Inter 400 cho label — việc trộn hai font family tạo phân cấp 'terminal readout' bên trong một card.
- Dùng #fafafa (không phải #ffffff) làm nền card mặc định — màu trắng ngà hơi ấm khớp với độ ấm cấp trang và ngăn card trôi nổi khỏi trang.
- Dùng Inter font-feature-settings '"cv03", "cv04", "cv09", "cv11"' một cách nhất quán — các OpenType alternates này hoạt động toàn site và ảnh hưởng đến nhận dạng ký tự.

### Don't
- Không bao giờ dùng #ffffff tinh khiết làm nền section — #fafafa hoặc #f7f3eb là bề mặt trung tính ấm chính xác; màu trắng tinh khiết chỉ xuất hiện ở card interior hoặc overlay.
- Không áp dụng box-shadow nặng hơn rgba(43,43,48,0.1) 0px 1px 4px — shadow sâu hơn phá vỡ thẩm mỹ bề mặt dữ liệu phẳng.
- Không bao giờ dùng #777eff hoặc #731fff cho interactive control hoặc CTA button — các màu violet này là semantic data-classification color, không phải brand action color.
- Không dùng Mona Sans dưới 24px — nó chỉ là display/heading face; Inter xử lý tất cả body và UI text ở 18px trở xuống.
- Tránh card border-radius trên 20px — hệ thống dùng 8-12px cho badge, 10px cho card, và dành radius lớn (48-999px) chỉ cho button pill.
- Không thêm nền màu cho category badge — chúng dùng fill #fafafa không border; thêm màu hoặc border sẽ phá vỡ phân cấp taxonomy.
- Không bao giờ dùng spectrum gradient làm text color hoặc button background — nó chỉ tồn tại như phần tử panel không gian có chứa.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Page Base | `#f7f3eb` | Hero section và nền không gian lớn — bề mặt ấm nhất |
| 1 | App Surface | `#fafafa` | Nền trang mặc định và card fill |
| 2 | Elevated Card | `#ffffff` | Card tương tác và panel demo UI với micro-shadow |
| 3 | Inverse Surface | `#1c1a17` | Dark stat card và primary CTA button fill |

## Elevation

Panxo sử dụng elevation gần như bằng không — phần lớn card có boxShadow: none, dựa vào độ tương phản background-color (card #fafafa so với trang #ffffff hoặc #f7f3eb) để tạo chiều sâu. Ở nơi shadow xuất hiện, nó cực kỳ tinh tế: rgba(95,99,106,0.08) 0px 0px 0px 1px (vòng thay thế border) + rgba(43,43,48,0.1) 0px 1px 4px (micro lift). Điều này giữ cho UI đọc như bề mặt dữ liệu phẳng thay vì vật thể vật lý xếp lớp.

## Imagery

Hero section sử dụng product demo UI có chứa làm hình ảnh chính — giao diện card-trong-card hiển thị AI traffic classification theo thời gian thực, nổi trên gradient pastel ấm (xanh da trời chuyển sang hồng đào). Không có photography ở bất kỳ đâu trên trang. Nền gradient phía sau demo là bầu không khí trang trí, không phải thông tin. Publisher directory card dùng brand logo tỷ lệ favicon nhỏ làm iconography duy nhất — hình tròn, cô lập, giống tem. Stat/metric block là typography-as-imagery: numeral cỡ lớn ($0M+, 0M+) hoạt động như hero graphic. Icon usage tối giản kiểu outlined, đơn sắc, stroke weight thấp, dùng tiết kiệm trong tab demo UI (search, person, chart icon). Trust logo (Business Insider, Yahoo Finance, Investing.com) xuất hiện trong dải grayscale ngang — desaturated, trọng lượng bằng nhau, không xử lý đặc biệt. Trang có tính text-dominant cao; imagery chiếm dưới 20% không gian thị giác.

## Layout

Max-width ~1200px căn giữa trên trang trắng đến gần trắng. Navigation là sticky top bar: wordmark neo trái + badge 'AI', nav link trung tâm với chevron dropdown, link text 'Sign In' và filled pill CTA 'Get Started' neo phải. Phía trên nav chính là announcement bar đen full-bleed với copy sự kiện căn giữa và link text 'Schedule a meeting' màu cam. Hero là split hai cột bất đối xứng — cột trái chứa label + headline + CTA button, cột phải chứa body paragraph. Bên dưới fold là card-panel toàn chiều rộng chứa product demo UI. Stats section dùng lưới 4 cột (1 card tối + 3 metric card) với chiều rộng cột bằng nhau. Publisher directory dùng lưới card 3 cột. Các section xen kẽ giữa dải trắng và gần trắng (#fafafa) không có divider cứng — dòng chảy liền mạch. Nhịp điệu dọc rộng rãi (80-120px giữa các section) dù base unit nhỏ gọn.

## Gradient System

Ba loại gradient, mỗi loại có vai trò riêng biệt:

1. **Spectrum Gradient** (hero/demo backdrop): linear-gradient(90deg, #10b981 0%, #a855f7 50%, #f59e0b 100%) — phần tử full-chroma duy nhất của site, dùng ở tỷ lệ panel.

2. **Warm Blush** (hero section background): linear-gradient(#bdd8ff 0%, #ffeaD6 100%) — xanh da trời đến hồng đào ấm, dùng làm khung hero phía sau product demo card.

3. **Dark Card Gradient** (stat card): radial-gradient(81% 66% at 1.8% 1.1%, #545454 0%, #1c1a17 100%) — thêm chiều sâu cho bề mặt tối duy nhất mà không rời khỏi họ gần đen.

Radial spot gradient xuất hiện dưới dạng ánh sáng màu mềm bên trong Spectrum panel: vòng tròn vàng (#ffbf41), hồng (#f34fdd), và cam (#ff6020) mờ dần thành trong suốt — dùng làm nguồn sáng xung quanh trong visualization backdrop.

## Agent Prompt Guide

**Quick Color Reference:**
- Primary text: #1c1a17
- Page background: #fafafa
- Warm hero surface: #f7f3eb
- Primary CTA: #ff6020 (cam) hoặc #1c1a17 (filled pill)
- Data/accent links: #777eff (violet)
- Border/divider: #f1f1f1
- Success/AI signal: #05933b

**Example Component Prompts:**

1. **Hero Section:** Nền trắng/parchment (#f7f3eb). Cột trái: eyebrow label 'AI AUDIENCE INTELLIGENCE' ở Inter 500 12px #5a5957 tracking +0.05em uppercase. Headline 'Where conversations become revenue.' ở Mona Sans 700 56px #1c1a17, letter-spacing -2.24px, line-height 1.0. Hàng hai button: filled (#1c1a17 bg, text trắng, radius 48px, padding 7px 12px) + ghost (transparent bg, text #1c1a17 72%, border rgba(0,0,0,0.12), radius 20px, padding 8px 16px). Cột phải: body text Inter 400 16px #7e7d7b.

2. **Publisher Directory Card:** Nền #fafafa, border-radius 10px, không shadow, padding 24px. Hàng trên: logo favicon tròn 40px + tên domain Inter 600 15px #1c1a17 + công ty mẹ Inter 400 13px #7e7d7b. Body: mô tả hai dòng Inter 400 14px #5a5957. Hàng tag: category badge (nền #fafafa, text #52525b, radius 6px, padding 4px 10px). Hàng dưới: ba cột metric mỗi cột có dot indicator màu, label uppercase Inter 600 11px màu #7e7d7b, và value Inter 700 13px màu brand (#05933b cho 'High', #ff6020 cho '$100K+').

3. **Stat Metric Cell:** Nền #fafafa, border-radius 10px, padding 24px, không shadow. Label: Inter 400 14px #7e7d7b. Numeral: Mona Sans 700 48px #1c1a17, letter-spacing -1.44px. Unit suffix gắn trực tiếp không khoảng cách.

4. **Dark Trust Card:** Nền radial-gradient(81% 66% at 1.8% 1.1%, #545454 0%, #1c1a17 100%), border-radius 10px, padding 24px. Headline: Mona Sans 700 32px #ffffff, line-height 1.13. Subtext: Inter 400 14px rgba(255,255,255,0.7). Inline text highlight: Inter 700 14px #10b981.

5. **Announcement Bar:** Nền full-bleed #000000, chiều cao 36px, căn giữa dọc. Body text: Inter 400 14px #ffffff. Bullet separator • màu #5a5957. CTA text link: Inter 600 14px #ff6020, không underline, hover underline.

## Similar Brands

- **Clearbit** — Cùng bảng màu trung tính ấm với primary gần đen và CTA cam duy nhất trên nền tảng data intelligence
- **Segment** — Xử lý headline nén gần giống Mona Sans với Inter body trên SaaS data product sáng
- **Primer.io** — Adtech hướng đến publisher với lưới card phẳng, typography hiển thị metric ở tỷ lệ display, và bề mặt shadow thấp
- **Chartbeat** — UI dữ liệu khán giả thời gian thực với nền trắng ngà ấm, dải logo đơn sắc, và mẫu stat-as-hero

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-coal-ink: #1c1a17;
  --color-ledger-white: #fafafa;
  --color-parchment: #f7f3eb;
  --color-ash: #f1f1f1;
  --color-slate-mid: #7e7d7b;
  --color-graphite: #5a5957;
  --color-stone: #969594;
  --color-fossil: #bab9b8;
  --color-smolder: #ff6020;
  --color-signal-violet: #777eff;
  --color-deep-violet: #731fff;
  --color-spectrum-gradient: #a855f7;
  --gradient-spectrum-gradient: linear-gradient(90deg, rgb(16, 185, 129) 0%, rgb(168, 85, 247) 50%, rgb(245, 158, 11) 100%);
  --color-mint-pulse: #05933b;
  --color-emerald-tag: #10b981;
  --color-sky-blush: #bdd8ff;
  --gradient-sky-blush: linear-gradient(rgb(189, 216, 255) 0%, rgb(255, 234, 214) 100%);

  /* Typography — Font Families */
  --font-mona-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 0.5px;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.24px;
  --text-heading: 32px;
  --leading-heading: 1.13;
  --tracking-heading: -0.96px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.44px;
  --text-display: 56px;
  --leading-display: 1;
  --tracking-display: -2.24px;

  /* 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-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-100: 100px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-xl-2: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 29.5px;
  --radius-full: 48px;
  --radius-full-2: 55px;
  --radius-full-3: 699.3px;
  --radius-full-4: 856.29px;
  --radius-full-5: 999px;

  /* Named Radii */
  --radius-cards: 10px;
  --radius-badges: 6-8px;
  --radius-images: 8px;
  --radius-buttons: 48px (filled primary), 999px (outlined/ghost), 20px (filter chips);
  --radius-demopanels: 12-20px;
  --radius-inputfields: 12px;

  /* Shadows */
  --shadow-subtle: rgba(95, 99, 106, 0.08) 0px 0px 0px 1px, rgba(43, 43, 48, 0.1) 0px 1px 1px 0px;
  --shadow-subtle-2: rgba(95, 99, 106, 0.12) 0px 0px 0px 1px, rgba(43, 43, 48, 0.1) 0px 1px 4px 0px;

  /* Surfaces */
  --surface-page-base: #f7f3eb;
  --surface-app-surface: #fafafa;
  --surface-elevated-card: #ffffff;
  --surface-inverse-surface: #1c1a17;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-coal-ink: #1c1a17;
  --color-ledger-white: #fafafa;
  --color-parchment: #f7f3eb;
  --color-ash: #f1f1f1;
  --color-slate-mid: #7e7d7b;
  --color-graphite: #5a5957;
  --color-stone: #969594;
  --color-fossil: #bab9b8;
  --color-smolder: #ff6020;
  --color-signal-violet: #777eff;
  --color-deep-violet: #731fff;
  --color-spectrum-gradient: #a855f7;
  --color-mint-pulse: #05933b;
  --color-emerald-tag: #10b981;
  --color-sky-blush: #bdd8ff;

  /* Typography */
  --font-mona-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 0.5px;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.24px;
  --text-heading: 32px;
  --leading-heading: 1.13;
  --tracking-heading: -0.96px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.44px;
  --text-display: 56px;
  --leading-display: 1;
  --tracking-display: -2.24px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-100: 100px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-xl-2: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 29.5px;
  --radius-full: 48px;
  --radius-full-2: 55px;
  --radius-full-3: 699.3px;
  --radius-full-4: 856.29px;
  --radius-full-5: 999px;

  /* Shadows */
  --shadow-subtle: rgba(95, 99, 106, 0.08) 0px 0px 0px 1px, rgba(43, 43, 48, 0.1) 0px 1px 1px 0px;
  --shadow-subtle-2: rgba(95, 99, 106, 0.12) 0px 0px 0px 1px, rgba(43, 43, 48, 0.1) 0px 1px 4px 0px;
}
```