# Flowmapp

> # Flowmapp — Style Reference

## Prompt Content

```
# Flowmapp — Style Reference
> White blueprint desk with one blue pen

**Theme:** light

Flowmapp sử dụng ngôn ngữ sáng sủa, thoáng đãng, gần giống như một cuốn lab-notebook: nền gần như trắng tinh, headline đen đậm cỡ lớn, CTA hình pill màu xanh dương, và một chùm các mockup sản phẩm nhỏ nổi lơ lửng — đóng vai trò như bằng chứng chứ không phải trang trí. Hệ thống chỉ dùng một màu xanh dương sống động duy nhất (#0080ff) làm tín hiệu bão hòa, mọi thứ còn lại giữ achromatic hoặc gần xám để màu sắc được hiểu là hành động, không phải nhiễu. Hình dạng được bo tròn mạnh — card bo 20–32px, button và tag thành pill tròn ở 1600px, và hero CTA còn có đuôi vẽ tay lượn sóng khiến hành động chính trông như được phác thảo chứ không phải dùng template. Layout được giới hạn max-width với nhiều khoảng thở; nội dung được ngắt quãng bằng các screenshot sản phẩm nhỏ, mảnh UI nổi, và một hàng icon badge tròn pastel dùng để chấm câu cho các đoạn văn dài.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Signal Blue | `#0080ff` | `--color-signal-blue` | Accent xanh dương hỗ trợ cho chi tiết trang trí và nhấn nhá tần suất thấp. Không nâng lên làm màu CTA chính |
| Voltage Violet | `#0050ff` | `--color-voltage-violet` | Viền card trang trí phát sáng, hero gradient bloom, accent outline màu trên mockup nổi — nằm sâu hơn Signal Blue một bậc cho các khoảnh khắc thương hiệu phân lớp |
| Sky Wash | `#c5e0fb` | `--color-sky-wash` | Accent xám hỗ trợ cho chi tiết trang trí và nhấn nhá tần suất thấp. Không nâng lên làm màu CTA chính |
| Pencil Gray | `#8c9baa` | `--color-pencil-gray` | Body text mờ, border mảnh, nav divider, step badge, metadata cấp ba |
| Graphite | `#636f7b` | `--color-graphite` | Body copy phụ, nav item không hoạt động, mô tả hỗ trợ |
| Ink | `#000000` | `--color-ink` | Headline, body chính, button text, logo wordmark — giọng nói chủ đạo của hệ thống ở độ tương phản AAA trên nền trắng |
| Carbon | `#222222` | `--color-carbon` | Navigation text, label UI dày đặc khi màu đen thuần cảm giác nặng |
| Paper | `#ffffff` | `--color-paper` | Nền trang, bề mặt card, button text trên Signal Blue, bề mặt inverted |

## Tokens — Typography

### Inter — Hệ thống một font. Display dùng weight 700 ở 64–118px với tracking chặt (-0.06em) và line-height gần vuông (0.94–1.09) để headline xếp chồng thành một khối typography gọn. Body và UI dùng 400–500 ở 14–18px với line-height 1.4–1.67. Weight 600–700 dành riêng cho heading, CTA, và section label; weight 500 dùng cho button text và badge dạng small caps. · `--font-inter`
- **Thay thế:** DM Sans, Manrope, hoặc system-ui sans-serif
- **Weights:** 400, 500, 600, 700
- **Sizes:** 10, 12, 13, 14, 16, 18, 24, 30, 36, 48, 64, 72, 84, 96, 118
- **Line height:** 0.94, 1.00, 1.04, 1.09, 1.14, 1.25, 1.30, 1.40, 1.43, 1.67
- **Letter spacing:** -0.0600em ở 118px display, giảm dần xuống -0.0150em ở 14px body, normal (0) ở 12px trở xuống
- **OpenType features:** `"cv11", "ss01" on, "tnum" cho số dạng bảng trong pricing/data`
- **Vai trò:** Hệ thống một font. Display dùng weight 700 ở 64–118px với tracking chặt (-0.06em) và line-height gần vuông (0.94–1.09) để headline xếp chồng thành một khối typography gọn. Body và UI dùng 400–500 ở 14–18px với line-height 1.4–1.67. Weight 600–700 dành riêng cho heading, CTA, và section label; weight 500 dùng cho button text và badge dạng small caps.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.4 | — | `--text-caption` |
| body-sm | 14px | 1.43 | -0.015px | `--text-body-sm` |
| body | 16px | 1.5 | -0.015px | `--text-body` |
| subheading | 18px | 1.4 | -0.02px | `--text-subheading` |
| heading-sm | 24px | 1.3 | -0.02px | `--text-heading-sm` |
| heading | 36px | 1.14 | -0.03px | `--text-heading` |
| heading-lg | 48px | 1.09 | -0.036px | `--text-heading-lg` |
| display | 72px | 1 | -0.053px | `--text-display` |
| display-xl | 118px | 0.94 | -0.06px | `--text-display-xl` |

## 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` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 88 | 88px | `--spacing-88` |
| 96 | 96px | `--spacing-96` |
| 104 | 104px | `--spacing-104` |
| 144 | 144px | `--spacing-144` |
| 184 | 184px | `--spacing-184` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 6px |
| tags | 1600px |
| cards | 20px |
| images | 24px |
| inputs | 12px |
| buttons | 1600px |
| iconBadges | 1600px |
| featureCards | 32px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| lg | `rgba(0, 0, 0, 0.06) 0px 0px 18px 0px` | `--shadow-lg` |

### Layout

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

## Components

### Hero CTA Button
**Vai trò:** Hành động chuyển đổi chính

Hình pill (1600px radius) với phần mở rộng đuôi bên phải dạng lượn sóng/viên ngậm đặc trưng. Fill: Signal Blue (#0080ff). Text: trắng, Inter 600 ở 18–24px, letter-spacing -0.02em. Padding: 16px 32px (có thêm padding phải để chứa đuôi lượn sóng). Shadow phát sáng Sky Wash nhẹ ở rgba(197,224,251,0.6) offset 18px. Không border.

### Nav Login Button
**Vai trò:** Hành động phụ trong nav

Pill dạng outline, 1600px radius, border 1px Pencil Gray (#8c9baa), fill trong suốt, text Carbon (#222222) ở 14px weight 500. Padding: 8px 20px.

### Nav Try For Free Button
**Vai trò:** Hành động chính trong nav

Pill dạng filled, 1600px radius, nền Ink (#000000), text trắng, 14px weight 500. Padding: 8px 20px. Icon mũi tên phải nhỏ ở 12px.

### Step Badge
**Vai trò:** Label tiêu đề section

Pill (1600px radius) với border 1px Pencil Gray, fill trong suốt. Bên trái: 'STEP 1' màu Ink ở 11px weight 600, uppercase. Dấu chấm phân cách. Bên phải: mô tả Pencil Gray ở 11px weight 400. Padding: 6px 12px.

### Feature Card (Two-Column)
**Vai trò:** Làm nổi bật tính năng sản phẩm

Bề mặt trắng, radius 20–32px, border 1px Pencil Gray (#8c9baa ở 1px). Padding: 32–48px. Cột trái: icon Pencil Gray 16–18px phía trên heading 16–18px weight 600 màu Ink, rồi body 14–16px Pencil Gray weight 400. Cột phải: screenshot hoặc mockup sản phẩm với 24px radius.

### Section Heading Block
**Vai trò:** Mở đầu section lớn

Display weight 700, kích thước 48–72px, line-height 1.0–1.09, letter-spacing -0.036 đến -0.053em, màu Ink. Không clamp max-width — text wrap tự nhiên ở 2–4 dòng. Căn giữa hoặc căn trái tùy section.

### Icon Badge (Pastel Circles)
**Vai trò:** Biểu tượng tính năng inline

Hình tròn full-pill radius (1600px) đường kính 28–32px. Fill pastel mềm (vàng, bạc hà, hồng, oải hương, đào) với icon stroke tối 1–1.5px bên trong. Đặt inline trong body text để chấm câu cho danh sách tính năng.

### Product Phone Mockup
**Vai trò:** Hình ảnh hero/tính năng

Khung điện thoại dọc với outer radius 32–48px, bề mặt trong trắng, border 1px Pencil Gray. Chứa các phần UI xếp chồng (Header, Menu, Cards) mỗi phần là một chip màu: pastel vàng, bạc hà, hồng, đào. Drop shadow: rgba(0,0,0,0.06) 0px 0px 18px.

### Feature Tile Card (AI Generator)
**Vai trò:** Card tính năng nổi bật

Card trắng, 20px radius, border 1px. Chứa tag uppercase nhỏ màu pastel (ví dụ 'AI GENERATOR' màu hồng), button pill tối bên trong (fill Ink, text trắng, '✨ Generate Sitemap'), và hình minh họa con trỏ. Padding: 24px.

### Sitemap Node Card
**Vai trò:** Phần tử sơ đồ cấu trúc

Card trắng nhỏ, 12px radius, border 1px Pencil Gray. Chứa: dòng tiêu đề, label chip mã màu (vàng/hồng/xanh lá ở 6px radius), thumbnail, và footer meta. Dùng trong layout dạng cây/đồ thị.

### Top Rated Product Badge
**Vai trò:** Label bằng chứng xã hội

Pill nhỏ, 1600px radius, fill trắng, border 1px Pencil Gray, 'Top Rated Product' ở 12px weight 500 màu Ink với icon tick xanh lá nhỏ. Padding: 4px 12px.

### Avatar Stack
**Vai trò:** Bằng chứng xã hội

Hàng ngang 5–6 avatar hình tròn đường kính 28px, chồng lên nhau -8px, mỗi avatar có border ring trắng 2px. Bên dưới: caption 'Over 400,000 users' màu Pencil Gray ở 13px.

### Logo Trust Bar
**Vai trò:** Bằng chứng xã hội doanh nghiệp

Hàng ngang căn giữa full-width gồm 6 logo doanh nghiệp dạng grayscale (Intel, IBM, Tesla, EA, UNICEF, Deloitte) ở độ mờ ~60%, chiều cao 24px, fill Pencil Gray. Phía trên là caption 'You're in good company' ở 13px Pencil Gray. Padding: 48px 0.

### Floating Annotation Card
**Vai trò:** Callout phụ trong hero

Card trắng nhỏ, 12px radius, shadow mềm rgba(0,0,0,0.06) 0px 0px 18px. Chứa chú thích 2 dòng: label đậm + mô tả Pencil Gray. Kết nối với các phần tử hero qua đường cong mảnh màu Signal Blue.

## Do's and Don'ts

### Do
- Dùng Signal Blue (#0080ff) làm màu bão hòa duy nhất trên trang — không bao giờ đưa thêm màu thương hiệu thứ hai cho action, link, hoặc highlight.
- Làm mọi control tương tác thành pill (1600px radius) trừ khi đó là form input (dùng 12px).
- Đặt display headline ở 48–118px Inter 700 với letter-spacing từ -0.036em đến -0.06em để type nén thành một khối typography chặt thay vì trải rộng thoáng.
- Dùng border 1px Pencil Gray (#8c9baa) để phân cách card khỏi nền trắng thay vì dùng shadow — shadow chỉ dành cho phần tử hero nổi.
- Neo long-form copy bằng icon badge tròn pastel đặt inline (radius 1600px, 28–32px) để danh sách tính năng dễ quét bằng mắt.
- Padding feature card 24–48px ở mọi phía và dùng radius 20–32px — không bao giờ dùng góc vuông trên bất kỳ bề mặt card nào.
- Thả nổi product UI mockup trong hero với shadow mềm rgba(0,0,0,0.06) 18px và kết nối chúng bằng đường cong mảnh màu Signal Blue để làm bằng chứng trực quan.

### Don't
- Không thêm màu thương hiệu bão hòa thứ hai cho button, link, hoặc active state — hệ thống là đơn sắc với một tín hiệu xanh duy nhất.
- Không dùng góc vuông trên card, button, hoặc tag; mọi thứ người dùng nhìn thấy đều được bo tròn ít nhất 6px và hầu hết control là full pill.
- Không dùng drop shadow nặng trên content card; shadow duy nhất được phép là 0.06 alpha 18px blur, và chỉ dành cho product mockup nổi và modal.
- Không để body copy vượt quá 16–18px hoặc dùng weight trên 500 — bất cứ thứ gì nặng hơn đều thuộc về heading.
- Không dùng display weight dưới 600 cho heading; hệ thống dựa vào giọng nói đậm để mang bảng màu tối giản.
- Không tô section bằng xanh dương đặc, gradient mesh, hoặc dải màu — nền luôn trắng, màu chỉ xuất hiện dưới dạng accent hoặc phát sáng.
- Không dùng xám trung tính cho action text hoặc fill chính — màu text duy nhất cho button là trắng trên Signal Blue hoặc Ink, không bao giờ là Pencil Gray.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|-------|
| 0 | Paper | `#ffffff` | Canvas trang, nền section |
| 1 | Card | `#ffffff` | Feature card nổi, product mockup, step panel — phân biệt với canvas bằng border 1px Pencil Gray thay vì shadow |
| 2 | Elevated | `#ffffff` | Hover state và modal — thêm shadow mềm 0.06 alpha ở 18px blur |
| 3 | Signal | `#0080ff` | Bề mặt action chính, nav indicator đang hoạt động |

## Elevation

- **Product mockup nổi và annotation card:** `rgba(0, 0, 0, 0.06) 0px 0px 18px 0px`
- **Hero CTA button glow:** `0px 0px 18px 0px rgba(197, 224, 251, 0.6)`

## Imagery

Hình ảnh chủ yếu là product mockup trong ứng dụng thay vì nhiếp ảnh: screenshot UI trong khung điện thoại, annotation card nhỏ nổi, sitemap tree node card, và tile preview AI-generator. Chúng được xử lý như vật thể vật lý — có shadow mềm, xoay nhẹ, và kết nối bằng đường cong xanh mảnh. Mô típ phụ là icon badge tròn pastel (vàng, bạc hà, hồng, oải hương, đào ở ~28px) đặt inline trong body copy để chấm câu cho các đề cập tính năng. Hàng avatar trust dùng ảnh người thật ở 28px với border ring trắng. Mật độ tổng thể nhẹ: khoảng 60% text, 40% product mockup, không có lifestyle photography, không hero video, không có hình minh họa trang trí ngoài các mảnh UI.

## Layout

Layout được giới hạn max-width ở 1200px, căn giữa, với section gap dọc 96px+ rộng rãi. Hero là một khối headline căn giữa với product mockup nổi rải rác bất đối xứng xung quanh — không phải layout split text+image. Bên dưới hero, các section xen kẽ giữa 'logo trust bar' (full-width, căn giữa, mật độ thấp) và feature block hai cột 'text-left / mockup-right' luôn mở đầu bằng heading căn trái cỡ lớn. Feature block dùng card bo tròn 20–32px làm khung cho mockup. Trang không bao giờ dùng full-bleed màu, không bao giờ dùng sidebar, và dựa vào sticky top nav với logo container radius 6px, link căn giữa, và CTA pill đen bên phải.

## Agent Prompt Guide

## Quick Color Reference
- Text: #000000 (headline, copy chính), #222222 (nav), #636f7b (phụ), #8c9baa (mờ/border)
- Background: #ffffff (canvas, card)
- Border: 1px solid #8c9baa
- Accent: #0080ff (Signal Blue) — link, active state, brand wordmark arrow
- primary action: không có màu CTA riêng biệt
- Decorative glow: #c5e0fb (Sky Wash), #0050ff (Voltage Violet, chỉ dùng cho accent border)

## Example Component Prompts

Không quan sát thấy màu primary action riêng biệt; dùng các xử lý button trung tính đã trích xuất thay vì phát minh màu CTA filled.

2. **Feature Section Card**: Bề mặt trắng, 32px radius, border 1px solid #8c9baa. Padding 48px mọi phía. Cột trái: icon tối 20px (Inter hoặc outline stroke) phía trên heading 18px Inter 600 #000000, rồi body 16px Inter 400 #636f7b. Cột phải: product mockup với 24px radius và shadow rgba(0,0,0,0.06) 0px 0px 18px.

3. **Display Heading Block**: Inter 700, 72px, line-height 1.0, letter-spacing -0.053em, color #000000. Căn giữa, không clamp max-width — để nó wrap tự nhiên ở 2–3 dòng.

4. **Step Badge**: 1600px pill radius, border 1px solid #8c9baa, fill trong suốt. Đoạn trái: 'STEP 1' ở Inter 600 11px #000000, uppercase. Đoạn phải sau dấu • phân cách: 'AI SITEMAP' ở Inter 400 11px #8c9baa. Padding 6px 12px.

5. **Pastel Icon Badge**: Hình tròn đầy đủ 1600px, đường kính 32px. Fill một trong các màu {pastel vàng #fff3c4, bạc hà #c8f0d8, hồng #ffd6e0, oải hương #e0d4ff, đào #ffe0c4}. Icon stroke tối 1.5px căn giữa bên trong. Dùng inline trong body text để đánh dấu tên tính năng.

## Typography Voice

Giọng nói của hệ thống này là 'cỡ lớn và yên tĩnh.' Headline thống trị trang ở 48–118px Inter 700 nhưng không mang tín hiệu màu sắc — chúng là màu đen thuần. Sự tương phản giữa type khổng lồ và action Signal Blue duy nhất tạo ra hệ thống phân cấp nơi người dùng biết chính xác nơi để nhấp mà không cần đọc label. Body copy nhỏ (14–16px), xám, và mang tính đàm thoại, với icon badge pastel đóng vai trò như bullet point trực quan. CTA và heading là những thứ lên tiếng; mọi thứ khác chỉ hỗ trợ.

## Button Geometry

Hình học button đặc trưng là pill 1600px radius, nhưng hero CTA còn đi xa hơn: cạnh phải của nó không phải hình bán nguyệt hoàn hảo mà là một đường viền lượn sóng vẽ tay (giống như nét cọ hoặc sóng), mang lại cho action chính một tính cách phác thảo, phi doanh nghiệp. Tất cả các button khác (nav login, nav try-free, in-card actions) đều là pill tiêu chuẩn. Chỉ dùng geometry đuôi lượn sóng cho CTA quan trọng nhất trên mỗi trang — không bao giờ dùng cho action phụ hoặc button lặp lại.

## Similar Brands

- **Linear** — Cùng kỷ luật một accent-color duy nhất (một xanh dương sống động trên UI achromatic) và pill-shaped CTA với display headline tracking chặt
- **Framer** — Cùng playbook marketing sản phẩm: canvas trắng, display type đậm cỡ lớn, product mockup nổi rải rác trong hero, chip accent pastel
- **Pitch** — Khớp bề mặt card border 1px với shadow tối thiểu, hình học button full-pill, và đen trên trắng với một accent chromatic
- **Notion** — Bảng màu hai tông hạn chế tương tự, geometric sans kiểu Inter cho mọi thứ, và thói quen hiển thị sản phẩm dưới dạng mảnh UI nổi trong hero

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-signal-blue: #0080ff;
  --color-voltage-violet: #0050ff;
  --color-sky-wash: #c5e0fb;
  --color-pencil-gray: #8c9baa;
  --color-graphite: #636f7b;
  --color-ink: #000000;
  --color-carbon: #222222;
  --color-paper: #ffffff;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.015px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.015px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.02px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.02px;
  --text-heading: 36px;
  --leading-heading: 1.14;
  --tracking-heading: -0.03px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.09;
  --tracking-heading-lg: -0.036px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -0.053px;
  --text-display-xl: 118px;
  --leading-display-xl: 0.94;
  --tracking-display-xl: -0.06px;

  /* 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-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-144: 144px;
  --spacing-184: 184px;
  --spacing-200: 200px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 48px;
  --radius-full-2: 1600px;

  /* Named Radii */
  --radius-nav: 6px;
  --radius-tags: 1600px;
  --radius-cards: 20px;
  --radius-images: 24px;
  --radius-inputs: 12px;
  --radius-buttons: 1600px;
  --radius-iconbadges: 1600px;
  --radius-featurecards: 32px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.06) 0px 0px 18px 0px;

  /* Surfaces */
  --surface-paper: #ffffff;
  --surface-card: #ffffff;
  --surface-elevated: #ffffff;
  --surface-signal: #0080ff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-signal-blue: #0080ff;
  --color-voltage-violet: #0050ff;
  --color-sky-wash: #c5e0fb;
  --color-pencil-gray: #8c9baa;
  --color-graphite: #636f7b;
  --color-ink: #000000;
  --color-carbon: #222222;
  --color-paper: #ffffff;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.015px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.015px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.02px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.02px;
  --text-heading: 36px;
  --leading-heading: 1.14;
  --tracking-heading: -0.03px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.09;
  --tracking-heading-lg: -0.036px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -0.053px;
  --text-display-xl: 118px;
  --leading-display-xl: 0.94;
  --tracking-display-xl: -0.06px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-144: 144px;
  --spacing-184: 184px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 48px;
  --radius-full-2: 1600px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.06) 0px 0px 18px 0px;
}
```