# Geniestudio

> Geniestudio — Style Reference

## Prompt Content

```
# Geniestudio — Style Reference
> bầu trời pastel vui tươi với doodle bay lượn

**Theme:** light

Geniestudio nói ngôn ngữ thị giác của một canvas thiết kế hiện đại: không gian làm việc xanh pastel thoáng đãng, nơi các nhân vật minh họa tinh nghịch trôi nổi trên khoảng trống rộng rãi. Hệ thống kết hợp một CTA gần-đen (#181d27) duy nhất trên nền canvas xanh nhạt (#ebf5ff) với bộ bốn điểm nhấn minh họa bão hòa — xanh hoa ngô, cam, tím, vàng mù tạt — mang lại hơi ấm mà không cạnh tranh với UI. Typography có chừng mực và hình học: Aeonik weight 500 dẫn dắt headline với tracking -0.02em chặt chẽ, trong khi Geist 500/600 xử lý mọi thứ từ caption 10px đến label nút bấm. Bề mặt phẳng, viền mảnh, bo góc rộng (32px là mặc định), và shadow là lớp rửa xanh nhạt gần như vô hình thay vì đổ bóng tối. Kết quả là một công cụ mang cảm giác sáng tạo, dễ tiếp cận và tự tin nhẹ nhàng — màu sắc dành cho kể chuyện, không phải chrome.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Sky Wash | `#ebf5ff` | `--color-sky-wash` | Canvas trang — xanh nhạt tạo không khí thoáng đãng thay vì trắng tinh, mang đến nền có chiều sâu nhẹ nhàng |
| Paper White | `#fafdff` | `--color-paper-white` | Bề mặt card và elevated surface — mát hơn trắng tinh một chút, giúp bề mặt không bị lạnh lẽo trên nền sky canvas |
| Cloud Veil | `#f6f7f8` | `--color-cloud-veil` | Bề mặt phụ nhẹ và fill wash cho các UI element mờ cần sự tách biệt mà không cần độ tương phản |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card lồng nhau, icon fills và button text — điểm sáng nhất trong hệ thống |
| Midnight Ink | `#0a0d12` | `--color-midnight-ink` | Màu text chính và heading — gần-đen với sắc lạnh, đạt tỷ lệ 19.5:1 trên nền trắng để đọc tối đa |
| Pressed Charcoal | `#181d27` | `--color-pressed-charcoal` | Nút hành động chính và khối UI tối — màu action fill duy nhất trong hệ thống, tạo độ tương phản quyết định trên nền canvas nhạt |
| Stone | `#535862` | `--color-stone` | Body text, viền mảnh và icon strokes — neutral chủ lực cho mọi thứ giữa heading và canvas |
| Fog | `#93979f` | `--color-fog` | Helper text mờ, secondary borders và disabled states — nằm giữa Stone và canvas để lùi lại một cách duyên dáng |
| Cornflower | `#4fbeff` | `--color-cornflower` | Điểm nhấn minh họa và decorative icon stroke — đối trọng mát mẻ cho bộ ba accent ấm |
| Tangerine | `#f26110` | `--color-tangerine` | Điểm nhấn minh họa và decorative warm pop — mang năng lượng và tương phản trong thiết kế nhân vật và icon |
| Amethyst | `#9552e0` | `--color-amethyst` | Điểm nhấn minh họa và decorative stroke — thêm nốt tím mát giúp phân biệt bảng màu với scheme xanh-cam thông thường |
| Mustard | `#bb9915` | `--color-mustard` | Điểm nhấn minh họa và decorative warm-yellow stroke — điểm đối trọng đất giữ cho bảng màu không bị giả tạo |
| Signal Blue | `#0099ff` | `--color-signal-blue` | Link text, active link borders và decorative brand-blue fills — giọng chromatic cho navigation và emphasis |
| Deep Cobalt | `#0069e0` | `--color-deep-cobalt` | Hover/active state cho Signal Blue, gradient stop trong brand blue gradient và decorative illustration stroke |
| Morning Tint | `#cce7ff` | `--color-morning-tint` | Nền card và chip có pha màu — điểm dừng xanh nhạt nhất, dùng cho callout cards và soft highlights |
| Lilac Mist | `#f1e6ff` | `--color-lilac-mist` | Nền card có pha màu cho các section hoặc category chip mã tím |
| Sprout | `#d3f6e3` | `--color-sprout` | Gray wash cho highlight backgrounds, decorative bands và soft emphasis phía sau nội dung |
| Buttery Gradient | `linear-gradient(rgb(255, 249, 224) 0%, rgb(255, 236, 163) 100%)` | `--color-buttery-gradient` | Gradient: linear-gradient(rgb(255, 249, 224) 0%, rgb(255, 236, 163) 100%) — lớp rửa ấm mềm cho feature callouts |
| Lilac Gradient | `linear-gradient(rgb(244, 235, 255) 0%, rgb(228, 204, 255) 100%)` | `--color-lilac-gradient` | Gradient: linear-gradient(rgb(244, 235, 255) 0%, rgb(228, 204, 255) 100%) — lớp rửa tím mềm cho feature callouts |
| Sky Gradient | `linear-gradient(rgb(229, 246, 255) 0%, rgb(194, 233, 255) 100%)` | `--color-sky-gradient` | Gradient: linear-gradient(rgb(229, 246, 255) 0%, rgb(194, 233, 255) 100%) — lớp rửa xanh mềm cho feature callouts |
| Sunset Gradient | `linear-gradient(rgb(255, 242, 235) 0%, rgb(255, 209, 184) 100%)` | `--color-sunset-gradient` | Gradient: linear-gradient(rgb(255, 242, 235) 0%, rgb(255, 209, 184) 100%) — lớp rửa cam ấm cho feature callouts |
| Brand Blue Gradient | `linear-gradient(rgb(71, 157, 255) 11.43%, rgb(0, 105, 224) 78.2%)` | `--color-brand-blue-gradient` | Gradient: linear-gradient(rgb(71, 157, 255) 11.43%, rgb(0, 105, 224) 78.2%) — brand gradient đặc trưng cho hero accents và premium surfaces |

## Tokens — Typography

### Aeonik — Display và heading family — một weight duy nhất (500) trên tất cả kích thước display từ 20px đến 148px, với tracking -0.02em chặt chẽ giúp thắt chặt wordmark mà không trở nên hình học. Tính năng "case" chuẩn hóa letterform cho tính nhất quán thương hiệu. Kích thước hero 148px đặc trưng kết hợp với line-height 1.05 tạo khối headline như poster. · `--font-aeonik`
- **Thay thế:** Inter, Satoshi, General Sans
- **Weights:** 500
- **Sizes:** 20px, 24px, 32px, 48px, 72px, 148px
- **Line height:** 1.05-1.25
- **Letter spacing:** -0.0200em
- **OpenType features:** `"case"`
- **Vai trò:** Display và heading family — một weight duy nhất (500) trên tất cả kích thước display từ 20px đến 148px, với tracking -0.02em chặt chẽ giúp thắt chặt wordmark mà không trở nên hình học. Tính năng "case" chuẩn hóa letterform cho tính nhất quán thương hiệu. Kích thước hero 148px đặc trưng kết hợp với line-height 1.05 tạo khối headline như poster.

### Geist — Body, UI, caption và button family — Geist xử lý mọi text chức năng từ micro-labels 10px đến subheads 20px. Weight 500 là mặc định, 600 dành cho emphasis. Tracking -0.01em và tính năng "case" giữ cho utility text đồng bộ với display family. · `--font-geist`
- **Thay thế:** Inter, Söhne, Geist Sans (open-source)
- **Weights:** 500, 600
- **Sizes:** 10px, 12px, 14px, 16px, 18px, 20px
- **Line height:** 1.14-1.50
- **Letter spacing:** -0.0100em
- **OpenType features:** `"case"`
- **Vai trò:** Body, UI, caption và button family — Geist xử lý mọi text chức năng từ micro-labels 10px đến subheads 20px. Weight 500 là mặc định, 600 dành cho emphasis. Tracking -0.01em và tính năng "case" giữ cho utility text đồng bộ với display family.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.14 | -0.1px | `--text-caption` |
| body | 14px | 1.35 | -0.14px | `--text-body` |
| body-lg | 16px | 1.5 | -0.16px | `--text-body-lg` |
| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |
| heading-sm | 20px | 1.25 | -0.4px | `--text-heading-sm` |
| heading | 32px | 1.2 | -0.64px | `--text-heading` |
| heading-lg | 48px | 1.17 | -0.96px | `--text-heading-lg` |
| display | 72px | 1.11 | -1.44px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 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` |
| 120 | 120px | `--spacing-120` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 32px |
| icons | 16px |
| pills | 9999px |
| images | 16px |
| buttons | 32px |
| cards-inner | 8px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| lg | `rgba(4, 69, 144, 0.08) 0px 14px 20px 4px` | `--shadow-lg` |
| subtle | `rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0p...` | `--shadow-subtle` |

### Layout

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

## Components

### Primary Action Button (filled)
**Vai trò:** CTA duy nhất có emphasis cao

Nền Pressed Charcoal (#181d27), text trắng (#ffffff), Geist 500 ở 16px, pill radius 9999px (thực chất là 32px+ cho chiều cao 40px), padding dọc 12px / ngang 28px. Fill tối trên nền sky canvas là khoảnh khắc duy nhất có trọng lượng thị giác thực sự trên trang.

### Ghost Navigation Button
**Vai trò:** Utility action nhỏ gọn trong top nav

Cùng fill Pressed Charcoal như primary action nhưng thu nhỏ — Geist 500 ở 14px, text trắng, radius 9999px, padding dọc 8px / ngang 16px. Nằm ở góc trên bên phải của navigation bar.

### Testimonial Card
**Vai trò:** Social proof card trong grid nhiều cột

Bề mặt Paper White (#fafdff), viền 1px Stone (#535862) dạng hairline, border-radius 32px, padding 40px. Chứa quote bằng Geist 16px weight 500, avatar tròn 48px, tên bằng Geist 14px weight 600 màu Midnight Ink, vai trò/công ty bằng Geist 12px màu Stone, và logo công ty căn phải. Không drop shadow — sự tách biệt đến từ viền.

### Feature Callout Card (tinted)
**Vai trò:** Highlight card theo mã màu chủ đề

Bề mặt tinted bằng một trong bốn lớp rửa pastel (Morning Tint, Lilac Mist, Sprout hoặc Veil), border-radius 32px, padding 24-40px. Chứa một illustration hoặc icon và mô tả ngắn. Tint là toàn bộ nhận diện thị giác — không border, không shadow.

### Top Navigation Bar
**Vai trò:** Header cố định với brand mark và utility links

Trong suốt trên sky canvas, không background fill. Bên trái: diamond logomark Genie + wordmark màu Midnight Ink. Giữa: text links Geist 14px (How it works, Pricing) màu Stone. Phải: ghost dark button. Không border, không shadow — nav nổi.

### Hero Headline Block
**Vai trò:** Tuyên bố thị giác mở đầu

Căn giữa, Aeonik 500 ở 72-148px, text Midnight Ink (#0a0d12), letter-spacing -1.44px, line-height 1.05-1.11. Điểm nhấn inline tùy chọn: nhân vật emoji minh họa màu Cornflower, Tangerine, Amethyst, Mustard thay thế một từ inline. Subtext Geist 18px weight 500 màu Stone bên dưới.

### Icon Tile
**Vai trò:** Container icon trang trí hoặc chức năng

Border-radius 16px, hình vuông 24-32px, fill bằng một trong bốn màu accent hoặc tinted neutral. Dùng cho inline icons và làm anchor minh họa.

### Avatar Group
**Vai trò:** Avatar người dùng nhóm lại cho ngữ cảnh xã hội

Avatar tròn 40-48px với overlap âm 4-8px, xen kẽ giữa bốn màu accent minh họa. Không border.

### Section Divider (implicit)
**Vai trò:** Ngắt giữa các section trang

Không có đường kẻ nhìn thấy — các section tách biệt qua khoảng cách dọc 64-80px và xử lý bề mặt xen kẽ (sky canvas → paper card → sky canvas). Khoảng trắng là divider.

### Testimonial Grid Container
**Vai trò:** Layout social proof nhiều cột

Grid 3 cột với gap 24px, 3 card mỗi hàng, mỗi card radius 32px với border 1px Stone. Card căn chỉnh footer (avatar + tên + logo công ty) dọc theo một baseline nhất quán.

### Brand Gradient Surface
**Vai trò:** Khối accent cao cấp hoặc hero

Được fill bằng Brand Blue Gradient (linear-gradient 135deg từ #479dff đến #0069e0). Dùng có chừng mực cho hero accents, premium tier cards hoặc nền brand mark. Kết hợp với text trắng bằng Geist 500.

### Logo Mark
**Vai trò:** Nhận diện thương hiệu trong nav và social cards

Glyph hình thoi/hình thoi màu Midnight Ink, 24-32px, kết hợp với wordmark 'Genie' bằng Geist 500 16px. Mark lặp lại family radius card với các góc hơi mềm.

## Do's and Don'ts

### Nên làm
- Chỉ dùng Pressed Charcoal (#181d27) cho primary action — đây là màu nút filled duy nhất trong hệ thống
- Đặt mọi card, nút bấm và container lớn ở border-radius 32px — radius 32px là độ cong đặc trưng của hệ thống
- Giữ page canvas ở Sky Wash (#ebf5ff); không mặc định dùng trắng tinh cho nền body
- Kết hợp Aeonik 500 cho mọi display text với Geist 500/600 cho mọi UI text — không bao giờ trộn thêm family thứ ba
- Chỉ dùng bốn accent minh họa (Cornflower, Tangerine, Amethyst, Mustard) cho decorative illustration, emoji characters và icon fills — không bao giờ dùng cho UI controls hoặc text
- Áp dụng letter-spacing -0.02em cho mọi text Aeonik và -0.01em cho mọi text Geist để đảm bảo nhất quán typographic
- Tách card khỏi canvas bằng border 1px Stone (#535862) thay vì drop shadow

### Không nên làm
- Không dùng Signal Blue (#0099ff) hoặc Deep Cobalt (#0069e0) cho primary action buttons — màu action là Pressed Charcoal, không phải xanh
- Không áp dụng drop shadow tối nặng; hệ thống chỉ dùng một lớp rửa xanh 8% opacity và hairline borders
- Không dùng màu accent minh họa cho body text, headings hoặc functional UI states
- Không dùng nhiều font family; Aeonik dành cho display, Geist dành cho mọi thứ khác
- Không trộn radii — tránh dùng 4px, 12px hoặc 20px; scale là 8px (inner), 16px (icons/images), 24px (large cards) và 32px (mặc định)
- Không fill trang bằng màu bão hòa; trải nghiệm thị giác chủ đạo là pastel sky với các điểm nhấn nhân vật thưa thớt
- Không dùng trắng tinh (#ffffff) cho page canvas — dùng Sky Wash (#ebf5ff) hoặc Paper White (#fafdff) cho bề mặt

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Sky Canvas | `#ebf5ff` | Nền trang, tạo bầu không khí pastel thoáng đãng |
| 1 | Paper Card | `#fafdff` | Bề mặt card và panel mặc định, nâng nội dung lên khỏi canvas |
| 2 | Pure White Nest | `#ffffff` | Element lồng nhau, icon bên trong card và button text |
| 3 | Tinted Chip | `#cce7ff` | Card có pha màu theo chủ đề và lớp rửa highlight mềm |
| 4 | Veil | `#f6f7f8` | Bề mặt fill mờ cho khối inactive hoặc secondary |

## Elevation

- **Cards và feature panels:** `rgba(4, 69, 144, 0.08) 0px 14px 20px 4px`
- **Primary action buttons (active/pressed):** `rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0px 0px 0px 1px`

## Imagery

Ngôn ngữ thị giác thiên về minh họa, không có nhiếp ảnh. Trang web dựa trên các nhân vật vẽ tay (blob mặt emoji bằng bốn màu accent), đạo cụ hình học đơn giản (mây, máy bay giấy, hoa, nấm) và motif UI nhỏ (phong bì, trái tim, ngôi sao) trôi nổi trên khoảng trống rộng rãi. Minh họa phẳng với fill mềm và outline tối thiểu, sử dụng đầy đủ bộ bốn Cornflower/Tangerine/Amethyst/Mustard. Lớp rửa gradient tinted (Buttery, Lilac, Sky, Sunset) làm nền mềm cho feature callouts. Thẩm mỹ là sticker-pack vui tươi — trẻ con nhưng chính xác, với các nhân vật rải rác như confetti thay vì sắp xếp trong grid.

## Layout

Full-bleed page trên container max-width 1200px, với các section chảy dọc theo khoảng cách 64-80px. Hero là stack một cột căn giữa: headline, nhân vật minh họa inline tùy chọn, subtext, primary button. Section thứ hai bỏ grid hoàn toàn để chuyển sang bố cục minh họa rải rác với một caption ngắn neo giữa. Các section tiếp theo quay lại grid có cấu trúc — testimonial grid 3 cột với gap 24px, sau đó feature bands 2 cột hoặc một cột. Nhịp điệu tổng thể xen kẽ giữa khoảng thở rộng rãi (section với 80%+ whitespace) và card grids dày đặc hơn. Navigation là top bar tối giản không background fill, và các section tách biệt qua whitespace thay vì divider hoặc màu nền xen kẽ.

## Agent Prompt Guide

**Quick Color Reference**
- text: #0a0d12 (Midnight Ink)
- background: #ebf5ff (Sky Wash)
- surface/card: #fafdff (Paper White)
- border: #535862 (Stone) ở 1px
- accent: #4fbeff (Cornflower) chỉ dùng trang trí
- primary action: #181d27 (filled action)

**3-5 Ví dụ Component Prompts**

1. **Hero Headline Block**: Căn giữa trên canvas Sky Wash (#ebf5ff). Headline bằng Aeonik 500 ở 72px, Midnight Ink (#0a0d12), letter-spacing -1.44px, line-height 1.11. Thay thế inline tùy chọn: ba avatar nhân vật tròn 48px màu Cornflower (#4fbeff), Tangerine (#f26110) và Amethyst (#9552e0). Subtext bằng Geist 500 ở 18px, Stone (#535862). Primary button: nền Pressed Charcoal (#181d27), text trắng, Geist 500 16px, radius 9999px, padding 12px 28px.

2. **Testimonial Card**: Bề mặt Paper White (#fafdff), border 1px Stone (#535862), border-radius 32px, padding 40px. Quote text bằng Geist 500 ở 16px, Midnight Ink. Hàng footer: avatar tròn 48px (trái), tên bằng Geist 600 14px Midnight Ink + vai trò bằng Geist 500 12px Stone (giữa-trái), logo công ty (phải). Không shadow.

3. **Feature Callout Card (Tinted)**: Fill Morning Tint (#cce7ff), radius 32px, padding 32px. Icon tile vuông 48px với radius 16px màu Cornflower (#4fbeff) ở góc trên trái. Headline bằng Aeonik 500 ở 24px, Midnight Ink. Mô tả bằng Geist 500 ở 14px, Stone. Không border, không shadow.

4. **Top Navigation Bar**: Trong suốt trên Sky Wash canvas. Trái: diamond logomark 24px màu Midnight Ink + wordmark 'Genie' bằng Geist 500 16px. Giữa: links Geist 500 14px màu Stone với gap 24px. Phải: ghost dark button — fill Pressed Charcoal, text trắng, Geist 500 14px, radius 9999px, padding 8px 16px. Không border, không background.

5. **Brand Gradient Hero Accent**: Khối rộng 400px được fill bằng Brand Blue Gradient (linear-gradient 135deg, #479dff → #0069e0), radius 32px, padding 40px. Text Geist 500 18px trắng căn giữa. Dùng một lần mỗi trang cho premium emphasis.

## Similar Brands

- **Figma** — Cùng canvas pastel mềm với whitespace rộng rãi, card bo tròn và một primary action tối duy nhất trên nền sáng
- **Linear** — Cùng xử lý card viền mảnh, letter-spacing chặt trên sans hình học và triết lý một màu accent quyết định
- **Pitch** — Cùng phong cách minh họa vui tươi theo nhân vật pha trộn với SaaS UI sạch sẽ và bề mặt card tinted pastel
- **Notion** — Cùng layout thoáng đãng với border tối thiểu, bề mặt mềm và sẵn sàng để minh họa thở trên canvas

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-sky-wash: #ebf5ff;
  --color-paper-white: #fafdff;
  --color-cloud-veil: #f6f7f8;
  --color-pure-white: #ffffff;
  --color-midnight-ink: #0a0d12;
  --color-pressed-charcoal: #181d27;
  --color-stone: #535862;
  --color-fog: #93979f;
  --color-cornflower: #4fbeff;
  --color-tangerine: #f26110;
  --color-amethyst: #9552e0;
  --color-mustard: #bb9915;
  --color-signal-blue: #0099ff;
  --color-deep-cobalt: #0069e0;
  --color-morning-tint: #cce7ff;
  --color-lilac-mist: #f1e6ff;
  --color-sprout: #d3f6e3;
  --color-buttery-gradient: #fff2be;
  --gradient-buttery-gradient: linear-gradient(rgb(255, 249, 224) 0%, rgb(255, 236, 163) 100%);
  --color-lilac-gradient: #e4ccff;
  --gradient-lilac-gradient: linear-gradient(rgb(244, 235, 255) 0%, rgb(228, 204, 255) 100%);
  --color-sky-gradient: #c2e9ff;
  --gradient-sky-gradient: linear-gradient(rgb(229, 246, 255) 0%, rgb(194, 233, 255) 100%);
  --color-sunset-gradient: #ffd1b8;
  --gradient-sunset-gradient: linear-gradient(rgb(255, 242, 235) 0%, rgb(255, 209, 184) 100%);
  --color-brand-blue-gradient: #479dff;
  --gradient-brand-blue-gradient: linear-gradient(rgb(71, 157, 255) 11.43%, rgb(0, 105, 224) 78.2%);

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

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.14;
  --tracking-caption: -0.1px;
  --text-body: 14px;
  --leading-body: 1.35;
  --tracking-body: -0.14px;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.4px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.64px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.17;
  --tracking-heading-lg: -0.96px;
  --text-display: 72px;
  --leading-display: 1.11;
  --tracking-display: -1.44px;

  /* Typography — Weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --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-120: 120px;
  --spacing-160: 160px;

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

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 36px;
  --radius-full: 90px;

  /* Named Radii */
  --radius-cards: 32px;
  --radius-icons: 16px;
  --radius-pills: 9999px;
  --radius-images: 16px;
  --radius-buttons: 32px;
  --radius-cards-inner: 8px;

  /* Shadows */
  --shadow-lg: rgba(4, 69, 144, 0.08) 0px 14px 20px 4px;
  --shadow-subtle: rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0px 0px 0px 1px;

  /* Surfaces */
  --surface-sky-canvas: #ebf5ff;
  --surface-paper-card: #fafdff;
  --surface-pure-white-nest: #ffffff;
  --surface-tinted-chip: #cce7ff;
  --surface-veil: #f6f7f8;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-sky-wash: #ebf5ff;
  --color-paper-white: #fafdff;
  --color-cloud-veil: #f6f7f8;
  --color-pure-white: #ffffff;
  --color-midnight-ink: #0a0d12;
  --color-pressed-charcoal: #181d27;
  --color-stone: #535862;
  --color-fog: #93979f;
  --color-cornflower: #4fbeff;
  --color-tangerine: #f26110;
  --color-amethyst: #9552e0;
  --color-mustard: #bb9915;
  --color-signal-blue: #0099ff;
  --color-deep-cobalt: #0069e0;
  --color-morning-tint: #cce7ff;
  --color-lilac-mist: #f1e6ff;
  --color-sprout: #d3f6e3;
  --color-buttery-gradient: #fff2be;
  --color-lilac-gradient: #e4ccff;
  --color-sky-gradient: #c2e9ff;
  --color-sunset-gradient: #ffd1b8;
  --color-brand-blue-gradient: #479dff;

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

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.14;
  --tracking-caption: -0.1px;
  --text-body: 14px;
  --leading-body: 1.35;
  --tracking-body: -0.14px;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.4px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.64px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.17;
  --tracking-heading-lg: -0.96px;
  --text-display: 72px;
  --leading-display: 1.11;
  --tracking-display: -1.44px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --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-120: 120px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 36px;
  --radius-full: 90px;

  /* Shadows */
  --shadow-lg: rgba(4, 69, 144, 0.08) 0px 14px 20px 4px;
  --shadow-subtle: rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0px 0px 0px 1px;
}
```