# 2.AG

> 2.AG — Style Reference

## Prompt Content

```
# 2.AG — Style Reference
> Hiệu thuốc lâm sàng dưới ánh sáng teal — một thương hiệu wellness có tính đo lường, kê đơn, xử lý ảnh sản phẩm như một tiêu bản mẫu.

**Theme:** light

2.AG mang phong cách hiệu thuốc lâm sàng kết hợp với thương hiệu khoa học hiện đại: nền gần trắng, bề mặt cấu trúc teal đậm, và một điểm nhấn mint tươi sáng kích hoạt các CTA và dữ liệu nổi bật. Inter Tight được thắt chặt để tạo giọng điệu dược phẩm — tracking hơi âm ở các kích thước display, tracking rộng rãi trên small caps cho danh sách thành phần và badge. Các component thiên về bo tròn lớn dạng pill (30–50px) cho button và bo góc mềm 12–20px trên card, báo hiệu một thương hiệu chính xác về liều lượng nhưng ấm áp trên cơ thể. Các section teal đậm (header Rapid Relief Cream, stat block) neo trang web vào thẩm quyền lâm sàng, trong khi dấu câu xanh lá tươi sáng tạo điểm nhấn năng lượng, gần giống như kệ thuốc. Layout chia đôi, thoáng rộng, tập trung vào sản phẩm: hero ghép một nửa editorial tối với một nửa sản phẩm sáng, các section xen kẽ trắng và teal, reviews/stats tạo thành lưới card dày đặc nhưng thoáng khí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|-------|
| Deep Teal | `#244d54` | `--color-deep-teal` | Màu cấu trúc chính — nền hero tối, bề mặt stat block, icon strokes, navigation wordmark, viền secondary button. Một teal gần xám đọc như mực hơn là đại dương, giúp định vị thương hiệu mà không trở nên lâm sàng-lạnh lẽo |
| Mint Pulse | `#2ecea0` | `--color-mint-pulse` | Màu hành động chính — nền CTA dạng filled, badge fills, active dots, announcement bar, review star highlights. Xanh lá tươi sáng pha cyan, khiến mọi phần tử tương tác trông như được bật lên và mang tính sinh học |
| Soft Teal | `#6dddbd` | `--color-soft-teal` | Teal text accent cho link, tag và cụm từ ngắn được nhấn mạnh. Không nâng cấp lên màu CTA chính |
| Carbon | `#000000` | `--color-carbon` | Body text, hairline borders, icon strokes, input borders. Màu trung tính cấu trúc chiếm ưu thế — hầu hết viền trên site là đen tuyền, tạo khung hình editorial sắc nét cho UI |
| Ink | `#151515` | `--color-ink` | Heading text chính và secondary borders. Mềm hơn đen tuyền cho headline lớn khi Carbon đọc quá nặng |
| Graphite | `#4d4d4d` | `--color-graphite` | Subhead text, button text trên nền sáng, muted labels |
| Slate | `#858585` | `--color-slate` | Body text muted, helper copy, disabled labels, secondary icon strokes. Màu trung tính chủ lực cho bất cứ thứ gì cần lùi lại |
| Fog | `#999999` | `--color-fog` | Input borders, placeholder color, low-priority surface accents |
| Mist | `#e5e7eb` | `--color-mist` | Card và section dividers, viền nhẹ trên nền trắng, separator giữa các review card |
| Bone | `#f0f1f2` | `--color-bone` | Bề mặt card và list sáng nhất — cao hơn trắng tuyền một bước để tạo elevation nhẹ trên page canvas |
| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, button text, input fills. Bề mặt sáng chiếm ưu thế |

## Tokens — Typography

### Inter Tight — Kiểu chữ thương hiệu chính cho heading, body, button, badge và UI. Phiên bản tighter tùy chỉnh thắt chặt nhịp điệu headline và mang lại cho small caps cảm giác dược phẩm, nhãn kê đơn. · `--font-inter-tight`
- **Thay thế:** Inter (variable), Manrope
- **Weights:** 400, 500, 600
- **Kích thước:** 10px, 12px, 13px, 14px, 15px, 16px, 18px, 20px, 24px, 30px, 36px, 45px, 62px
- **Line height:** 1.00–1.86 (tight 1.0 cho caps, 1.21–1.25 cho display, 1.5 cho body, 1.86 cho metadata lỏng lẻo)
- **Letter spacing:** -0.042em ở kích thước display, 0.005em mặc định, 0.02–0.03em trên body, 0.09–0.10em trên small uppercase labels
- **OpenType features:** `"kern"`
- **Vai trò:** Kiểu chữ thương hiệu chính cho heading, body, button, badge và UI. Phiên bản tighter tùy chỉnh thắt chặt nhịp điệu headline và mang lại cho small caps cảm giác dược phẩm, nhãn kê đơn.

### Inter — Kiểu chữ phụ dùng cho stat block numerals và một vài kích thước display sản phẩm lớn. Inter xử lý các stat gradient rất lớn với chữ số sạch, gradient-fill gọn gàng. · `--font-inter`
- **Thay thế:** Inter Tight, system-ui
- **Weights:** 400, 500
- **Kích thước:** 16px, 18px, 28px, 48px
- **Line height:** 1.10, 1.20
- **Letter spacing:** -0.042em
- **Vai trò:** Kiểu chữ phụ dùng cho stat block numerals và một vài kích thước display sản phẩm lớn. Inter xử lý các stat gradient rất lớn với chữ số sạch, gradient-fill gọn gàng.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.86 | 1px | `--text-caption` |
| body | 16px | 1.5 | 0.08px | `--text-body` |
| subheading | 20px | 1.4 | 0.4px | `--text-subheading` |
| heading-sm | 30px | 1.3 | 0.6px | `--text-heading-sm` |
| heading | 36px | 1.25 | 0.72px | `--text-heading` |
| heading-lg | 45px | 1.21 | 0.9px | `--text-heading-lg` |
| stat-numeral | 48px | 1.1 | -2px | `--text-stat-numeral` |
| display | 62px | 1 | 1.24px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** 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` |
| 60 | 60px | `--spacing-60` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 12-20px |
| badges | 50px (pill) |
| inputs | 5px |
| buttons | 30-50px (pill) |
| hero-cta | 250px |

### Layout

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

## Components

### Announcement Bar
**Vai trò:** Dải quảng cáo đầu trang

Dải full-width màu mint #2ecea0 với text Inter Tight trắng 12–14px, thường có icon xe tải + cam kết giao hàng. Chiều cao ~40px, một dòng, không viền, nằm sát phía trên nav.

### Top Navigation
**Vai trò:** Header chính của site

Thanh trắng, cao ~64px, với wordmark 2.AG màu đen bên trái, 3–5 text link (Shop, Science, Contact) ở 16px Inter Tight 500 với padding ngang 15–30px, icon search và icon bag (có chấm đen 8px hiển thị số lượng) căn phải. Không đổ bóng, viền dưới hairline #e5e7eb.

### Hero Panel — Dark Half
**Vai trò:** Hero editorial bên trái

Nền full-height #244d54 với hình người wireframe 3D hiển thị các khớp phát sáng. Headline ở Inter Tight 62px / 500, trắng, letter-spacing ~1.2px, căn trái ở độ rộng 50–60%. Pill CTA bên dưới với nền trong suốt, viền 1px mint #2ecea0, text trắng, radius 50px, padding 14px 48px.

### Hero Panel — Product Half
**Vai trò:** Hero sản phẩm bên phải

Nền xám nhạt/trắng với ảnh chụp bokeh hình tròn/bong bóng phía sau ống sản phẩm. Ảnh sản phẩm ~60% chiều rộng panel, căn giữa. Không có text chồng lên.

### Pill CTA — Outlined Mint
**Vai trò:** Nút hành động chính trên nền tối

Nền trong suốt, viền 1px #2ecea0, text trắng 16px Inter Tight 500, border-radius 50px, padding 14px 48px. Dùng cho lời kêu gọi 'Get Relief' trong hero. Tracking chặt — gần như không có letter-spacing.

### Pill CTA — Filled Mint
**Vai trò:** Hành động chính trên nền sáng

Nền solid #2ecea0, text trắng, radius 30–50px, padding dọc 12–16px và ngang 24–48px. Dùng cho 'Add to bag' và CTA nhắc nhở review.

### Pill Badge — Mint
**Vai trò:** Thẻ liều lượng và tính năng

Radius 30–50px, padding 8px 16px, nền #2ecea0, text trắng 12–14px Inter Tight 600. Dùng cho '10,000 MG', '1000 MG' và active filter chips.

### Product Card
**Vai trò:** Trình bày ảnh sản phẩm và hộp trên PDP

Panel nền trắng #f0f1f2, border-radius 20px, padding trong 20–24px, viền hairline 1px #e5e7eb. Chứa ống kem + hộp bên ngoài trên nền sáng. Không đổ bóng — dựa vào viền để tạo cạnh.

### Ingredient Feature Row
**Vai trò:** Danh sách thuộc tính được làm nổi bật bên trong PDP

Các hàng xếp chồng, mỗi hàng cao ~56px, cách nhau bằng viền hairline 1px #e5e7eb. Giá trị lớn 18–20px Inter Tight 500 màu Deep Teal #244d54 ('2 cannabinoids', '5 key ingredients'), text muted 12–13px màu #858585 cho mô tả bên dưới.

### Review Card
**Vai trò:** Ô testimonial của khách hàng

Card trắng trên nền #f0f1f2, radius 12–20px, viền 1px #e5e7eb, padding 20–24px. 5 ngôi sao mint ở trên, quote 18–20px Inter Tight 500 màu Ink #151515, tên người đánh giá 12–13px Slate #858585 kèm icon checkmark mint nhỏ cho người mua đã xác minh.

### Video Review Card
**Vai trò:** Testimonial khách hàng có thể phát

Cùng kích thước và kiểu dáng với Review Card nhưng chứa poster video dọc 9:16 với nút play hình tròn trắng căn giữa, viền 1px mint. Thay thế quote text bằng thumbnail.

### Stat Block
**Vai trò:** Điểm chứng minh số lớn

Nền Deep Teal #244d54, radius 20px, padding 40–60px. Chữ số headline 48–62px trong gradient dọc từ Soft Teal #6dddbd đến Mint #2ecea0, áp dụng dưới dạng CSS background-clip text fill. Dấu phần trăm 24–30px màu trắng, nằm ở góc trên bên phải của chữ số.

### Input Field
**Vai trò:** Input form

Nền trắng, viền 1px #999999, radius 5px, padding 12–16px, text 14–16px Inter Tight 400 màu Carbon #000000. Placeholder màu #999999. Không có visible focus ring trong dữ liệu trích xuất — dựa vào viền dày lên hoặc thay đổi trạng thái.

### Review Marquee Row
**Vai trò:** Dải đánh giá đã xác minh tự động cuộn

Một hàng ngang duy nhất ở đầu section reviews, header 5 sao căn trái, sau đó là các quote người đánh giá nội tuyến ở Inter Tight 14–15px, 500, Carbon — cách nhau bằng dấu chấm tròn, tất cả caps, tracking ~0.05em.

### Nav Text Link
**Vai trò:** Mục navigation cấp cao nhất

16px Inter Tight 500 Carbon #000000, không gạch chân, padding ngang 15–30px, padding dọc 7px. Trạng thái active sẽ chuyển sang Deep Teal #244d54.

## Do's and Don'ts

### Nên
- Sử dụng Inter Tight weight 500 cho tất cả headline và CTA; dành weight 600 cho badge và active filter chips
- Chỉ áp dụng Mint #2ecea0 cho filled actions, active dots và dosage badges — không bao giờ dùng làm body text trên nền trắng
- Sử dụng Deep Teal #244d54 làm nền cho bất kỳ section nào giới thiệu proof point, statistic hoặc tuyên bố khoa học
- Đặt tất cả primary action buttons ở pill radii từ 30px đến 50px — độ tròn báo hiệu danh mục chăm sóc cơ thể
- Áp dụng letter-spacing 0.09–0.10em trên tất cả uppercase labels và ingredient callouts ở 10–12px để có nhịp điệu nhãn kê đơn
- Chỉ sử dụng gradient dọc #6dddbd-to-#2ecea0 qua background-clip text trên stat numerals lớn (48px+); không bao giờ dùng trên body copy
- Giữ section backgrounds xen kẽ giữa Paper #ffffff và Deep Teal #244d54 để duy trì nhịp quét trang lâm sàng, có nhịp điệu

### Không nên
- Không thêm màu sắc mới — hệ thống cố tình chỉ có hai tông (Deep Teal + Mint) trên thang trung tính
- Không sử dụng radius sắc 0–4px trên button hoặc badge; sự mềm mại của thương hiệu được thể hiện qua hình dạng pill
- Không đặt text Mint trên nền trắng ở kích thước body dưới 16px — độ tương phản giảm xuống dưới ngưỡng accessibility
- Không sử dụng box shadow nặng cho elevation; design system dựa vào hairline borders #e5e7eb hoặc #000000 và sự thay đổi màu bề mặt
- Không trộn Inter và Inter Tight trong cùng một dòng text — chọn một kiểu chữ cho mỗi khối nội dung
- Không sử dụng letter-spacing chặt hơn -0.05em ở kích thước dưới 24px — tracking chặt ở kích thước nhỏ sẽ làm glyph va chạm nhau
- Không thêm trang trí ngoài bảng màu hiện tại (không tím, đỏ hoặc trung tính ấm); hệ thống teal lạnh là thương hiệu

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Page Canvas | `#ffffff` | Nền body mặc định và khu vực nội dung chính |
| 2 | Soft Card | `#f0f1f2` | Elevation nhẹ cho review list rows và nhóm card phụ |
| 3 | Structural Dark | `#244d54` | Panel trái hero, stat blocks, section editorial sâu |
| 4 | Highlight Wash | `#2ecea0` | Announcement bar và pill badge fills để nhấn mạnh trạng thái active |

## Elevation

Design system cố tình tránh box shadow. Tất cả chiều sâu được truyền đạt qua hairline borders 1px (#e5e7eb trên nền trắng, #000000 trên nền trung tính) và các bước tông bề mặt từ Paper #ffffff đến Bone #f0f1f2 đến Deep Teal #244d54. Đây là một thẩm mỹ phẳng, lâm sàng — sản phẩm làm phần việc nặng nhọc, chrome đứng sang một bên.

## Imagery

Hình ảnh thưa thớt và do sản phẩm dẫn dắt. Hero kết hợp hình người wireframe 3D với các nút đau phát sáng (sân khấu deep teal, điểm nhấn mint glow) cùng ảnh chụp sản phẩm với bokeh bong bóng/huyết thanh trên nền trắng. PDP sử dụng ảnh chụp sản phẩm sạch trên nền trắng của ống kem và hộp bìa cứng, không có bối cảnh lối sống. Không có ảnh chụp lối sống con người; sơ đồ khoa học và ảnh vật thể là những ngôn ngữ hình ảnh duy nhất. Phong cách icon là đơn sắc nét mảnh 1px stroke, chủ yếu là trắng trên teal hoặc đen trên trắng. Các trường sao trang trí trong stat blocks không mang thêm hình ảnh nào — các chữ số gradient lớn làm công việc thị giác.

## Layout

Container căn giữa max-width 1280px, với hero split tối/sáng full-bleed là section duy nhất phá vỡ bố cục. Hero là split 50/50: panel editorial teal đậm bên trái, panel sản phẩm sáng bên phải. Các section tiếp theo xen kẽ Paper #ffffff và Deep Teal #244d54 trong các dải ngang. Content blocks sử dụng 2 cột bất đối xứng (ảnh trái, copy phải) cho sản phẩm, và lưới card 4–5 cột cho reviews, với một ô được thay bằng card video dọc. Stats section là lưới 3 cột gồm các chữ số gradient lớn trên nền deep teal. Nhịp dọc rộng rãi — ~64px giữa các section chính, ~24px trong card. Không có sidebar; navigation là một thanh trên cùng duy nhất. Review marquee dưới cùng cuộn ngang phía trên lưới card.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #000000 (body) / #151515 (headings) / #858585 (muted)
- background: #ffffff (canvas) / #f0f1f2 (soft card) / #244d54 (structural dark)
- border: #e5e7eb (hairline trên nền sáng) / #000000 (structural) / #999999 (input)
- accent: #2ecea0 Mint Pulse
- primary action: #2ecea0 (filled action)
- gradient text: linear-gradient #6dddbd → #2ecea0 cho stat numerals

**Ví dụ Component Prompts**

1. Xây dựng một hero section. Split 50/50: nửa trái #244d54 với hình người wireframe 3D; headline 'A breakthrough in topical cannabinoids' ở Inter Tight 500, 62px, trắng, letter-spacing 1.2px. Bên dưới là pill CTA với nền trong suốt, viền 1px #2ecea0, text trắng 16px, radius 50px, padding 14px 48px. Nửa phải trắng với bokeh hình tròn và ống sản phẩm căn giữa ở 60% chiều rộng panel.

2. Xây dựng một stat row. 3 cột stat blocks trên nền #244d54, radius 20px, padding 48px. Mỗi cột hiển thị một chữ số (93%, 99%, 0%) ở 62px Inter weight 500 với gradient dọc #6dddbd→#2ecea0 qua background-clip text, dấu phần trăm 24px trắng ở góc trên bên phải, caption trắng 12px bên dưới ở caps tracking 0.09em.

3. Xây dựng một review card. Nền trắng #ffffff, radius 12px, viền 1px #e5e7eb, padding 20px. Năm ngôi sao #2ecea0 ở 14px, sau đó quote 18px Inter Tight 500 màu #151515, sau đó tên người đánh giá 12px #858585 kèm icon checkmark mint nhỏ để chỉ đã xác minh.

4. Xây dựng một dosage badge. Nền #2ecea0, radius 50px, padding 8px 16px, text trắng '10,000 MG' ở 12px Inter Tight 600 với tracking 0.05em.

5. Xây dựng một product PDP section. Cột trái: panel trắng #f0f1f2, radius 20px, padding 24px, chứa ảnh ống kem căn giữa. Cột phải: tên sản phẩm 36px Inter Tight 500 màu #151515, 5 ngôi sao mint + số lượng review, một dosage badge Mint Pulse, body 16px màu #000000, sau đó danh sách tính năng xếp chồng với divider hàng 1px #e5e7eb và text tính năng 20px Inter Tight 500 màu #244d54.

## Similar Brands

- **Athletic Greens / AG1** — Cùng ngôn ngữ wellness lâm sàng: nền trắng, bề mặt cấu trúc teal-xanh đậm, CTA xanh lá tươi sáng, button hình pill và hệ thống phân cấp ingredient-badge
- **Hilma** — Thương hiệu gần với dược phẩm với uppercase tracked labels, điểm nhấn teal đậm và hero editorial split
- **Care/of** — Wellness DTC với sans-serif sạch sẽ, bề mặt card mềm mại và một điểm nhấn sáng duy nhất cho dosage và CTA
- **Cuup** — Hero tối giản do sản phẩm dẫn dắt với pill CTA cỡ lớn, split panel editorial và editorial uppercase tracked labels
- **Recess** — Cảm giác hiệu thuốc hiện đại với màu thương hiệu lạnh đậm, khoảng trắng rộng rãi và metadata tracked uppercase nhỏ

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-deep-teal: #244d54;
  --color-mint-pulse: #2ecea0;
  --color-soft-teal: #6dddbd;
  --color-carbon: #000000;
  --color-ink: #151515;
  --color-graphite: #4d4d4d;
  --color-slate: #858585;
  --color-fog: #999999;
  --color-mist: #e5e7eb;
  --color-bone: #f0f1f2;
  --color-paper: #ffffff;

  /* Typography — Font Families */
  --font-inter-tight: 'Inter Tight', 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;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.86;
  --tracking-caption: 1px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.08px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 0.4px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: 0.6px;
  --text-heading: 36px;
  --leading-heading: 1.25;
  --tracking-heading: 0.72px;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.21;
  --tracking-heading-lg: 0.9px;
  --text-stat-numeral: 48px;
  --leading-stat-numeral: 1.1;
  --tracking-stat-numeral: -2px;
  --text-display: 62px;
  --leading-display: 1;
  --tracking-display: 1.24px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* 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-60: 60px;
  --spacing-80: 80px;

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

  /* Border Radius */
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-full: 50px;
  --radius-full-2: 250px;

  /* Named Radii */
  --radius-cards: 12-20px;
  --radius-badges: 50px (pill);
  --radius-inputs: 5px;
  --radius-buttons: 30-50px (pill);
  --radius-hero-cta: 250px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-soft-card: #f0f1f2;
  --surface-structural-dark: #244d54;
  --surface-highlight-wash: #2ecea0;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-deep-teal: #244d54;
  --color-mint-pulse: #2ecea0;
  --color-soft-teal: #6dddbd;
  --color-carbon: #000000;
  --color-ink: #151515;
  --color-graphite: #4d4d4d;
  --color-slate: #858585;
  --color-fog: #999999;
  --color-mist: #e5e7eb;
  --color-bone: #f0f1f2;
  --color-paper: #ffffff;

  /* Typography */
  --font-inter-tight: 'Inter Tight', 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;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.86;
  --tracking-caption: 1px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.08px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 0.4px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: 0.6px;
  --text-heading: 36px;
  --leading-heading: 1.25;
  --tracking-heading: 0.72px;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.21;
  --tracking-heading-lg: 0.9px;
  --text-stat-numeral: 48px;
  --leading-stat-numeral: 1.1;
  --tracking-stat-numeral: -2px;
  --text-display: 62px;
  --leading-display: 1;
  --tracking-display: 1.24px;

  /* 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-60: 60px;
  --spacing-80: 80px;

  /* Border Radius */
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-full: 50px;
  --radius-full-2: 250px;
}
```