# Authkit

> # Authkit — Style Reference

## Prompt Content

```
# Authkit — Style Reference
> blueprint on midnight glass

**Theme:** dark

AuthKit hoạt động trong ngôn ngữ blueprint midnight: canvas gần như đen, typography xanh lam-xám mát, và một màu tím iris điện duy nhất đánh dấu thứ duy nhất bạn có thể nhấn. Bề mặt là matte và phẳng — không có glossy gradient, không có drop shadow nặng — thay vào đó, một chòm sao các ánh sáng xanh mềm (rgba(186, 207, 247, 0.32)) và các đường viền inset 1px mảnh gợi ý một giao diện được vẽ bằng ánh sáng trên giấy tối. Typography được kiềm chế và tự tin: một geometric workhorse (Untitled Sans) xử lý mọi thứ từ caption 12px đến section title 24px, trong khi một display face rộng hơn (aeonikPro) đảm nhận hero và section headline. Hầu như tất cả màu sắc trang trí đều nằm trong bóng đổ, không phải trong phần fill — kết quả mang phong cách kỹ thuật, chính xác và phát sáng nhẹ nhàng thay vì sặc sỡ.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Midnight Ink | `#05060f` | `--color-midnight-ink` | Canvas trang và bề mặt chính — nền gần như đen mà mọi thứ khác được vẽ lên. Một chút sắc xanh mát giúp nó không cảm thấy đen tuyệt đối, tạo chất giấy blueprint |
| Graphite Plate | `#2f343e` | `--color-graphite-plate` | Bề mặt card và panel được nâng lên — cao hơn canvas một bậc, dùng cho các UI mockup xem trước và form container. Matte, không bao giờ bóng |
| Steel Border | `#3f4959` | `--color-steel-border` | Đường viền mảnh, divider, và đường cấu trúc mờ giữa các UI element |
| Fog | `#81899b` | `--color-fog` | Helper text và secondary metadata được giảm nhấn mạnh, nên lùi lại phía sau nội dung chính |
| Pebble | `#9da7ba` | `--color-pebble` | Body text mờ và label ở trạng thái disabled — có thể đọc nhưng rõ ràng là secondary |
| Moonlight | `#c7d3ea` | `--color-moonlight` | Màu body text và icon chính — off-white mát, mang giọng nói mặc định của giao diện |
| Ice | `#d1e4fa` | `--color-ice` | Body text được tô sáng, secondary label mạnh, và nội dung badge khi cần sự hiện diện thêm mà không cần full white |
| Glacier | `#d8ecf8` | `--color-glacier` | Heading, link text, và section title — văn bản có thể đọc sáng nhất, dùng để neo mắt vào những chuỗi quan trọng nhất |
| Frost Link | `#b6d9fc` | `--color-frost-link` | Trạng thái link active và accent text phát sáng khi cần tín hiệu xanh rõ ràng |
| Electric Iris | `#663af3` | `--color-electric-iris` | Accent hỗ trợ màu tím cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Ember | `#e46d4c` | `--color-ember` | Accent thương hiệu thay thế cho CTA live-preview hoặc demo khi cần độ tương phản ấm với bảng màu mát |
| Azure | `#027dea` | `--color-azure` | Accent hỗ trợ màu xanh cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Cipher Mint | `#269684` | `--color-cipher-mint` | Accent hỗ trợ màu teal cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Blueprint Glow | `linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%)` | `--color-blueprint-glow` | Điểm cuối gradient highlight mềm — xuất hiện trong vertical text gradient (Glacier → Frost Link) và là điểm dừng trên cùng trong hero light gradient |

## Tokens — Typography

### Untitled Sans — Workhorse UI và body face. Xử lý mọi thứ từ caption 12px đến section title 24px; weight 400 là body mặc định, 500 để nhấn mạnh, 600–700 cho button label và form control. Tracking âm nhẹ (-0.01em) thắt chặt nhịp điệu dark-mode. · `--font-untitled-sans`
- **Thay thế:** Inter
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 12, 14, 16, 18, 24
- **Line height:** 1.17, 1.20, 1.33, 1.43, 1.50
- **Letter spacing:** -0.01em
- **Vai trò:** Workhorse UI và body face. Xử lý mọi thứ từ caption 12px đến section title 24px; weight 400 là body mặc định, 500 để nhấn mạnh, 600–700 cho button label và form control. Tracking âm nhẹ (-0.01em) thắt chặt nhịp điệu dark-mode.

### aeonikPro — Display và hero-only face. Dùng cho wordmark 'AuthKit' và section headline lớn ở 44–48px. Tỷ lệ rộng hơn và bộ xương geometric sạch hơn mang lại sự hiện diện đặc biệt cho thương hiệu mà Untitled Sans không thể cung cấp ở tỷ lệ lớn. Tracking bình thường. · `--font-aeonikpro`
- **Thay thế:** Aeonik
- **Weights:** 400, 500
- **Kích thước:** 28, 44, 48
- **Line height:** 1.14, 1.16, 1.17, 1.20
- **Letter spacing:** normal
- **Vai trò:** Display và hero-only face. Dùng cho wordmark 'AuthKit' và section headline lớn ở 44–48px. Tỷ lệ rộng hơn và bộ xương geometric sạch hơn mang lại sự hiện diện đặc biệt cho thương hiệu mà Untitled Sans không thể cung cấp ở tỷ lệ lớn. Tracking bình thường.

### dotDigital — Eyebrow và label-only face ở 15px. Tracking rộng 0.1em và chữ số dạng tabular ('tnum') đánh dấu đây là các marker cấu trúc yên tĩnh — 'Introducing', 'Shine bright', 'Extensible by design' — đứng trước headline. Không bao giờ dùng cho body copy. · `--font-dotdigital`
- **Thay thế:** JetBrains Mono
- **Weights:** 400
- **Kích thước:** 15
- **Line height:** 1.20
- **Letter spacing:** 0.1em
- **OpenType features:** `"tnum"`
- **Vai trò:** Eyebrow và label-only face ở 15px. Tracking rộng 0.1em và chữ số dạng tabular ('tnum') đánh dấu đây là các marker cấu trúc yên tĩnh — 'Introducing', 'Shine bright', 'Extensible by design' — đứng trước headline. Không bao giờ dùng cho body copy.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | -0.01px | `--text-caption` |
| body-sm | 14px | 1.43 | -0.01px | `--text-body-sm` |
| body | 16px | 1.5 | -0.01px | `--text-body` |
| subheading | 18px | 1.33 | -0.01px | `--text-subheading` |
| heading-sm | 24px | 1.2 | -0.01px | `--text-heading-sm` |
| heading | 28px | 1.17 | — | `--text-heading` |
| display | 48px | 1.14 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 10-16px |
| pills | 999px |
| badges | 6px |
| inputs | 2px |
| buttons | 2px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| sm | `rgba(186, 207, 247, 0.32) 0px 0px 6px 0px` | `--shadow-sm` |
| md | `rgba(238, 186, 247, 0.24) 0px 0px 12px 0px` | `--shadow-md` |
| subtle | `rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset` | `--shadow-subtle` |
| subtle-2 | `rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgb...` | `--shadow-subtle-2` |
| subtle-3 | `rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |
| subtle-4 | `rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199...` | `--shadow-subtle-4` |
| subtle-5 | `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle-5` |
| subtle-6 | `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168,...` | `--shadow-subtle-6` |
| subtle-7 | `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168,...` | `--shadow-subtle-7` |

### Layout

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

## Components

### Primary CTA Button (Electric Iris)
**Vai trò:** Filled action button cho hành động quan trọng nhất trên một trang.

Background #663af3, text #ffffff, radius 2px, padding 10px 16px. Untitled Sans weight 500, 16px, line-height 1.5. Nằm phẳng — không có drop shadow, dựa vào fill bão hòa trên Midnight Ink để tạo điểm nhấn. Dùng tối đa một lần mỗi viewport.

### Ghost Button
**Vai trò:** Secondary action không nên cạnh tranh với primary CTA.

Transparent background với 1px inset hairline rgba(186, 215, 247, 0.06), text #c7d3ea, radius 2px, padding 10px 16px. Untitled Sans weight 500, 16px. Đường viền mảnh tạo sự hiện diện mà không thêm độ sáng.

### Pill Navigation Button
**Vai trò:** Top-bar và inline navigation link.

Radius 999px, background transparent hoặc Moonlight tint nhẹ khi hover. Text 14px Untitled Sans weight 400–500, #c7d3ea. Kết hợp với form button sắc cạnh 2px để tạo cặp primary/pill button rõ ràng.

### Sign-In Form Card
**Vai trò:** Product preview card hiển thị sign-in widget của AuthKit được nhúng trong marketing.

Background #2f343 với card elevation stack (inset highlights + drop shadow gần đen). Radius 10px. Chứa email input (2px radius, 1px Steel Border), Continue button (Electric Iris), và social provider button (Microsoft, Google) ở dạng ghost style. Padding 24px.

### Eyebrow Label
**Vai trò:** Marker cấu trúc nhỏ phía trên headline — 'Introducing', 'Shine bright', 'Extensible by design'.

dotDigital 15px, weight 400, letter-spacing 0.1em, line-height 1.20. Text color #81899b. Tracking rộng và chữ số dạng tabular là tín hiệu thương hiệu yên tĩnh nhất của hệ thống — nó báo hiệu 'đây là label cấu trúc, không phải nội dung'.

### Section Heading
**Vai trò:** Section title cấp trung — 'Your users. Your data. Maximum flexibility.'

aeonikPro 44–48px, weight 400–500, line-height 1.14–1.16, normal tracking. Color #d8ecf8 (Glacier) trên Midnight Ink. Sự kết hợp giữa display face ở weight gần thường và off-white mát tạo cho headline sức nặng kiến trúc mà không cần phải la hét.

### Feature Icon Tile
**Vai trò:** Single sign-on, password, MFA, social login, RBAC, và magic auth feature row entries.

Container icon vuông ~40px trong Graphite Plate (#2f343e) với 6px radius. Icon stroke là Moonlight (#c7d3ea), 1.5px. Label bên dưới trong Untitled Sans 12–14px weight 400, color #81899b. Mũi tên giữa các tile là đường Moonlight 1px với ánh sáng 186/207/247 nhẹ.

### Theme Toggle Pill
**Vai trò:** Light/dark mode switcher hiển thị phía trên feature row.

Pill 999px radius, background #2f343e. Hai segment icon (moon/sun) trong Moonlight. Caption bên dưới trong Untitled Sans 14px, #81899b.

### Customization Annotation Chip
**Vai trò:** Callout nhỏ có label chỉ vào các phần của UI mockup — 'Colour', 'Logo icon', 'Page background', 'Button text', 'Preferred appearance: System / Light / Dark'.

Radius 6–10px, background #2f343 với 1px inset rgba(186, 215, 247, 0.12) hairline. Text 12px Untitled Sans weight 500, #c7d3ea. Kết nối với element mục tiêu bằng guideline xanh mờ. Nằm nổi xung quanh sign-in card được xem trước.

### Brand Colour Swatch
**Vai trò:** Hàng ô vuông nhỏ màu bên trong Colour annotation chip.

Bốn ô vuông 12px, 2px radius, được fill với Electric Iris, Ember, Azure, và Cipher Mint. Truyền đạt các slot màu thương hiệu có thể tùy chỉnh mà AuthKit cung cấp.

### Background Grid Overlay
**Vai trò:** Lưới kiến trúc mờ hiển thị trên canvas Midnight Ink phía sau hero.

Đường 1px trong rgba(186, 215, 247, 0.04) tạo thành lưới vuông ~40px. Thêm radial blue glow ở trung tâm phía trên sử dụng Blueprint Glow palette, và viền conic gradient mỏng xung quanh khung hero. Lưới là 'blueprint' trong north star — nó làm cho trang cảm thấy được phác thảo, không phải thiết kế.

### Hero Wordmark Lockup
**Vai trò:** Display headline 'AuthKit' căn giữa với eyebrow phía trên và subtitle phía dưới.

Eyebrow: dotDigital 15px, 0.1em tracking, #81899b, được bao quanh bởi các đường kẻ ngang ngắn. Wordmark: aeonikPro 48px weight 500, #ffffff, line-height 1.14. Subtitle: Untitled Sans 18px weight 400, #9da7ba. Nhịp điệu dọc khoảng 16px / 24px / 16px.

### Conic Border Frame
**Vai trò:** Viền phát sáng mỏng đóng khung hero section và customization mockup.

1px conic gradient tại 50% -5% với các điểm dừng transparent → rgba(124, 145, 182, 0.3) → 0.5 → 0.3 → transparent. Tạo ra một vòng cung ánh sáng mát nhẹ ở đầu khung, gợi ý một nguồn sáng phía trên viewport.

## Do's and Don'ts

### Nên làm
- Dùng Midnight Ink #05060f làm background trang duy nhất — không bao giờ giới thiệu màu canvas thứ hai.
- Giới hạn fill Electric Iris #663af3 ở một primary CTA duy nhất mỗi viewport; mọi thứ khác là ghost, outlined, hoặc neutral.
- Sử dụng cặp aeonikPro 48px / weight 500 / line-height 1.14 cho bất kỳ headline nào giới thiệu một section mới.
- Đánh dấu tất cả structural eyebrow bằng dotDigital 15px / 0.1em tracking / 'tnum' tabular figures, không bao giờ dùng Untitled Sans.
- Xây dựng elevation từ inset hairline pha xanh (rgba(186, 215, 247, 0.12)) và inner glow 96px, không phải từ drop shadow.
- Kết hợp form control (button, input) ở 2px radius với card ở 10–16px và pill ở 999px để duy trì hệ thống phân cấp sharp-to-soft.
- Đặt section gap là 120px và giữ hero-to-section transition căn giữa trên một trục dọc duy nhất.

### Không nên làm
- Không đặt màu bão hòa trên bất kỳ element nào ngoài primary hoặc alternative-action button — không có card, banner, hoặc background màu.
- Không dùng drop shadow màu truyền thống; shadow giữ gần đen hoặc xanh mát, không bao giờ ấm.
- Không trộn nhiều hơn ba typeface trên một màn hình — Untitled Sans, aeonikPro, và dotDigital là bộ đầy đủ.
- Không làm tròn button thành bất kỳ thứ gì khác ngoài 2px; pill-shaped action button phá vỡ nhịp điệu sharp-utility.
- Không giới thiệu màu thương hiệu thứ hai cho primary CTA — Electric Iris là màu action hạng nhất duy nhất.
- Không dùng Untitled Sans ở kích thước display (28px+) khi có aeonikPro; display face được dành riêng cho headline và wordmark.
- Không đặt text dưới Glacier #d8ecf8 về độ sáng cho heading — body có thể giảm xuống Pebble/Fog, nhưng title phải giữ sáng.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#05060f` | Background trang — gần đen với grid overlay mờ. |
| 1 | Plate | `#2f343` | Bề mặt card và UI xem trước, nâng lên một bậc so với canvas. |
| 2 | Iris Lift | `#663af3` | Filled action surface — bề mặt màu sắc duy nhất trong hệ thống. |

## Elevation

- **Glow accent (icon, highlight):** `0px 0px 6px 0px rgba(186, 207, 247, 0.32)`
- **Ambient glow (secondary highlight):** `0px 0px 12px 0px rgba(238, 186, 247, 0.24)`
- **Hairline inset (link, button, outline):** `inset 0px 0px 0px 1px rgba(186, 215, 247, 0.12)`
- **Card elevation:** `inset 0px 1px 1px 0px rgba(199, 211, 234, 0.12), inset 0px 24px 48px 0px rgba(199, 211, 234, 0.05), 0px 24px 32px 0px rgba(6, 6, 14, 0.7)`

## Imagery

Không có nhiếp ảnh, không có minh họa, không có ảnh chụp màn hình ứng dụng bên thứ ba. Ngôn ngữ hình ảnh là UI-on-canvas thuần túy: bản xem trước sign-in widget được render bằng CSS, glyph icon được vẽ dưới dạng stroke Moonlight 1.5px, và một lưới kiến trúc mờ phía sau mọi thứ. Bản thân sign-in card là hình ảnh — chúng là sản phẩm được hiển thị bên trong trang sản phẩm. Iconography là monochrome outlined với stroke weight 1.5px nhất quán, nằm trong tile Graphite Plate vuông. Element hình ảnh phi-UI duy nhất là Blueprint Glow gradient trải rộng phía trên hero, tạo cảm giác ánh sáng rơi xuống canvas tối.

## Layout

Hero một cột, căn giữa, neo vào max-width 1200px trên canvas Midnight Ink full-bleed. Hero xếp chồng theo chiều dọc: eyebrow → wordmark → subtitle → preview card, với sign-in widget hơi quá khổ và căn giữa, chồng lên lưới background mờ. Bên dưới hero, nội dung chảy trong các dải max-width căn giữa, cách nhau bởi gap 120px, mỗi dải có eyebrow + heading + supporting text + một hình ảnh duy nhất (một feature row gồm icon tile, hoặc một UI mockup xem trước full-width với annotation chip). Trang không bao giờ dùng split hai cột text+image; nó luôn căn giữa. Navigation là một top bar tối giản: brand wordmark bên trái, một pill 'Get started' button bên phải, với một GitHub icon nhỏ ở giữa. Không có sidebar, không có mega-menu, không có sticky chrome ngoài nav.

## Agent Prompt Guide

## Quick Color Reference
- text primary: #ffffff
- text heading: #d8ecf8 (Glacier)
- text body: #c7d3ea (Moonlight)
- text muted: #81899b (Fog)
- background: #05060f (Midnight Ink)
- surface: #2f343e (Graphite Plate)
- border: #3f4959 (Steel)
- accent: #b6d9fc (Frost Link)
- primary action: không có màu CTA riêng biệt

## 3-5 Example Component Prompts

**Hero Section**: Background Midnight Ink #05060f với lưới Blueprint Glow 1px mờ. Eyebrow trong dotDigital 15px / 0.1em tracking / #81899b, hiển thị 'Introducing'. Wordmark trong aeonikPro 48px / weight 500 / #ffffff / line-height 1.14. Subtitle trong Untitled Sans 18px / weight 400 / #9da7ba. Một button 'Get started' Electric Iris #663af3, 2px radius, căn giữa nằm bên dưới. Phía trên hero mang viền conic gradient trong rgba(124, 145, 182, 0.5).

**Sign-In Widget Preview Card**: Background Graphite Plate #2f343e, 10px radius, 24px padding. Card elevation stack: inset 0px 1px 1px 0px rgba(199, 211, 234, 0.12) + inset 0px 24px 48px 0px rgba(199, 211, 234, 0.05) + 0px 24px 32px 0px rgba(6, 6, 14, 0.7). Email input với 2px radius, 1px Steel Border #3f4959, placeholder Untitled Sans 14px. Primary 'Continue' button: 2px radius, Electric Iris #663af3, text trắng, padding 10px 16px. Hai ghost social button bên dưới trong Moonlight #c7d3ea với cùng hairline 2px.

**Feature Icon Row**: Sáu tile Graphite Plate #2f343e vuông 40px với 6px radius, mỗi tile chứa một icon outlined Moonlight #c7d3ea stroke 1.5px. Label bên dưới trong Untitled Sans 12–14px / weight 400 / #81899b. Các tile được kết nối bằng đường Moonlight 1px với glow 6px rgba(186, 207, 247, 0.32).

**Theme Toggle Pill**: Pill 999px radius, fill Graphite Plate #2f343e, padding 6px. Hai segment icon 14px (moon và sun) trong Moonlight #c7d3ea, segment active được làm sáng nhẹ lên Glacier #d8ecf8. Caption 'Light and dark modes supported.' bên dưới trong Untitled Sans 14px / #81899b.

**Customization Annotation Chip**: 10px radius, fill Graphite Plate #2f343e, hairline inset 1px rgba(186, 215, 247, 0.12). Label trong Untitled Sans 12px / weight 500 / #c7d3ea. Kết nối với element mục tiêu bằng guideline Moonlight 1px. Bên trong chip Colour, bốn ô vuông 12px ở 2px radius được fill với Electric Iris #663af3, Ember #e46d4c, Azure #027dea, và Cipher Mint #269684.

## Similar Brands

- **Linear** — Cùng midnight-canvas + single saturated accent + thin-stroke outlined iconography + tight geometric sans display face.
- **Vercel** — Dark blueprint aesthetic với một vivid accent duy nhất (màu cam của họ thay thế iris của AuthKit), hero max-width căn giữa, và product preview được render dưới dạng CSS thay vì ảnh chụp màn hình.
- **Clerk** — Developer tool liên quan đến auth với sign-in widget preview được nhúng trên canvas tối, hệ thống type off-white mát, và một chromatic action color duy nhất.
- **Resend** — Dark palette xanh lam-xám mát, sử dụng màu sắc hạn chế, và hero một cột căn giữa với background pattern mờ đóng khung wordmark.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-ink: #05060f;
  --color-graphite-plate: #2f343e;
  --color-steel-border: #3f4959;
  --color-fog: #81899b;
  --color-pebble: #9da7ba;
  --color-moonlight: #c7d3ea;
  --color-ice: #d1e4fa;
  --color-glacier: #d8ecf8;
  --color-frost-link: #b6d9fc;
  --color-electric-iris: #663af3;
  --color-ember: #e46d4c;
  --color-azure: #027dea;
  --color-cipher-mint: #269684;
  --color-blueprint-glow: #bacff7;
  --gradient-blueprint-glow: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);

  /* Typography — Font Families */
  --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-aeonikpro: 'aeonikPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dotdigital: 'dotDigital', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.01px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.01px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.01px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.01px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.01px;
  --text-heading: 28px;
  --leading-heading: 1.17;
  --text-display: 48px;
  --leading-display: 1.14;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-200: 200px;

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

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;
  --radius-3xl-3: 44px;
  --radius-full: 999px;
  --radius-full-2: 4999.5px;
  --radius-full-3: 9999px;

  /* Named Radii */
  --radius-cards: 10-16px;
  --radius-pills: 999px;
  --radius-badges: 6px;
  --radius-inputs: 2px;
  --radius-buttons: 2px;

  /* Shadows */
  --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-subtle: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
  --shadow-subtle-3: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
  --shadow-subtle-4: rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px;
  --shadow-subtle-5: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --shadow-subtle-6: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px;
  --shadow-subtle-7: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset;

  /* Surfaces */
  --surface-canvas: #05060f;
  --surface-plate: #2f343;
  --surface-iris-lift: #663af3;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-ink: #05060f;
  --color-graphite-plate: #2f343e;
  --color-steel-border: #3f4959;
  --color-fog: #81899b;
  --color-pebble: #9da7ba;
  --color-moonlight: #c7d3ea;
  --color-ice: #d1e4fa;
  --color-glacier: #d8ecf8;
  --color-frost-link: #b6d9fc;
  --color-electric-iris: #663af3;
  --color-ember: #e46d4c;
  --color-azure: #027dea;
  --color-cipher-mint: #269684;
  --color-blueprint-glow: #bacff7;

  /* Typography */
  --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-aeonikpro: 'aeonikPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dotdigital: 'dotDigital', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.01px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.01px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.01px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.01px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.01px;
  --text-heading: 28px;
  --leading-heading: 1.17;
  --text-display: 48px;
  --leading-display: 1.14;

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

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;
  --radius-3xl-3: 44px;
  --radius-full: 999px;
  --radius-full-2: 4999.5px;
  --radius-full-3: 9999px;

  /* Shadows */
  --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
  --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
  --shadow-subtle: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
  --shadow-subtle-3: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
  --shadow-subtle-4: rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px;
  --shadow-subtle-5: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --shadow-subtle-6: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px;
  --shadow-subtle-7: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset;
}
```