# Dock

> Dock — Style Reference

## Prompt Content

```
# Dock — Style Reference
> Nắng sớm trên giấy kem, nhịp đập cobalt

**Theme:** light

Dock vận hành trong ngôn ngữ không gian làm việc ngập nắng, ấm áp màu kem: nền #faf9f7 mềm mại thay thế phông nền SaaS trắng tinh thông thường, mang đến cho mọi màn hình cảm giác như giấy, gần gũi. Typography là yếu tố tạo trọng lượng — headline Roobert 84px đặt cạnh body text 16px với khoảng thở rộng rãi, khiến nội dung trông như những dòng chữ in tự tin thay vì UI chrome. Một màu xanh cobalt điện (#0068f9) duy nhất điểm xuyết vào bảng màu trung tính tĩnh lặng, là màu tương tác duy nhất: filled CTA, active state, và link đều dùng chung sắc xanh sống động này, trong khi màu violet phụ (#6736eb) xuất hiện tiết kiệm làm decorative accent. Các component vẫn siêu nhẹ — pill-shaped buttons, hairline borders, card nâng nhẹ, không shadow nặng — để ảnh chụp sản phẩm trở thành visual hero thay vì chrome bao quanh.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Canvas Cream | `#faf9f7` | `--color-canvas-cream` | Nền trang — màu trắng ngà ấm thay vì trắng tinh, mang đến cảm giác như giấy, gần gũi cho toàn bộ hệ thống |
| Surface Ivory | `#fbfaf7` | `--color-surface-ivory` | Bề mặt card và panel — sáng hơn canvas một bước để tạo độ nâng nhẹ mà không cần shadow |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt nâng cao, nền nav, text trên button filled CTA |
| Lavender Mist | `#f4f0ff` | `--color-lavender-mist` | Lớp phủ trang trí phía sau icon hoặc highlight badge — sắc lạnh đối trọng với nền kem ấm |
| Powder Blue | `#d6e4f1` | `--color-powder-blue` | Viền button outlined/ghost, divider xanh nhạt trong product UI |
| Ink Charcoal | `#121722` | `--color-ink-charcoal` | Text chính, heading, icon — gần đen với undertone xanh lạnh (tỷ lệ tương phản 17.9:1 trên nền trắng) |
| Deep Ink | `#1d1d1d` | `--color-deep-ink` | Text phụ, mảng nền tối cho footer hoặc chế độ tối |
| Mid Graphite | `#2d2d2d` | `--color-mid-graphite` | Nền tối cho các khoảnh khắc dark UI (footer dark blocks, modal overlays) |
| Slate Gray | `#777c86` | `--color-slate-gray` | Body text phụ, metadata trên card, label trong bảng |
| Steel Gray | `#a5a5a5` | `--color-steel-gray` | Helper text mờ, placeholder text, disabled state |
| Hairline | `#efefef` | `--color-hairline` | Border và divider — đường phân cách gần như vô hình giữa card và section |
| Faint Gray | `#cccccc` | `--color-faint-gray` | Đường nét icon trong nav, border nhạt trên neutral control |
| Electric Cobalt | `#0068f9` | `--color-electric-cobalt` | Accent violet hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính |
| Deep Cobalt | `#024bb1` | `--color-deep-cobalt` | Trạng thái pressed/hover cho button Electric Cobalt — sắc xanh thương hiệu đậm hơn |
| Cerulean | `#0074dd` | `--color-cerulean` | Accent xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính |
| Vivid Violet | `#6736eb` | `--color-vivid-violet` | Decorative accent — màu thương hiệu phụ cho highlight tag, yếu tố minh họa, và xử lý logo khách hàng |
| Forest | `#046645` | `--color-forest` | Accent xanh lá hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |

## Tokens — Typography

### Roobert — Toàn bộ text — một typeface duy nhất vận hành toàn bộ hệ thống. Headline dùng weight 600–700 ở kích thước 48–84px với leading cực kỳ chặt (1.06–1.09) tạo nên những khối type dày đặc, tự tin. Body và nav dùng weight 400–500 ở 14–16px với leading rộng rãi 1.50–1.60 để dễ đọc trên nền kem. · `--font-roobert`
- **Thay thế:** Inter (open alternative gần nhất; phù hợp với geometric warmth và dải weight), hoặc Söhne / GT America nếu có license
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 13, 14, 15, 16, 18, 20, 24, 40, 48, 57, 84
- **Line height:** 1.06–1.60 (chặt ở display size: 84px→1.06, 57px→1.09; thoải mái ở body: 16px→1.56)
- **Letter spacing:** 0.077em trên các phần tử được track (uppercase labels, small caps trong nav)
- **OpenType features:** `"ss01" on, "kern" on`
- **Vai trò:** Toàn bộ text — một typeface duy nhất vận hành toàn bộ hệ thống. Headline dùng weight 600–700 ở kích thước 48–84px với leading cực kỳ chặt (1.06–1.09) tạo nên những khối type dày đặc, tự tin. Body và nav dùng weight 400–500 ở 14–16px với leading rộng rãi 1.50–1.60 để dễ đọc trên nền kem.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.5 | 0.077px | `--text-caption` |
| body | 16px | 1.56 | — | `--text-body` |
| subheading | 18px | 1.5 | — | `--text-subheading` |
| heading-sm | 20px | 1.38 | — | `--text-heading-sm` |
| heading | 24px | 1.33 | — | `--text-heading` |
| heading-lg | 40px | 1.25 | — | `--text-heading-lg` |
| heading-xl | 48px | 1.2 | — | `--text-heading-xl` |
| display | 57px | 1.09 | — | `--text-display` |
| display-lg | 84px | 1.06 | — | `--text-display-lg` |

## Tokens — Spacing & Shapes

**Base unit:** 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` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 88 | 88px | `--spacing-88` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 16px |
| icons | 60px |
| pills | 100px |
| images | 16px |
| buttons | 48px |
| navItems | 48px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle` |
| lg | `rgba(0, 0, 0, 0.04) 0px 20px 20px -8px` | `--shadow-lg` |

### Layout

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

## Components

### Primary Filled Button
**Vai trò:** Hành động chuyển đổi chính (ví dụ: Start for Free, Request Demo)

Background #0068f9, text #ffffff, weight 500 ở 15–16px. border-radius 48px (pill shape). padding 12px 24px. Không có border nhìn thấy được. Khi hover chuyển sang #024bb1.

### Ghost/Neutral Button
**Vai trò:** Hành động phụ (ví dụ: Request Demo bên cạnh filled CTA)

Background #ffffff, text #121722, weight 500 ở 15–16px. border-radius 48px. border 1px #efefef. padding 12px 24px. Nằm cạnh filled CTA với trọng lượng ngang nhau, tạo pattern button ghép đôi.

### Text Link
**Vai trò:** Điều hướng nội tuyến trong đoạn văn hoặc product UI

Màu #0074dd hoặc #0068f9, không gạch chân mặc định, gạch chân khi hover. weight 500 ở body size.

### Top Navigation Bar
**Vai trò:** Điều hướng chính của site

Background #ffffff, border dưới 1px #efefef. Logo trái, nav links giữa (Product, Pricing, Customers, Resources với dropdown chevrons), auth actions phải. Nav links ở 14–15px weight 500 #121722. Phía bên phải có Log in (text) + Request Demo (ghost pill) + Start for Free (filled cobalt pill).

### Hero Section
**Vai trò:** Headline và CTA phía trên fold

Background chuyển từ #faf9f7 sang gradient xanh nhạt (#d5ecff → #f4f0ff) ở phía dưới. Headline 84px weight 600, line-height 1.06, #121722, căn giữa. Subtext 18px weight 400 #121722, max-width ~640px. Hai CTA căn giữa: ghost Request Demo + filled Start for Free.

### Product Feature Card
**Vai trò:** Trưng bày khả năng sản phẩm (Deal Rooms, Enablement Agent, v.v.)

Background #ffffff, border-radius 16px, border 1px #efefef, subtle multi-layer shadow. Padding trong 24px. Thường đi kèm với ảnh chụp sản phẩm tràn ra ngoài card hoặc nằm trên nền gradient.

### Tab Bar
**Vai trò:** Chuyển đổi giữa các khu vực tính năng sản phẩm

Hàng ngang các label text (Deal Rooms, Enablement Agent, AI Documents, v.v.). Tab active có pill background #fbfaf7 với radius 48px. Tab inactive là text #121722 trơn. Không gạch chân hay border — pill background là indicator active duy nhất.

### Customer Stat Card
**Vai trò:** Bằng chứng xã hội với số liệu (Lattice +25% win rate, BrightHire +22%, Loom 2 hours saved)

Background #fbfaf7 đến #ffffff, radius 16px, border 1px #efefef. Logo công ty + product label ở trên (14–15px). Metric lớn ở 40–48px weight 600 với màu #0068f9 (cobalt) hoặc #6736eb (violet) — màu thay đổi theo từng card để tạo nhịp điệu. Không shadow nặng.

### Gradient CTA Banner
**Vai trò:** Phần chuyển đổi cuối cùng (Want a deeper tour of Dock?)

Full-width background với diagonal blue gradient từ #faf9f7 qua #c8dcf5 đến #0068f9 ở góc dưới bên phải. Headline 48–57px weight 600 #121722, căn giữa. Một button cobalt filled bên dưới. Gradient góc là signature — nó phủ xanh điện vào trang vốn yên tĩnh.

### Footer
**Vai trò:** Link toàn site và thông tin pháp lý

Background #ffffff, border trên 1px #efefef. Grid 6 cột danh sách link (Product, Sales, Enablement, Customer Success, Templates, Resources, General). Section header 13–14px weight 600, link 14px weight 400 #777c86. Logo trên cùng bên trái. Thanh dưới cùng với legal links + copyright 13px #a5a5a5.

### Pricing Table Row
**Vai trò:** Hiển thị giá sản phẩm trong Deal Room UI

Background #ffffff, border dưới 1px #efefef. Column header 14px weight 500 #777c86. Ô dữ liệu 15–16px weight 400 #121722. Có thể có background nhạt xen kẽ. Cột Total căn phải và weight 600.

### Checklist/Step Item
**Vai trò:** Theo dõi tác vụ trong sản phẩm (Success Criteria, Next Steps)

Icon check hình tròn màu xanh lá (#046645) cho completed, hình tròn rỗng cho pending. Text 15px weight 400 #121722. Row gap nhỏ gọn 6–8px. Badge tùy chọn bên phải (In Progress, Schedule call) dạng pill radius 8px với background pha màu.

## Do's and Don'ts

### Do
- Dùng #faf9f7 làm nền trang — không bao giờ thay thế canvas bằng #ffffff thuần
- Áp dụng pill radius 48px cho tất cả button và radius 16px cho tất cả card
- Đặt primary action button với fill #0068f9, text #ffffff, weight 500, 15–16px
- Dùng Roobert 84px weight 600 cho hero headline với line-height 1.06
- Ghép filled cobalt CTA với white ghost CTA trong hero section để tạo hierarchy cân bằng
- Dùng #efefef cho tất cả border — không bao giờ nặng hơn 1px
- Chỉ để gradient góc xanh điện xuất hiện trong CTA banner cuối cùng, không rải rác khắp trang

### Don't
- Không dùng #ffffff làm nền trang — nó phá hỏng cảm giác giấy kem ấm áp
- Không dùng flat shadow (ví dụ: box-shadow: 0 4px 8px) — hệ thống dùng feather-light multi-layer shadow hoặc không dùng
- Không thêm màu chromatic thứ hai vào CTA button — #0068f9 là màu action filled duy nhất
- Không đặt headline line-height trên 1.15 — leading chặt ở display size là signature
- Không dùng #6736eb cho CTA hoặc link — nó chỉ là decorative accent (tags, highlights, stat numbers)
- Không thêm gradient nặng vào card hoặc panel — gradient chỉ thuộc về CTA banner và hero background
- Không dùng border dày hơn 1px với #efefef hoặc #d6e4f1 — nét vẽ nặng hơn phá vỡ cảm giác nhẹ nhàng

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas Cream | `#faf9f7` | Nền trang — lớp cơ sở cho mọi nội dung |
| 1 | Surface Ivory | `#fbfaf7` | Card, panel — nâng nhẹ khỏi canvas mà không cần shadow |
| 2 | Pure White | `#ffffff` | Card nâng cao, nav bar, input fields, button hover |
| 3 | Lavender Mist | `#f4f0ff` | Lớp phủ highlight trang trí, vùng gradient hero |

## Elevation

- **Cards và panels:** `rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px -1px 1px 0px inset, rgba(0, 0, 0, 0.14) 0px 0px 0px 0.5px inset`
- **Ảnh chụp sản phẩm:** `rgba(0, 0, 0, 0.04) 0px 20px 20px -8px`

## Imagery

Ảnh chụp sản phẩm là hình ảnh chủ đạo: capture giao diện thực tế hiển thị Deal Rooms, pricing tables, checklists, và file tabs — không phải mockup. Các ảnh này được trình bày trong container bo tròn 16px, thường có soft shadow nhẹ (rgba(0,0,0,0.04) 0px 20px 20px -8px) và được đặt trên nền gradient hoặc lavender mist để tạo hiệu ứng nổi. Logo khách hàng (Lattice, BrightHire, Loom) xuất hiện dưới dạng marks nhỏ gọn ghép với số liệu metric có màu sắc. Không có ảnh chụp đời sống, không có minh họa trừu tượng, không có 3D render — sản phẩm CHÍNH LÀ hero. Icon tối giản, phong cách monoline, dùng tiết kiệm trong nav và status indicator.

## Layout

Full-width page với max-width 1200px nội dung căn giữa. Hero là stack căn giữa: headline 84px → subtext 18px (max ~640px) → hai pill buttons, nằm trên gradient kem-xanh. Feature section xen kẽ giữa full-bleed gradient background và contained card grid. Product tabs (Deal Rooms, Enablement Agent, v.v.) nằm dưới dạng horizontal pill-bar phía trên ảnh chụp sản phẩm lớn. Social proof dùng grid card 3 cột (Lattice / BrightHire / Loom) với company mark + product label + metric màu lớn. Final CTA là full-bleed section với diagonal blue gradient loe ra từ góc dưới bên phải. Footer là link grid 6 cột trên nền trắng. Vertical rhythm dùng section gap 80px; card dùng internal padding 24px với element gap 8px.

## Agent Prompt Guide

**Quick Color Reference**
- text: #121722
- background: #faf9f7
- card surface: #fbfaf7 hoặc #ffffff
- border: #efefef
- muted text: #777c86 hoặc #a5a5a5
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**
1. **Hero section**: Background gradient từ #faf9f7 (trên) đến #d5ecff (dưới). Headline 84px Roobert weight 600, #121722, line-height 1.06, căn giữa. Subtext 18px weight 400, #121722, max-width 640px. Hai CTA căn giữa: ghost button (#ffffff fill, #121722 text, border 1px #efefef, radius 48px, padding 12px 24px) + filled button (#0068f9 fill, #ffffff text, radius 48px, padding 12px 24px).
2. **Customer stat card**: Background #fbfaf7, radius 16px, border 1px #efefef, padding 24px. Logo công ty ở trên (cao 24px). Product label 14px weight 500 #777c86. Metric lớn 48px weight 600 màu #0068f9. Shadow nhẹ: rgba(0,0,0,0.07) 0px 1px 1px 0px + inset border.
3. **Product feature card with screenshot**: Background #ffffff, radius 16px, border 1px #efefef, padding 24px. Tab bar phía trên với active pill (#fbfaf7 fill, radius 48px). Ảnh chụp màn hình radius 16px, soft shadow 20px bên dưới, nằm trên background gradient #f4f0ff đến #ffffff.
Không quan sát thấy màu primary action riêng biệt; dùng các xử lý neutral button đã trích xuất thay vì tự tạo màu filled CTA.
5. **Tab bar**: Hàng ngang trên nền transparent. 5–7 label text 15px weight 500 #121722, cách nhau 24px. Tab active có background #fbfaf7, radius 48px, padding 8px 16px. Không gạch chân, không border — pill background là indicator active duy nhất.

## Radius Language

Hệ thống dùng dải radius rộng bất thường tạo nên sự mềm mại đặc trưng: 8px cho UI element nhỏ (badge, inline tag), 16px cho card và ảnh, 48px cho button và active nav state (pill shape), 60px cho icon container (gần tròn), và 100px cho decorative orbs. Button radius 48px là lựa chọn signature nhất — nó khiến mọi hành động trông như một viên nang vật lý, không phải hình chữ nhật sắc cạnh. Không bao giờ dùng radius 4px hoặc 6px; hệ thống cam kết hoàn toàn với sự mềm mại.

## Shadow Philosophy

Shadow gần như vô hình theo thiết kế. Card dùng micro-shadow 3 lớp (1px drop + 1px inset top + 0.5px inset border) đọc giống một đường viền tinh tế hơn là độ nâng. Ảnh chụp sản phẩm nhận một soft shadow 20px đơn lẻ ở độ mờ 4%. Hệ thống không bao giờ dùng heavy drop shadow, colored shadow, hay glow effect. Elevation được truyền đạt qua các bước lightness của background (canvas → ivory → white) thay vì độ sâu của shadow.

## Similar Brands

- **Linear** — Cùng kỷ luật single-accent-color (Linear dùng purple, Dock dùng cobalt) trên nền sáng ấm với pill-shaped buttons và type lớn tự tin
- **Attio** — Canvas kem/trắng ngà ấm thay vì trắng tinh, card bo tròn mềm, single vivid interactive color, section spacing rộng rãi
- **Raycast** — Light SaaS sạch sẽ với pill buttons, ảnh chụp sản phẩm làm hero, chrome tối giản, và single accent color đảm nhận mọi tương tác
- **Pitch** — Cùng cách để custom geometric typeface gánh vác thương hiệu, với component siêu nhẹ và hero section gradient làm khoảnh khắc signature
- **Loom** — Light theme ấm áp, gần gũi, mọi thứ đều bo tròn, và product UI được hiển thị dưới dạng ảnh chụp màn hình nhúng thay vì minh họa trừu tượng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-cream: #faf9f7;
  --color-surface-ivory: #fbfaf7;
  --color-pure-white: #ffffff;
  --color-lavender-mist: #f4f0ff;
  --color-powder-blue: #d6e4f1;
  --color-ink-charcoal: #121722;
  --color-deep-ink: #1d1d1d;
  --color-mid-graphite: #2d2d2d;
  --color-slate-gray: #777c86;
  --color-steel-gray: #a5a5a5;
  --color-hairline: #efefef;
  --color-faint-gray: #cccccc;
  --color-electric-cobalt: #0068f9;
  --color-deep-cobalt: #024bb1;
  --color-cerulean: #0074dd;
  --color-vivid-violet: #6736eb;
  --color-forest: #046645;

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

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.5;
  --tracking-caption: 0.077px;
  --text-body: 16px;
  --leading-body: 1.56;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.38;
  --text-heading: 24px;
  --leading-heading: 1.33;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.25;
  --text-heading-xl: 48px;
  --leading-heading-xl: 1.2;
  --text-display: 57px;
  --leading-display: 1.09;
  --text-display-lg: 84px;
  --leading-display-lg: 1.06;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-88: 88px;

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

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
  --radius-full: 48px;
  --radius-full-2: 60px;
  --radius-full-3: 100px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-icons: 60px;
  --radius-pills: 100px;
  --radius-images: 16px;
  --radius-buttons: 48px;
  --radius-navitems: 48px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px -1px 1px 0px inset, rgba(0, 0, 0, 0.14) 0px 0px 0px 0.5px inset;
  --shadow-lg: rgba(0, 0, 0, 0.04) 0px 20px 20px -8px;

  /* Surfaces */
  --surface-canvas-cream: #faf9f7;
  --surface-surface-ivory: #fbfaf7;
  --surface-pure-white: #ffffff;
  --surface-lavender-mist: #f4f0ff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-cream: #faf9f7;
  --color-surface-ivory: #fbfaf7;
  --color-pure-white: #ffffff;
  --color-lavender-mist: #f4f0ff;
  --color-powder-blue: #d6e4f1;
  --color-ink-charcoal: #121722;
  --color-deep-ink: #1d1d1d;
  --color-mid-graphite: #2d2d2d;
  --color-slate-gray: #777c86;
  --color-steel-gray: #a5a5a5;
  --color-hairline: #efefef;
  --color-faint-gray: #cccccc;
  --color-electric-cobalt: #0068f9;
  --color-deep-cobalt: #024bb1;
  --color-cerulean: #0074dd;
  --color-vivid-violet: #6736eb;
  --color-forest: #046645;

  /* Typography */
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.5;
  --tracking-caption: 0.077px;
  --text-body: 16px;
  --leading-body: 1.56;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.38;
  --text-heading: 24px;
  --leading-heading: 1.33;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.25;
  --text-heading-xl: 48px;
  --leading-heading-xl: 1.2;
  --text-display: 57px;
  --leading-display: 1.09;
  --text-display-lg: 84px;
  --leading-display-lg: 1.06;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-88: 88px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
  --radius-full: 48px;
  --radius-full-2: 60px;
  --radius-full-3: 100px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px -1px 1px 0px inset, rgba(0, 0, 0, 0.14) 0px 0px 0px 0.5px inset;
  --shadow-lg: rgba(0, 0, 0, 0.04) 0px 20px 20px -8px;
}
```