# GRAZA

> # GRAZA — Style Reference

## Prompt Content

```
# GRAZA — Style Reference
> Quầy deli Địa Trung Hải ngập nắng, được xếp đặt bằng tay

**Theme:** light

Graza mang chất của một quầy deli Địa Trung Hải tràn ngập ánh nắng — bề mặt kem ấm áp, mực olive đậm đọc như gỗ lâu năm, và những mảng xanh chanh bất chợt như rau củ dưới ánh đèn chợ. Typography mang trọng lượng editorial đầy tự tin: một typewriter serif đảm nhận phần hội thoại trong khi Garamond condensed lướt vào cho những khoảnh khắc display cỡ lớn. Màu sắc hoạt động như một gian hàng rau củ — canvas luôn ấm và trung tính, và những mảng xanh tươi xuất hiện dưới dạng section band full-bleed hoặc những điểm nhấn chức năng nhỏ, không bao giờ là chrome chồng chrome. Các component được giữ tối giản và đặt bằng tay: pill buttons, hairline borders, image radii 20px nhẹ nhàng, và hầu như không có shadow. Nhịp điệu luân phiên giữa hero plate ảnh full-bleed, editorial spread chỉ text trên nền màu đồng nhất, và bố cục text + ảnh chia đôi. Không có gì bị khóa cứng trong grid; whitespace và asymmetry làm tất cả công việc.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Olive Ink | `#3c422e` | `--color-olive-ink` | Text chính, nav links, borders, button outlines, icon strokes — gần như đen nhưng pha ánh olive, giúp trang không bị cảm giác vô trùng |
| Linen Cream | `#fff4ec` | `--color-linen-cream` | Bề mặt nền phụ nhẹ cho background tinh tế và phân cách section. Không nâng lên làm màu CTA chính |
| Buttery Peach | `#f6e6d9` | `--color-buttery-peach` | Bề mặt phụ và band tương phản ấm — đậm hơn Linen Cream một chút, dùng để ngắt các trang dài và lồng card |
| Squeeze Bottle Green | `#9eef80` | `--color-squeeze-bottle-green` | Section band full-bleed, text treatment được tô sáng — xanh tươi như rau củ trên kệ, mang cả trang |
| EVOO Yellow-Green | `#d1e030` | `--color-evoo-yellow-green` | Accent xanh phụ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên làm màu CTA chính |
| Mustard Sun | `#fbd535` | `--color-mustard-sun` | Section band editorial full-bleed, lớp type trang trí lớn — phiên bản ấm hơn của EVOO Yellow-Green, đảm nhận những khoảnh khắc hero |

## Tokens — Typography

### GT Alpina Typewriter — Workhorse chính cho body copy, nav, buttons, links, captions, input fields, và editorial label nhỏ. Typewriter serif mang đến cho thương hiệu giọng nói thủ công, kiểu quầy bếp — những letterform hơi bất toàn khiến utility text trở nên editorial thay vì giao dịch. · `--font-gt-alpina-typewriter`
- **Thay thế:** IBM Plex Serif, Lora, hoặc Recoleta
- **Weights:** 400, 500, 700
- **Cỡ:** 12, 16, 18, 20
- **Line height:** 1.0, 1.2, 1.25, 1.5
- **Letter spacing:** normal
- **Vai trò:** Workhorse chính cho body copy, nav, buttons, links, captions, input fields, và editorial label nhỏ. Typewriter serif mang đến cho thương hiệu giọng nói thủ công, kiểu quầy bếp — những letterform hơi bất toàn khiến utility text trở nên editorial thay vì giao dịch.

### ITC Garamond Condensed — Chỉ dùng cho display và hero headlines — Garamond cao, hẹp tương phản mạnh với body typewriter, tạo ra hệ thống phân cấp kiểu trang bìa tạp chí. Cỡ 120px với tracking -0.031em là dấu ấn đặc trưng của thương hiệu: sự tự tin editorial nuốt trọn trang. · `--font-itc-garamond-condensed`
- **Thay thế:** Playfair Display, Cormorant Garamond, hoặc DM Serif Display
- **Weights:** 400
- **Cỡ:** 46, 48, 72, 102, 120
- **Line height:** 0.9, 1.0, 1.6
- **Letter spacing:** -0.031em ở 120px, -0.030em ở 102px, -0.021em ở 46-48px
- **Vai trò:** Chỉ dùng cho display và hero headlines — Garamond cao, hẹp tương phản mạnh với body typewriter, tạo ra hệ thống phân cấp kiểu trang bìa tạp chí. Cỡ 120px với tracking -0.031em là dấu ấn đặc trưng của thương hiệu: sự tự tin editorial nuốt trọn trang.

### Apercu — Badge và status micro-label — một geometric sans trung tính dùng trong các tag all-caps chặt như 'BACK IN STOCK'. Chỉ xuất hiện trong ngữ cảnh badge để tránh cạnh tranh với hệ thống serif. · `--font-apercu`
- **Thay thế:** Inter, Söhne, hoặc Work Sans
- **Weights:** 400
- **Cỡ:** 13
- **Line height:** 1.0
- **Letter spacing:** normal
- **Vai trò:** Badge và status micro-label — một geometric sans trung tính dùng trong các tag all-caps chặt như 'BACK IN STOCK'. Chỉ xuất hiện trong ngữ cảnh badge để tránh cạnh tranh với hệ thống serif.

### Type Scale

| Vai trò | Cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1 | — | `--text-caption` |
| body | 16px | 1.5 | — | `--text-body` |
| body-lg | 18px | 1.25 | — | `--text-body-lg` |
| subheading | 20px | 1.2 | — | `--text-subheading` |
| heading-sm | 46px | 1 | -0.97px | `--text-heading-sm` |
| heading | 72px | 0.9 | -2.16px | `--text-heading` |
| heading-lg | 102px | 0.9 | -3.06px | `--text-heading-lg` |
| display | 120px | 0.9 | -3.72px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 35 | 35px | `--spacing-35` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 68 | 68px | `--spacing-68` |
| 100 | 100px | `--spacing-100` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| pills | 9999px |
| images | 20px |
| inputs | 10px |
| buttons | 10px |
| nav-capsule | 32px |

### Layout

- **Section gap:** 64px
- **Card padding:** 30px
- **Element gap:** 20px

## Components

### Pill Nav Button
**Vai trò:** Nút icon giỏ hàng và tài khoản trong header

Oval capsule với radius 9999px, border 1px Olive Ink (#3c422e), fill Linen Cream (#fff4ec), padding ngang 10px, chứa icon nhỏ + text count. Nằm gọn trong cụm nav phía trên bên phải.

### Nav Capsule
**Vai trò:** Container nav bo tròn đặc biệt

Container radius 32px chứa một icon đơn, dùng như phần tử utility nổi phía trên hàng nav chính.

### Primary Filled CTA
**Vai trò:** Trigger mua hàng hoặc hành động chính

Nền EVOO Yellow-Green (#d1e030), text Olive Ink (#3c422e), radius 10px, padding dọc khoảng 20px và ngang 30px. GT Alpina Typewriter cỡ 16px weight 700, tracking all-caps. CTA duy nhất có màu bão hòa trong hệ thống.

### Outline Ghost Button
**Vai trò:** Hành động phụ, call-to-action editorial

Nền trong suốt hoặc Linen Cream, border 1px Olive Ink (#3c422e), radius 10px, padding dọc 20px, padding ngang 30px. GT Alpina Typewriter 16px weight 500. Dùng cho các link kiểu 'Get The Chips'.

### Carousel Arrow Control
**Vai trò:** Điều hướng nội dung phân trang

Pill nhỏ radius 10px, border 1px Olive Ink, fill Linen Cream, chứa glyph mũi tên trái/phải. Nằm căn giữa dưới các khối text hero.

### Editorial Section Band
**Vai trò:** Section nội dung màu full-bleed

Khối cạnh kề cạnh với màu Mustard Sun (#fbd535) hoặc Squeeze Bottle Green (#9eef80). Không có max-width bên trong cho phần fill màu — nội dung bên trong được căn giữa lỏng lẻo với padding ngang 30px. Display headlines bằng ITC Garamond Condensed giảm xuống 72–120px.

### Full-Bleed Hero Plate
**Vai trò:** Ảnh hero lifestyle/sản phẩm

Ảnh tràn ra cả bốn cạnh, không radius. Headline và CTA overlay ở góc dưới bên trái bằng Olive Ink trên lớp gradient mờ hoặc trực tiếp trên ảnh ấm. Headline đặt bằng Garamond Condensed 46–72px.

### Split Feature Block
**Vai trò:** Highlight sản phẩm text + ảnh

Grid 50/50 trên editorial band: cột text bên trái (căn giữa theo chiều dọc, max ~480px rộng), cột ảnh bên phải với radius 20px và padding nhẹ bên trong. Headline 46–72px Garamond, body 16–18px Alpina.

### Product Image Card
**Vai trò:** Ảnh sản phẩm lifestyle trong layout editorial

Ảnh với border-radius 20px, không shadow, không border. Thường đi kèm khối caption bên dưới bằng GT Alpina Typewriter 12–16px.

### Status Badge
**Vai trò:** Label inline như "BACK IN STOCK"

Không container — chỉ text bằng Apercu 13px, all-caps, weight 400, Olive Ink. Được bao quanh bởi glyph dấu hoa thị hoặc hoa nhỏ trang trí. Nằm căn giữa phía trên section headline.

### Text Link with Arrow
**Vai trò:** Link editorial như "MAKE THIS DISH →"

GT Alpina Typewriter Olive Ink 16px weight 500, gạch chân hoặc theo sau bởi em-arrow. Không button chrome — đọc như cross-reference editorial.

### Inline Recipe Card
**Vai trò:** Caption công thức đi kèm ảnh món ăn

Ảnh radius 20px ở trên, caption bên dưới bằng GT Alpina Typewriter 12–16px: 'Recipe: [tên]' weight 400, theo sau bởi text link arrow. Không card surface, không border — nổi trên màu section band.

### Scattered Text Cluster
**Vai trò:** Đám mây từ khóa bất đối xứng trên section xanh

Các từ ITC Garamond Condensed lớn (Sear, Grill, Fry, Roast, Bake, Garnish, Knead) được đặt ở nhiều cỡ khác nhau (46–72px) và xoay nhẹ trong một band Squeeze Bottle Green full-bleed. Một từ được khoanh tròn bằng oval Olive Ink mảnh. Mang tính editorial, không chức năng.

### Footer Olive Branch Photo
**Vai trò:** Ảnh kết thúc tạo không khí

Ảnh full-bleed của cành olive, không radius, không overlay text — đóng vai trò làm sạch bảng màu (palette cleanser) giữa các section nội dung và khoảnh khắc điều hướng tiếp theo.

## Do's and Don'ts

### Nên làm
- Đặt display headlines bằng ITC Garamond Condensed ở 72–120px với tracking -0.03em — đường cong condensed là hình bóng đặc trưng của thương hiệu.
- Dùng Olive Ink (#3c422e) cho tất cả text và borders; không bao giờ dùng đen thuần hoặc xám trung tính. Ánh olive là bắt buộc.
- Để accent colors (Mustard Sun #fbd535, Squeeze Bottle Green #9eef80) chạy full-bleed dưới dạng section band thay vì chip UI nhỏ — nhiệm vụ của chúng là mang trang, không phải trang trí button.
- Áp dụng radius 20px cho tất cả ảnh sản phẩm và lifestyle; radius 10px cho buttons và inputs; 9999px cho cart/account pills.
- Căn giữa nội dung section editorial với padding ngang khoảng 30px thay vì khóa vào grid max-width; trang được thiết kế để cảm giác như đặt bằng tay.
- Ghép typewriter serif (GT Alpina Typewriter) với tất cả utility text — nav, buttons, inputs, body, captions — ở 12–20px weight 400–700.
- Chỉ dùng kiểu badge Apercu 13px cho status label all-caps được bao quanh bởi glyph trang trí nhỏ.

### Không nên làm
- Không dùng xám trung tính hệ thống hoặc đen thuần cho text hoặc borders — luôn dùng Olive Ink (#3c422e).
- Không đặt body copy bằng ITC Garamond Condensed; display serif condensed chỉ dành cho headlines 46px trở lên.
- Không áp shadow cho cards, buttons, hoặc images. Hệ thống dựa vào color bands và radius, không phải elevation.
- Không dùng các màu xanh tươi làm button fill nhỏ hoặc chip background — chúng là section colors full-bleed hoặc type trang trí lớn, không phải chrome.
- Không khóa layout vào grid 12 cột cứng nhắc; các section editorial thở với text placement bất đối xứng và scattered keyword clusters.
- Không trộn nhiều accent color trong một section — mỗi section chỉ có một accent band (vàng HOẶC xanh), không bao giờ cả hai.
- Không thêm border hoặc divider xám trung tính khi một đường 1px Olive Ink đã đủ; màu border là một phần của hệ thống, không phải phương án dự phòng.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Canvas | `#fff4ec` | Nền trang mặc định — linen trắng ấm cho hầu hết nội dung |
| 1 | Warm Card | `#f6e6d9` | Bề mặt phụ và band nội dung xen kẽ — kem đào hơi đậm hơn |
| 2 | Mustard Band | `#fbd535` | Nền section editorial full-bleed — vàng ấm cho các spread nổi bật |
| 3 | Green Band | `#9eef80` | Nền section editorial full-bleed — xanh rau củ tươi cho các section công thức/từ khóa |
| 4 | CTA Surface | `#d1e030` | Accent hành động — chỉ trên primary filled button, không phải section band |

## Elevation

Hệ thống không có shadow vocabulary. Chiều sâu được truyền đạt thông qua các color band full-bleed chuyển từ kem sang vàng sang xanh, và qua image radius 20px. Components nằm trực tiếp trên canvas với hairline 1px Olive Ink khi cần phân cách. Không drop shadows, không glow, không floating cards.

## Imagery

Nhiếp ảnh là nội dung hình ảnh chủ đạo — ảnh đồ ăn và lifestyle tông ấm, ánh sáng tự nhiên cho thấy bàn tay đang phết, cắt, rót, và bày dầu olive. Ảnh là tight product crops hoặc medium shot của đồ ăn trong bối cảnh bếp gia đình, không phải studio dàn dựng. Xử lý: hero plates full-bleed không radius, product cards radius 20px trong layout editorial. Không illustrations, không icons ngoài line glyph tối giản, không 3D renders. Nhiếp ảnh mang câu chuyện màu sắc (kem ấm, rau củ xanh olive, dầu vàng) thay vì dựa vào graphic overlays. Dày đặc: một bức ảnh lớn thường chiếm 50–100% bất kỳ section nào.

## Layout

Mô hình trang full-bleed không có container max-width cứng — các section hoặc chạy cạnh kề cạnh trên màu đồng nhất hoặc có ảnh cạnh kề cạnh. Pattern hero: ảnh lifestyle full-viewport với headline overlay góc dưới bên trái. Nhịp section luân phiên giữa photographic plates và flat color bands (Mustard Sun → Squeeze Bottle Green), với nền kem ấm đan xen giữa chúng. Sắp xếp nội dung mang tính editorial và bất đối xứng: khối headline căn giữa trên color fields, khối text+ảnh chia 50/50, và scattered keyword clusters (Sear, Grill, Fry) cố tình phá vỡ grid. Không card grids, không pricing tables, không masonry. Navigation là top bar tối giản với brand wordmark bên trái, text links ở giữa-phải, và cart/account buttons hình pill ở ngoài cùng bên phải. Khoảng cách dọc rộng rãi — 35–64px giữa các section editorial — tạo nhịp điệu magazine-spread thay vì mật độ product-listing.

## Agent Prompt Guide

**Quick Color Reference**
- text/border: #3c422e Olive Ink
- background: #fff4ec Linen Cream
- secondary surface: #f6e6d9 Buttery Peach
- accent band: #fbd535 Mustard Sun (section editorial) hoặc #9eef80 Squeeze Bottle Green (section editorial)
- primary action: không có màu CTA riêng biệt
Không quan sát thấy màu primary action riêng biệt; hãy dùng các neutral button treatments đã trích xuất thay vì tự tạo màu CTA filled.

**Example Component Prompts**
2. Xây dựng một section Mustard Sun full-bleed: nền #fbd535 chạy cạnh kề cạnh không max-width. Nội dung căn giữa với padding ngang 30px. Badge Apercu 13px đọc 'BACK IN STOCK' được bao quanh bởi dấu hoa thị, sau đó headline Garamond Condensed 102px với tracking -3.06px, sau đó body Alpina Typewriter 16px, sau đó outline ghost button với border 1px Olive Ink radius 10px.
3. Xây dựng split feature block 50/50 trên Squeeze Bottle Green (#9eef80) full-bleed: cột trái chứa headline Garamond Condensed 48px căn giữa và text link với em-arrow bằng Alpina Typewriter 16px weight 500. Cột phải chứa một ảnh sản phẩm radius 20px.
4. Xây dựng scattered keyword cluster trên Squeeze Bottle Green: các từ 'Sear', 'Grill', 'Fry', 'Roast', 'Bake', 'Garnish', 'Knead' được đặt ở nhiều vị trí và cỡ khác nhau (46–72px Garamond Condensed), một từ được khoanh tròn bằng stroke oval 1px Olive Ink mảnh.
5. Xây dựng top nav: brand wordmark 'GRAZA' bằng Garamond Condensed ~20px bên trái, text links 'Shop / Get Refills / About / Glog' bằng Alpina Typewriter 16px ở giữa-phải, và hai pill buttons (radius 9999px, border 1px Olive Ink, fill Linen Cream, ~10px padding) cho cart và account ở ngoài cùng bên phải.

## Typography Pairing Philosophy

Hệ thống là một cuộc đối thoại hai serif: GT Alpina Typewriter (serif hơi bất thường, mang tính nhân văn) xử lý mọi bề mặt chức năng — nav, buttons, inputs, body, captions — trong khi ITC Garamond Condensed (display serif cao, hẹp, tương phản cao) chỉ xuất hiện ở 46px trở lên cho editorial headlines. Apercu xuất hiện như giọng nói thứ ba cho micro-label all-caps (badges, status tags) ở 13px. Không bao giờ dùng Garamond Condensed cho body. Không bao giờ dùng Alpina cho display. Sự tương phản giữa typewriter hơi bất toàn và Garamond condensed sắc nét là thứ mang lại cho Graza sự tự tin editorial — utility cảm thấy ấm áp, display cảm thấy có kiến trúc.

## Similar Brands

- **Fly By Jing** — Cùng cách tiếp cận kem ấm + accent color band đậm cho food ecommerce, với editorial serif display headlines và ảnh lifestyle full-bleed
- **Omsom** — Sử dụng vui tươi các section color full-bleed sống động (vàng, xanh, hồng của họ) trên nền trung tính ấm, với serif type tự tin và layout editorial đặt bằng tay
- **Brightland** — Thương hiệu đồ ăn liên quan đến dầu olive với nền linen ấm, text olive đậm, và display headlines condensed serif đậm trên ảnh sản phẩm lifestyle
- **Magic Spoon** — Thương hiệu đồ ăn DTC thiên về các khối màu accent đơn sắc tươi sáng và editorial headlines condensed serif lớn trên nền kem ấm

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-olive-ink: #3c422e;
  --color-linen-cream: #fff4ec;
  --color-buttery-peach: #f6e6d9;
  --color-squeeze-bottle-green: #9eef80;
  --color-evoo-yellow-green: #d1e030;
  --color-mustard-sun: #fbd535;

  /* Typography — Font Families */
  --font-gt-alpina-typewriter: 'GT Alpina Typewriter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-itc-garamond-condensed: 'ITC Garamond Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu: 'Apercu', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.25;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --text-heading-sm: 46px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: -0.97px;
  --text-heading: 72px;
  --leading-heading: 0.9;
  --tracking-heading: -2.16px;
  --text-heading-lg: 102px;
  --leading-heading-lg: 0.9;
  --tracking-heading-lg: -3.06px;
  --text-display: 120px;
  --leading-display: 0.9;
  --tracking-display: -3.72px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-35: 35px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-68: 68px;
  --spacing-100: 100px;

  /* Layout */
  --section-gap: 64px;
  --card-padding: 30px;
  --element-gap: 20px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-pills: 9999px;
  --radius-images: 20px;
  --radius-inputs: 10px;
  --radius-buttons: 10px;
  --radius-nav-capsule: 32px;

  /* Surfaces */
  --surface-canvas: #fff4ec;
  --surface-warm-card: #f6e6d9;
  --surface-mustard-band: #fbd535;
  --surface-green-band: #9eef80;
  --surface-cta-surface: #d1e030;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-olive-ink: #3c422e;
  --color-linen-cream: #fff4ec;
  --color-buttery-peach: #f6e6d9;
  --color-squeeze-bottle-green: #9eef80;
  --color-evoo-yellow-green: #d1e030;
  --color-mustard-sun: #fbd535;

  /* Typography */
  --font-gt-alpina-typewriter: 'GT Alpina Typewriter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-itc-garamond-condensed: 'ITC Garamond Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu: 'Apercu', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.25;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --text-heading-sm: 46px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: -0.97px;
  --text-heading: 72px;
  --leading-heading: 0.9;
  --tracking-heading: -2.16px;
  --text-heading-lg: 102px;
  --leading-heading-lg: 0.9;
  --tracking-heading-lg: -3.06px;
  --text-display: 120px;
  --leading-display: 0.9;
  --tracking-display: -3.72px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-35: 35px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-68: 68px;
  --spacing-100: 100px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 32px;
  --radius-full: 9999px;
}
```