# Alveos One

> # Alveos One — Style Reference

## Prompt Content

```
# Alveos One — Style Reference
> ốc đảo ấm áp như đá cuội bên suối — một căn phòng thiền tĩnh lặng, tràn ngập ánh sáng kem, nơi một vật thể graphite duy nhất nằm trong vũng ánh sáng hổ phách dịu dàng.

**Theme:** light

Alveos One sử dụng ngôn ngữ wellness ấm áp, không màu sắc: mọi bề mặt đều là tông màu kem, ngà, graphite hoặc gần đen, và bản thân sản phẩm là vật thể duy nhất được chiếu sáng trên trang. Bố cục tập trung và không vội vã — gradient xuyên tâm từ kem sang đất sét tạo khung cho hero device như một ánh đèn sân khấu, và các section phía dưới xen kẽ giữa kem ấm và trắng sáng với ảnh lifestyle bo góc lớn mang overlay gradient tối và chữ trắng. Typography được kiềm chế qua Hanken Grotesk ở các weight gốc với tracking rộng 0.4440em trên các label all-caps nhỏ, tạo cảm giác editorial tĩnh lặng thay vì gấp gáp. Primary action là các button gần đen — không có màu thương hiệu — giữ cho hệ thống mang cảm giác sản phẩm sức khỏe cao cấp, không phải công cụ SaaS. Góc bo mềm (25px chiếm ưu thế), shadow gần như vô hình, và gradient duy nhất trong hệ thống là hero spotlight ấm áp.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Linen Canvas | `#fcf9f7` | `--color-linen-canvas` | Nền trang, điểm gốc hero gradient — nền kem ấm bao phủ toàn bộ site trong một tông off-white thống nhất |
| Bone White | `#ffffff` | `--color-bone-white` | Bề mặt card, nền section, panel nổi trên linen canvas |
| Graphite Ink | `#000000` | `--color-graphite-ink` | Văn bản chính, màu border chủ đạo trên card và section — neo typographic của hệ thống |
| Nightshade Black | `#05060b` | `--color-nightshade-black` | Fill button hành động chính, nền footer — gần đen với undertone lạnh nhẹ |
| Deep Harbor | `#030f1c` | `--color-deep-harbor` | Bề mặt tối thay thế, nền nav — không thể phân biệt với Nightshade nhưng mang sắc xanh navy nhẹ |
| Charcoal Slate | `#1d1d1d` | `--color-charcoal-slate` | Border body, bề mặt phụ, border ảnh card — mềm hơn đen thuần |
| Iron Grey | `#262628` | `--color-iron-grey` | Đường nét icon, border heading, fill phụ — trung tính tối vừa cho iconography |
| Obsidian | `#111112` | `--color-obsidian` | Văn bản nav, border body — trung tính đậm nhất có thể đọc được sau Nightshade |
| Stone Grey | `#575757` | `--color-stone-grey` | Văn bản body mờ, border body mặc định — mid-grey chính cho đoạn văn và divider |
| Ash | `#717171` | `--color-ash` | Văn bản helper, đường nét icon, border link — mid-grey sáng hơn cho metadata phụ |
| Pebble | `#989695` | `--color-pebble` | Border body tinh tế, copy ít nhấn mạnh — divider gần như vô hình |
| Concrete | `#a5a5a5` | `--color-concrete` | Văn bản body và divider mờ — dùng hạn chế cho siêu ít nhấn mạnh |
| Dove | `#bababa` | `--color-dove` | Border button, fill icon, border trạng thái disabled — mid-tone sáng nhất |
| Clay Shadow | `#d1cfcd` | `--color-clay-shadow` | Màu shadow mềm, box-shadow card, fill nền tinh tế — xám shadow pha ấm khớp với canvas |
| Haze | `#ecedef` | `--color-haze` | Border card tinh tế, divider tương phản thấp — điểm đối lập lạnh với Clay Shadow |
| Spotlight Gradient | `radial-gradient(50% 95% at 50% 108.6%, rgb(252, 249, 247) 0%, rgb(168, 156, 138) 100%)` | `--color-spotlight-gradient` | Điểm cuối hero radial gradient — tông đất sét ấm tụ dưới sản phẩm như ánh đèn sân khấu nhạt dần trên nền linen |

## Tokens — Typography

### sans-serif — sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-sans-serif`
- **Weights:** 400, 600
- **Sizes:** 10px, 12px, 18px
- **Line height:** 1.2, 1.3
- **Letter spacing:** 0.444
- **Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Hanken Grotesk — Typeface thương hiệu chính cho mọi navigation, body, heading và list. Weight 400 đảm nhận body và copy dài; 500–600 nâng subheading và button; 700 neo các kích thước display lớn nhất. Mang custom OpenType features (blwf, cv03, cv04, cv09, cv11) định hình letterform thành hình học editorial — không phải system stack. · `--font-hanken-grotesk`
- **Thay thế:** Inter, Manrope, hoặc DM Sans
- **Weights:** 400, 500, 600, 700
- **Sizes:** 16px, 18px, 20px, 24px, 28px, 36px, 38px, 52px
- **Line height:** 1.10–1.60
- **OpenType features:** `"blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on`
- **Vai trò:** Typeface thương hiệu chính cho mọi navigation, body, heading và list. Weight 400 đảm nhận body và copy dài; 500–600 nâng subheading và button; 700 neo các kích thước display lớn nhất. Mang custom OpenType features (blwf, cv03, cv04, cv09, cv11) định hình letterform thành hình học editorial — không phải system stack.

### System Sans — Font tiện ích và icon. Dùng ở kích thước micro (10–12px) cho eyebrow labels, meta tags và text gần icon, nơi tracking rộng bất thường 0.4440em tạo thẩm mỹ all-caps giãn cách đặc trưng của branding wellness cao cấp. · `--font-system-sans`
- **Weights:** 400, 600
- **Sizes:** 
- **Line height:** 1.20–1.30
- **Letter spacing:** 0.4440em
- **Vai trò:** Font tiện ích và icon. Dùng ở kích thước micro (10–12px) cho eyebrow labels, meta tags và text gần icon, nơi tracking rộng bất thường 0.4440em tạo thẩm mỹ all-caps giãn cách đặc trưng của branding wellness cao cấp.

### SF Mono — Label xác minh siêu nhỏ (ví dụ 'Verified by BrandPush.co'). Tracking chặt 0.02em, monospaced ở 9px — phần tử typographic nhỏ nhất trên site, nằm dưới logo báo chí. · `--font-sf-mono`
- **Weights:** 600
- **Sizes:** 9px
- **Line height:** 1.00
- **Letter spacing:** 0.02em
- **Vai trò:** Label xác minh siêu nhỏ (ví dụ 'Verified by BrandPush.co'). Tracking chặt 0.02em, monospaced ở 9px — phần tử typographic nhỏ nhất trên site, nằm dưới logo báo chí.

### Inter — Copy body dự phòng không thường xuyên. Tần suất thấp nhất trong tất cả font — xuất hiện hạn chế trong ngữ cảnh body. · `--font-inter`
- **Thay thế:** system-ui, -apple-system, sans-serif
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.20
- **Vai trò:** Copy body dự phòng không thường xuyên. Tần suất thấp nhất trong tất cả font — xuất hiện hạn chế trong ngữ cảnh body.

### -apple-system — -apple-system — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-apple-system`
- **Weights:** 400, 500, 600
- **Sizes:** 11px, 12px
- **Line height:** 1.2, 1.48
- **Vai trò:** -apple-system — đượ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ò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| micro | 10px | 1.2 | 4.44px | `--text-micro` |
| caption | 12px | 1.3 | — | `--text-caption` |
| body-sm | 16px | 1.6 | — | `--text-body-sm` |
| body | 18px | 1.5 | — | `--text-body` |
| body-lg | 20px | 1.5 | — | `--text-body-lg` |
| subheading | 24px | 1.4 | — | `--text-subheading` |
| heading-sm | 28px | 1.4 | — | `--text-heading-sm` |
| heading | 36px | 1.2 | — | `--text-heading` |
| heading-lg | 38px | 1.2 | — | `--text-heading-lg` |
| display | 52px | 1.1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 25 | 25px | `--spacing-25` |
| 26 | 26px | `--spacing-26` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 50 | 50px | `--spacing-50` |
| 80 | 80px | `--spacing-80` |
| 150 | 150px | `--spacing-150` |

### Border Radius

| Phần tử | Giá trị |
|---------|-------|
| cards | 25px |
| icons | 25px |
| pills | 100px |
| images | 25px |
| buttons | 12px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| sm | `rgba(0, 0, 0, 0.06) 0px 1px 5px 0px` | `--shadow-sm` |
| xl | `rgba(0, 0, 0, 0.08) 0px 8px 30px 0px, rgba(0, 0, 0, 0.05)...` | `--shadow-xl` |
| md | `rgba(0, 0, 0, 0.05) 0px 2px 10px 0px` | `--shadow-md` |

### Layout

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

## Components

### Top Navigation Bar
**Vai trò:** Header cố định phía trên hero và nội dung cuộn

Nền trong suốt hoặc linen-canvas, không border nhìn thấy được. Bên trái: wordmark 'Alveos One' ở Hanken Grotesk 18px weight 500. Giữa: 4 mục nav (Alveos One, Science, Podcast, Contact) ở 16px weight 400. Phải: nút Pre-Order. Padding dọc ~20px, ngang full-bleed với gutter 40px mỗi bên.

### Pre-Order CTA Button
**Vai trò:** Hành động chính — nút chuyển đổi duy nhất trong header và lặp lại khắp site

Dark filled pill: nền Nightshade Black #05060b, chữ Bone White #ffffff, Hanken Grotesk 16px weight 500, padding 10px 20px, border-radius 12px. Không border, không shadow. Phản quy ước: không có màu thương hiệu, không gradient — uy tín đến từ mật độ và độ tương phản.

### Pill Eyebrow Label
**Vai trò:** Thẻ giới thiệu section nằm phía trên hero headline

Badge bo tròn nhỏ: nền Bone White #ffffff, chữ Iron Grey #262628, border 1px #d1cfcd, Hanken Grotesk 12px weight 500, padding 7px 14px, border-radius 100px (full pill). Tùy chọn box-shadow nhẹ rgba(0,0,0,0.06) 0px 1px 5px.

### Hero Section with Spotlight
**Vai trò:** Phần mở đầu toàn viewport tạo khung cho sản phẩm

Nền là radial gradient ấm (Linen Canvas #fcf9f7 → Clay Shadow #a89c8a ở 108.6% dọc). Nội dung xếp trung tâm: pill label, 52px display headline trong Graphite Ink, 18px body subtext trong Charcoal Slate, sau đó thiết bị sản phẩm nổi ở 1/3 dưới. Không chia ngang — mọi thứ căn giữa dọc, khoảng thở chiếm ưu thế.

### Image Feature Card
**Vai trò:** Ảnh lifestyle bo tròn lớn với text chồng lên — card nội dung chính

Ảnh full-bleed được cắt với radius 25px. Dark gradient overlay (trong suốt trên cùng đến gần đen dưới cùng) để chữ dễ đọc. Headline trắng 28–36px weight 600, body trắng 18px weight 400, cả hai căn trái-dưới với padding 24px. Tỷ lệ khung hình khoảng 3:4. Shadow rgba(0,0,0,0.05) 0px 2px 10px.

### Two-Column Card Grid
**Vai trò:** Sắp xếp nội dung chính cho feature showcase

Hai Image Feature Card cùng chiều rộng cạnh nhau, cách nhau ~20px gutter. Grid lặp lại theo chiều dọc. Card dùng cùng radius 25px, dark gradient overlay và chữ trắng chồng lên. Grid nằm trên Bone White #ffffff hoặc Linen Canvas #fcf9f7.

### Press Logos Bar
**Vai trò:** Section bằng chứng xã hội — 'AS SEEN ON'

Căn giữa trên Linen Canvas hoặc Bone White. Eyebrow text 'AS SEEN ON' ở Hanken Grotesk 12px weight 500, letter-spacing 0.4440em (tracked-out caps), kẹp giữa hai đường kẻ ngang 1px trong Charcoal Slate. Hàng 5 logo báo chí (Business Insider, AP, barchart, StreetInsider, Wall Street Journal) trong Graphite Ink, cao 24–32px. Bên dưới: 'AND OVER 500 NEWS SITES' trong tracked-out caps + dòng phụ 9px SF Mono 'Verified by BrandPush.co'.

### Outlined Secondary Button
**Vai trò:** Thay thế cho CTA filled cho các hành động không chính

Nền trong suốt hoặc Bone White, border 1px trong Charcoal Slate #1d1d1d hoặc Stone Grey #575757, chữ cùng tông tối, Hanken Grotesk 16px weight 500, padding 10px 20px, border-radius 12px. Dùng khi có nhiều hành động nhưng CTA filled phải chiếm ưu thế.

### Dark Footer
**Vai trò:** Footer site trên nền Nightshade Black

Nền Nightshade Black #05060b, chữ và border trong Bone White #ffffff ở độ mờ giảm. Padding dọc 40–60px. Chứa secondary nav, copy pháp lý và link tiện ích nhỏ ở 12–14px Hanken Grotesk weight 400.

## Do's and Don'ts

### Do
- Dùng border-radius 25px cho mọi image card, feature card và container ảnh — đây là hình học góc chiếm ưu thế và định nghĩa cảm giác mềm mại, cao cấp
- Dùng Nightshade Black #05060b làm fill button hành động chính với chữ trắng và radius 12px — không bao giờ đưa màu CTA có sắc
- Đặt page canvas thành Linen Canvas #fcf9f7 cho mọi body section và chỉ để Bone White #ffffff xuất hiện dưới dạng card nổi
- Dùng Hanken Grotesk cho mọi primary type và bật custom OpenType features ('blwf', 'cv03', 'cv04', 'cv09', 'cv11') để giữ hình dạng letterform editorial
- Áp dụng letter-spacing 0.4440em cho label all-caps nhỏ (10–12px) — tracking rộng là yếu tố đặc trưng của giọng thương hiệu
- Dùng warm radial gradient (Linen Canvas → Clay Shadow) chỉ cho hero spotlight — không tái sử dụng trong content section
- Giữ shadow gần như vô hình: rgba(0,0,0,0.05–0.08) ở bán kính mờ thấp. Độ nâng nên được gợi ý qua độ tương phản và radius, không phải drop-shadow nặng

### Don't
- Không đưa bất kỳ màu sắc nào — hệ thống 0% màu sắc theo thiết kế và bất kỳ sắc thái bão hòa nào sẽ phá vỡ thẩm mỹ wellness
- Không dùng góc nhọn 0px hoặc radius nhỏ 4px trên feature card — radius 25px là thứ làm cho hình ảnh giống ảnh sản phẩm spa
- Không dùng CTA màu thương hiệu (xanh dương, xanh lá, đỏ) — button gần đen là lựa chọn phản quy ước có chủ đích báo hiệu sản phẩm sức khỏe cao cấp, không phải SaaS
- Không dùng shadow nặng hoặc nhiều lớp — thiết kế dựa trên một shadow mờ duy nhất hoặc không shadow
- Không dùng nhiều gradient trên site — radial gradient hero là duy nhất; content section giữ phẳng
- Không ghép Hanken Grotesk với display face hình học hoặc condensed — giọng thương hiệu được xây dựng trên một family grotesque duy nhất ở các weight khác nhau
- Không căn giữa đoạn văn body dài — chỉ dùng căn giữa cho headline, hero copy và metadata một dòng; body text trong card và section nên giữ căn trái

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Linen Canvas | `#fcf9f7` | Nền trang cơ bản — kem ấm bao phủ toàn bộ site trong một trường off-white thống nhất |
| 2 | Bone White | `#ffffff` | Nền card và section nổi, độ cao bề mặt đầu tiên trên linen canvas |
| 3 | Clay Shadow | `#d1cfcd` | Tông bề mặt cấp ba để phân biệt tinh tế — dùng cho fill, border mềm và tông shadow |
| 4 | Charcoal Slate | `#1d1d1d` | Bề mặt nhấn tối cho border ảnh card và nền dark gradient overlay |
| 5 | Nightshade Black | `#05060b` | Bề mặt sâu nhất — footer, fill CTA chính, section tối cuối |

## Elevation

- **Image Feature Card:** `rgba(0, 0, 0, 0.05) 0px 2px 10px 0px`
- **Elevated Content Card:** `rgba(0, 0, 0, 0.08) 0px 8px 30px 0px, rgba(0, 0, 0, 0.05) 0px 2px 8px 0px`
- **Pill Eyebrow Label:** `rgba(0, 0, 0, 0.06) 0px 1px 5px 0px`

## Imagery

Hình ảnh hoàn toàn là nhiếp ảnh — không minh họa, không 3D render, không đồ họa trừu tượng. Bản thân thiết bị sản phẩm là 'vật thể' duy nhất, được trình bày chính diện trên hero gradient. Ảnh downstream là lifestyle: crop cận khuôn mặt trong trạng thái bình tĩnh hoặc gắng sức (một phụ nữ với tóc bay trong gió mắt nhắm, một vận động viên đang hồi phục trên sân thượng). Tất cả ảnh đều dùng cùng cách xử lý — cắt với radius 25px, phủ dark vertical gradient (trong suốt ở trên, gần đen ở dưới) cho chữ trắng chồng lên. Không mask, không duotone, không hiệu ứng trang trí. Logo báo chí được render dưới dạng flat black monochrome marks. Mật độ tổng thể là nhiều ảnh trong feature section, text chiếm ưu thế trong hero, và ảnh sản phẩm là neo thị giác của toàn bộ site.

## Layout

Mô hình trang full-bleed với bố cục căn giữa. Hero là một sân khấu toàn viewport: nền radial gradient, stack căn giữa dọc (pill label → 52px headline → 18px subtext → thiết bị sản phẩm), không có gì căn trái. Sau hero, nội dung chảy theo các dải xen kẽ Linen Canvas và Bone White với khoảng cách section dọc 80px. Mẫu nội dung chính là grid 2 cột gồm các image card bo tròn lớn, xếp dọc thành mảng 2×N. Section logo báo chí là một dải ngang căn giữa duy nhất với tracked-out caps và các đường kẻ mảnh hai bên. Navigation là top bar tối giản — wordmark trái, link giữa, CTA phải — trong suốt trên hero và tông linen trên nội dung. Không sidebar, không mega-menu. Trang đọc như một chuỗi các khoảng dừng thở bình tĩnh: khoảng cách dọc rộng, neo căn giữa và image card bo tròn nổi như đá cuội trong dòng suối.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #000000 (chính), #1d1d1d (body), #575757 (mờ)
- background: #fcf9f7 (canvas), #ffffff (cards)
- border: #d1cfcd (mềm), #1d1d1d (mạnh), #575757 (mặc định)
- accent: không có (hệ thống 0% màu sắc)
- primary action: #05060b (filled action)

**Ví dụ Component Prompts**

1. Xây dựng hero section: nền radial-gradient(50% 95% at 50% 108.6%, #fcf9f7 0%, #a89c8a 100%). Pill label căn giữa (nền #ffffff, chữ #262628, border 1px #d1cfcd, Hanken Grotesk 12px weight 500, padding 7px 14px, radius 100px). Display headline ở 52px Hanken Grotesk weight 600, màu #000000. Subtext ở 18px weight 400, màu #1d1d1d, max-width 560px.

2. Xây dựng image feature card: ảnh full-bleed, border-radius 25px, dark vertical gradient overlay (trong suốt → rgba(0,0,0,0.7) ở dưới). Headline trắng 28px Hanken Grotesk weight 600, body trắng 16px weight 400, cả hai căn trái-dưới với padding 24px. Box-shadow rgba(0,0,0,0.05) 0px 2px 10px.

3. Xây dựng nút Pre-Order: nền #05060b, màu #ffffff, Hanken Grotesk 16px weight 500, padding 10px 20px, border-radius 12px. Không border, không shadow.

4. Xây dựng press logos bar: 'AS SEEN ON' căn giữa ở 12px Hanken Grotesk weight 500, letter-spacing 0.4440em, màu #1d1d1d, kẹp giữa hai đường kẻ ngang 1px trong #1d1d1d kéo dài ~120px mỗi bên. Hàng 5 logo báo chí trong #000000, cao 24–32px, cách đều nhau. Bên dưới: 'AND OVER 500 NEWS SITES' trong tracked-out caps + 'Verified by BrandPush.co' ở 9px SF Mono weight 600.

5. Xây dựng dark footer: nền #05060b, padding dọc 48px, chữ trong #ffffff ở độ mờ 80%, Hanken Grotesk 14px weight 400, link cách nhau 20px gap.

## Similar Brands

- **Oura** — Cùng thẩm mỹ wellness cao cấp không màu sắc — bảng màu kem ấm và bone-white, grotesque tương tự Hanken Grotesk, ảnh sản phẩm bo tròn lớn với overlay tối và CTA tối thay vì button màu thương hiệu
- **Whoop** — Cùng triết lý shadow nhẹ nhàng, cùng primary action gần đen, và cùng corner radii lớn 20–25px trên feature imagery, dù Whoop nghiêng về tối hơn tổng thể
- **Aesop** — Cùng warm cream canvas và sự kiềm chế achromatic trên trang sản phẩm — nền tông linen, khoảng thở dọc rộng rãi và serif-free grotesque ở cùng editorial weights
- **Calm** — Cùng mẫu hero căn giữa, cùng soft radial gradient tạo khung cho một sản phẩm/vật thể duy nhất, và cùng tracked-out small-caps eyebrow labels phía trên section headline
- **MUJI** — Cùng warm off-white canvas, cùng sự vắng mặt gần như hoàn toàn của màu thương hiệu, và cùng góc mềm ~25px trên imagery sản phẩm — triết lý 'cao cấp qua kiềm chế'

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-linen-canvas: #fcf9f7;
  --color-bone-white: #ffffff;
  --color-graphite-ink: #000000;
  --color-nightshade-black: #05060b;
  --color-deep-harbor: #030f1c;
  --color-charcoal-slate: #1d1d1d;
  --color-iron-grey: #262628;
  --color-obsidian: #111112;
  --color-stone-grey: #575757;
  --color-ash: #717171;
  --color-pebble: #989695;
  --color-concrete: #a5a5a5;
  --color-dove: #bababa;
  --color-clay-shadow: #d1cfcd;
  --color-haze: #ecedef;
  --color-spotlight-gradient: #a89c8a;
  --gradient-spotlight-gradient: radial-gradient(50% 95% at 50% 108.6%, rgb(252, 249, 247) 0%, rgb(168, 156, 138) 100%);

  /* Typography — Font Families */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hanken-grotesk: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-sans: 'System Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sf-mono: 'SF 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;
  --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro: 10px;
  --leading-micro: 1.2;
  --tracking-micro: 4.44px;
  --text-caption: 12px;
  --leading-caption: 1.3;
  --text-body-sm: 16px;
  --leading-body-sm: 1.6;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-body-lg: 20px;
  --leading-body-lg: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.4;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.4;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --text-heading-lg: 38px;
  --leading-heading-lg: 1.2;
  --text-display: 52px;
  --leading-display: 1.1;

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

  /* Spacing */
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-26: 26px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-50: 50px;
  --spacing-80: 80px;
  --spacing-150: 150px;

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

  /* Border Radius */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 25px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-cards: 25px;
  --radius-icons: 25px;
  --radius-pills: 100px;
  --radius-images: 25px;
  --radius-buttons: 12px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.06) 0px 1px 5px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.08) 0px 8px 30px 0px, rgba(0, 0, 0, 0.05) 0px 2px 8px 0px;
  --shadow-md: rgba(0, 0, 0, 0.05) 0px 2px 10px 0px;

  /* Surfaces */
  --surface-linen-canvas: #fcf9f7;
  --surface-bone-white: #ffffff;
  --surface-clay-shadow: #d1cfcd;
  --surface-charcoal-slate: #1d1d1d;
  --surface-nightshade-black: #05060b;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-linen-canvas: #fcf9f7;
  --color-bone-white: #ffffff;
  --color-graphite-ink: #000000;
  --color-nightshade-black: #05060b;
  --color-deep-harbor: #030f1c;
  --color-charcoal-slate: #1d1d1d;
  --color-iron-grey: #262628;
  --color-obsidian: #111112;
  --color-stone-grey: #575757;
  --color-ash: #717171;
  --color-pebble: #989695;
  --color-concrete: #a5a5a5;
  --color-dove: #bababa;
  --color-clay-shadow: #d1cfcd;
  --color-haze: #ecedef;
  --color-spotlight-gradient: #a89c8a;

  /* Typography */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hanken-grotesk: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-sans: 'System Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sf-mono: 'SF 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;
  --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro: 10px;
  --leading-micro: 1.2;
  --tracking-micro: 4.44px;
  --text-caption: 12px;
  --leading-caption: 1.3;
  --text-body-sm: 16px;
  --leading-body-sm: 1.6;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-body-lg: 20px;
  --leading-body-lg: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.4;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.4;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --text-heading-lg: 38px;
  --leading-heading-lg: 1.2;
  --text-display: 52px;
  --leading-display: 1.1;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-26: 26px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-50: 50px;
  --spacing-80: 80px;
  --spacing-150: 150px;

  /* Border Radius */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 25px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.06) 0px 1px 5px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.08) 0px 8px 30px 0px, rgba(0, 0, 0, 0.05) 0px 2px 8px 0px;
  --shadow-md: rgba(0, 0, 0, 0.05) 0px 2px 10px 0px;
}
```