# Privy

> # Privy — Style Reference

## Prompt Content

```
# Privy — Style Reference
> Editorial spread dạng ink-on-marble. Canvas đá cẩm thạch trắng, headline serif đen nén chặt, một dải violet duy nhất cắt ngang phía trên — sự kiềm chế thể hiện quyền lực.

**Theme:** light

Privy hoạt động như một hệ thống editorial crypto-fintech: một canvas gần như đơn sắc bị ngắt quãng bởi một dải thông báo violet rực rỡ và một nút gần như đen nặng. Typography gánh thương hiệu nhiều hơn màu sắc — một custom display face (ABC Favorit) đặt headline ở weight 400 với tracking cực kỳ chặt (-0.03em) và line-height rất chặt (1.03–1.15), mang lại cho những từ 56px+ một cảm giác nén, báo chí thay vì cảm giác tech-SaaS. Các bề mặt phẳng và tương phản cao: canvas trắng, mực gần đen (#010110) cho body và primary actions, dark mode được áp dụng có chọn lọc dưới dạng các dải full-bleed chứ không phải bề mặt có thể chuyển theme. Các component tối thiểu — pill buttons (100px radius), 8px-radius cards, 1px hairline borders — để custom serif và điểm nhấn violet đảm nhận phần nặng nhọc.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Canvas | `#ffffff` | `--color-canvas` | Nền trang, bề mặt card, input fields — màu trung tính chủ đạo mà mọi thứ khác đặt lên |
| Obsidian Ink | `#010110` | `--color-obsidian-ink` | Text chính, nav borders, icon strokes, filled primary buttons, input borders — màu gần đen mang tính cấu trúc, đọc như đen thuần ở kích thước body |
| Carbon | `#111117` | `--color-carbon` | Bề mặt card dark mode, dark panels nâng cao, nền tối thứ cấp |
| Graphite | `#22222a` | `--color-graphite` | Cao nhất trong dark mode — nền feature card, overlaid panels |
| Fog | `#73737c` | `--color-fog` | Muted helper text, body copy thứ cấp, borders tinh tế — màu trung tính duy nhất cố tình giảm xuống medium contrast |
| Ash | `#d9d9d9` | `--color-ash** | Decorative dot pattern, hairline dividers, inactive surface washes |
| Iris Pulse | `#635bff` | `--color-iris-pulse` | Fill thanh thông báo, link hover states, điểm nhấn màu duy nhất — violet trên nền đơn sắc tạo hiệu ứng strob, thu hút mắt vào copy nhạy thời gian |
| Deep Teal | `#072723` | `--color-deep-teal** | Decorative illustration fills, abstract graphic washes bên trong hero imagery — không mang chức năng UI, chỉ tồn tại trong artwork |

## Tokens — Typography

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

### ABC Favorit Variable — Display và heading face — dùng cho hero headlines (52–76px), section headings (26–28px), và đôi khi là inline link lớn. Cài đặt weight-400 là phản quy tắc: hầu hết các trang fintech dùng 600–700 cho headlines, nhưng serif tương phản cao của Favorit ở regular weight mang lại quyền lực thông qua cá tính typographic chứ không phải stroke weight. Letter-spacing -0.03em ở 56px tạo cảm giác nén, editorial — các từ đọc như những khối mực đặc. · `--font-abc-favorit-variable`
- **Thay thế:** GT Super, Tiempos Headline, hoặc Source Serif 4 (free match gần nhất cho cảm giác serif tương phản cao)
- **Weights:** 400
- **Sizes:** 16px, 26px, 28px, 52px, 56px, 76px
- **Line height:** 1.03–1.29
- **Letter spacing:** -0.03em ở mọi kích thước display (≈ -1.68px ở 56px, -2.28px ở 76px)
- **Vai trò:** Display và heading face — dùng cho hero headlines (52–76px), section headings (26–28px), và đôi khi là inline link lớn. Cài đặt weight-400 là phản quy tắc: hầu hết các trang fintech dùng 600–700 cho headlines, nhưng serif tương phản cao của Favorit ở regular weight mang lại quyền lực thông qua cá tính typographic chứ không phải stroke weight. Letter-spacing -0.03em ở 56px tạo cảm giác nén, editorial — các từ đọc như những khối mực đặc.

### Inter — Body, UI, và navigation face — dùng cho paragraphs (16–18px), nav items (14–15px), buttons (14–16px), captions (12–13px), và đôi khi là subheading (20–21px). Weight 500 cho emphasized inline text, 700 dành riêng cho small-caps-style labels và tag-like UI. Letter-spacing -0.02em thắt chặt geometric sans để nó không cảm thấy quá chung chung khi đứng cạnh Favorit. · `--font-inter`
- **Thay thế:** Inter (đã có sẵn trên Google)
- **Weights:** 400, 500, 700
- **Sizes:** 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 21px, 38px
- **Line height:** 1.20–1.90
- **Letter spacing:** -0.02em (≈ -0.28px ở 14px, -0.32px ở 16px, -0.36px ở 18px)
- **Vai trò:** Body, UI, và navigation face — dùng cho paragraphs (16–18px), nav items (14–15px), buttons (14–16px), captions (12–13px), và đôi khi là subheading (20–21px). Weight 500 cho emphasized inline text, 700 dành riêng cho small-caps-style labels và tag-like UI. Letter-spacing -0.02em thắt chặt geometric sans để nó không cảm thấy quá chung chung khi đứng cạnh Favorit.

### ABC Favorit Unlicensed Trial — ABC Favorit Unlicensed Trial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-abc-favorit-unlicensed-trial`
- **Weights:** 400
- **Sizes:** 56px
- **Line height:** 1.07
- **Letter spacing:** -0.03
- **Vai trò:** ABC Favorit Unlicensed Trial — đượ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 | 12px | 1.4 | -0.24px | `--text-caption` |
| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |
| body | 16px | 1.5 | -0.32px | `--text-body` |
| subheading | 20px | 1.4 | -0.4px | `--text-subheading` |
| heading-sm | 26px | 1.13 | -0.78px | `--text-heading-sm` |
| heading | 38px | 1.15 | -1.14px | `--text-heading` |
| heading-lg | 56px | 1.07 | -1.68px | `--text-heading-lg` |
| display | 76px | 1.03 | -2.28px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 17 | 17px | `--spacing-17` |
| 19 | 19px | `--spacing-19` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 70 | 70px | `--spacing-70` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 8px |
| tags | 9999px |
| cards | 8px |
| images | 8px |
| buttons | 100px |

### Layout

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

## Components

### Primary Filled Button
**Vai trò:** Main action button — 'Get started' trong hero

Fill #010110, text #ffffff ở 15px Inter weight 500, letter-spacing -0.02em. Padding 12px 20px. Radius 100px (full pill). Không border. Không shadow — dark fill trên white canvas chính là elevation. Arrow icon (→) ở 14px cùng màu với text, cách label 6px gap.

### Ghost Outline Button
**Vai trò:** Secondary action — 'Talk to sales', 'Learn more'

Transparent fill, 1px border #010110. Text #010110 ở 15px Inter weight 500. Padding 12px 20px. Radius 100px. Khi hover: fill #010110, text đảo ngược thành #ffffff.

### Pill Link Button (Header)
**Vai trò:** Inline link được style như pill — 'Learn more' trong announcement bar

Transparent fill, 1px border #ffffff. Text #ffffff ở 13–14px Inter. Padding 6px 14px. Radius 100px.

### Announcement Bar
**Vai trò:** Banner đầu trang với copy nhạy thời gian

Dải full-width, fill #635bff (Iris Pulse violet). Text #ffffff ở 13px Inter weight 500, căn giữa. Inline pill link bên phải với 1px white border. Padding 10px 24px. Violet trên nền trắng bên dưới tạo ra điểm ngắt màu duy nhất trong hệ thống.

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

Nền trắng (#ffffff), 1px bottom border #010110 ở độ mờ 10–20%. Logo trái (16px Inter weight 700, #010110), nav links giữa (15px Inter weight 400, #010110, 10px row-gap giữa các cụm icon+label). Cụm phải: text links + nút 'Log in' dạng outline (1px #010110 border, 100px radius, 15px Inter). Chiều cao ~64px.

### Dark Feature Card
**Vai trò:** Card dạng lưới 3 cột trong dark sections ('Secure by design', 'Whitelabel and modular', 'Scales as you grow')

Nền #22222a (Graphite) trên nền section #111117 (Carbon) — phân tách 1 tông tinh tế. 8px radius. Padding 24–32px. 3D isometric illustration ở trên với line art màu #333333 đến #444444. Heading Inter weight 500 ở 18–20px, #ffffff. Body Inter weight 400 ở 14–15px, #73737c (Fog). Không border, không shadow.

### Phone Mockup Card
**Vai trò:** UI sản phẩm hiển thị trên hero artwork

Khung thiết bị trắng với 24–32px radius. UI bên trong dùng nền #ffffff, text #010110, 8px radii cho các phần tử bên trong. Nằm trên nền abstract green/teal có texture với gradient washes tinh tế.

### Dashboard Preview Panel
**Vai trò:** Lớp phủ ảnh chụp màn hình sản phẩm desktop trong hero

Bề mặt trắng (#ffffff) với 8px radius. Cards bên trong dùng #ffffff trên nền #f7f7f7. Data tables với 1px #d9d9d9 row dividers. Mini chart elements dùng #635bff stroke cho accent lines trên nền #ffffff.

### Footer
**Vai trò:** Footer trang với cột link và decorative pattern

Nền trắng với lớp phủ dotted/halftone pattern nhẹ màu #d9d9d9 ở độ mờ 20% phủ nửa trên. Lưới link 4 cột: headings 14px Inter weight 700 #010110, links 14px Inter weight 400 #73737c, 10px row-gap. Hàng dưới cùng: copyright + social icons (16px, #010110) + brand quote ở 14px Inter.

### Text Link
**Vai trò:** Inline và standalone links

Màu #010110, không gạch chân mặc định. 1px underline xuất hiện khi hover. Arrow glyph (→) cùng màu, dùng cho directional/CTA links. Transitions 150ms ease.

### Logo Wordmark
**Vai trò:** Brand mark trong nav và footer

Chấm tròn nhỏ (8px circle #010110) + 'privy' ở Inter weight 700 16px, #010110, letter-spacing -0.02em. Tùy chọn '/stripe company' suffix ở 13px Inter weight 400 màu #73737c.

## Do's and Don'ts

### Nên làm
- Dùng ABC Favorit (hoặc GT Super / Source Serif 4 thay thế) cho tất cả display headlines từ 26px trở lên — không bao giờ thay thế bằng Inter ở kích thước display, sự tương phản typographic chính là thương hiệu
- Đặt display headlines ở weight 400 với letter-spacing -0.03em và line-height 1.03–1.15 — tracking chặt và weight nhẹ là signature, không được in đậm chúng
- Dùng #010110 (Obsidian Ink) cho tất cả filled primary buttons, không phải #635bff — violet chỉ dành riêng cho announcement bar và links
- Dành riêng #635bff (Iris Pulse) cho chính xác ba ngữ cảnh: announcement bar fill, inline link hover, và decorative chart strokes — không bao giờ dùng cho body text, borders, hoặc large fills
- Dùng pill radius (100px) cho tất cả buttons và tags, 8px radius cho tất cả cards và images, 2px cho icons — không pha trộn thêm giá trị radius nào khác vào hệ thống
- Dùng hairline 1px borders màu #010110 ở độ mờ giảm cho dividers và card edges, không dùng borders màu hoặc shadows để phân tách
- Đặt Iris Pulse announcement bar dưới dạng dải full-bleed phía trên nav, không phải bên trong nav — điểm ngắt màu phải xuất hiện trước bất kỳ UI nào khác

### Không nên làm
- Không dùng #635bff làm fill cho CTA button — primary action luôn là #010110; violet chỉ thuộc về announcement band và link contexts
- Không đặt headlines bằng Inter ở 40px+ — custom serif (hoặc bản thay thế) là bắt buộc cho kích thước display
- Không thêm drop shadows vào cards hoặc buttons — hệ thống dựa vào bề mặt phẳng, hairline borders, và sự thay đổi tông nền để phân cấp
- Không giới thiệu thêm accent colors (xanh lá, xanh dương, cam) — bảng màu là đơn sắc cộng một violet, chấm hết
- Không dùng letter-spacing trên -0.02em cho body text hoặc trên -0.03em cho display — hệ thống có tracking cực kỳ chặt
- Không dùng dark surface palette (#111117, #22222a) trên các trang light-mode — dark là lựa chọn theo section, không phải theme toggle
- Không pha trộn giá trị radius giữa 8px và 100px — cards và images nhận chính xác 8px, buttons và tags nhận chính xác 100px

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền trang chính, bề mặt chủ đạo |
| 1 | Card | `#ffffff` | Product preview cards, dashboard panels — giống canvas với 8px radius và cấu trúc bên trong |
| 2 | Subtle Wash | `#d9d9d9` | Decorative pattern overlay, hairline dividers, inactive states |
| 3 | Carbon | `#111117` | Nền section dark mode — dải full-bleed |
| 4 | Graphite | `#22222a` | Card nâng cao trong dark mode — một tông trên Carbon |

## Elevation

Elevation được truyền đạt thông qua sự thay đổi tông nền và hairline borders, không bao giờ dùng shadows. Dark mode dùng stack hai tông (#111117 base → #22222a cards) để tạo chiều sâu. Light mode dựa vào sự tương phản giữa cards #ffffff và decorative patterns #d9d9d9. Sự phẳng này có chủ đích — nó giữ focus vào custom display typography.

## Imagery

Imagery tối thiểu và mang tính editorial: một abstract green/teal painted wash lớn duy nhất xuất hiện trong hero phía sau phone mockups, tạo ra kết cấu hữu cơ duy nhất trên trang. Dark feature section dùng 3D isometric line-art illustrations gần như đen trên nền gần đen (#333–#444 trên #22222a) — những hình này có tính hình học, kiến trúc, không vui tươi. Product mockups (phone và dashboard) được hiển thị ở góc nghiêng nhẹ, chồng lên abstract wash, với UI chân thực bên trong khung trắng. Iconography là monochrome outlined ở 16–20px, stroke weight 1.5px. Không photography, không lifestyle imagery, không decorative gradients.

## Layout

Nội dung căn giữa max-width 1200px với các dải nền full-bleed. Hero dùng split hai cột: nửa trái chứa headline (Favorit 56–76px), subtext (Inter 18px), và dual CTAs (filled + ghost, dạng pill); nửa phải chiếm ưu thế bởi abstract painted wash với phone và dashboard mockups chồng lên nhau. Bên dưới hero, một dải logo đối tác ngang trên nền trắng. Giữa trang chuyển sang dark section full-bleed với headline căn giữa và lưới feature card 3 cột. Footer trở lại nền trắng với dotted halftone pattern trên phần trên và lưới link 4 cột. Section gaps ~80px. Nhịp điệu layout xen kẽ trắng → dark band → trắng, với dark band là điểm ngắt tông duy nhất.

## Agent Prompt Guide

Quick Color Reference:
- text: #010110 (Obsidian Ink)
- background: #ffffff (Canvas)
- border: #010110 ở 1px (hairline)
- accent: #635bff (Iris Pulse — announcement bar và links chỉ)
- muted text: #73737c (Fog)
- primary action: #010110 (filled action)

3-5 Example Component Prompts:
1. Tạo hero section: nền trắng #ffffff, căn giữa max-width 1200px. Headline ABC Favorit weight 400, 56px, #010110, letter-spacing -1.68px, line-height 1.07. Subtext Inter weight 400, 18px, #73737c. primary action: #010110 (filled action)
2. Tạo dark feature section: nền full-bleed #111117, headline căn giữa ABC Favorit weight 400, 38px, #ffffff, letter-spacing -1.14px. Bên dưới: lưới 3 cột dark feature cards. Mỗi card: nền #22222a, 8px radius, padding 24px. Isometric line-art icon ở trên với strokes #444444. Card heading Inter weight 500, 18px, #ffffff. Card body Inter weight 400, 14px, #73737c.
3. Tạo top announcement bar: nền full-width #635bff, padding 10px 24px, text căn giữa Inter weight 500, 13px, #ffffff hiển thị thông báo. Inline pill link căn phải: transparent fill, 1px #ffffff border, #ffffff text 13px Inter, padding 6px 14px, radius 100px, kèm arrow glyph →.
4. Tạo footer: nền trắng #ffffff với #d9d9d9 dotted halftone pattern ở độ mờ 20% phủ 60% trên cùng. Bên dưới: lưới 4 cột các nhóm link. Group headings Inter weight 700, 14px, #010110. Links Inter weight 400, 14px, #73737c, row-gap 10px. Hàng dưới cùng: copyright Inter 12px #73737c, social icons (16px, #010110) căn phải.
5. Tạo navigation bar: nền trắng #ffffff, 1px bottom border #010110 ở độ mờ 15%, height 64px. Logo trái: chấm đen 8px + 'privy' Inter weight 700, 16px, #010110. Center nav: 4 items, mỗi item có icon 14px phía trên label Inter 13px, 10px row-gap, #010110. Cụm phải: 'Docs' và 'Demo' text links Inter 14px #010110, sau đó nút 'Log in' dạng ghost pill: transparent fill, 1px #010110 border, 15px Inter weight 500, padding 8px 18px, radius 100px.

## Similar Brands

- **Stripe** — Cùng bảng màu gần như đơn sắc với một accent color duy nhất, cùng custom-feeling display type, cùng pill buttons và bề mặt phẳng kiềm chế
- **Linear** — Cả hai đều dùng một chromatic accent duy nhất trên nền đơn sắc, cả hai ưa chuộng custom display type hơn system fonts, cả hai giữ component phẳng và tối thiểu
- **Vercel** — Cùng thẩm mỹ editorial-restraint: mặc định đen-trắng, typography tương phản cao, hairline borders, không decorative shadows
- **Plaid** — Cùng định vị fintech infrastructure được thể hiện qua editorial type và bề mặt đơn sắc với một blue accent duy nhất
- **Rainbow (Web3 wallet)** — Cùng audience crypto-infrastructure, cùng cách xử lý product-mockup-over-abstract-graphic hero

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #ffffff;
  --color-obsidian-ink: #010110;
  --color-carbon: #111117;
  --color-graphite: #22222a;
  --color-fog: #73737c;
  --color-ash: #d9d9d9;
  --color-iris-pulse: #635bff;
  --color-deep-teal: #072723;

  /* Typography — Font Families */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-favorit-variable: 'ABC Favorit Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-favorit-unlicensed-trial: 'ABC Favorit Unlicensed Trial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: -0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.32px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.4px;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.13;
  --tracking-heading-sm: -0.78px;
  --text-heading: 38px;
  --leading-heading: 1.15;
  --tracking-heading: -1.14px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1.07;
  --tracking-heading-lg: -1.68px;
  --text-display: 76px;
  --leading-display: 1.03;
  --tracking-display: -2.28px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-17: 17px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-70: 70px;

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

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-lg-2: 10.2px;
  --radius-3xl: 41px;
  --radius-full: 48px;
  --radius-full-2: 100px;
  --radius-full-3: 951px;

  /* Named Radii */
  --radius-nav: 8px;
  --radius-tags: 9999px;
  --radius-cards: 8px;
  --radius-images: 8px;
  --radius-buttons: 100px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle-wash: #d9d9d9;
  --surface-carbon: #111117;
  --surface-graphite: #22222a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas: #ffffff;
  --color-obsidian-ink: #010110;
  --color-carbon: #111117;
  --color-graphite: #22222a;
  --color-fog: #73737c;
  --color-ash: #d9d9d9;
  --color-iris-pulse: #635bff;
  --color-deep-teal: #072723;

  /* Typography */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-favorit-variable: 'ABC Favorit Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-favorit-unlicensed-trial: 'ABC Favorit Unlicensed Trial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: -0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.32px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.4px;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.13;
  --tracking-heading-sm: -0.78px;
  --text-heading: 38px;
  --leading-heading: 1.15;
  --tracking-heading: -1.14px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1.07;
  --tracking-heading-lg: -1.68px;
  --text-display: 76px;
  --leading-display: 1.03;
  --tracking-display: -2.28px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-17: 17px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-70: 70px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-lg-2: 10.2px;
  --radius-3xl: 41px;
  --radius-full: 48px;
  --radius-full-2: 100px;
  --radius-full-3: 951px;
}
```