# Runway

> Runway — Style Reference

## Prompt Content

```
# Runway — Style Reference
> Sổ cái giấy kraft dưới đèn bàn hổ phách. Mỗi màn hình phải mang cảm giác như mở một cuốn sổ tài chính được sắp xếp gọn gàng: giấy kem, mực espresso, một màu nhấn ấm, không có bề mặt kỹ thuật số lạnh lẽo.

**Theme:** light

Runway tạo ra một không gian làm việc tài chính ấm áp như giấy: canvas kem (#f8f7f5) làm nền cho các bề mặt card trắng, divider linen ấm (#e3dfd5), và text espresso đậm (#261b07) trông như được in chứ không phải render. Một điểm nhấn amber duy nhất (#f9a600) là tín hiệu màu sắc duy nhất trong giao diện — nó đánh dấu hành động chính và không bao giờ dùng để trang trí, mang lại cho CTA trọng lượng như bút highlight trên trang sổ cái. Typography chặt chẽ và hơi humanist nhờ font custom Interphases Pro Variable với các weight không chuẩn (492, 584), tạo ra mật độ tự tin, đọc như một tài liệu kinh doanh được dàn trang đẹp. Shadow có màu nâu ấm, không phải xám lạnh, nên ngay cả độ cao cũng giống như các lớp giấy kraft thay vì panel nổi. Toàn bộ hệ thống truyền tải sự ấm áp mang tính phân tích — nghiêm túc về con số, nhưng dịu nhẹ cho mắt.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Cream Canvas | `#f8f7f5` | `--color-cream-canvas` | Nền trang, hero wash, shadow card nâng cao — lớp giấy ấm làm nền cho mọi màn hình |
| Pure Paper | `#ffffff` | `--color-pure-paper` | Bề mặt card, nền ảnh chụp màn hình sản phẩm, button fill cho ghost variant — lớp sạch trên nền cream |
| Linen Border | `#e3dfd5` | `--color-linen-border` | Màu divider chính, border card, separator section — xám ấm phân cách mà không cắt rời |
| Stone Mist | `#d5d2cd` | `--color-stone-mist` | Border button nhẹ, divider phụ — nhạt hơn Linen một bậc để phân cách lồng nhau |
| Warm Ash | `#aca89f` | `--color-warm-ash` | Base tint shadow, muted icon stroke — undertone nâu ấm giữ shadow đúng thương hiệu |
| Driftwood | `#8f897e` | `--color-driftwood` | Body text mờ, nav border, border heading phụ — dễ đọc nhưng lùi về sau |
| Bark | `#61594a` | `--color-bark` | Body text, nội dung phụ — xám đậm ấm cho đoạn văn và mô tả |
| Espresso | `#261b07` | `--color-espresso` | Text chính, heading, icon, nav text, footer text, top banner — đen ấm đậm thay thế đen thật trong toàn bộ hệ thống |
| Amber Signal | `#f9a600` | `--color-amber-signal` | Màu hành động vàng cho button fill, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi tập trung |
| Burnished Gold | `#e89b01` | `--color-burnished-gold` | Accent vàng cho border hành động outline, linked label, và điểm nhấn tương tác nhẹ. Không nâng lên làm màu CTA chính |
| Terracotta | `#f0624f` | `--color-terracotta` | Accent trang trí, chart highlight, warm icon stroke — sắc ấm phụ để nhấn thị giác |
| Wisteria | `#d5befa` | `--color-wisteria` | Nền badge mềm — wash lạnh duy nhất trong hệ thống, dùng tiết kiệm để phân biệt tag |
| Honey Wash | `#f8da9d` | `--color-honey-wash` | Nền badge ấm — tag fill pha amber cho nhãn trạng thái và danh mục |

## Tokens — Typography

### Interphases Pro Variable — Toàn bộ text giao diện — heading, body, nav, button, label. Mid-weight không chuẩn (492) và semibold (584) của font variable custom tạo ra nhịp điệu riêng biệt mà thang 400/500/600/700 tiêu chuẩn không thể sao chép. Tracking chặt (-0.022em ở display) làm cho headline có cảm giác được dàn chữ chứ không phải gõ. · `--font-interphases-pro-variable`
- **Thay thế:** Inter Variable (free alternative gần nhất với đặc tính geometric-humanist tương tự và dải weight rộng)
- **Weights:** 400, 492, 584
- **Sizes:** 12px, 14px, 16px, 20px, 24px, 36px, 56px, 65px, 72px
- **Line height:** 1.00, 1.13, 1.25
- **Letter spacing:** -0.0220em ở 72px, -0.0200em ở 56px, -0.0170em ở 36px, -0.0130em ở 24px, -0.0110em ở 20px, -0.0100em ở 16px, 0.0500em ở 12px
- **OpenType features:** `"ss01" on`
- **Vai trò:** Toàn bộ text giao diện — heading, body, nav, button, label. Mid-weight không chuẩn (492) và semibold (584) của font variable custom tạo ra nhịp điệu riêng biệt mà thang 400/500/600/700 tiêu chuẩn không thể sao chép. Tracking chặt (-0.022em ở display) làm cho headline có cảm giác được dàn chữ chứ không phải gõ.

### Type Scale

| Vai trò | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.25 | 0.6px | `--text-caption` |
| body-sm | 14px | 1.25 | -0.14px | `--text-body-sm` |
| body | 16px | 1.25 | -0.16px | `--text-body` |
| subheading-sm | 20px | 1.25 | -0.22px | `--text-subheading-sm` |
| subheading | 24px | 1.13 | -0.31px | `--text-subheading` |
| heading-sm | 36px | 1.13 | -0.61px | `--text-heading-sm` |
| heading | 56px | 1.13 | -1.12px | `--text-heading` |
| heading-lg | 65px | 1 | -1.43px | `--text-heading-lg` |
| display | 72px | 1 | -1.58px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 28 | 28px | `--spacing-28` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 63 | 63px | `--spacing-63` |
| 105 | 105px | `--spacing-105` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 8px |
| cards | 8px |
| badges | 4px |
| inputs | 8px |
| buttons | 8px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| sm | `color(srgb 0.14902 0.105882 0.027451 / 0.06) 0px 4px 8px 0px` | `--shadow-sm` |
| sm-2 | `color(srgb 1 1 1 / 0.56) 0px 2px 4px 0px inset, color(srg...` | `--shadow-sm-2` |

### Layout

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

## Components

### Amber CTA Button
**Vai trò:** Hành động chính

Button fill với nền #f9a600, text Espresso (#261b07), radius 8px, padding 8px 16px. Font: 16px Interphases weight 492. Mang một warm shadow stack: inset white highlight (rgba 255,255,255,0.56) ở 0px 2px 4px, outer drop (rgba nâu 0.06) ở 0px 4px 8px, cộng thêm shadow 1px 2px ở độ mờ 36% để tạo chiều sâu. Amber fill là nền button màu sắc duy nhất trong hệ thống.

### Ghost Button
**Vai trò:** Hành động phụ

Nền trong suốt với text và border Espresso (#261b07), radius 8px, padding 8px 16px. Border solid 1px màu #261b07. Cùng warm shadow như variant fill. Dùng kèm với amber CTA khi cần hai hành động.

### Pill Nav Button (Talk to a human)
**Vai trò:** CTA chuyển đổi cố định trong header

Amber fill (#f9a600) với text Espresso, radius 8px, padding 6px 12px. Tỷ lệ nhỏ hơn hero CTA — text 14px. Xuất hiện ở góc trên bên phải mọi viewport.

### Dashboard Card
**Vai trò:** Container UI sản phẩm

Bề mặt trắng (#ffffff) trên nền Cream Canvas (#f8f7f5). Radius 8px, border Linen 1px (#e3dfd5). Padding trong 32px. Warm shadow mềm: rgba(0.149, 0.106, 0.027, 0.06) 0px 4px 8px. Dùng cho toàn bộ bề mặt ứng dụng trong ảnh chụp màn hình sản phẩm.

### Metric Tile
**Vai trò:** Hiển thị KPI trong dashboard

Nền trắng, không border, radius 8px. Label metric ở caption 12px, giá trị ở 20-24px weight 584, delta indicator ở 12px. Chứa gradient line chart (gradient xanh dương→xanh lá) ở phần dưới.

### Sidebar Nav Item
**Vai trò:** Navigation trái trong UI sản phẩm

Nền trong suốt mặc định, radius 8px khi active. Trạng thái active dùng fill nền Linen (#e3dfd5) rất nhẹ. 14px Interphases weight 400, text Espresso. Padding 8px 12px. Icon prefix nhỏ ở 16px.

### Top Announcement Banner
**Vai trò:** Thanh quảng bá toàn trang

Nền Espresso (#261b07), text trắng, căn giữa. 14px Interphases weight 400. Strip full-bleed phía trên header chính. Không padding ngoài căn giữa dọc — chiều cao tối thiểu.

### G2 Trust Badge
**Vai trò:** Chỉ báo chứng minh xã hội

Badge inline với logo G2 nhỏ, text 'G2.com 4.8/5 stars' ở 12px Driftwood (#8f897e). Nằm bên trái header nav. Không nền hoặc border — tín hiệu uy tín chỉ bằng text.

### Tag/Badge
**Vai trò:** Nhãn danh mục hoặc trạng thái

Radius 4px, padding 4px 8px, 12px Interphases weight 492. Biến thể nền: Honey Wash (#f8da9d) với text Espresso, Wisteria (#d5befa) với text Espresso, hoặc Linen (#e3dfd5) với text Bark. Chỉ báo dạng pill nhỏ gọn.

### AI Chat Panel
**Vai trò:** Overlay giao diện hội thoại

Bề mặt trắng, radius 8px, border Linen nhẹ. Avatar hình tròn (24px) với chữ cái đầu, message text ở 14px Bark (#61594a). Input field ở dưới: radius 8px, border Linen 1px, placeholder màu Driftwood. Warm shadow giống dashboard card.

### Customer Logo Strip
**Vai trò:** Divider phần chứng minh xã hội

Logo grayscale trên nền Cream Canvas. Logo render màu Driftwood (#8f897e) hoặc nhạt hơn để giữ nhịp điệu đơn sắc. Không có container nền — logo nổi trên canvas với padding dọc rộng (48-64px phía trên và dưới).

### Feature Icon Block
**Vai trò:** Icon + text trong phần tính năng

Icon outline nhỏ (16-20px) màu Espresso (#261b07) với stroke 1.5px. Nằm phía trên tiêu đề heading-sm và mô tả body. Khoảng cách 16px giữa icon và tiêu đề, 8px giữa tiêu đề và body. Căn trái trong các cột text.

### Section Divider
**Vai trò:** Đường kẻ ngang giữa các khối nội dung

Border Linen solid 1px (#e3dfd5), full-width hoặc giới hạn theo content max-width. Dùng tiết kiệm — hầu hết các section chuyển tiếp qua whitespace.

## Do's and Don'ts

### Do
- Dùng #f9a600 (Amber Signal) làm nền button fill màu DUY NHẤT — không màu nào khác được xử lý button fill
- Đặt tất cả text bằng Interphases Pro Variable (hoặc Inter Variable thay thế) ở các weight đã định: 400 cho body, 492 cho nhấn mạnh và button, 584 cho heading và display
- Dùng Espresso (#261b07) cho tất cả text chính và icon — không bao giờ dùng #000000 thật; undertone ấm là một phần của thương hiệu
- Áp dụng shadow pha nâu ấm (rgba nâu 0.149, 0.106, 0.027) ở độ mờ 6% với spread 0px 4px 8px — không bao giờ dùng shadow xám lạnh
- Dùng radius 8px cho tất cả card, button và nav element; dành radius 4px cho badge và tag; không bao giờ dùng dạng pill bo tròn hoàn toàn ngoại trừ chỉ báo trạng thái
- Đặt headline với giá trị tracking chặt từ type scale (ví dụ -1.58px ở 72px, -0.31px ở 24px) — letter-spacing âm là yếu tố làm cho display type có cảm giác được dàn chữ chứ không phải gõ
- Xếp lớp bề mặt theo thứ tự Cream Canvas → Pure Paper → trắng nâng cao với shadow, dùng Linen (#e3dfd5) border để phân cách thay vì chuyển màu nền

### Don't
- Không đưa xanh dương, xanh lá, đỏ hoặc tím làm màu giao diện — các sắc màu duy nhất là amber (#f9a600, #e89b01) và accent ấm (terracotta, honey, wisteria)
- Không dùng #000000 cho text hoặc nền — Espresso (#261b07) duy trì chất lượng giấy ấm
- Không áp shadow với tint xám lạnh — tất cả shadow phải dùng base nâu ấm (srgb 0.149, 0.106, 0.027)
- Không dùng button fill với màu nào khác ngoài Amber Signal cho hành động chính — hành động phụ chỉ dùng ghost/outlined
- Không đặt body type ở weight 700 trở lên — weight 584 của font custom là semibold tối đa, và weight 492 đóng vai trò medium
- Không dùng line-height trên 1.25 cho bất kỳ text nào — hệ thống chặt chẽ và đậm đặc, không thoáng
- Không phân cách section bằng các dải nền màu — chuyển tiếp qua whitespace và Linen divider trên Cream Canvas liên tục

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|---------|-------|
| 0 | Cream Canvas | `#f8f7f5` | Nền trang cơ bản — bề mặt giấy ấm làm nền cho mọi nội dung |
| 1 | Pure Paper | `#ffffff` | Bề mặt card, panel UI sản phẩm — lớp trên cùng sạch sẽ |
| 2 | Linen Surface | `#e3dfd5` | Panel nâng cao nhẹ, trạng thái nav active, bề mặt phụ |
| 3 | Honey Wash | `#f8da9d` | Nền badge/tag ấm — bề mặt không tương tác cao nhất |

## Elevation

- **Dashboard Card:** `0px 4px 8px 0px rgba(38, 27, 7, 0.06)`
- **Primary CTA Button:** `inset 0px 2px 4px 0px rgba(255, 255, 255, 0.56), 0px 4px 8px 0px rgba(38, 27, 7, 0.06), 0px 1px 2px 0px rgba(38, 27, 7, 0.36)`

## Imagery

Ảnh chụp màn hình sản phẩm chiếm không gian thị giác chủ đạo — các mockup dashboard lớn hiển thị giao diện FP&A với gradient line chart (xanh dương sang xanh lá), metric tile và sidebar navigation. Không có ảnh chụp đời sống, không có illustration trừu tượng, không có 3D render. Logo khách hàng xuất hiện dưới dạng strip đơn sắc màu Driftwood xám, loại bỏ màu thương hiệu để duy trì tính nhất quán như giấy. Câu chuyện thị giác hoàn toàn do chính UI sản phẩm đảm nhận, được đóng khung trong canvas kem ấm. Icon trên các trang marketing là glyph outline đơn giản màu Espresso, stroke weight 1.5px.

## Layout

Cột nội dung căn giữa max-width 1200px với nền Cream Canvas full-bleed. Pattern hero là một stack headline căn giữa (eyebrow tag → display headline → subtitle mờ → dual CTA) theo sau là ảnh chụp màn hình sản phẩm lớn tràn ra hoặc gần mép viewport. Bên dưới hero, các section xen kẽ giữa khối text căn giữa và bố cục text-trái/sản phẩm-phải bất đối xứng, tất cả được phân cách bằng whitespace dọc 56-80px thay vì divider. Customer logo strip là một dải full-width. Header là một thanh ngang đơn giản: wordmark trái, nav giữa-phải, amber pill CTA cố định ở xa nhất bên phải. Không có sticky sidebar, không có mega-menu — nav nhỏ gọn và phẳng.

## Agent Prompt Guide

## Quick Color Reference
- Text (chính): #261b07 (Espresso)
- Text (body): #61594a (Bark)
- Text (mờ): #8f897e (Driftwood)
- Nền (canvas): #f8f7f5 (Cream)
- Nền (card): #ffffff (Pure Paper)
- Border: #e3dfd5 (Linen)
- Accent: #f9a600 (Amber — chỉ dùng cho CTA fill)
- Hành động chính: #f9a600 (fill action)

## Example Component Prompts

1. **Hero Section**: Nền Cream Canvas (#f8f7f5). Eyebrow tag ở 12px Interphases weight 492, letter-spacing 0.6px, text Espresso. Display headline ở 72px Interphases weight 584, line-height 1.0, letter-spacing -1.58px, text Espresso (#261b07), căn giữa. Subtitle ở 20px weight 400, Bark (#61594a), căn giữa, max-width 600px. Hai CTA cạnh nhau: Amber fill (#f9a600, text Espresso, radius 8px, padding 8px 16px, warm shadow) + Ghost button (trong suốt, border Espresso 1px, radius 8px, padding 8px 16px). Khoảng cách 56px giữa headline và subtitle, 24px giữa subtitle và CTA.

2. **Dashboard Card**: Bề mặt trắng (#ffffff), border Linen 1px (#e3dfd5), radius 8px, padding 32px, warm shadow (0px 4px 8px rgba(38,27,7,0.06)). Chứa một hàng header (16px weight 492, Espresso) và khu vực body với các metric tile bên dưới.

3. **Metric Tile**: Nền trắng, không border, radius 8px, padding 24px. Label ở 12px weight 400, Driftwood (#8f897e). Giá trị ở 24px weight 584, Espresso. Delta indicator ở 12px weight 492, Terracotta (#f0624f) cho giá trị dương. Gradient line chart (xanh dương sang xanh lá, độ mờ thấp) lấp đầy 60% phía dưới của tile.

4. **Navigation Header**: Wordmark 'runway' căn trái màu Espresso (#261b07) ở 20px weight 584. Link nav ngang giữa-phải ở 14px weight 400, text Espresso, khoảng cách 16px giữa các item. Xa nhất bên phải: Amber pill CTA (#f9a600, radius 8px, padding 6px 12px, 14px weight 492, text Espresso). Full-width, padding dọc 16px, border dưới Linen 1px.

5. **Tag/Badge**: Nền Honey Wash (#f8da9d), text Espresso, radius 4px, padding 4px 8px, 12px Interphases weight 492. Chỉ hiển thị dạng inline — không bao giờ dùng như một khối độc lập.

## Similar Brands

- **Mercury** — Cùng cream canvas ấm với text nâu đậm và cách tiếp cận single-accent hạn chế; cả hai đều mang cảm giác công cụ tài chính cao cấp được render bằng tông giấy
- **Pigment** — Bảng màu trung tính ấm tương tự và typography đậm đặc, nhỏ gọn cho sản phẩm lập kế hoạch tài chính; cả hai đều dùng warm shadow mềm thay vì elevation xám lạnh
- **Ramp** — Type scale chặt chẽ và ngôn ngữ thiết kế light-mode ấm tương tự cho fintech, dù Ramp nghiêng về lạnh hơn; chia sẻ pattern một màu CTA chromatic trên nền bề mặt muted
- **Causal** — Cả hai đều là công cụ FP&A với custom variable font, nền off-white ấm, và trang marketing chạy bằng ảnh chụp màn hình sản phẩm; cùng register thị giác editorial-meets-software

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-cream-canvas: #f8f7f5;
  --color-pure-paper: #ffffff;
  --color-linen-border: #e3dfd5;
  --color-stone-mist: #d5d2cd;
  --color-warm-ash: #aca89f;
  --color-driftwood: #8f897e;
  --color-bark: #61594a;
  --color-espresso: #261b07;
  --color-amber-signal: #f9a600;
  --color-burnished-gold: #e89b01;
  --color-terracotta: #f0624f;
  --color-wisteria: #d5befa;
  --color-honey-wash: #f8da9d;

  /* Typography — Font Families */
  --font-interphases-pro-variable: 'Interphases Pro Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.25;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.25;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.25;
  --tracking-body: -0.16px;
  --text-subheading-sm: 20px;
  --leading-subheading-sm: 1.25;
  --tracking-subheading-sm: -0.22px;
  --text-subheading: 24px;
  --leading-subheading: 1.13;
  --tracking-subheading: -0.31px;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.13;
  --tracking-heading-sm: -0.61px;
  --text-heading: 56px;
  --leading-heading: 1.13;
  --tracking-heading: -1.12px;
  --text-heading-lg: 65px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.43px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -1.58px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-w492: 492;
  --font-weight-w584: 584;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-63: 63px;
  --spacing-105: 105px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Named Radii */
  --radius-nav: 8px;
  --radius-cards: 8px;
  --radius-badges: 4px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;

  /* Shadows */
  --shadow-sm: color(srgb 0.14902 0.105882 0.027451 / 0.06) 0px 4px 8px 0px;
  --shadow-sm-2: color(srgb 1 1 1 / 0.56) 0px 2px 4px 0px inset, color(srgb 0.14902 0.105882 0.027451 / 0.06) 0px 4px 8px 0px, color(srgb 0.14902 0.105882 0.027451 / 0.36) 0px 1px 2px 0px;

  /* Surfaces */
  --surface-cream-canvas: #f8f7f5;
  --surface-pure-paper: #ffffff;
  --surface-linen-surface: #e3dfd5;
  --surface-honey-wash: #f8da9d;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-cream-canvas: #f8f7f5;
  --color-pure-paper: #ffffff;
  --color-linen-border: #e3dfd5;
  --color-stone-mist: #d5d2cd;
  --color-warm-ash: #aca89f;
  --color-driftwood: #8f897e;
  --color-bark: #61594a;
  --color-espresso: #261b07;
  --color-amber-signal: #f9a600;
  --color-burnished-gold: #e89b01;
  --color-terracotta: #f0624f;
  --color-wisteria: #d5befa;
  --color-honey-wash: #f8da9d;

  /* Typography */
  --font-interphases-pro-variable: 'Interphases Pro Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.25;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.25;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.25;
  --tracking-body: -0.16px;
  --text-subheading-sm: 20px;
  --leading-subheading-sm: 1.25;
  --tracking-subheading-sm: -0.22px;
  --text-subheading: 24px;
  --leading-subheading: 1.13;
  --tracking-subheading: -0.31px;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.13;
  --tracking-heading-sm: -0.61px;
  --text-heading: 56px;
  --leading-heading: 1.13;
  --tracking-heading: -1.12px;
  --text-heading-lg: 65px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.43px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -1.58px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-63: 63px;
  --spacing-105: 105px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Shadows */
  --shadow-sm: color(srgb 0.14902 0.105882 0.027451 / 0.06) 0px 4px 8px 0px;
  --shadow-sm-2: color(srgb 1 1 1 / 0.56) 0px 2px 4px 0px inset, color(srgb 0.14902 0.105882 0.027451 / 0.06) 0px 4px 8px 0px, color(srgb 0.14902 0.105882 0.027451 / 0.36) 0px 1px 2px 0px;
}
```