# Lamborghini.com

> Lamborghini.com — Style Reference

## Prompt Content

```
# Lamborghini.com — Style Reference
> Showroom đen với một chiếc xe màu vàng dưới ánh đèn spotlight

**Theme:** mixed

Ngôn ngữ thiết kế của Lamborghini là sân khấu ô tô: một sân khấu tối điện ảnh nơi màu Giallo vàng tô điểm cho một thế giới vốn chỉ có đen trắng. Giao diện luân phiên giữa các hero canvas tối full-bleed (nơi video và ảnh sản phẩm chiếm ưu thế) và các bề mặt nội dung xám nhạt yên tĩnh (nơi kể chuyện editorial đảm nhận). Typography là yếu tố nổi bật nhất — một custom sans-serif công nghiệp (LamboType) chỉ được viết bằng CHỮ IN HOA, được scale mạnh mẽ lên 80–120px cho các hero statement. Các component tối giản và mang tính cấu trúc: không card bo tròn, không soft shadow, không decorative gradient — chỉ có bề mặt góc cạnh, hairline rules, và một nút hành động màu vàng rực rỡ duy nhất. Cảm giác tổng thể là sự kiềm chế như gallery bị phá vỡ bởi một điểm nhấn màu sắc tự tin, giống như một showroom đen mờ bị phá vỡ bởi một chiếc xe màu vàng dưới ánh đèn spotlight.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Giallo Vivo | `#ffc000` | `--color-giallo-vivo` | Accent vàng hỗ trợ cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp lên màu CTA chính |
| Giallo Ombra | `#917300` | `--color-giallo-ombra` | Trạng thái hover hoặc vàng thứ cấp, list marker với brand accent — biến thể mustard đậm hơn của màu chính |
| Carbony Black | `#202020` | `--color-carbony-black` | Văn bản chính, hero canvas tối, navigation bar — màu gần đen chủ lực được dùng hơn 1400 lần |
| Pure Black | `#000000` | `--color-pure-black` | Body copy, footer ink, icon stroke trên bề mặt sáng — văn bản tương phản tối đa và màu đen tuyệt đối |
| Carbon Deep | `#181818` | `--color-carbon-deep` | Màu headline trên bề mặt sáng, biến thể bề mặt tối, link ink — thay thế hơi ấm hơn cho pure black |
| Pearl White | `#ffffff` | `--color-pearl-white` | Page canvas, light card surface, button text trên nền tối, hero text overlay — bề mặt sáng chủ đạo |
| Marble Gray | `#f5f5f5` | `--color-marble-gray` | Nền section thay thế, body container fill, badge surface — màu trắng ngà phá vỡ nhịp điệu trắng-trắng |
| Graphite Border | `#494949` | `--color-graphite-border` | Section divider, link ink trên nền sáng, border mid-weight |
| Steel Mid | `#7d7d7d` | `--color-steel-mid` | Button border outline, secondary link text, muted UI chrome |
| Ash Border | `#969696` | `--color-ash-border` | Light border, trạng thái disabled, tertiary divider trên bề mặt trắng |
| Anvil | `#313131` | `--color-anvil` | Body copy variant, dark border accent — nằm giữa Carbony Black và các neutral đậm hơn |

## Tokens — Typography

### LamboType — Brand typeface độc quyền dùng ở mọi cấp độ phân cấp. Luôn hiển thị CHỮ IN HOA để tạo trọng lượng editorial, với letter-spacing đồng nhất 0.0230em trên mọi kích thước — khoảng cách đủ rộng để cảm giác được thiết kế có chủ đích, không bị chật chội. Kích thước display đạt 120px với line-height chặt 0.92–1.00 để headline xếp chồng thành các khối typographic nguyên khối. Chỉ một weight duy nhất (400) ở các kích thước khác biệt hoàn toàn (10px labels → 120px display) là dấu ấn: hệ thống đạt được giọng nói thông qua tương phản kích thước, không bao giờ tương phản weight. · `--font-lambotype`
- **Thay thế:** Barlow Condensed (open equivalent gần nhất cho cảm giác cao và công nghiệp); Rajdhani làm fallback; Bebas Neue cho ngữ cảnh display-only
- **Weights:** 400
- **Kích thước:** 10px, 12px, 16px, 18px, 27px, 32px, 40px, 54px, 80px, 120px
- **Line height:** 0.92, 1.00, 1.13, 1.15, 1.19, 1.37, 1.38, 1.50, 1.56, 1.63, 1.83, 2.00
- **Letter spacing:** 0.0230em trên mọi kích thước — áp dụng đồng nhất cho label (12px), body (16px), và display (120px), tạo cho mọi text node một nhịp điệu được thiết kế, dàn trải
- **Vai trò:** Brand typeface độc quyền dùng ở mọi cấp độ phân cấp. Luôn hiển thị CHỮ IN HOA để tạo trọng lượng editorial, với letter-spacing đồng nhất 0.0230em trên mọi kích thước — khoảng cách đủ rộng để cảm giác được thiết kế có chủ đích, không bị chật chội. Kích thước display đạt 120px với line-height chặt 0.92–1.00 để headline xếp chồng thành các khối typographic nguyên khối. Chỉ một weight duy nhất (400) ở các kích thước khác biệt hoàn toàn (10px labels → 120px display) là dấu ấn: hệ thống đạt được giọng nói thông qua tương phản kích thước, không bao giờ tương phản weight.

### Open Sans — Fallback hiếm hoặc body text bổ trợ ở 16px, letter-spacing bình thường — chỉ dùng ở 3 lần xuất hiện, thực chất là vestigial; không đưa vào cho các trang mới · `--font-open-sans`
- **Thay thế:** system-ui
- **Weights:** 400
- **Kích thước:** 16px
- **Line height:** 1.50
- **Vai trò:** Fallback hiếm hoặc body text bổ trợ ở 16px, letter-spacing bình thường — chỉ dùng ở 3 lần xuất hiện, thực chất là vestigial; không đưa vào cho các trang mới

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.5 | 0.23px | `--text-caption` |
| body | 16px | 1.5 | 0.37px | `--text-body` |
| subheading | 18px | 1.5 | 0.41px | `--text-subheading` |
| heading-sm | 27px | 1.37 | 0.62px | `--text-heading-sm` |
| heading | 32px | 1.38 | 0.74px | `--text-heading` |
| heading-lg | 40px | 1.19 | 0.92px | `--text-heading-lg` |
| display | 54px | 1.13 | 1.24px | `--text-display` |
| display-lg | 80px | 1 | 1.84px | `--text-display-lg` |
| hero | 120px | 0.92 | 2.76px | `--text-hero` |

## 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` |
| 80 | 80px | `--spacing-80` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 0px |
| badges | 0px |
| images | 0px |
| buttons | 0px |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 24px

## Components

### Hero Stage
**Vai trò:** Mở đầu điện ảnh full-bleed với nền video hoặc ảnh chụp

Canvas tối full-viewport (#202020 hoặc #000000) với headline LamboType trắng chồng lên ở 80–120px, chữ in hoa, line-height ~0.92, letter-spacing 0.0230em. Eyebrow label ở 12–16px nằm phía trên headline với cùng cách xử lý chữ in hoa. Nút CTA màu vàng neo ở góc dưới-bên trái, nút pause/video control neo ở góc dưới-bên phải. Nội dung nằm trong một cột canh trái, tối đa 50% chiều rộng viewport.

### Giallo Action Button
**Vai trò:** Call-to-action chính

Nền solid #ffc000, không border, 0px radius, padding 16px 24px. LamboType 12–16px chữ in hoa màu trắng (#ffffff) với icon mũi tên (→) ở 16px bên phải label. Letter-spacing 0.0230em. Không shadow. Nằm như một khối hình chữ nhật cứng màu vàng trên bề mặt tối hoặc trắng — màu sắc duy nhất trong giao diện, vì vậy nó phải chiếm ưu thế.

### Ghost Link Button
**Vai trò:** Hành động thứ cấp hoặc text-link CTA

Không fill, không border. LamboType 12–16px chữ in hoa màu #202020 hoặc #ffffff tùy theo bề mặt, với icon mũi tên phải. Letter-spacing 0.0230em. Dùng cho các hành động ít quan trọng hơn (model listings, editorial links). Mũi tên là neo hình ảnh duy nhất.

### Outlined Nav Button
**Vai trò:** Nút cấp ba với border

Fill trong suốt, border 1px màu #7d7d7d hoặc #969696, 0px radius, chữ LamboType 12–16px in hoa. Dùng hạn chế trong ngữ cảnh navigation hoặc filter khi cần một nút trung gian giữa Giallo solid và Ghost link.

### Top Navigation Bar
**Vai trò:** Navigation chính của trang

Thanh cố định trên cùng full-width, nền #202020, chiều cao ~64px. Bên trái: icon hamburger menu + label 'MENU' bằng LamboType trắng 12px. Giữa: logo bull màu trắng. Phải: icon camera + icon search. Không có border-bottom nhìn thấy được — bề mặt tối gặp trực tiếp hero.

### Section Heading Block
**Vai trò:** Tiêu đề section editorial với mô tả có link

Hàng hai cột: cột trái chứa tên section bằng LamboType 40–54px chữ in hoa #202020 (#000000 trên #f5f5f5), cột phải chứa link 'descubrir [chủ đề]' bằng LamboType 12px chữ in hoa #202020 với mũi tên phải. Canh giữa theo chiều dọc, được phân cách bởi khoảng trắng rộng rãi. Đây là pattern mở đầu section đặc trưng.

### Product Image Tile
**Vai trò:** Ảnh sản phẩm full-bleed

0px radius, không border, không shadow — ảnh chạy từ mép này sang mép kia trong grid cell của chúng. Caption nằm bên dưới bằng LamboType 12–16px chữ in hoa #202020 với date stamp ở 10–12px phía trên tiêu đề. Không có góc bo tròn, không có overlay UI.

### Three-Column Story Grid
**Vai trò:** Grid editorial story hoặc tin tức

Ba cột bằng nhau với gap 24px. Mỗi cell: date label (10–12px LamboType chữ in hoa) phía trên headline (16–27px LamboType chữ in hoa), sau đó là ảnh full-bleed bên dưới ở 0px radius. Không có card chrome — ảnh và văn bản nổi trực tiếp trên canvas trắng với khoảng trắng là separator duy nhất.

### Carousel Navigation Pips
**Vai trò:** Chỉ báo slide hero và điều khiển pause

Góc dưới-bên phải của hero: hai đường ngang ngắn (active + inactive) ở chiều rộng ~40px, chiều cao 1–2px, #ffffff, với nút pause hình lục giác viền #ffffff. LamboType không được dùng ở đây — đây là các yếu tố iconographic thuần túy. Khoảng cách giữa các pip: 24px.

### Full-Bleed Editorial Image
**Vai trò:** Ảnh sản phẩm hoặc lifestyle lớn

100% chiều rộng, 0px radius, không có caption overlay. Ảnh kéo dài từ mép này sang mép kia của viewport. Dùng cho cận cảnh xe (đường chỉ khâu da, huy hiệu) và ảnh lifestyle (đường đua, phong cảnh). Hình ảnh tự nói lên tất cả — không khung, không shadow, không góc bo tròn.

### Event Banner
**Vai trò:** Dải quảng cáo hoặc thông báo sự kiện

Nền ảnh sáng hơn với khối văn bản overlay ở bên trái. Headline ở 54–80px LamboType chữ in hoa màu trắng, body hỗ trợ ở 16–18px chữ in hoa màu trắng, sau đó là nút CTA Giallo bên dưới. Bên phải: nội dung ảnh ngầm. Padding: 40px trên/dưới.

### Date Stamped Card
**Vai trò:** Mục tin tức hoặc bài viết

Bề mặt trắng, 0px radius, không border. Ngày tháng bằng LamboType 10–12px chữ in hoa #7d7d7d hoặc #969696. Headline bằng LamboType 16–18px chữ in hoa #202020, letter-spacing 0.0230em. Theo sau là ảnh tỷ lệ 4:3 hoặc 16:9 ở 0px radius. Padding: 24px.

## Do's and Don'ts

### Do
- Hiển thị mọi heading bằng CHỮ IN HOA LamboType với letter-spacing 0.0230em — không ngoại lệ, đây là giọng nói typographic
- Dùng #ffc000 Giallo Vivo cho chính xác một element trên mỗi màn hình, hầu như luôn là nút hành động chính
- Luân phiên giữa bề mặt tối full-bleed #202020 và bề mặt sáng #ffffff/#f5f5f5 theo từng section để tạo nhịp điệu điện ảnh
- Scale display type mạnh mẽ: 80–120px cho hero statement, 40–54px cho section opener, 16–18px cho body
- Giữ tất cả giá trị radius ở 0px — các cạnh cứng là bất di bất dịch, từ button đến image đến card
- Dùng bội số spacing base 8px (8, 16, 24, 32, 40, 48, 64, 80px) — không bao giờ phá vỡ grid với các giá trị tùy ý
- Phân cách component bằng tương phản màu bề mặt và khoảng trắng, không bao giờ dùng shadow hoặc border

### Don't
- Không dùng góc bo tròn trên bất kỳ element nào — button, image, card, và badge đều ở 0px radius
- Không đưa thêm màu sắc nào ngoài #ffc000 và biến thể #917300 của nó — độ không màu sắc 0% chính là brand
- Không thêm drop shadow, soft glow, hoặc hiệu ứng elevation — sự phân cách chỉ đến từ màu bề mặt
- Không dùng nhiều hơn một weight của LamboType — nó chỉ có sẵn ở weight 400; hierarchy đến từ kích thước và cách xử lý chữ in hoa
- Không đặt màu Giallo vàng trên nhiều hơn một element trên mỗi màn hình — nó sẽ mất đi tính cấp bách như một tín hiệu
- Không dùng chữ thường hoặc sentence case cho bất kỳ display hoặc heading text nào — CHỮ IN HOA là bắt buộc ở 16px trở lên
- Không áp dụng letter-spacing khác ngoài 0.0230em — tracking đồng nhất là thứ làm cho hệ thống type cảm giác được thiết kế có chủ đích

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas White | `#ffffff` | Nền trang mặc định cho các section editorial và nội dung |
| 1 | Marble | `#f5f5f5` | Nền section thay thế, dải phân cách tinh tế khỏi canvas trắng |
| 2 | Carbony | `#202020` | Sân khấu tối cho hero full-bleed, nền video, và section trưng bày sản phẩm |
| 3 | Carbon Deep | `#181818` | Navigation bar, footer, và bề mặt tối hơn một chút để xếp lớp phía trên Carbony |
| 4 | Pure Black | `#000000` | Bề mặt tương phản đầu cuối, body ink, văn bản sâu nhất |

## Elevation

Lamborghini cố tình tránh drop shadow. Mọi sự phân cách thị giác đến từ tương phản màu bề mặt (trắng → #f5f5f5 → #202020 → #000000) và border hairline 1px. Các component nằm phẳng trên canvas như tấm thân xe ô tô — không có card nổi, không có soft glow. Đây là một thẩm mỹ công nghiệp, góc cạnh, nơi shadow sẽ cảm giác trang trí và yếu ớt.

## Imagery

Nhiếp ảnh là ngôn ngữ thị giác chính và chiếm ưu thế trong giao diện. Cách xử lý là full-bleed và edge-to-edge với 0px radius — ảnh không bao giờ bị cắt vào khung bo tròn. Hero sử dụng video điện ảnh và ảnh chụp không khí (đường hầm, đèn pha, chuyển động đường) trên canvas tối. Ảnh sản phẩm chặt chẽ, chi tiết macro: đường chỉ khâu da, logo bull thêu, đường cong thân xe. Ảnh dòng xe sử dụng nền đường đua và phong cảnh (đường đua Imola, đường mở). Ảnh lifestyle và editorial có độ tương phản cao, low-key, thường được chụp lúc bình minh/hoàng hôn hoặc trong ánh sáng studio. Không có illustration, không có đồ họa trừu tượng, không có icon-as-decoration. Icon tối giản và là line icon trắng trên nền tối. Tỷ lệ ảnh trên văn bản cao ở hero, cân bằng ở các section editorial.

## Layout

Mô hình trang luân phiên giữa các sân khấu tối full-bleed và các section sáng có max-width (1440px) được giới hạn. Hero là full-viewport với khối văn bản canh giữa hoặc canh trái nằm trên nền video/ảnh chụp. Các section tiếp theo sử dụng container max-width canh giữa với văn bản canh trái trong các hàng hai cột (heading trái, link phải). Section feature và story triển khai grid ảnh 3 cột với gap 24px. Navigation là thanh tối cố định (64px) với logo canh giữa. Footer là tối full-width. Nhịp điệu dọc sử dụng section gap 80px với internal element spacing 24px. Luồng tổng thể là: hero tối điện ảnh → dải editorial sáng → showcase sản phẩm tối → grid story sáng → footer tối. Các section hiếm khi sử dụng divider nhìn thấy được — tương phản màu bề mặt tự xác định ranh giới.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text: #202020 (chính trên nền sáng), #ffffff (chính trên nền tối)
- background: #ffffff (canvas sáng), #202020 (sân khấu tối)
- border: #969696 (hairline sáng), #494949 (divider đậm hơn)
- accent: #ffc000 (Giallo Vivo — một điểm nhấn trên mỗi màn hình)
- primary action: không có màu CTA riêng biệt

Ví dụ Component Prompts:

Không quan sát thấy màu primary action riêng biệt; sử dụng các neutral button treatment đã trích xuất thay vì phát minh ra màu CTA fill.

2. Tạo một section heading block: hàng hai cột trên nền #ffffff. Bên trái: tên section ở 54px LamboType weight 400, chữ in hoa, #202020, letter-spacing 0.0230em. Bên phải: discovery link ở 12px LamboType weight 400, chữ in hoa, #202020 với icon mũi tên phải. Padding 80px trên và dưới. Không border, không shadow.

3. Tạo một three-column story grid: ba cột bằng nhau với gap 24px trên nền #ffffff. Mỗi cell: date label ở 10px LamboType weight 400, chữ in hoa, #7d7d7d, sau đó headline ở 16px LamboType weight 400, chữ in hoa, #202020, sau đó là ảnh full-bleed bên dưới ở 0px radius. Section gap 64px phía trên grid.

5. Tạo một product image tile: ảnh full-bleed ở 0px radius, không border, không shadow. Bên dưới ảnh: caption ở 12px LamboType weight 400, chữ in hoa, #202020, letter-spacing 0.0230em. Padding 24px xung quanh nội dung tile. Nằm trên bề mặt #ffffff hoặc #f5f5f5.

## Similar Brands

- **Ferrari.com** — Cùng cách tiếp cận sân khấu ô tô: hero tối điện ảnh với video full-bleed, display type chữ in hoa pha chút monospace, một accent Rosso Corsa đỏ duy nhất trên bảng màu đen trắng, và các cạnh cứng 0px-radius xuyên suốt
- **Porsche.com** — Chia sẻ nhịp điệu luân phiên hero tối / section editorial sáng, headline display condensed chữ in hoa ở scale 80–120px, và bảng màu đơn sắc được tô điểm bởi một brand color duy nhất (đỏ cho Porsche) trên CTA
- **Ducati.com** — Cả hai đều nghiêng về ảnh sản phẩm tối full-bleed, headline custom sans-serif chữ in hoa với letter-spacing đồng nhất, và vốn từ vựng component tối giản — button 0px radius, hairline border, không shadow
- **Aston Martin** — Sự kiềm chế của xe sang: bề mặt tối điện ảnh, display type editorial chữ in hoa, một accent color duy nhất (British Racing Green hoặc Aston Martin Green) chỉ dùng trên action element, section spacing 80px rộng rãi
- **McLaren Automotive** — Thẩm mỹ kỹ thuật công nghiệp: hero stage tối full-bleed, display sans-serif condensed chữ in hoa, một accent rực rỡ duy nhất (Papaya Orange) là yếu tố màu sắc đơn độc, hệ thống component góc cạnh 0px-radius

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-giallo-vivo: #ffc000;
  --color-giallo-ombra: #917300;
  --color-carbony-black: #202020;
  --color-pure-black: #000000;
  --color-carbon-deep: #181818;
  --color-pearl-white: #ffffff;
  --color-marble-gray: #f5f5f5;
  --color-graphite-border: #494949;
  --color-steel-mid: #7d7d7d;
  --color-ash-border: #969696;
  --color-anvil: #313131;

  /* Typography — Font Families */
  --font-lambotype: 'LamboType', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-open-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 0.23px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.37px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: 0.41px;
  --text-heading-sm: 27px;
  --leading-heading-sm: 1.37;
  --tracking-heading-sm: 0.62px;
  --text-heading: 32px;
  --leading-heading: 1.38;
  --tracking-heading: 0.74px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.19;
  --tracking-heading-lg: 0.92px;
  --text-display: 54px;
  --leading-display: 1.13;
  --tracking-display: 1.24px;
  --text-display-lg: 80px;
  --leading-display-lg: 1;
  --tracking-display-lg: 1.84px;
  --text-hero: 120px;
  --leading-hero: 0.92;
  --tracking-hero: 2.76px;

  /* Typography — Weights */
  --font-weight-regular: 400;

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

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

  /* Named Radii */
  --radius-cards: 0px;
  --radius-badges: 0px;
  --radius-images: 0px;
  --radius-buttons: 0px;

  /* Surfaces */
  --surface-canvas-white: #ffffff;
  --surface-marble: #f5f5f5;
  --surface-carbony: #202020;
  --surface-carbon-deep: #181818;
  --surface-pure-black: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-giallo-vivo: #ffc000;
  --color-giallo-ombra: #917300;
  --color-carbony-black: #202020;
  --color-pure-black: #000000;
  --color-carbon-deep: #181818;
  --color-pearl-white: #ffffff;
  --color-marble-gray: #f5f5f5;
  --color-graphite-border: #494949;
  --color-steel-mid: #7d7d7d;
  --color-ash-border: #969696;
  --color-anvil: #313131;

  /* Typography */
  --font-lambotype: 'LamboType', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-open-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 0.23px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.37px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: 0.41px;
  --text-heading-sm: 27px;
  --leading-heading-sm: 1.37;
  --tracking-heading-sm: 0.62px;
  --text-heading: 32px;
  --leading-heading: 1.38;
  --tracking-heading: 0.74px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.19;
  --tracking-heading-lg: 0.92px;
  --text-display: 54px;
  --leading-display: 1.13;
  --tracking-display: 1.24px;
  --text-display-lg: 80px;
  --leading-display-lg: 1;
  --tracking-display-lg: 1.84px;
  --text-hero: 120px;
  --leading-hero: 0.92;
  --tracking-hero: 2.76px;

  /* 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-80: 80px;
  --spacing-160: 160px;
}
```