# Steep

> Steep — Style Reference

## Prompt Content

```
# Steep — Style Reference
> Bình minh dịu nhẹ trên dashboard bằng đá cẩm thạch

**Theme:** light

Steep là một workspace phân tích dữ liệu ban ngày: một canvas gần như không màu với các bề mặt trắng và xám ấm, được sưởi ấm bởi một điểm nhấn màu rust-peach duy nhất, tiết chế, và được làm mềm mại bởi cặp serif/sans mang phong cách editorial hơn là doanh nghiệp. Hero là một bình minh rực ánh đào — một vùng sáng radial mềm mại phía sau headline Signifier hoành tráng và các thẻ sản phẩm nổi — sau đó màn hình chuyển sang một dashboard mát mẻ như đá cẩm thạch, nơi sản phẩm tự lên tiếng. Signifier đảm nhận toàn bộ trọng lượng display (một sự tương phản có chủ đích với body text Sohne mang tính tiện dụng), radii được làm rộng rãi (các thẻ 24px có cảm giác như gạch men, không phải cửa sổ), và toàn bộ bảng màu coi màu sắc như dấu câu: chrome là đơn sắc, data visualization chỉ có hai giọng màu (rust ấm và xanh lam mát), và một nút filled dark duy nhất làm tất cả việc kêu gọi hành động. Kết quả mang cảm giác gần với layout tạp chí hơn là một SaaS dashboard — tĩnh lặng, mang phong cách editorial, đầy tự tin.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink | `#17191c` | `--color-ink` | Văn bản chính, nút CTA filled, bề mặt tối — gần như đen với một chút hơi ấm, kết hợp tự nhiên với điểm nhấn peach |
| Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, bề mặt thẻ, văn bản trên nút tối |
| Fog | `#f7f7f8` | `--color-fog` | Canvas phụ và nền section, bề mặt sidebar |
| Ash | `#4c4c4c` | `--color-ash` | Body text mờ, stroke phụ |
| Graphite | `#777b86` | `--color-graphite` | Văn bản cấp ba, stroke icon, đường viền link không hoạt động |
| Dove | `#a3a6af` | `--color-dove` | Đường viền mảnh (hairline), placeholder text, dấu phân cách ít quan trọng |
| Slate | `#8b8c8d` | `--color-slate` | Đường viền icon và link tinh tế trong ngữ cảnh ít quan trọng |
| Obsidian | `#000000` | `--color-obsidian` | Đường viền sắc nét, hairline, stroke sâu — được dùng ở trọng lượng rất nhỏ để phân định mà không cần màu sắc |
| Rust | `#5d2a1a` | `--color-rust` | Điểm nhấn ấm đặc trưng — stroke biểu đồ donut, điểm nhấn đường biểu đồ, đường viền data-viz ấm, stroke trang trí |
| Apricot Wash | `#fbe1d1` | `--color-apricot-wash` | Nền thẻ ấm mềm cho widget dữ liệu tông ấm, lớp phủ sáng hero |
| Sky Wash | `#d3e3fc` | `--color-sky-wash` | Nền thẻ mát mềm cho widget dữ liệu tông lạnh và bề mặt chat |

## Tokens — Typography

### Signifier — Display serif chỉ dùng cho hero và section headline — nơi duy nhất thương hiệu 'cất giọng'. Trọng lượng editorial của nó đối lập với tính tiện dụng của Sohne là động thái typographic đặc biệt nhất của hệ thống · `--font-signifier`
- **Thay thế:** GT Sectra, Tiempos Headline, Source Serif Pro
- **Weights:** 400
- **Kích thước:** 44px, 64px, 90px
- **Line height:** 1.10
- **Letter spacing:** -0.025em ở 64-90px, -0.015em ở 44px
- **Vai trò:** Display serif chỉ dùng cho hero và section headline — nơi duy nhất thương hiệu 'cất giọng'. Trọng lượng editorial của nó đối lập với tính tiện dụng của Sohne là động thái typographic đặc biệt nhất của hệ thống

### Sohne — Body và UI workhorse — navigation, nút bấm, ô bảng, label form, chú thích. Các micro-weight 430/450/480 khác thường tạo ra một hệ thống phân cấp tinh tế trên các màn hình dày đặc dữ liệu mà không cần thay đổi font family · `--font-sohne`
- **Thay thế:** Inter, Untitled Sans, Söhne (thương mại), General Sans
- **Weights:** 400, 430, 450, 480, 500
- **Kích thước:** 14px, 15px, 16px, 17px, 18px, 22px, 26px
- **Line height:** 1.25-1.50
- **Letter spacing:** -0.009em
- **Vai trò:** Body và UI workhorse — navigation, nút bấm, ô bảng, label form, chú thích. Các micro-weight 430/450/480 khác thường tạo ra một hệ thống phân cấp tinh tế trên các màn hình dày đặc dữ liệu mà không cần thay đổi font family

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|-------------|----------------|-------|-------|
| caption | 14px | 1.5 | -0.13px | `--text-caption` |
| body | 16px | 1.38 | -0.14px | `--text-body` |
| body-lg | 18px | 1.35 | -0.16px | `--text-body-lg` |
| subheading | 22px | 1.25 | -0.2px | `--text-subheading` |
| heading-sm | 26px | 1.18 | -0.23px | `--text-heading-sm` |
| heading | 44px | 1.1 | -0.66px | `--text-heading` |
| heading-lg | 64px | 1.1 | -1.6px | `--text-heading-lg` |
| display | 90px | 1.1 | -2.25px | `--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` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 124 | 124px | `--spacing-124` |
| 128 | 128px | `--spacing-128` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 24px |
| images | 12px |
| inputs | 16px |
| avatars | 9999px |
| buttons | 9999px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1)...` | `--shadow-subtle` |

### Layout

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

## Components

### Filled Dark CTA
**Vai trò:** Nút hành động chính

Hình pill (radius 9999px), nền Ink (#17191c), chữ trắng Sohne 15px weight 450, padding 8px 20px, tracking -0.009em. Nút filled duy nhất trong hệ thống; tối đa một nút trên mỗi màn hình.

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

Chữ Ink (#17191c), Sohne 15px weight 450, không viền hoặc nền, đặt ngang hàng với CTA filled. Nằm ngay bên phải nút chính.

### Top Navigation Bar
**Vai trò:** Điều hướng toàn cục

Nền trắng, không shadow, logo Ink bên trái, các link điều hướng ngang (Product, Resources, Customers, Pricing) Sohne 15px Ink, ghost text-link và CTA filled nhóm bên phải. Sticky, cao 64-72px, có thể có hairline Dove ở viền dưới.

### Product Dashboard Card
**Vai trò:** Vùng chứa widget dữ liệu

Bề mặt trắng, radius 24px, padding trong 20-24px, card shadow (1px ink-tinted border-shadow + soft drop 20px/25px). Chứa một data visualization duy nhất: biểu đồ cột, donut, đường, hoặc bảng.

### Warm Data Card
**Vai trò:** Thẻ biểu đồ với điểm nhấn ấm

Nền Apricot Wash (#fbe1d1), radius 24px, padding 20-24px. Chứa visualization tông ấm (donut với stroke Rust, line chart với fill Rust). Dùng có chừng mực để làm ấm lưới dữ liệu.

### Cool Data Card
**Vai trò:** Thẻ biểu đồ với điểm nhấn mát

Nền Sky Wash (#d3e3fc), radius 24px, padding 20-24px. Chứa visualization tông lạnh (bar chart tông xanh, line chart xanh lam).

### Sidebar Navigation
**Vai trò:** Điều hướng ứng dụng sản phẩm

Nền Fog (#f7f7f8), rộng ~240px, không viền. Logo ở trên cùng, mục điều hướng chính với icon 16px + text Sohne 15px Ink, các phần được nhóm (Teams với indicator chấm màu, Favorites). Mục active hiển thị nền tint nhẹ.

### Chat Input Field
**Vai trò:** Ô nhập truy vấn AI

Bề mặt trắng, radius 16-20px, padding 16px 20px, viền Dove 1px tinh tế, placeholder Sohne 15px Graphite. Nút gửi hình tròn đen (40px, radius 9999px) neo bên phải.

### AI Response Card
**Vai trò:** Phản hồi chat kèm biểu đồ

Bề mặt trắng, radius 24px, soft shadow, chứa: thẻ biểu đồ xanh nhạt (Sky Wash, radius 16px) với line chart hai màu (Rust cho 'tháng trước', xanh lam cho hiện tại), tiếp theo là heading H3 và body text Ink và Ash.

### Avatar Badge
**Vai trò:** Đánh dấu danh tính người dùng

Hình tròn 32-40px, radius 9999px, nền pastel màu (bạc hà, xanh trời, đào), monogram 2 chữ cái Ink 13px weight 500. Nổi trên thẻ biểu đồ như chú thích chú thích.

### Region Stats Card
**Vai trò:** Widget bảng dữ liệu nhỏ gọn

Bề mặt trắng, radius 24px, padding 20px. Tiêu đề Sohne 15px weight 500 Ink, các hàng với tên vùng Graphite 14px và số đếm căn phải Ink 14px weight 480. Khoảng cách hàng 12px.

### Floating Hero Card
**Vai trò:** Xem trước sản phẩm trang trí trong hero

Bề mặt trắng, radius 24px, soft elevation shadow, đặt ở vị trí tuyệt đối xung quanh headline hero. Tạo một shadow đặc trưng duy nhất: 1px ink-tinted border + soft drop 20px/25px + micro drop 8px/10px. Neo với một avatar badge ở một góc.

### Stat Card with Delta
**Vai trò:** Hiển thị KPI

Bề mặt trắng, radius 24px, padding 20px. Số Sohne lớn (26-44px Signifier hoặc Sohne 480 lớn) Ink, label caption nhỏ Graphite 13px, chỉ báo delta xanh/đỏ với mũi tên 12px.

## Do's and Don'ts

### Nên
- Chỉ dùng Signifier ở 44-90px cho hero và section headline; không bao giờ dưới 40px
- Đặt radius CTA filled là 9999px với nền Ink (#17191c) — một nút trên mỗi viewport, ghép cặp bên phải với text-link phụ
- Dùng radius 24px cho tất cả content card, 20px cho padding trong, 12px cho crop ảnh sản phẩm
- Chỉ dùng hiệu ứng glow gradient ấm cho ngữ cảnh hero; product UI chỉ dùng canvas trắng/Fog
- Áp dụng Apricot Wash (#fbe1d1) và Sky Wash (#d3e3fc) làm nền thẻ cho widget dữ liệu, không phải làm lớp phủ trang trí
- Đặt letter-spacing là -0.009em trên tất cả text Sohne và -0.025em trên Signifier 64px+
- Xây dựng card shadow đặc trưng dưới dạng xếp ba lớp: 1px ink-tinted border + drop 20px/25px + micro drop 8px/10px

### Không nên
- Không dùng Signifier cho body copy, label, navigation, hoặc bất cứ thứ gì dưới 40px
- Không đưa các màu xanh lam, xanh lục hoặc đỏ bão hòa vào UI chrome — giọng màu duy nhất là Rust và hai pastel wash
- Không dùng góc nhọn dưới 12px; hệ thống phụ thuộc vào radii rộng để tạo cảm giác mềm mại
- Không đặt radial gradient ấm ở bất kỳ đâu ngoài hero section
- Không thêm viền nặng hơn 1px; việc phân định được thực hiện thông qua surface tint và radii
- Không dùng fill Ink tối cho bất cứ thứ gì khác ngoài CTA chính và văn bản tối
- Không vượt quá một nút filled trên mỗi màn hình; hành động phụ là text link, không phải ghost button

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Canvas | `#ffffff` | Nền trang, nền hero |
| 2 | Fog | `#f7f7f8` | Nền section, canvas sidebar, vỏ sản phẩm |
| 3 | Card | `#ffffff` | Content card nâng cao với radius 24px |
| 4 | Warm Tint | `#fbe1d1` | Thẻ data visualization với biểu đồ tông ấm |
| 5 | Cool Tint | `#d3e3fc` | Thẻ data visualization với biểu đồ tông lạnh, bề mặt bong bóng chat |
| 6 | Ink | `#17191c` | Bề mặt tối cho CTA filled, khối tương phản cao |

## Elevation

- **Floating product card:** `rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`

## Imagery

Trang web không sử dụng ảnh chụp hoặc minh họa trong marketing chrome — sự thú vị về mặt thị giác được tạo ra hoàn toàn bằng các thẻ UI sản phẩm nổi (data widget, chat input, stat block) quay quanh headline hero. Các thẻ này được render dưới dạng bề mặt trắng sắc nét với nội dung sản phẩm thực (bar chart, donut chart, line graph, avatar) thay vì trang trí trừu tượng. Ảnh chụp màn hình sản phẩm bên trong ứng dụng là dashboard trắng sạch trên canvas Fog với sidebar navigation. Iconography là dạng outline ~16-20px, đơn sắc Ink hoặc Graphite, với stroke weight 1.5-2px phù hợp với ngôn ngữ đường viền hairline. Avatar badge sử dụng nền pastel (bạc hà, xanh trời, đào) làm màu nhấn duy nhất trong UI.

## Layout

Trang marketing sử dụng cột căn giữa max-width ~1200px với hero trải rộng toàn bộ viewport width. Hero căn giữa một headline Signifier lớn (một hoặc hai dòng) trên một radial gradient ấm mềm, với subtitle và nhóm CTA căn giữa bên dưới, được bao quanh bởi bốn thẻ sản phẩm nổi đặt ở các góc và cạnh. Bên dưới hero, các section xen kẽ giữa các dải trắng và Fog (#f7f7f8) với khoảng cách dọc 80px. Các khối nội dung thường sử dụng chia 2 cột (text + visual) hoặc lưới thẻ 3 cột. Ứng dụng sản phẩm sử dụng sidebar cố định bên trái (240px) với vùng nội dung linh hoạt chứa lưới thẻ đáp ứng (3-4 cột widget radius 24px). Navigation là một sticky top bar duy nhất — không có mega-menu, không có sidebar marketing nav.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #17191c (Ink)
- background: #ffffff (Pure White)
- surface: #f7f7f8 (Fog)
- border: #a3a6af (Dove) / #777b86 (Graphite)
- accent: #5d2a1a (Rust)
- primary action: #17191c (filled action)

**Ví dụ Component Prompts**
1. *Hero section:* canvas trắng với hiệu ứng radial gradient mềm #fbe1d1 độ mờ 30%, căn giữa. Headline 64px Signifier weight 400, #17191c, letter-spacing -1.6px. Subtitle 18px Sohne weight 400, #4c4c4c. CTA filled (Ink #17191c, chữ trắng, radius 9999px, padding 8px 20px) ghép cặp bên phải với text-link phụ.

2. *Dashboard card grid:* Canvas Fog (#f7f7f8), lưới 3 cột thẻ trắng (radius 24px, padding 20px, signature three-layer shadow). Một thẻ dùng nền Apricot Wash với biểu đồ donut stroke Rust; thẻ khác dùng Sky Wash với bar chart xanh lam.

3. *AI response card:* bề mặt trắng, radius 24px, signature shadow. Thẻ biểu đồ bên trong với nền Sky Wash (radius 16px) chứa line chart hai đường — Rust (#5d2a1a) cho kỳ trước, #4a90e2 xanh lam cho hiện tại. Tiếp theo là heading 26px Sohne weight 500 Ink và body text 16px Sohne weight 400 Ash với inline link xanh lam.

4. *Sidebar navigation:* Nền Fog (#f7f7f8), rộng 240px, không viền. Logo ở trên cùng, mục nav với icon outline 16px + text 15px Sohne 450 Ink, nhóm dưới label section (13px Sohne 500 Graphite, chữ hoa, tracking 0.5px). Mục active hiển thị nền #ffffff với radius 12px.

5. *Region stats card:* bề mặt trắng, radius 24px, padding 20px. Tiêu đề 'Region' 15px Sohne 500 Ink. Các hàng 14px Sohne — tên vùng #777b86, số đếm căn phải Ink weight 480, cách nhau bằng khoảng cách dọc 12px không có dấu phân cách nhìn thấy được.

## Typographic Voice

Cặp Signifier/Sohne là quyết định dễ nhận biết nhất của thương hiệu. Signifier là giọng editorial — chỉ dùng khi trang đang tuyên bố điều gì đó (hero headline, section opener, có thể là pull quote). Sohne là giọng làm việc cho mọi thứ khác, bao gồm cả subheading hiếm hoi lớn hơn 22px. Dải micro-weight (430, 450, 480) trong Sohne tạo ra một hệ thống phân cấp chi tiết thay thế cho cặp bold/regular thông thường — table header weight 450 được đọc là 'quan trọng' mà không bị nặng nề. Không bao giờ dùng bold cho Sohne; thay vào đó dùng weight 480 hoặc 500. Không bao giờ đặt Signifier dưới 40px — nó sẽ mất đi uy quyền editorial và trở thành một thứ mới lạ kỳ cục.

## Similar Brands

- **Linear** — Cùng sự tiết chế editorial: một CTA pill tối duy nhất, card radii rộng 24px+, canvas không màu với một điểm nhấn tiết chế duy nhất, và hệ thống hai typeface kết hợp display face đặc biệt với utility sans
- **Vercel** — Phù hợp với mẫu hero floating-product-cards-around-headline, chrome đơn sắc với hiệu ứng glow gradient ấm, và cùng UI sản phẩm 'marble dashboard' với sidebar + card grid
- **Stripe** — Cùng cặp typography editorial (serif display + sans body), spacing rộng rãi, và việc sử dụng pastel tint mềm làm nền thẻ cho data visualization
- **Raycast** — Chia sẻ ngôn ngữ pill-button + chrome đơn sắc + radii rộng, mặc dù Raycast tối hơn và nhỏ gọn hơn; Steep là phiên bản ánh sáng ban ngày tương đương
- **Height** — Cùng bảng màu công cụ năng suất không màu với một điểm nhấn ấm duy nhất, radii lớn, và cảm giác editorial-nhẹ của một công cụ coi dữ liệu là nội dung thay vì chrome

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #17191c;
  --color-pure-white: #ffffff;
  --color-fog: #f7f7f8;
  --color-ash: #4c4c4c;
  --color-graphite: #777b86;
  --color-dove: #a3a6af;
  --color-slate: #8b8c8d;
  --color-obsidian: #000000;
  --color-rust: #5d2a1a;
  --color-apricot-wash: #fbe1d1;
  --color-sky-wash: #d3e3fc;

  /* Typography — Font Families */
  --font-signifier: 'Signifier', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sohne: 'Sohne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: -0.13px;
  --text-body: 16px;
  --leading-body: 1.38;
  --tracking-body: -0.14px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.35;
  --tracking-body-lg: -0.16px;
  --text-subheading: 22px;
  --leading-subheading: 1.25;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.18;
  --tracking-heading-sm: -0.23px;
  --text-heading: 44px;
  --leading-heading: 1.1;
  --tracking-heading: -0.66px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.6px;
  --text-display: 90px;
  --leading-display: 1.1;
  --tracking-display: -2.25px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-w430: 430;
  --font-weight-w450: 450;
  --font-weight-w480: 480;
  --font-weight-medium: 500;

  /* 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-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-124: 124px;
  --spacing-128: 128px;
  --spacing-160: 160px;

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

  /* Border Radius */
  --radius-sm: 0.01px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 24px;
  --radius-images: 12px;
  --radius-inputs: 16px;
  --radius-avatars: 9999px;
  --radius-buttons: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-fog: #f7f7f8;
  --surface-card: #ffffff;
  --surface-warm-tint: #fbe1d1;
  --surface-cool-tint: #d3e3fc;
  --surface-ink: #17191c;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #17191c;
  --color-pure-white: #ffffff;
  --color-fog: #f7f7f8;
  --color-ash: #4c4c4c;
  --color-graphite: #777b86;
  --color-dove: #a3a6af;
  --color-slate: #8b8c8d;
  --color-obsidian: #000000;
  --color-rust: #5d2a1a;
  --color-apricot-wash: #fbe1d1;
  --color-sky-wash: #d3e3fc;

  /* Typography */
  --font-signifier: 'Signifier', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sohne: 'Sohne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: -0.13px;
  --text-body: 16px;
  --leading-body: 1.38;
  --tracking-body: -0.14px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.35;
  --tracking-body-lg: -0.16px;
  --text-subheading: 22px;
  --leading-subheading: 1.25;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.18;
  --tracking-heading-sm: -0.23px;
  --text-heading: 44px;
  --leading-heading: 1.1;
  --tracking-heading: -0.66px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.6px;
  --text-display: 90px;
  --leading-display: 1.1;
  --tracking-display: -2.25px;

  /* 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-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-124: 124px;
  --spacing-128: 128px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-sm: 0.01px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;

  /* Shadows */
  --shadow-subtle: rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
}
```