# Sleeve

> Sleeve — Style Reference

## Prompt Content

```
# Sleeve — Style Reference
> floating dock trên marble

**Theme:** light

Trang web của Sleeve mang phong cách như một trang sản phẩm macOS được dàn dựng trong gallery: canvas trắng vô tận, một ảnh sản phẩm hero duy nhất nổi lơ lửng với các app-icon vệ tinh quay quanh, và typography làm toàn bộ công việc. Bảng màu gần như đơn sắc — đen, trắng, và đường viền xám mảnh là những màu cấu trúc duy nhất — trong khi năng lượng màu sắc duy nhất đến từ gradient xanh của chính ứng dụng và một bộ nhỏ các icon hệ thống nhiều màu dùng làm điểm nhấn trang trí. Headline cực lớn và tracking dày (96px display với letter-spacing -0.025em, section heading 48px), body text là system-sans ở 15-18px, và micro-label như 'THEMING' và 'FEATURE LIST' dùng tracking 0.05em để thì thầm thay vì la hét. Các component mềm mại và chunky: card radius 24px, pill buttons 9999px, inset 1px borders ở độ mờ 0.05 thay vì shadow nặng. Ngôn ngữ thiết kế là sự tự tin qua kiềm chế — không gradient trên UI, không màu trên button, chỉ có trọng lượng typographic và khoảng thở rộng rãi gánh vác mọi màn hình.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Midnight Ink | `#000000` | `--color-midnight-ink` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên thành màu CTA chính |
| Graphite | `#333333` | `--color-graphite` | Text phụ, icon fill, button text — mềm hơn đen tuyền cho body emphasis mà không mất trọng lượng |
| Slate | `#374151` | `--color-slate` | Neutral hỗ trợ cho UI phụ, divider và muted label. Không nâng lên thành màu CTA chính |
| Silver Mist | `#e5e7eb` | `--color-silver-mist` | Hairline borders, subtle divider, light surface washes — màu được dùng nhiều nhất trong hệ thống, định nghĩa cạnh ở độ mờ tương đương 0.05 |
| Ash | `#cccccc` | `--color-ash` | Shadow base, disabled borders, inset 1px borders trên card — đậm hơn Silver Mist cho cấu trúc thấy được nhưng yên tĩnh |
| Smoke | `#999999` | `--color-smoke` | Muted helper text, shadow mid-tones, secondary icon fills — thấy được nhưng lùi về sau |
| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, text trên dark buttons — tông nền chủ đạo |
| Paper White | `#f9fafb` | `--color-paper-white` | Subtle surface tier, announcement pill background, secondary card surface — ấm hơn pure white một chút để gợi elevation mà không cần shadow |
| Ocean Drift | `linear-gradient(to right top, #0e95ee, #27c9f5)` | `--color-ocean-drift` | Brand accent — section labels (THEMING, FEATURE LIST), gradient anchor cho app showcase gradient; Decorative gradient dùng trong product showcase và làm accent wash — linear-gradient(to right top, #0e95ee, #27c9f5) |
| Cyan Splash | `linear-gradient(to right bottom, rgba(150,255,238,0.1), rgba(24,192,233,0.1))` | `--color-cyan-splash` | Brand accent — gradient terminal cho app showcase gradient, decorative wash; Subtle background gradient wash — linear-gradient(to right bottom, rgba(150,255,238,0.1), rgba(24,192,233,0.1)) |

## Tokens — Typography

### ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Inter' — Tất cả UI và display text — system sans-serif ở weight 400 cho body, 500-600 cho emphasis, 700 cho section headings, 900 cho display 'Sleeve 3'. Display 96px với lineHeight 1.00 và tracking -0.025em là signature: kiểu weight-900 cỡ lớn nén chặt, tạo nên hero mark dày đặc, tự tin thay vì editorial thoáng đãng. · `--font-ui-sans-serif-apple-system-blinkmacsystemfont-inter`
- **Thay thế:** Inter, Helvetica Neue, system-ui
- **Weights:** 400, 500, 600, 700, 900
- **Kích cỡ:** 12, 13, 14, 15, 16, 18, 20, 24, 48, 96
- **Line height:** 1.00, 1.33, 1.40, 1.43, 1.50, 1.56
- **Letter spacing:** -0.025em cho display/heading-lg (siết chặt kiểu lớn để tăng mật độ), 0.05em cho micro-labels (mở rộng tracking chữ hoa nhỏ để dễ đọc)
- **OpenType features:** `'ss01' on, 'cv11' on`
- **Vai trò:** Tất cả UI và display text — system sans-serif ở weight 400 cho body, 500-600 cho emphasis, 700 cho section headings, 900 cho display 'Sleeve 3'. Display 96px với lineHeight 1.00 và tracking -0.025em là signature: kiểu weight-900 cỡ lớn nén chặt, tạo nên hero mark dày đặc, tự tin thay vì editorial thoáng đãng.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|---------|---------|-------------|----------------|-------|
| caption | 12px | 16 | 0.6px | `--text-caption` |
| body-sm | 14px | 22 | — | `--text-body-sm` |
| body | 16px | 24 | — | `--text-body` |
| subheading | 18px | 26 | — | `--text-subheading` |
| heading-sm | 20px | 28 | — | `--text-heading-sm` |
| heading | 24px | 32 | — | `--text-heading` |
| heading-lg | 48px | 52 | -1.2px | `--text-heading-lg` |
| display | 96px | 96 | -2.4px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 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` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 44 | 44px | `--spacing-44` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 9999px |
| cards | 24px |
| pills | 9999px |
| small | 8px |
| inputs | 12px |
| buttons | 12px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| subtle | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0p...` | `--shadow-subtle-2` |
| md | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1)...` | `--shadow-md` |
| xl | `rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.0...` | `--shadow-xl` |
| subtle-3 | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-subtle-3` |
| subtle-4 | `rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) ...` | `--shadow-subtle-4` |
| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 96px
- **Card padding:** 36px
- **Element gap:** 16px

## Components

### Primary Filled CTA Button
**Vai trò:** Hành động download/purchase — nút Mac App Store trên hero

Fill đen (#000000), text trắng, weight 500-600, radius 12px, padding 12px 24px, kèm glyph logo Apple màu trắng. Chiều cao ~48px. Không shadow; dựa vào màu đen tuyệt đối trên nền trắng để nổi bật.

### Outlined CTA Button
**Vai trò:** Hành động purchase phụ — nút 'Buy Directly'

Fill trong suốt, border 1px solid #e5e7eb, text #000, radius 12px, padding 12px 24px. Bao gồm inline price badge lồng bên trong nút. Weight 500.

### Inline Price Badge
**Vai trò:** Thẻ giá lồng bên trong outlined CTA

Pill nhỏ với fill #000, text trắng, radius 9999px, padding ~8px 12px, weight 600. Text ~13px. Nằm khít bên trong outlined button để tạo thành một CTA composite duy nhất.

### Announcement Pill
**Vai trò:** Thông báo cập nhật dạng sticky — 'Sleeve 3 has arrived — refreshed for macOS Tahoe'

Pill full-width, fill #f9fafb, border 1px solid #e5e7eb, radius 9999px, padding ~10px 20px. Chứa icon xanh nhỏ, body-sm text, và mũi tên dismiss hình tròn ở bên phải.

### Section Label (Eyebrow)
**Vai trò:** Nhãn danh mục uppercase nhỏ phía trên section headings — 'THEMING', 'FEATURE LIST'

12-13px, weight 600, uppercase, letter-spacing 0.05em, màu #0e95ee (Ocean Drift blue). Căn giữa. Tạo dấu câu typographic yên tĩnh trước mỗi section chính.

### Section Heading
**Vai trò:** Tiêu đề section chính — 'The ultimate music accessory for your Mac', 'Themes to match your style', 'A catalogue of hits'

48px, weight 700, line-height ~1.08, letter-spacing -1.2px, màu #000000. Căn giữa. Tracking dày ở 48px tạo mật độ mà weight 700 khuếch đại.

### Feature Card
**Vai trò:** Card nội dung trong feature grid — text + screenshot + accent icon

Fill #ffffff, border 1px solid #e5e7eb, radius 24px, padding 36px tất cả các cạnh. Không shadow hoặc shadow tối thiểu. Chứa heading (20-24px weight 700), body paragraph, và icon hoặc screenshot nhỏ nhiều màu. Các card xen kẽ giữa text-left/visual-right và text-right/visual-left trong grid 2 cột.

### Settings Preview Card
**Vai trò:** Screenshot nhúng của bảng settings ứng dụng bên trong feature card

Sub-card với fill #f9fafb, radius 16px, padding 12px. Hiển thị sidebar settings với các icon tile màu (themes, layout, artwork, interface, track info) và vùng nội dung với size toggles (S, M, L, XL). Toggles có dạng pill với trạng thái selected màu xanh.

### Size Toggle Button
**Vai trò:** Bộ chọn kích cỡ setting (S/M/L/XL) trong settings preview

Hàng ngang các pill buttons, radius 9999px, mỗi nút ~40x40px. Unselected: trong suốt với border #e5e7eb, text xám. Selected: fill #0e95ee, text trắng. Trạng thái selected màu xanh là element tương tác có màu sắc duy nhất trong hệ thống.

### Floating App Icon
**Vai trò:** Icon ứng dụng 3D trang trí quay quanh product showcase — YouTube, settings, paint, play controls

60-80px vuông, radius 16-20px, render với gradient fill khớp với ứng dụng nguồn (YouTube đỏ-hồng, settings xám, paint xanh ngọc). Đổ bóng nhẹ để tạo chiều sâu. Xoay ở nhiều góc (-15°, +20°) để tạo bố cục nổi hữu cơ.

### Product Showcase Window
**Vai trò:** Trung tâm hero — mockup cửa sổ ứng dụng Sleeve

Hình chữ nhật bo tròn lớn, radius 24px, chứa nền gradient xanh (#0e95ee → #27c9f5 chéo). Hiển thị thẻ now-playing của ứng dụng với album art, track title và artist. Window chrome ở trên cùng hiển thị traffic lights, tên ứng dụng và ngày tháng. Nằm ở trung tâm với các floating app icons quay quanh.

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

Fill trong suốt, không border. Bên trái: wordmark 'REPLAY' ở weight 700, màu #0e95ee. Giữa: theme switcher pills (Sleeve, Umbra, Echo) với icon chấm tròn nhỏ màu sắc. Bên phải: text links 'Updates', 'Help' và icon social X. Chiều cao ~64px, nổi phía trên hero mà không có nền.

### Theme Switcher Pill
**Vai trò:** Bộ chọn theme trong nav — Sleeve / Umbra / Echo

Pill nhỏ với fill #f9fafb, border 1px solid #e5e7eb, radius 9999px, padding 8px 16px. Chứa chấm trạng thái màu nhỏ và label text 14px. Trạng thái active có chấm xanh nhẹ.

### Display Heading
**Vai trò:** Hero heading 'Sleeve 3' — kiểu chữ cực đoan nhất trong hệ thống

96px, weight 900, line-height 1.00, letter-spacing -2.4px, màu #000000. Đây là nơi duy nhất weight 900 xuất hiện. Tracking siêu dày và line-height nén ở 96px khiến text trông như một khối đặc thay vì một dòng chữ — một brand mark, không phải headline.

## Do's and Don'ts

### Nên
- Dùng border-radius 24px cho tất cả card, ảnh và product showcase — đây là ngôn ngữ hình dạng chủ đạo
- Dùng radius 9999px (pill) cho tất cả button, tag, toggle và announcement bar
- Dùng weight 900 ở 96px với letter-spacing -2.4px cho display heading duy nhất mỗi trang — không bao giờ dùng cho body hoặc section titles
- Dùng #000000 cho CTA chính duy nhất mỗi trang và border #e5e7eb outlined cho CTA phụ — không có button màu
- Dùng gradient xanh (linear-gradient to right top, #0e95ee, #27c9f5) chỉ cho product showcase và decorative washes — không bao giờ cho UI controls
- Dùng letter-spacing 0.05em trên tất cả small uppercase labels (12-13px) để tạo eyebrow tracking rộng, yên tĩnh phía trên section headings
- Dùng padding 36px bên trong feature cards và gap 16px giữa các cột grid

### Không nên
- Không dùng colored CTA buttons — màu button duy nhất là #000000 (filled) và trong suốt với border #e5e7eb (outlined)
- Không dùng heavy drop shadows — ưu tiên inset 1px borders ở độ mờ 0.05 hoặc stack shadow 4 lớp cho elevation
- Không dùng weight 900 cho body text hoặc section headings — chỉ dành riêng cho display heading 96px
- Không dùng letter-spacing -0.025em cho text dưới 32px — tracking dày chỉ hiệu quả ở kích cỡ display
- Không dùng accent màu xanh cho text dưới 14px — nó chỉ xuất hiện trên section labels uppercase 12-13px
- Không dùng border-radius dưới 8px trên các element hiển thị — hệ thống bo tròn mọi thứ một cách mạnh mẽ
- Không thêm background colors vào navigation hoặc section backgrounds — trang nên cảm giác như nội dung nổi trên nền trắng vô tận

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Canvas | `#ffffff` | Nền trang — nền trắng vô tận mà toàn bộ trang nổi trên đó |
| 1 | Card Surface | `#ffffff` | Nền feature card và component — giống canvas, được định nghĩa bằng border thay vì fill |
| 2 | Subtle Surface | `#f9fafb` | Announcement pills, nested sub-cards, nền toggle không hoạt động — ấm hơn trắng một chút |
| 3 | Border Tier | `#e5e7eb` | Hairline borders trên card, button, divider — màu đường cấu trúc chính |
| 4 | Deep Border | `#cccccc` | Shadow base, inset borders trên elevated cards, disabled states |

## Elevation

- **Feature Card (elevated):** `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 12px 24px -8px, rgba(0, 0, 0, 0.2) 0px 8px 24px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px 0px`
- **Standard Card:** `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset`
- **Floating App Icon:** `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- **Button (subtle):** `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`

## Imagery

Ngôn ngữ hình ảnh được xây dựng trên ba lớp: (1) product showcase hero lớn — hình chữ nhật bo tròn đại diện cho cửa sổ ứng dụng Sleeve với gradient xanh, hiển thị thẻ now-playing với album art, đặt ở trung tâm; (2) floating app icons quay quanh sản phẩm — YouTube (gradient đỏ-hồng), settings gear (xám), paint brush (xanh ngọc), play controls (xanh ngọc) — được render dưới dạng hình vuông bo tròn 60-80px với gradient fill và soft drop shadows, xoay ở góc hữu cơ để tạo chiều sâu; (3) embedded screenshots trong feature cards hiển thị bảng settings của ứng dụng với sidebar icon màu và size toggles. Cách xử lý hoàn toàn theo phong cách macOS-native: cửa sổ sản phẩm có traffic-light controls, tên ứng dụng trong title bar, và chrome ngày/giờ. Không có photography, không illustration, không abstract graphics — chỉ có chính sản phẩm và các UI component của nó được tái sử dụng làm marketing imagery. Các app icon nhiều màu là năng lượng màu sắc duy nhất trên trang và chúng hoạt động như các vệ tinh trang trí, không phải nội dung.

## Layout

Trang là một luồng đơn cột căn giữa, max-width 1200px trên canvas trắng tinh. Hero là bố cục full-bleed không có container — cửa sổ product showcase nằm ở trung tâm với các floating app icons rải rác xung quanh ở góc hữu cơ, và display heading 'Sleeve 3' nằm bên dưới ở 96px căn giữa. Tất cả các section tiếp theo tuân theo cùng mẫu max-width căn giữa: eyebrow label xanh nhỏ, heading 48px căn giữa, body paragraph căn giữa, sau đó feature grid 2 cột với gap 24px. Feature grid xen kẽ giữa card text-left/visual-right và text-right/visual-left bất đối xứng, tạo nhịp đọc zigzag. Navigation là thanh trên cùng trong suốt tối giản không có background fill — nó nổi phía trên hero. Nhịp section rộng rãi: ~96px giữa các section chính, với canvas trắng làm toàn bộ công việc phân cách thị giác. Không có dark sections, không alternating bands, không divider — chỉ có khoảng trắng và border 1px #e5e7eb trên card.

## Agent Prompt Guide

## Quick Color Reference
- Text: #000000 (primary), #333333 (secondary), #999999 (muted)
- Background: #ffffff (canvas), #f9fafb (subtle surface)
- Border: #e5e7eb (hairline), #cccccc (deep)
- Accent: #0e95ee (blue label)
- primary action: không có màu CTA riêng biệt

## Example Component Prompts

1. **Display Heading + Section Heading**: Tạo hero căn giữa với display heading 96px ở weight 900, #000000, letter-spacing -2.4px, line-height 1.0. Bên dưới, section heading 48px ở weight 700, #000, letter-spacing -1.2px, line-height ~1.08. Canvas trắng, không nền.

2. **Feature Card with Embedded Screenshot**: Tạo feature card 2 cột: fill #ffffff, border 1px solid #e5e7eb, radius 24px, padding 36px. Cột trái: heading 24px weight 700, body paragraph 16px, line-height 16px. Cột phải: sub-card với fill #f9fafb, radius 16px, hiển thị bảng settings với các icon tile màu trong sidebar.

3. **Floating App Icon Composition**: Tạo product showcase căn giữa: hình chữ nhật bo tròn rộng 600px với radius 24px, fill bằng linear-gradient(to right top, #0e95ee, #27c9f5). Xung quanh nó, rải 5-6 floating app icons 60px ở góc xoay (-15° đến +20°), mỗi icon có gradient fill màu và drop shadow rgba(0,0,0,0.1) 0px 10px 15px -3px.

Không có màu primary action riêng biệt được quan sát; dùng các neutral button treatments đã trích xuất thay vì tự tạo màu CTA filled.

5. **Section Label + Heading**: Tạo intro section căn giữa: label uppercase 13px 'THEMING' ở weight 600, #0e95ee, letter-spacing 0.05em. Bên dưới, gap 32px, sau đó heading 48px 'Themes to match your style.' ở weight 700, #000, tracking -1.2px.

## Typographic Restraint

Hệ thống dùng một typeface duy nhất (system sans-serif) nhưng coi weight và tracking là ngôn ngữ thị giác chính. Weight 900 ở 96px với tracking -2.4px được dành riêng cho chính xác một element mỗi trang — display tên sản phẩm. Weight 700 ở 48px với tracking -1.2px gánh vác tất cả section headings. Weight 500-600 ở 15-16px với tracking bình thường là body. Weight 600 ở 12-13px với tracking +0.6px và uppercase là hệ thống eyebrow label. Hệ thống phân cấp thị giác được tạo hoàn toàn bằng bước nhảy kích cỡ (96 → 48 → 24 → 16) và tương phản weight (900 → 700 → 500), không phải bằng màu sắc hay trang trí. Một AI agent không bao giờ nên giới thiệu typeface thứ hai hoặc dùng weight 400 cho bất cứ thứ gì lớn hơn body text.

## Iconography

Icon nhiều màu, gradient-filled, và được render dưới dạng hình vuông bo tròn phong cách 3D (radius 16-20px). Chúng hoạt động như vệ tinh trang trí xung quanh sản phẩm, không phải UI controls chức năng. Mỗi icon đại diện cho một hệ thống hoặc ứng dụng: YouTube (gradient đỏ-hồng), settings (xám), paint (xanh ngọc), play controls (xanh ngọc), share (hồng), music note (xanh ngọc), Aa (gradient tím). Các icon dùng tỷ lệ app icon phong cách macOS (hơi squircle, không phải hình vuông hoàn hảo) và luôn được render với soft drop shadow để tạo chiều sâu. Inline functional icons (icon social X, logo Apple, mũi tên dismiss) phẳng, đơn sắc, và weight 400-500 — chúng không khớp với phong cách decorative icon.

## Similar Brands

- **Linear** — Cùng bảng màu đơn sắc với text đen trên nền trắng, section headings weight-700 cỡ lớn, và zero chromatic UI elements — chính sản phẩm mang tất cả màu sắc
- **Setapp** — Nhịp trang sản phẩm macOS tương tự: product screenshots nổi trên nền trắng vô tận, card grid bo tròn cho features, radius 24px xuyên suốt
- **Things 3 (Cultured Code)** — Chia sẻ ngôn ngữ thiết kế macOS-native với system sans-serif typography, display headings tracking dày, và UI tối giản màu sắc để product screenshots chiếm ưu thế
- **Raycast** — Cùng mẫu hero: product showcase căn giữa trên canvas trắng, feature cards 2 cột sạch sẽ, và giao diện đơn sắc với accent color dành riêng cho decorative gradients
- **Apple Product Pages** — Dòng dõi trực tiếp: layout max-width căn giữa, display type cỡ lớn 96px+, pill-shaped CTAs, và cách xử lý 'infinite white gallery' cho product imagery

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-ink: #000000;
  --color-graphite: #333333;
  --color-slate: #374151;
  --color-silver-mist: #e5e7eb;
  --color-ash: #cccccc;
  --color-smoke: #999999;
  --color-pure-white: #ffffff;
  --color-paper-white: #f9fafb;
  --color-ocean-drift: #0e95ee;
  --gradient-ocean-drift: linear-gradient(to right top, #0e95ee, #27c9f5);
  --color-cyan-splash: #27c9f5;
  --gradient-cyan-splash: linear-gradient(to right bottom, rgba(150,255,238,0.1), rgba(24,192,233,0.1));

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 16;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 22;
  --text-body: 16px;
  --leading-body: 24;
  --text-subheading: 18px;
  --leading-subheading: 26;
  --text-heading-sm: 20px;
  --leading-heading-sm: 28;
  --text-heading: 24px;
  --leading-heading: 32;
  --text-heading-lg: 48px;
  --leading-heading-lg: 52;
  --tracking-heading-lg: -1.2px;
  --text-display: 96px;
  --leading-display: 96;
  --tracking-display: -2.4px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-160: 160px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 24px;
  --radius-pills: 9999px;
  --radius-small: 8px;
  --radius-inputs: 12px;
  --radius-buttons: 12px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 12px 24px -8px, rgba(0, 0, 0, 0.2) 0px 8px 24px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-xl: rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.05) 0px 8px 10px -6px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card-surface: #ffffff;
  --surface-subtle-surface: #f9fafb;
  --surface-border-tier: #e5e7eb;
  --surface-deep-border: #cccccc;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-ink: #000000;
  --color-graphite: #333333;
  --color-slate: #374151;
  --color-silver-mist: #e5e7eb;
  --color-ash: #cccccc;
  --color-smoke: #999999;
  --color-pure-white: #ffffff;
  --color-paper-white: #f9fafb;
  --color-ocean-drift: #0e95ee;
  --color-cyan-splash: #27c9f5;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 16;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 22;
  --text-body: 16px;
  --leading-body: 24;
  --text-subheading: 18px;
  --leading-subheading: 26;
  --text-heading-sm: 20px;
  --leading-heading-sm: 28;
  --text-heading: 24px;
  --leading-heading: 32;
  --text-heading-lg: 48px;
  --leading-heading-lg: 52;
  --tracking-heading-lg: -1.2px;
  --text-display: 96px;
  --leading-display: 96;
  --tracking-display: -2.4px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 12px 24px -8px, rgba(0, 0, 0, 0.2) 0px 8px 24px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-xl: rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.05) 0px 8px 10px -6px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}
```