# Cycle

> Cycle — Style Reference

## Prompt Content

```
# Cycle — Style Reference
> Xưởng gốm nhuốm mực với nhãn màu ngọc

**Theme:** light

Ngôn ngữ thị giác của Cycle mang phong cách một không gian làm việc analog ấm áp — nền canvas hơi ngả trắng, chữ đen như mực, và bảng màu ngọc đậm gợi cảm giác lọ mực cổ điển hơn là accent SaaS. Headline dùng Eudoxus Sans weight nặng với tracking dày, tạo cho mọi tiêu đề cảm giác có khối lượng vật lý; body và UI mặc định dùng Inter ở cỡ 14–16px thoải mái. Các component nằm trên hệ thống shadow rất mềm (warm gray độ trong suốt thấp) thay vì đường viền cứng, và border-radius 20px lớn khiến card trông như gạch men. Màu sắc mang tính chức năng và phân loại — mỗi product agent hoặc cụm tính năng có một màu đậm riêng (teal, violet, amber, maroon) và nền pha màu riêng, không bao giờ dùng gradient trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink Black | `#171618` | `--color-ink-black` | Văn bản chính, icon, bề mặt tối — màu trung tính chủ đạo; không bao giờ dùng pure #000 cho text |
| Pure Black | `#000000` | `--color-pure-black` | Màu trung tính hỗ trợ tối cho text, icon và độ tương phản mạnh. Không dùng làm màu CTA chính |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, modal panel, text trên nút tối — bề mặt sáng nhất trong hệ thống |
| Warm Canvas | `#f7f7f7` | `--color-warm-canvas` | Nền trang, đường phân cách section nhẹ — màu trắng ngà tạo cảm giác analog ấm áp |
| Mist Gray | `#efefef` | `--color-mist-gray` | Đường viền mảnh, nền input, đường kẻ phân cách — màu trung tính cấu trúc nhẹ nhàng nhất |
| Stone Gray | `#dadada` | `--color-stone-gray` | Viền nút, đường viền disabled |
| Pewter | `#bababa` | `--color-pewter` | Màu shadow nhẹ, placeholder text trong ngữ cảnh ít quan trọng |
| Iron | `#727578` | `--color-iron` | Văn bản phụ, nav link, body copy nhạt — mid-gray làm việc chính |
| Lead | `#8b8d8f` | `--color-lead` | Nav cấp ba, breadcrumb separator |
| Pebble | `#7d7d7d` | `--color-pebble` | Badge text, metadata label |
| Deep Teal | `#004d60` | `--color-deep-teal` | Accent sản phẩm — Pathfinder agent, danh mục data-viz, nền section pha teal |
| Deep Violet | `#38296c` | `--color-deep-violet` | Accent sản phẩm — VoiceHunter agent, danh mục tính năng chính, section violet wash |
| Deep Amber | `#6c4800` | `--color-deep-amber` | Accent sản phẩm — LoopCloser agent, nền section pha vàng và callout ấm |
| Deep Plum | `#46122d` | `--color-deep-plum` | Accent sản phẩm — agent hoặc danh mục tính năng bổ sung, kết hợp với nền hồng nhạt |
| Deep Navy | `#0f1c41` | `--color-deep-navy` | Accent sản phẩm — danh mục analytics hoặc infrastructure |
| Deep Maroon | `#663220` | `--color-deep-maroon` | Accent sản phẩm — heading accent trên trang tông ấm |
| Deep Umber | `#772914` | `--color-deep-umber` | Accent sản phẩm — danh mục tông gỉ sắt, icon và illustration accent |
| Deep Indigo | `#241a42` | `--color-deep-indigo` | Accent sản phẩm — biến thể tối của violet dùng cho heading và iconography trên bề mặt sáng |
| Burnt Sienna | `#412e0a` | `--color-burnt-sienna` | Amber tối — heading text khi cần xử lý tông ấm; Yellow hỗ trợ accent cho chi tiết trang trí và điểm nhấn tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |
| Violet Wash | `#f5f0ff` | `--color-violet-wash` | Nền pha màu nhẹ — section panel tính năng, nền agent card |
| Teal Mist | `#defafe` | `--color-teal-mist` | Nền pha màu nhẹ — section panel danh mục teal |
| Amber Cream | `#fff6e1` | `--color-amber-cream` | Nền pha màu nhẹ — section panel danh mục vàng |
| Apricot Wash | `#fff1ec` | `--color-apricot-wash` | Nền pha màu nhẹ — section panel phụ tông ấm |
| Violet Veil | `#e7e0fe` | `--color-violet-veil` | Nền badge và small card — danh mục violet |
| Sky Tint | `#cfeff8` | `--color-sky-tint` | Nền badge và small card — danh mục teal |
| Honey Veil | `#feedcc` | `--color-honey-veil` | Gray hỗ trợ accent cho chi tiết trang trí và điểm nhấn tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |

## Tokens — Typography

### Inter — Tất cả UI, body, nav, button và badge text — body ở 14–16px/400, nav và label ở 12–13px/500, button text ở 14–16px/500, inline emphasized text ở 600 · `--font-inter`
- **Thay thế:** Inter (đã có sẵn miễn phí)
- **Weights:** 400, 500, 600
- **Cỡ:** 12px, 13px, 14px, 15px, 16px, 21px, 27px
- **Line height:** 0.94–1.74
- **Letter spacing:** -0.011em ở 16–27px, -0.01em ở 14–15px, normal ở 12–13px
- **Vai trò:** Tất cả UI, body, nav, button và badge text — body ở 14–16px/400, nav và label ở 12–13px/500, button text ở 14–16px/500, inline emphasized text ở 600

### Eudoxus Sans — Tất cả display và heading copy — hero ở 58px/800, section heading ở 48px/800, sub-heading ở 32px/700; tracking -0.035em chặt ở cỡ display và weight nặng tạo cho headline cảm giác vật lý, điêu khắc, tương phản với body làm việc của Inter · `--font-eudoxus-sans`
- **Thay thế:** Cabinet Grotesk Bold, Söhne Breit, hoặc Plus Jakarta Sans 800
- **Weights:** 700, 800
- **Cỡ:** 21px, 23px, 32px, 48px, 58px
- **Line height:** 1.00–1.40
- **Letter spacing:** -0.035em ở 48–58px, -0.029em ở 32px, -0.026em ở 21–23px
- **Vai trò:** Tất cả display và heading copy — hero ở 58px/800, section heading ở 48px/800, sub-heading ở 32px/700; tracking -0.035em chặt ở cỡ display và weight nặng tạo cho headline cảm giác vật lý, điêu khắc, tương phản với body làm việc của Inter

### Karla — Karla — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-karla`
- **Weights:** 400
- **Cỡ:** 21px
- **Line height:** 1.4
- **Vai trò:** Karla — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|------|
| caption | 12px | 1.4 | — | `--text-caption` |
| body | 15px | 1.62 | -0.1px | `--text-body` |
| subheading | 21px | 1.4 | -0.23px | `--text-subheading` |
| heading-sm | 27px | 1.18 | -0.3px | `--text-heading-sm` |
| heading | 32px | 1.2 | -0.93px | `--text-heading` |
| heading-lg | 48px | 1.05 | -1.68px | `--text-heading-lg` |
| display | 58px | 1 | -2.03px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 21 | 21px | `--spacing-21` |
| 22 | 22px | `--spacing-22` |
| 24 | 24px | `--spacing-24` |
| 26 | 26px | `--spacing-26` |
| 28 | 28px | `--spacing-28` |
| 31 | 31px | `--spacing-31` |
| 32 | 32px | `--spacing-32` |
| 42 | 42px | `--spacing-42` |
| 66 | 66px | `--spacing-66` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 20px |
| badges | 100px |
| images | 12px |
| inputs | 20px |
| buttons | 8px |
| largeSurfaces | 27px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| md | `rgba(239, 239, 239, 0.55) 0px 2px 15px 0px` | `--shadow-md` |
| subtle | `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.12) ...` | `--shadow-subtle` |
| subtle-2 | `rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0...` | `--shadow-subtle-2` |
| subtle-3 | `rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0...` | `--shadow-subtle-3` |

### Layout

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

## Components

### Primary CTA Button
**Vai trò:** Hành động chính — Book a demo, Sign up

Nền #000000 đặc, text #ffffff ở 14px Inter weight 500, border-radius 8px, padding ngang 22px / dọc 10px. Drop shadow hai lớp nhẹ: 0 1px 2px rgba(0,0,0,0.08) + 0 0.5px 0 rgba(0,0,0,0.12). Không viền.

### Ghost / Outlined Button
**Vai trò:** Hành động phụ — Watch video, Explore product agents

Nền trong suốt, viền #171618 dày 1px, border-radius 8px, padding 22px / 10px, 14px Inter weight 500. Đặt cạnh primary CTA trong hero.

### Navigation Bar
**Vai trò:** Điều hướng cấp cao nhất của site

Thanh trong suốt trên nền trắng, logo bên trái (mark #000000), nav link bằng Inter 14px/500 #171618, bên phải là link Log in và một primary CTA button nhỏ gọn.

### Logo Mark
**Vai trò:** Neo nhận diện thương hiệu

Cycle dot+wordmark màu #000000 — một glyph hình tròn nhỏ theo sau là 'Cycle' bằng Inter 14px/600; xuất hiện lại trong product UI như một in-app breadcrumb mark.

### Hero Section
**Vai trò:** Tuyên bố thương hiệu phía trên fold

Nền trắng full-width, headline Eudoxus Sans 800 58px canh giữa ('Together we ship alone'), subtitle Inter 400 21px màu #727578, nhóm hai nút canh giữa. Hai bên là nhân vật mascot 3D (khuôn mặt blob màu ngọc có mũ) — trang trí, không thuộc grid.

### Customer Logo Strip
**Vai trò:** Dải bằng chứng xã hội

Hai hàng logo khách hàng đơn sắc #727578 / độ mờ 60% trên nền warm canvas, không có divider, row gap 21px.

### Product Screenshot Card
**Vai trò:** Hình ảnh hóa sản phẩm

Card trắng trên nền warm canvas, border-radius 20px, padding 24px, image radius bên trong 12px, shadow nhiều lớp mềm (1px ink hairline + 16px/6px warm blurs). Chứa mockup UI sản phẩm hiển thị tổ chức phản hồi.

### Category Tinted Section
**Vai trò:** Khối nội dung mã màu theo tính năng

Nền pha màu full-bleed — một trong các màu #f5f0ff, #defafe, #fff6e1, hoặc #fff1ec — với card border-radius 20px bên trong, layout 3 cột hoặc 3 hàng, mỗi card đại diện cho một product agent với accent màu ngọc đậm tương ứng.

### Agent / Feature Card
**Vai trò:** Ô năng lực sản phẩm riêng lẻ

Bề mặt trắng trên nền pha màu, border-radius 20px, padding 24px, heading Eudoxus Sans 800 32px màu brand đậm, body Inter 14–15px màu #171618, badge nhỏ tùy chọn với pill radius 100px trên nền accent pha màu.

### Category Badge
**Vai trò:** Thẻ nội tuyến cho khu vực, nguồn hoặc trạng thái

Pill radius 100px, nền pha màu (một trong các màu #e7e0fe, #cfeff8, #feedcc), text Inter 500 12px màu mực đậm tương ứng, padding dọc 6px / ngang 9px.

### Primary Nav Link
**Vai trò:** Mục menu trong thanh trên cùng

Inter 14px weight 500, #171618, không gạch chân; icon chevron-down bên cạnh mục dropdown; active state dùng weight 600.

### In-Product Sidebar Item
**Vai trò:** Điều hướng workspace bên trong product UI

Inter 13px weight 500, #171618, canh trái với icon nhỏ dẫn đầu, padding dọc 8px, hover wash nhẹ màu #f7f7f7.

### Search Input
**Vai trò:** Trường tìm kiếm workspace

Input full-width với viền 1px #efefef, border-radius 20px, placeholder Inter 400 12px màu #727578, padding dọc 12px / ngang 14px, focus state làm đậm viền thành #171618.

### Filter Pill
**Vai trò:** Chip bộ lọc đang hoạt động trong product UI

Hình pill (border-radius 100px), nền trắng, viền 1px #efefef, text Inter 500 12px, icon X nhỏ ở cuối màu #727578.

## Do's and Don'ts

### Do
- Dùng nền #000000 + text #ffffff cho hành động chính duy nhất trên mỗi màn hình; không bao giờ thêm màu CTA nền thứ hai trong cùng một viewport.
- Ghép mỗi accent brand đậm (#38296c, #004d60, #6c4800, #46122d) với nền pha màu tương ứng — violet text trên #f5f0ff, teal trên #defafe, amber trên #fff6e1, maroon trên apricot wash — để giữ hệ thống phân loại dễ đọc.
- Đặt tất cả display headline bằng Eudoxus Sans 700–800 với tracking từ -0.026em đến -0.035em; không bao giờ dùng Inter trên 27px.
- Dùng border-radius 20px cho card, 8px cho nút và 100px cho badge/tag — ba bán kính này định hình silhouette của hệ thống.
- Neo body text bằng Inter 14–15px weight 400 với line-height 1.62; chỉ dùng 600 cho inline emphasis, không bao giờ cho toàn bộ đoạn văn.
- Xếp lớp soft shadow đặc trưng (rgba(239,239,239,0.55) 0 2px 15px) bên dưới card trắng trên nền warm canvas; tránh viền cứng trên bề mặt nâng cao.
- Dùng #f7f7f7 làm nền trang và #ffffff cho card để giữ cảm giác analog trắng ngà ấm áp — không bao giờ dùng #ffffff thuần cho full-page canvas.

### Don't
- Không dùng #000000 cho body hoặc heading text — #171618 là màu mực duy nhất; pure black chỉ dành cho CTA fill và logo mark.
- Không thêm màu accent sáng hoặc bão hòa (xanh điện, xanh neon, v.v.) — mọi giá trị màu sắc trong hệ thống đều là tông ngọc đậm, dịu.
- Không đặt body hoặc product UI text bằng Eudoxus Sans — đây là display face; Inter xử lý mọi thứ từ caption 12px đến sub-heading 27px.
- Không dùng border-radius sắc 4px hoặc 0px cho card hoặc input — độ mềm mại của hệ thống đến từ các đường cong 20px / 12px / 8px.
- Không xếp nhiều nút CTA màu trong cùng một view; hệ thống chỉ có một hành động nền đen đặc cộng với ghost/outlined secondary actions trên mỗi bề mặt.
- Không áp gradient cho nền hoặc nút — bảng màu dựa trên tông phẳng đậm và nền pha màu để tạo chiều sâu.
- Không dùng màu brand sắc độ cho gradient trang trí hoặc nền tràn lớn — chúng thuộc về text, icon và các element accent nhỏ kết hợp với nền pha màu.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Warm Canvas | `#f7f7f7` | Nền trang — màu trắng ngà làm nền tảng cho mọi thứ |
| 1 | Paper White | `#ffffff` | Bề mặt card, modal và component nâng cao |
| 2 | Tinted Wash | `#f5f0ff` | Nền section mã màu theo danh mục — biến thể violet, teal, amber, apricot |
| 3 | Ink Overlay | `#171618` | Section tối đảo ngược và khung mockup sản phẩm |

## Elevation

- **Card (paper white trên warm canvas):** `0px 2px 15px 0px rgba(239, 239, 239, 0.55)`
- **Khung product screenshot:** `0px 0px 0px 1px rgba(23, 24, 26, 0.1), 0px 16px 16px 0px rgba(23, 24, 26, 0.03), 0px 6px 12px 0px rgba(23, 24, 26, 0.05)`
- **Card phụ hoặc input:** `0px 0px 0px 1px rgba(23, 24, 26, 0.1), 0px 8px 16px 0px rgba(23, 24, 26, 0.03)`
- **Primary CTA button:** `0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12)`

## Imagery

Ngôn ngữ thị giác của site kết hợp ba chế độ: (1) Nhân vật mascot 3D trong hero — sinh vật blob mềm, tròn với khuôn mặt biểu cảm và mũ, được render bằng toàn bộ bảng màu ngọc đậm (teal, violet, amber, hồng) với ambient shadow nhẹ; chúng trôi nổi như nhân vật độc lập với các hình confetti hình học nhỏ, không bao giờ ghép vào nền. (2) Ảnh chụp màn hình UI sản phẩm — bản chụp full-bleed sắc nét của workspace Cycle thực tế hiển thị danh sách phản hồi, sidebar và search input, được trình bày trong khung card trắng trên nền warm canvas. (3) Iconography — icon dạng đường nét nhỏ trong toàn bộ product UI ở stroke weight 16–20px, đơn sắc #171618 hoặc khớp với màu danh mục đang hoạt động. Không có ảnh chụp, không có gradient nghệ thuật trừu tượng, không có illustration ngoài mascot. Imagery thưa thớt và có chủ đích: mascot neo sự ấm áp của thương hiệu, product screenshot làm công việc giải thích nặng nhọc, icon mang mật độ chức năng.

## Layout

Cột canh giữa max-width 1200px, hero tràn full-bleed với nav pill nổi phía trên. Hero là một stack canh giữa: wordmark nhỏ + nav, sau đó headline 58px, subtitle và nhóm hai nút, hai bên là nhân vật mascot nằm ngoài cột nội dung. Bên dưới hero, dải logo khách hàng đơn sắc chạy edge-to-edge trong một hàng yên tĩnh. Các section sản phẩm xen kẽ giữa card ảnh chụp màn hình sản phẩm trắng trên nền warm canvas và section pha màu full-bleed (violet / teal / amber / apricot) chứa grid agent card 3 cột. Section gap rộng rãi (~80px) để soft shadow có không gian thở. Navigation là thanh trên cùng tối giản không có sticky behavior rõ ràng; in-product page chuyển sang sidebar trái với workspace switcher ở trên cùng.

## Agent Prompt Guide

Tham chiếu màu nhanh:
- text: #171618
- background: #f7f7f7 (canvas) / #ffffff (card)
- border: #efefef (hairline) / #171618 (đậm)
- accent: #38296c (Deep Violet) — kết hợp với nền #f5f0ff
- primary action: không có màu CTA riêng biệt

Ví dụ Component Prompts:
1. Xây dựng hero: nền #ffffff, headline Eudoxus Sans weight 800 58px canh giữa màu #171618 với letter-spacing -2.03px, subtitle Inter weight 400 21px màu #727578 với line-height 1.62, và cặp nút canh giữa — primary button nền #000000 với text #ffffff ở 14px Inter 500 (border-radius 8px, padding 22px/10px) và ghost button với viền 1px #171618, cùng kích thước. Hai bên là nhân vật mascot 3D màu violet, teal và amber.

2. Xây dựng category-tinted section: nền full-bleed #f5f0ff, grid 3 cột card trắng (border-radius 20px, padding 24px, soft shadow rgba(239,239,239,0.55) 0 2px 15px), mỗi card có heading Eudoxus Sans 800 32px màu #38296c, body Inter 400 15px màu #171618, và pill badge border-radius 100px dùng nền #e7e0fe với text #38296c.

3. Xây dựng product screenshot card: card trắng (border-radius 20px, padding 24px) trên nền #f7f7f7, chứa mockup UI sản phẩm với image radius 12px và shadow nhiều lớp (1px #171618 ở độ mờ 10% + 16px và 6px warm blurs ở độ mờ 3–5%). Bên trong mockup, sidebar trái với item Inter 500 13px màu #171618, search input trên cùng với border-radius 20px và viền 1px #efefef, và panel chính với heading Eudoxus Sans 700 21px.

Không có màu primary action riêng biệt được quan sát; dùng các xử lý nút trung tính đã trích xuất thay vì tự tạo màu CTA nền.

5. Xây dựng category badge: pill radius 100px, nền #feedcc, text Inter 500 12px màu #412e0a, padding dọc 6px / ngang 9px. Dùng để gắn thẻ khu vực, nguồn hoặc trạng thái trong product UI.

## Color Categorical System

Bảng màu sắc độ của Cycle không phải bộ accent trang trí — nó là một hệ thống phân loại. Mỗi product agent hoặc cụm tính năng được gán một màu ngọc đậm và một nền pha màu tương ứng:

- Deep Violet (#38296c) + Violet Wash (#f5f0ff) → VoiceHunter / hiểu khách hàng
- Deep Teal (#004d60) + Teal Mist (#defafe) → Pathfinder / định hình sản phẩm
- Deep Amber (#6c4800) + Amber Cream (#fff6e1) → LoopCloser / khép kín vòng lặp
- Deep Plum (#46122d) + Apricot Wash (#fff1ec) → agent bổ sung hoặc danh mục phản hồi
- Deep Navy (#0f1c41) → danh mục analytics hoặc infrastructure

Khi thêm agent hoặc cụm tính năng mới, chọn một màu đậm mới và tạo nền pha màu sáng 95%. Không bao giờ dùng lại một màu cho danh mục thứ hai. UI chrome (nút, nav, body) giữ trung tính; màu sắc độ chỉ xuất hiện trong giao diện thông qua hệ thống agent/danh mục này.

## Typography Pairing Logic

Sự kết hợp Eudoxus Sans + Inter là một trò chơi tương phản, không phải hài hòa. Eudoxus Sans 700–800 với tracking chặt (-0.035em ở cỡ display) tạo cho mọi heading chất lượng điêu khắc, gần như chữ ép — kiểu giọng nói bạn thấy trên nhãn rượu vang hoặc chuyên khảo kiến trúc. Inter ở 400–500 với tracking lỏng hơn xử lý mọi thứ người dùng đọc hoặc nhấp.

Quy tắc cho cặp này:
- Headline không bao giờ dùng Inter; UI không bao giờ dùng Eudoxus Sans.
- Điểm chuyển tiếp là 27–32px: ở 27px trở xuống dùng Inter; ở 32px trở lên dùng Eudoxus Sans.
- Eudoxus Sans luôn là weight 700 hoặc 800 — không bao giờ nhẹ hơn.
- Inter ở cỡ sub-heading 21px hoặc 27px nhận tracking -0.011em, đủ để cảm thấy có chủ đích mà không thành display-style.

## Similar Brands

- **Linear** — Cùng nền warm canvas trắng ngà và display heading nặng trên khung sản phẩm yên tĩnh, gần như đơn sắc
- **Vercel** — Cùng cách tiếp cận một nút CTA tối trên mỗi view với ghost secondaries, và hệ thống soft warm-gray shadow bên dưới card trắng
- **Notion** — Cùng các lớp màu pha theo danh mục trên bề mặt trung tính, với tông đậm dịu thay vì accent SaaS sáng
- **Pitch** — Cùng card radius 20px mềm, Inter cho body, custom display face cho headline, và warm canvas mang cảm giác analog hơn là digital
- **Loom** — Cùng cách dùng mascot nhân vật 3D làm sự ấm áp của thương hiệu, kết hợp với layout trắng-và-warm-gray sạch sẽ, rộng rãi

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-black: #171618;
  --color-pure-black: #000000;
  --color-paper-white: #ffffff;
  --color-warm-canvas: #f7f7f7;
  --color-mist-gray: #efefef;
  --color-stone-gray: #dadada;
  --color-pewter: #bababa;
  --color-iron: #727578;
  --color-lead: #8b8d8f;
  --color-pebble: #7d7d7d;
  --color-deep-teal: #004d60;
  --color-deep-violet: #38296c;
  --color-deep-amber: #6c4800;
  --color-deep-plum: #46122d;
  --color-deep-navy: #0f1c41;
  --color-deep-maroon: #663220;
  --color-deep-umber: #772914;
  --color-deep-indigo: #241a42;
  --color-burnt-sienna: #412e0a;
  --color-violet-wash: #f5f0ff;
  --color-teal-mist: #defafe;
  --color-amber-cream: #fff6e1;
  --color-apricot-wash: #fff1ec;
  --color-violet-veil: #e7e0fe;
  --color-sky-tint: #cfeff8;
  --color-honey-veil: #feedcc;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body: 15px;
  --leading-body: 1.62;
  --tracking-body: -0.1px;
  --text-subheading: 21px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.23px;
  --text-heading-sm: 27px;
  --leading-heading-sm: 1.18;
  --tracking-heading-sm: -0.3px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.93px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -1.68px;
  --text-display: 58px;
  --leading-display: 1;
  --tracking-display: -2.03px;

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

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-21: 21px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-28: 28px;
  --spacing-31: 31px;
  --spacing-32: 32px;
  --spacing-42: 42px;
  --spacing-66: 66px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-sm: 3px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 27px;
  --radius-3xl-3: 30px;
  --radius-full: 48px;
  --radius-full-2: 100px;

  /* Named Radii */
  --radius-cards: 20px;
  --radius-badges: 100px;
  --radius-images: 12px;
  --radius-inputs: 20px;
  --radius-buttons: 8px;
  --radius-largesurfaces: 27px;

  /* Shadows */
  --shadow-md: rgba(239, 239, 239, 0.55) 0px 2px 15px 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.12) 0px 0.5px 0px 0px;
  --shadow-subtle-2: rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0.03) 0px 8px 16px 0px;
  --shadow-subtle-3: rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0.03) 0px 16px 16px 0px, rgba(23, 24, 26, 0.05) 0px 6px 12px 0px;

  /* Surfaces */
  --surface-warm-canvas: #f7f7f7;
  --surface-paper-white: #ffffff;
  --surface-tinted-wash: #f5f0ff;
  --surface-ink-overlay: #171618;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-black: #171618;
  --color-pure-black: #000000;
  --color-paper-white: #ffffff;
  --color-warm-canvas: #f7f7f7;
  --color-mist-gray: #efefef;
  --color-stone-gray: #dadada;
  --color-pewter: #bababa;
  --color-iron: #727578;
  --color-lead: #8b8d8f;
  --color-pebble: #7d7d7d;
  --color-deep-teal: #004d60;
  --color-deep-violet: #38296c;
  --color-deep-amber: #6c4800;
  --color-deep-plum: #46122d;
  --color-deep-navy: #0f1c41;
  --color-deep-maroon: #663220;
  --color-deep-umber: #772914;
  --color-deep-indigo: #241a42;
  --color-burnt-sienna: #412e0a;
  --color-violet-wash: #f5f0ff;
  --color-teal-mist: #defafe;
  --color-amber-cream: #fff6e1;
  --color-apricot-wash: #fff1ec;
  --color-violet-veil: #e7e0fe;
  --color-sky-tint: #cfeff8;
  --color-honey-veil: #feedcc;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-eudoxus-sans: 'Eudoxus Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-karla: 'Karla', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body: 15px;
  --leading-body: 1.62;
  --tracking-body: -0.1px;
  --text-subheading: 21px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.23px;
  --text-heading-sm: 27px;
  --leading-heading-sm: 1.18;
  --tracking-heading-sm: -0.3px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.93px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -1.68px;
  --text-display: 58px;
  --leading-display: 1;
  --tracking-display: -2.03px;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-21: 21px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-28: 28px;
  --spacing-31: 31px;
  --spacing-32: 32px;
  --spacing-42: 42px;
  --spacing-66: 66px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 27px;
  --radius-3xl-3: 30px;
  --radius-full: 48px;
  --radius-full-2: 100px;

  /* Shadows */
  --shadow-md: rgba(239, 239, 239, 0.55) 0px 2px 15px 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.12) 0px 0.5px 0px 0px;
  --shadow-subtle-2: rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0.03) 0px 8px 16px 0px;
  --shadow-subtle-3: rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0.03) 0px 16px 16px 0px, rgba(23, 24, 26, 0.05) 0px 6px 12px 0px;
}
```