# Fluz

> Fluz — Style Reference

## Prompt Content

```
# Fluz — Style Reference
> Gemstone vault trên nền giấy ấm

**Theme:** light

Fluz xây dựng giao diện tài chính ấm áp, sang trọng dựa trên một màu thương hiệu gần như đen (#1a0000) — thay thế pure black bằng một chút nâu ca cao, khiến display typography đậm nét trở nên giàu có thay vì lạnh lẽo. Hero mang phong cách maximalist — gradient lăng kính full-bleed (xanh da trời → oải hương → bạc hà → ngọc lục bảo) phía sau headline Greed Condensed với kích thước 96–203px, nổi bật cùng đá quý 3D và bướm — trong khi mọi section khác giữ yên tĩnh, trắng và kỷ luật về mặt chữ. Các button có dạng pill mạnh mẽ (radius 200px) với nền đen ấm, tạo sự tương phản gần như kẹo ngọt so với grid card sản phẩm tối giản. Hệ thống cố tình dao động giữa hai chế độ: một màn hình bùng nổ sắc màu vui tươi, và một khu vực trưng bày sản phẩm dài trên nền kem, nơi tracking chặt chẽ và condensed display type đảm nhiệm việc truyền tải thương hiệu.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Espresso Ink | `#1a0000` | `--color-espresso-ink` | Primary text, filled CTA buttons, top navigation bar, icon strokes — warm near-black thay thế pure #000 để tạo cảm giác như bột ca cao thay vì mực in |
| Prism Spectrum | `linear-gradient(90deg, rgb(130, 190, 255), rgb(166, 180, 247) 47.21%, rgb(91, 184, 154) 73.75%, rgb(33, 186, 76) 91.26%)` | `--color-prism-spectrum` | Hero background gradient — xanh da trời đến oải hương đến bạc hà đến ngọc lục bảo, chỉ dùng một lần ở đầu trang |
| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt product card, chữ trên nền tối |
| Linen Mist | `#f2f2f2` | `--color-linen-mist` | Secondary card surface, nền section xen kẽ, tạo chiều sâu nhẹ so với pure white |
| Bone | `#ededec` | `--color-bone` | Hairline borders, divider, icon strokes, subtle surface elevation — màu trung tính ấm giữ hệ thống gắn kết |
| Taupe Slate | `#514f4c` | `--color-taupe-slate` | Secondary body text, card borders, muted labels — warm gray kết hợp với Espresso Ink mà không bị lạnh |
| Ash Gray | `#aeaea6` | `--color-ash-gray` | Helper text, tertiary metadata, low-emphasis borders |
| Charcoal Bronze | `#3a3a3a` | `--color-charcoal-bronze` | Badge backgrounds, dark overlay surfaces, secondary dark elements |
| Obsidian Roast | `#221919` | `--color-obsidian-roast` | Deep section backgrounds, dark overlay panels — ấm và đậm hơn #000 |
| Iris Blue | `#98bbf4` | `--color-iris-blue` | Accent card surface, decorative highlight wash trên product cards — vọng lại đầu xanh của hero gradient |

## Tokens — Typography

### Greed-SemiBold — Greed-SemiBold — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-greed-semibold`
- **Weights:** 400, 700
- **Sizes:** 11px, 14px
- **Line height:** 1.27, 1.29
- **Vai trò:** Greed-SemiBold — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Greed Condensed — Display và headings — condensed face đặc trưng. Hero headlines kéo dài 96–203px với tracking siêu chặt (-0.025em) và line-height nén (0.79) giúp các chữ cái khổng lồ xếp chồng theo chiều dọc. Đây là dấu chấm than typographic của thương hiệu. · `--font-greed-condensed`
- **Thay thế:** Bebas Neue, Oswald, Anton
- **Weights:** 700
- **Sizes:** 32px, 42px, 54px, 64px, 96px, 203px
- **Line height:** 0.79–1.33
- **Letter spacing:** -0.005em đến -0.030em, thắt chặt khi kích thước tăng
- **Vai trò:** Display và headings — condensed face đặc trưng. Hero headlines kéo dài 96–203px với tracking siêu chặt (-0.025em) và line-height nén (0.79) giúp các chữ cái khổng lồ xếp chồng theo chiều dọc. Đây là dấu chấm than typographic của thương hiệu.

### Area — Body text, UI labels, button text, links, badges. Geometric sans với x-height rộng rãi và tracking bình thường — workhorse ổn định giữ cho giao diện dễ đọc bên dưới các display headlines. · `--font-area`
- **Thay thế:** Inter, Söhne, General Sans
- **Weights:** 400, 700
- **Sizes:** 14px, 16px, 17px, 20px
- **Line height:** 1.40–1.50
- **Vai trò:** Body text, UI labels, button text, links, badges. Geometric sans với x-height rộng rãi và tracking bình thường — workhorse ổn định giữ cho giao diện dễ đọc bên dưới các display headlines.

### Greed Condensed — Subheading tier — cùng condensed family ở weight và kích thước giảm cho các section title cần tính display mà không cần scale hero · `--font-greed-condensed`
- **Thay thế:** Oswald, Barlow Condensed
- **Weights:** 400
- **Sizes:** 16px, 24px
- **Line height:** 1.17–1.50
- **Vai trò:** Subheading tier — cùng condensed family ở weight và kích thước giảm cho các section title cần tính display mà không cần scale hero

### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial`
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.2
- **Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Greed SemiBold — Greed SemiBold — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-greed-semibold`
- **Weights:** 600, 700
- **Sizes:** 15px, 54px
- **Line height:** 0.92, 1.6
- **Letter spacing:** -0.03
- **Vai trò:** Greed SemiBold — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 11px | 1.27 | — | `--text-caption` |
| body-sm | 14px | 1.29 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 24px | 1.25 | -0.38px | `--text-subheading` |
| heading-sm | 42px | 1.2 | -0.84px | `--text-heading-sm` |
| heading | 64px | 1.15 | -1.22px | `--text-heading` |
| heading-lg | 96px | 1 | -2.4px | `--text-heading-lg` |
| display | 203px | 0.79 | -5.08px | `--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` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 96 | 96px | `--spacing-96` |
| 140 | 140px | `--spacing-140` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| cards | 20px |
| links | 100px |
| badges | 100px |
| inputs | 100px |
| buttons | 200px |

### Layout

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

## Components

### Pill CTA Button (Filled)
**Vai trò:** Primary action — các nút 'Sign up' và 'Log in'

Background #1a0000 (Espresso Ink), text #ffffff in Area Semibold 16px, padding 10px 16px, border-radius 200px (dạng pill hoàn toàn). Không border, không shadow. Dark fill trên nền sáng là button weight duy nhất cần có.

### Pill Ghost Button
**Vai trò:** Secondary action, nav controls (Search)

Transparent background, border 1px solid #ffffff hoặc #ededec, text #ffffff hoặc #1a0000, Area 16px, border-radius 100px. Dùng cho nút search trong dark nav bar.

### Top Navigation Bar
**Vai trò:** Global header — sticky, full-bleed

Background #1a0000, height ~56px, flex row với logo bên trái, nav links ở giữa (Area 16px weight 400, #ffffff), search + CTA bên phải. Một utility row phía trên chứa các link 'Money / Marketplace / Blog' với Area nhỏ hơn. Thanh đen là neo thị giác — mọi thứ bên dưới đều sáng.

### Product Showcase Card
**Vai trò:** Feature card hiển thị ảnh chụp màn hình hoặc ảnh sản phẩm

Background #ffffff hoặc #f2f2f2, border-radius 20px, không border hoặc shadow nhìn thấy được. Chứa ảnh full-bleed (tay cầm điện thoại, burger, màn hình app) với góc bo 20px. Cards nằm trong horizontal scroll hoặc grid 3 cột với khoảng cách thoải mái.

### Category Feature Card
**Vai trò:** Product pillar card (Personal / Business / Platform)

Background #f2f2f2, border-radius 20px, padding 20px. Category label in Greed Condensed SemiBold 24px, #1a0000. Description in Area 16px, #514f4c. Product image hoặc 3D render ở dưới cùng. Không shadow — warm gray fill là elevation duy nhất.

### Hero Gradient Section
**Vai trò:** Banner mở đầu full-bleed — nơi duy nhất màu sắc bùng nổ

Background: linear-gradient(90deg, rgb(130,190,255) → rgb(166,180,247) 47% → rgb(91,184,154) 74% → rgb(33,186,76) 91%). Centered Greed Condensed SemiBold 203px display headline in #ffffff với các yếu tố trang trí 3D (đá quý, bướm) bay xung quanh. Subtext in Area 16–18px, #ffffff ở độ mờ 80%. Một pill CTA duy nhất bên dưới.

### Display Headline
**Vai trò:** Hero và section H1

Greed Condensed SemiBold 700, kích thước từ 64–203px, line-height 0.79–1.15, letter-spacing -0.019em đến -0.030em. Màu: #1a0000 trên nền sáng, #ffffff trên nền tối hoặc gradient. Line-height nén giúp headline nhiều dòng xếp chồng khít.

### Badge / Pill Tag
**Vai trò:** Category labels, status indicators

Background #3a3a3a hoặc #ededec, text #ffffff hoặc #1a0000, Area Semibold 11–14px, border-radius 100px, padding 2px 10px. Nhỏ, gọn, không bao giờ mang tính trang trí — chỉ là dấu câu chức năng.

### Image Mask Card
**Vai trò:** Cards chứa ảnh hữu cơ hoặc nhiếp ảnh

Border-radius 20px trên container, ảnh phủ kín card từ mép này sang mép kia. Không border, không shadow — màu sắc và nội dung của ảnh tự tạo trọng lượng thị giác. Dùng cho hàng 3-card product showcase.

### Dark Overlay Panel
**Vai trò:** Section tối full-bleed để tạo tương phản kịch tính

Background #221919 hoặc #1a0000, nội dung in #ffffff và #ededec. Dùng một cách tiết kiệm — tối đa một hoặc hai section mỗi trang — để phá vỡ nhịp điệu trắng. Text dùng Greed Condensed cho headings và Area cho body, duy trì hệ thống type.

### Footer Link Block
**Vai trò:** Cột điều hướng footer

Area 14px weight 400, #514f4c, line-height 1.6. Column headings in Area Semibold 14px, #1a0000. Không icon, không divider — chỉ có khoảng cách rộng rãi giữa các link item.

### Search Button (Nav)
**Vai trò:** Global search trigger trong navigation

Ghost pill trên dark nav bar: transparent background, border 1px solid #ededec, text + icon in #ffffff, border-radius 100px, padding 8px 16px.

## Do's and Don'ts

### Nên làm
- Dùng Greed Condensed 700 cho tất cả display và heading text; dùng Area 400/700 cho mọi thứ dưới cấp heading — không bao giờ trộn hai font trong cùng một vai trò.
- Dùng #1a0000 (Espresso Ink) cho tất cả primary text, filled buttons và nav bar — không bao giờ thay thế bằng #000000 hoặc #111111.
- Đặt border-radius 200px cho filled CTA buttons và 100px cho ghost buttons, badges và inputs — pill shapes là bắt buộc.
- Chỉ dùng hero gradient (xanh → oải hương → bạc hà → xanh lá) trong hero section ở màn hình đầu tiên; coi đó như một brand burst một lần, không phải background lặp lại.
- Thắt chặt letter-spacing trên Greed Condensed khi kích thước tăng: -0.005em ở 32px lên đến -0.030em ở 203px — tracking nén tỷ lệ thuận với scale.
- Đặt card border-radius 20px và không dùng border hoặc shadow nhìn thấy được — để #f2f2f2 fill hoặc nội dung ảnh tạo trọng lượng thị giác.
- Giữ line-height ở 0.79–1.15 trên Greed Condensed display sizes — leading chặt chẽ là thứ làm cho headlines 96px+ trở nên điêu khắc thay vì lỏng lẻo.

### Không nên làm
- Không dùng pure #000000 hoặc #ffffff borders để nhấn mạnh — sự ấm áp của hệ thống đến từ #1a0000 và #ededec.
- Không áp dụng prism gradient cho cards, buttons hoặc section backgrounds — nó chỉ thuộc về hero.
- Không dùng shadow-based elevation trên cards; hệ thống dùng surface color shifts (#ffffff → #f2f2f2 → #ededec) thay vì box-shadows.
- Không đặt Greed Condensed weight 400 ở display sizes — trông yếu ớt; dành 700 cho headings và dùng Area để tạo tương phản weight cho body.
- Không phá vỡ quy ước pill với rectangular hoặc rounded-rect buttons (radius 4–8px) — hệ thống là pill hoàn toàn hoặc card hoàn toàn.
- Không thêm các brand colors khác (tím, cam, hồng) — palette là warm-black, trắng, warm grays và prism gradient bốn điểm dừng.
- Không căn giữa body text; dành căn giữa cho hero headlines và single-line CTAs. Body copy và description giữ căn trái.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Canvas | `#ffffff` | Nền trang chính |
| 1 | Linen Card | `#f2f2f2` | Secondary card surface, phân biệt section nhẹ nhàng |
| 2 | Bone Edge | `#ededec` | Hairline borders, tertiary surface cho các element lồng nhau |
| 3 | Iris Wash | `#98bbf4` | Accent card surface vọng lại hero gradient |
| 4 | Dark Overlay | `#221919` | Section tối full-bleed, nav bar, các điểm ngắt tương phản kịch tính |

## Elevation

Hệ thống này cố tình tránh box-shadows. Elevation được truyền tải qua surface color layering (#ffffff → #f2f2f2 → #ededec) và border contrast (hairline #ededec borders trên #f2f2f2 cards). Dark nav bar (#1a0000) và hero gradient cung cấp các điểm ngắt tương phản kịch tính duy nhất; phần còn lại của giao diện giữ phẳng và không trọng lượng.

## Imagery

Imagery được chia thành hai chế độ riêng biệt. Hero sử dụng các vật thể trang trí 3D — đá quý óng ánh trong suốt, bướm kim loại, pha lê bay — gợi sự phong phú và lạc quan, đặt trên nền gradient lăng kính. Bên dưới hero, imagery chuyển sang product photography gắn với thực tế: tay cầm điện thoại hiển thị app Fluz, burger được giữ bằng hai tay, credit card cắt cận, màn hình giao dịch app. Các product shots này là full-bleed trong card mask radius 20px, không bao giờ có lifestyle context hoặc khuôn mặt người — vật thể là hero. Icon style là monoline strokes đơn giản in #1a0000 hoặc #ffffff, nhất quán với warm-black palette.

## Layout

Container centered max-width 1200px với section gaps 64px thoải mái. Hero là full-bleed (gradient edge-to-edge) với text căn giữa, phá vỡ ràng buộc container một lần. Bên dưới hero, horizontal card scroll hoặc grid 3 cột trưng bày sản phẩm full-bleed trong mask radius 20px. Feature sections dùng grid card 3 cột trên nền trắng với gap 20–24px. Navigation là sticky black bar hai tầng (utility links phía trên, brand + nav + CTAs phía dưới). Nhịp điệu nội dung xen kẽ giữa nền trắng (#ffffff) và warm gray (#f2f2f2), thỉnh thoảng có các điểm ngắt tối (#1a0000) hoặc gradient. Mật độ tổng thể thoải mái — khoảng không gian dọc rộng rãi, không có block thông tin dày đặc.

## Agent Prompt Guide

## Quick Color Reference
- Primary text: #1a0000 (Espresso Ink)
- Background: #ffffff
- Secondary surface: #f2f2f2 (Linen Mist)
- Border: #ededec (Bone)
- Accent: #98bbf4 (Iris Blue)
- primary action: #1a0000 (filled action)
- Hero gradient: linear-gradient(90deg, #82beff, #a6b4f7 47%, #5bb89a 74%, #21ba4c 91%)

## Example Component Prompts
1. **Hero Section**: Full-bleed background linear-gradient(90deg, #82beff, #a6b4f7 47%, #5bb89a 74%, #21ba4c 91%). Centered headline in Greed Condensed 700, 96–203px, #ffffff, letter-spacing -0.025em, line-height 0.85. Subtext in Area 16px, #ffffff ở độ mờ 80%. Một filled pill CTA duy nhất bên dưới: #1a0000 background, #ffffff text in Area Semibold 16px, padding 10px 16px, border-radius 200px.

2. **Product Card**: Background #ffffff, border-radius 20px, không border, không shadow. Ảnh full-bleed bên trong mask 20px. Padding 0 — ảnh phủ kín đến mép. Nếu cần text label: Greed Condensed 700, 24px, #1a0000.

3. **Category Feature Card**: Background #f2f2f2, border-radius 20px, padding 20px. Category title in Greed Condensed 700, 24px, #1a0000. Description in Area 400, 16px, #514f4c. Product render hoặc screenshot ở dưới cùng, full-width trong card.

4. **Pill Ghost Button**: Transparent background, border 1px solid #ededec, text #ffffff hoặc #1a0000 in Area 16px, border-radius 100px, padding 8px 16px. Dùng cho search và secondary nav actions.

5. **Section Heading Block**: Max-width 1200px centered. H2 in Greed Condensed 700, 64px, #1a0000, line-height 1.15, letter-spacing -0.019em. Subtext in Area 400, 18px, #514f4c, max-width 640px.

## Similar Brands

- **Klarna** — Cùng hệ thống pill-button CTA và warm-dark brand color (near-black pha hồng của Klarna tương tự Espresso Ink của Fluz) với product imagery vui tươi trong card bo tròn
- **Cash App** — Bold condensed display typography trong fintech, với một brand color chủ đạo duy nhất trên nền trắng và sẵn sàng để một section nổi bật về thị giác trong khi phần còn lại tối giản
- **Wise** — Thương hiệu tài chính tông ấm dùng warm near-black #1a0000 thay vì pure #000, kết hợp với khoảng trắng rộng rãi và hệ thống phân cấp typographic chặt chẽ
- **Mercury** — Cream-and-warm-gray surface stack sạch sẽ với pill-shaped buttons và hệ thống hai font kỷ luật (display + body sans)
- **Robinhood** — Aggressive condensed display type trong bối cảnh tài chính, với một accent color burst duy nhất (xanh Robinhood / prism gradient của Fluz) phá vỡ giao diện đơn sắc

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-espresso-ink: #1a0000;
  --color-prism-spectrum: #a6b4f7;
  --gradient-prism-spectrum: linear-gradient(90deg, rgb(130, 190, 255), rgb(166, 180, 247) 47.21%, rgb(91, 184, 154) 73.75%, rgb(33, 186, 76) 91.26%);
  --color-canvas-white: #ffffff;
  --color-linen-mist: #f2f2f2;
  --color-bone: #ededec;
  --color-taupe-slate: #514f4c;
  --color-ash-gray: #aeaea6;
  --color-charcoal-bronze: #3a3a3a;
  --color-obsidian-roast: #221919;
  --color-iris-blue: #98bbf4;

  /* Typography — Font Families */
  --font-greed-semibold: 'Greed-SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-greed-condensed: 'Greed Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-area: 'Area', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.27;
  --text-body-sm: 14px;
  --leading-body-sm: 1.29;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.25;
  --tracking-subheading: -0.38px;
  --text-heading-sm: 42px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.84px;
  --text-heading: 64px;
  --leading-heading: 1.15;
  --tracking-heading: -1.22px;
  --text-heading-lg: 96px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -2.4px;
  --text-display: 203px;
  --leading-display: 0.79;
  --tracking-display: -5.08px;

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

  /* 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-48: 48px;
  --spacing-56: 56px;
  --spacing-96: 96px;
  --spacing-140: 140px;
  --spacing-192: 192px;

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

  /* Border Radius */
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 100px;
  --radius-full-2: 200px;
  --radius-full-3: 500px;

  /* Named Radii */
  --radius-cards: 20px;
  --radius-links: 100px;
  --radius-badges: 100px;
  --radius-inputs: 100px;
  --radius-buttons: 200px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-linen-card: #f2f2f2;
  --surface-bone-edge: #ededec;
  --surface-iris-wash: #98bbf4;
  --surface-dark-overlay: #221919;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-espresso-ink: #1a0000;
  --color-prism-spectrum: #a6b4f7;
  --color-canvas-white: #ffffff;
  --color-linen-mist: #f2f2f2;
  --color-bone: #ededec;
  --color-taupe-slate: #514f4c;
  --color-ash-gray: #aeaea6;
  --color-charcoal-bronze: #3a3a3a;
  --color-obsidian-roast: #221919;
  --color-iris-blue: #98bbf4;

  /* Typography */
  --font-greed-semibold: 'Greed-SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-greed-condensed: 'Greed Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-area: 'Area', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.27;
  --text-body-sm: 14px;
  --leading-body-sm: 1.29;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.25;
  --tracking-subheading: -0.38px;
  --text-heading-sm: 42px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.84px;
  --text-heading: 64px;
  --leading-heading: 1.15;
  --tracking-heading: -1.22px;
  --text-heading-lg: 96px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -2.4px;
  --text-display: 203px;
  --leading-display: 0.79;
  --tracking-display: -5.08px;

  /* 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-48: 48px;
  --spacing-56: 56px;
  --spacing-96: 96px;
  --spacing-140: 140px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 100px;
  --radius-full-2: 200px;
  --radius-full-3: 500px;
}
```