# Forner

> # Forner — Style Reference

## Prompt Content

```
# Forner — Style Reference
> Warm earthen atelier — hãy tưởng tượng một xưởng gốm vào giờ vàng, nơi mọi bề mặt đều là đất sét, xương, hoặc cà phê rang, và thứ chrome duy nhất là mảnh giấy ghi chú viết tay của người thợ gốm cài trên tường.

**Theme:** light

Forner hoạt động như một design atelier ngập nắng: bảng màu gần như hoàn toàn là tông đất ấm, một custom grotesque duy nhất đảm nhận 95% giọng điệu, và typography siêu lớn đến mức từ bỏ hệ thống phân cấp để tạo bầu không khí. Canvas là một tông kem khô; mực là một tông nâu rang đậm; mọi điểm nhấn đều nằm trong cùng một dải màu từ nâu đến xương. Không có màu thương hiệu chromatic — chính độ ấm là thương hiệu. Bề mặt phẳng với hairline borders, góc vuông sắc nét ở 4px, và khoảng thở rộng rãi (100px+ giữa các section). Custom serif italics xuất hiện tiết kiệm như những chú thích viết tay đặt cạnh nhịp điệu cơ học của grotesque.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Roast Ink | `#484036` | `--color-roast-ink` | Primary text, borders, icon strokes, xương sống cấu trúc của mọi giao diện — nâu ấm đậm đóng vai trò như mực trên nền kem, màu foreground chủ đạo trên toàn bộ hệ thống |
| Bone Canvas | `#faf5eb` | `--color-bone-canvas` | Nền trang, trường kem ấm mà mọi bề mặt đặt trên đó |
| Linen Surface | `#ecece4` | `--color-linen-surface` | Bề mặt card, panel nâng cao, content blocks — cách canvas một bước, hơi lạnh và xám hơn để lùi về phía sau |
| Sandstone | `#cacab0` | `--color-sandstone` | Heading accents, icon strokes, decorative borders, link underlines — neutral có cảm giác chromatic nhẹ nhất, dùng khi Roast Ink có vẻ quá nặng |
| Pebble | `#d5d5c4` | `--color-pebble` | Link text, secondary interactive states — ấm hơn các tông xám lạnh, giữ họ link trong bảng màu đất |
| Manilla Cream | `#f2e9cf` | `--color-manilla-cream` | Warm highlight wash, soft fill cho tags và subtle emphasis blocks |
| Slate Border | `#666e72` | `--color-slate-border` | Hairline borders tông lạnh, dividers, structural lines — điểm phá vỡ duy nhất khỏi bảng màu ấm, cung cấp độ tương phản cấu trúc trung tính |
| Charcoal Depth | `#33302c` | `--color-charcoal-depth` | Deep heading text, near-black emphasis — ấm hơn đen thuần, dành cho những khoảnh khắc type nặng nhất |
| Obsidian | `#212529` | `--color-obsidian` | Borders và text có độ tương phản tối đa — tối nhất hiện có, dùng tiết kiệm cho emphasis tuyệt đối |

## Tokens — Typography

### Surt — Primary workhorse — dùng cho body, navigation, buttons, hero, headings, và mọi thứ ở giữa. Font đơn này đảm nhận 606 instances trên mọi ngữ cảnh, biến nó thành giọng nói của toàn bộ hệ thống. Line-height siêu khít (0.98-1.10) ở cỡ lớn là signature: display text nằm gần đến mức các dòng gần như chạm nhau, tạo nhịp điệu editorial nén chặt. Chỉ có weight 400 — không có bold, không có light. Sự kiềm chế thông qua phạm vi kích thước, không phải weight. · `--font-surt`
- **Thay thế:** Söhne, Inter, Neue Haas Grotesk
- **Weights:** 400
- **Sizes:** 22px, 29px, 45px, 56px, 112px
- **Line height:** 0.98-1.10 cho display, 1.35-1.50 cho body
- **Letter spacing:** -0.0400em ở body, 0.0110em ở cỡ nhỏ, -0.0500em ở display
- **Vai trò:** Primary workhorse — dùng cho body, navigation, buttons, hero, headings, và mọi thứ ở giữa. Font đơn này đảm nhận 606 instances trên mọi ngữ cảnh, biến nó thành giọng nói của toàn bộ hệ thống. Line-height siêu khít (0.98-1.10) ở cỡ lớn là signature: display text nằm gần đến mức các dòng gần như chạm nhau, tạo nhịp điệu editorial nén chặt. Chỉ có weight 400 — không có bold, không có light. Sự kiềm chế thông qua phạm vi kích thước, không phải weight.

### ClashDisplay — Secondary display face — dùng cho structural headings và labels khi cần cảm giác kiến trúc hơn một chút. Line-height 0.97 siêu khít ở cỡ 56px là aggressive ngay cả theo chuẩn display; các dòng xếp chồng như một modernist poster. Kết hợp với Surt như giọng 'engineered' đối lập với giọng 'neutral' của Surt. · `--font-clashdisplay`
- **Thay thế:** Clash Display (Fontshare), Söhne Schmal, Founders Grotesk Condensed
- **Weights:** 400
- **Sizes:** 17px, 30px, 52px, 56px
- **Line height:** 0.97-1.13
- **Letter spacing:** -0.0100em ở body, 0.0200em ở display
- **Vai trò:** Secondary display face — dùng cho structural headings và labels khi cần cảm giác kiến trúc hơn một chút. Line-height 0.97 siêu khít ở cỡ 56px là aggressive ngay cả theo chuẩn display; các dòng xếp chồng như một modernist poster. Kết hợp với Surt như giọng 'engineered' đối lập với giọng 'neutral' của Surt.

### BigDailyShort — Accent serif italic — chỉ xuất hiện 5 lần trong toàn hệ thống, hoạt động như một ghi chú viết tay đặt cạnh grotesque. Dùng cho pull quotes, editorial labels, hoặc những khoảnh khắc signature khi hệ thống cần cảm giác được ký tên thay vì in ấn. Sự khan hiếm chính là điểm mấu chốt: khi nó xuất hiện, nó mang trọng lượng thông qua sự hiện diện, không phải kích thước. · `--font-bigdailyshort`
- **Thay thế:** GT Sectra, Canela, Domaine Display Italic
- **Weights:** 400 (Light Italic)
- **Sizes:** 17px, 37px, 45px
- **Line height:** 0.98-1.03
- **Letter spacing:** -0.0500em, 0.0110em, 0.0200em
- **Vai trò:** Accent serif italic — chỉ xuất hiện 5 lần trong toàn hệ thống, hoạt động như một ghi chú viết tay đặt cạnh grotesque. Dùng cho pull quotes, editorial labels, hoặc những khoảnh khắc signature khi hệ thống cần cảm giác được ký tên thay vì in ấn. Sự khan hiếm chính là điểm mấu chốt: khi nó xuất hiện, nó mang trọng lượng thông qua sự hiện diện, không phải kích thước.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 17px | 1.13 | 0.34px | `--text-caption` |
| body | 22px | 1.35 | 0.24px | `--text-body` |
| subheading | 29px | 1.1 | -0.29px | `--text-subheading` |
| heading | 45px | 1.03 | -0.45px | `--text-heading` |
| heading-lg | 56px | 0.98 | -2.24px | `--text-heading-lg` |
| display | 112px | 0.98 | -5.6px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 14 | 14px | `--spacing-14` |
| 29 | 29px | `--spacing-29` |
| 43 | 43px | `--spacing-43` |
| 58 | 58px | `--spacing-58` |
| 68 | 68px | `--spacing-68` |
| 86 | 86px | `--spacing-86` |
| 100 | 100px | `--spacing-100` |
| 121 | 121px | `--spacing-121` |
| 144 | 144px | `--spacing-144` |
| 161 | 161px | `--spacing-161` |
| 232 | 232px | `--spacing-232` |
| 233 | 233px | `--spacing-233` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 4px |
| cards | 4px |
| images | 4px |
| inputs | 4px |
| buttons | 4px |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 100px
- **Card padding:** 29px
- **Element gap:** 14px

## Components

### Display Hero Headline
**Vai trò:** Hero và section-anchoring text

Surt ở 112px, weight 400, line-height 0.98, letter-spacing -5.6px. Màu #484036 trên canvas #faf5eb. Tracking siêu khít và line-height nén chặt khiến các dòng gần như chạm nhau — tạo sự hiện diện như poster, không phải trải nghiệm đọc thoải mái. Đây là bầu không khí, không phải thông tin.

### Section Heading
**Vai trò:** Structural headings giữa trang

Surt ở 45-56px, weight 400, line-height 1.03-0.98, letter-spacing -1.8 đến -2.24px. Màu #484036. Cùng anti-convention như display: light weight ở cỡ lớn, negative tracking nặng. Headlines thì thầm ở tỷ lệ mà hầu hết các trang đều hét to.

### Body Paragraph
**Vai trò:** Tất cả paragraph text

Surt ở 22px, weight 400, line-height 1.35, letter-spacing 0.24px. Màu #484036. Positive tracking nhẹ trên body là bất thường — hầu hết grotesque đều thắt chặt ở cỡ body, Surt lại mở rộng. Tạo nhịp đọc editorial thoáng đãng hơn.

### Outlined Action Button
**Vai trò:** Primary interactive trigger

Surt ở 17px, weight 400, text #484036. Border 1px #484036, radius 4px, padding dọc 14px, padding ngang 29px. Không fill — chỉ outlined. Border tối trung tính có nghĩa là không có chromatic CTA; tính cấp bách đến từ border weight và spacing rộng rãi, không phải màu sắc. Hover state có thể fill thành #484036 với bone text.

### Ghost Link
**Vai trò:** Inline navigation, footer links, tertiary actions

Surt ở 17-22px, weight 400, màu #d5d5c4 với underline #cacab0 (1px). Không background, không border. Underline luôn hiện diện — link giao tiếp thông qua đường kẻ liên tục, không phải độ tương phản màu.

### Content Card
**Vai trò:** Project tiles, case study blocks, content containers

Background #ecece4 (lạnh hơn canvas một bước). Radius 4px. Internal padding 29px. Border 1px #666e72 (slate) để định nghĩa cấu trúc. Không shadow — sự chuyển tông nhẹ từ canvas sang card là tín hiệu elevation duy nhất. Đây là hệ thống phẳng, paper-on-paper, không phải floating-card.

### Product Showcase Panel
**Vai trò:** Full-bleed portfolio imagery

Ảnh được xử lý ở tỷ lệ đầy đủ không có frame hoặc container — chúng chảy vào canvas #faf5eb. Radius 4px chỉ khi bị giới hạn trong một card. Ảnh chụp màn hình cho thấy một product photograph nổi trên trường kem ấm, màu sắc riêng của bức ảnh (terracotta) làm công việc chống lại hệ thống muted.

### Editorial Annotation
**Vai trò:** Pull quotes, signed notes, accent labels

BigDailyShort Light Italic ở 17-45px, line-height 0.98-1.03, màu #484036. Dùng 5 lần trong toàn hệ thống — sự khan hiếm này là lựa chọn thiết kế. Khi xuất hiện, nó đọc như một nhãn viết tay của curator ghim trên tường gallery. Không bao giờ dùng cho body hoặc navigation.

### Navigation Bar
**Vai trò:** Top-level site navigation

Surt ở 22px, weight 400, transparent trên canvas #faf5eb. Các link ngang cách nhau bởi khoảng trống 29-68px. Không background fill, không border, không shadow. Nav là text nổi trên canvas — nó không tự xưng là một UI element.

### Section Divider
**Vai trò:** Giữa các content section

Không phải một đường kẻ nhìn thấy được — các section được phân cách bởi 86-144px khoảng trống âm. Khi cần một đường kẻ, 1px #666e72 ở 100% width. Hệ thống ưu tiên khoảng thở hơn các đường kẻ.

### Tag or Category Label
**Vai trò:** Project categories, metadata chips

Surt ở 17px, weight 400, text #484036. Tùy chọn border 1px #cacab0, radius 4px, padding dọc 14px / ngang 29px. Fill Manilla Cream (#f2e9cf) có sẵn cho emphasis variants. Tags nhỏ, yên tĩnh, outlined — không bao giờ fill với brand color.

### Image Caption
**Vai trò:** Bên dưới project imagery

Surt ở 17px, weight 400, line-height 1.13, letter-spacing 0.34px, màu #666e72. Cách ảnh 14px. Màu xám lạnh hơn và positive tracking tách biệt nó khỏi giọng body — captions là metadata, không phải content.

## Do's and Don'ts

### Do
- Dùng Surt weight 400 cho tất cả text — không có bold, không light, không medium. Kích thước và tracking tạo hierarchy, không phải weight.
- Đặt line-height ở 0.98-1.10 cho tất cả display sizes từ 45px trở lên — sự xếp chồng nén chặt là signature.
- Dùng #faf5eb cho page canvas và #ecece4 cho card surfaces — sự chuyển tông hai bước ấm sang lạnh là tín hiệu elevation duy nhất cần.
- Duy trì vertical rhythm 100px+ giữa các section; để khoảng trống âm phân cách content thay vì vẽ các đường kẻ.
- Đặt tất cả border-radius thành 4px — hệ thống sắc nét như phẫu thuật, không mềm mại.
- Chỉ dùng BigDailyShort italic 1-3 lần mỗi trang — sự khan hiếm của nó tạo thẩm quyền như một chú thích có chữ ký.
- Giữ tất cả interactive elements ở dạng outlined hoặc ghosted với border #484036; không bao giờ đưa vào chromatic action color.

### Don't
- Không dùng bold hoặc semibold weights — hệ thống có một giọng duy nhất (regular 400) ở mọi kích thước.
- Không thêm drop shadows hoặc box-shadows — elevation đến từ sự chuyển tông bề mặt, không phải blurred offsets.
- Không dùng trắng tinh (#ffffff) hoặc đen tinh (#000000) — toàn bộ bảng màu sống trong dải nâu ấm đến xương.
- Không đưa accent colors (không xanh, đỏ, xanh lá, hoặc bất kỳ chromatic brand color nào) — 5% colorfulness là hệ thống.
- Không dùng border-radius trên 4px — không pills, không bo tròn lớn, không đường cong 'thân thiện'.
- Không đặt display line-height trên 1.10 — spacing rộng rãi giết chết nhịp điệu editorial nén chặt.
- Không dùng BigDailyShort italic cho navigation, body, hoặc buttons — nó chỉ dành cho annotation và mất hết ý nghĩa nếu dùng quá nhiều.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Bone Canvas | `#faf5eb` | Nền trang — trường kem ấm mà mọi content đặt trên đó |
| 1 | Linen Surface | `#ecece4` | Nền card và content panel — lạnh và xám hơn canvas một tông để lùi mà không cần shadow |
| 2 | Manilla Highlight | `#f2e9cf` | Soft emphasis fill cho tags, highlights, và accent blocks |

## Elevation

Hệ thống cố tình tránh hoàn toàn shadows. Elevation được truyền đạt độc quyền thông qua sự chuyển tông bề mặt — canvas (#faf5eb) là nền, cards bước lạnh hơn sang Linen (#ecece4), và emphasis blocks thêm độ ấm sang Manilla (#f2e9cf). Kết hợp với hairline borders 1px #666e72 hoặc #484036, điều này tạo ra hệ thống phân lớp paper-on-paper thay vì floating-card. Shadows sẽ đưa nhiễu thị giác mà bảng màu đất không thể hấp thụ.

## Imagery

Imagery do portfolio-driven và có độ trung thực cao: full-bleed product photography, brand mockups, và editorial compositions đặt trực tiếp trên canvas kem ấm mà không có frames hoặc containers. Ảnh chụp màn hình cho thấy một terracotta product package (Doma microdose blend) như một hero element — màu sắc rực rỡ của chính bức ảnh làm công việc, không khung. Không có decorative illustrations, không stock photography, không abstract graphics. Khi product hoặc brand work xuất hiện, nó được xử lý như một artifact thực: tight crops, góc 4px sắc nét chỉ khi bị giới hạn, nếu không thì chảy ra mép canvas. Icon style (có thể thấy trong UI): thin 1px line icons #484036 hoặc #cacab0, stroke-led, monoline, không filled states. Imagery nặng về ảnh ở cấp portfolio và tối giản icon ở cấp UI.

## Layout

Layout được max-width contained (1440px) với outer padding rộng rãi (29-68px ngang). Trang đọc như một chuỗi dọc các full-width sections được phân cách bởi 100px+ khoảng thở — không có sidebar, không có grid-of-grids phức tạp. Hero là một centered display headline ở 112px trên cream canvas, thường đi kèm với một full-bleed product hoặc brand image duy nhất bên dưới. Section rhythm nhất quán: display heading → supporting body ở 22px → visual artifact → section tiếp theo. Content được sắp xếp trong single-column stacks cho hero moments, mở rộng thành 2-column text+image pairs cho case studies. Không có masonry, không card grid 3+, không pricing table. Navigation là một top bar tối giản với các link ngang. Mật độ tổng thể spacious và editorial — hệ thống xử lý trang như một portfolio spread in ấn, không phải dashboard.

## Agent Prompt Guide

**Quick Color Reference**
- text: #484036
- background: #faf5eb
- card surface: #ecece4
- border: #666e72
- accent: #cacab0
- primary action: không có distinct CTA color

**3 Example Component Prompts**

Không quan sát thấy distinct primary action color; dùng các neutral button treatments đã trích xuất thay vì phát minh ra filled CTA color.

2. Tạo một content card: background #ecece4, radius 4px, padding 29px tất cả các cạnh, border 1px #666e72. Heading ở 45px Surt weight 400, #484036, letter-spacing -1.8px. Body ở 22px Surt weight 400, #484036, line-height 1.35. Không shadow.

3. Tạo một navigation bar: transparent trên canvas #faf5eb. Logo wordmark ở 22px Surt weight 400, #484036. Links ở 22px Surt weight 400, #d5d5c4 với underline #cacab0 1px, gap 29px giữa các item. Không background, không border, không shadow.

## Typographic Philosophy

Hệ thống cố tình loại bỏ sự biến thiên weight. Chỉ có weight 400, hierarchy được xây dựng hoàn toàn thông qua kích thước, tracking, và line-height. Display sizes (56-112px) dùng aggressive negative tracking (-0.0400em đến -0.0500em) và compressed line-heights (0.97-0.98) — text xếp chồng như một modernist poster. Body sizes (22-29px) mở ra với positive tracking (0.0110em) và generous line-height (1.35-1.50) — đọc trở nên thoáng đãng và editorial. Weight đơn buộc mọi quyết định typographic phải xoay quanh tỷ lệ, không phải sự nhấn mạnh. Đây là một anti-bold system: sự vắng mặt của độ đậm chính là điểm mấu chốt.

## Earth Palette Logic

Mọi màu sắc trong hệ thống đều thuộc dải nâu đến xương. Không có xanh, không đỏ, không xanh lá, không chromatic accent, không semantic color coding theo nghĩa truyền thống (không đỏ cho lỗi, không xanh lá cho thành công). Độ ấm là đồng nhất — ngay cả slate 'lạnh' (#666e72) cũng được dùng về mặt cấu trúc cho borders, không bao giờ cho emphasis. Điều này có nghĩa là success/error/warning states, nếu cần, phải được truyền đạt thông qua tông (Roast Ink nhạt hơn/ấm hơn) hoặc thông qua BigDailyShort italic annotation thay vì tín hiệu chromatic. Kỷ luật của bảng màu chính là thương hiệu của nó: 5% colorfulness có nghĩa là 95% warm neutral đang làm tất cả công việc thị giác.

## Similar Brands

- **Aether** — Cùng bảng màu neutral ấm đất với một custom grotesque duy nhất đảm nhận toàn bộ giọng điệu, cộng thêm cùng cách tiếp cận editorial large-display-headline
- **Resn** — Cùng aesthetic tối giản với hairline borders, flat surfaces, và cùng paper-on-paper layering không shadows
- **Locomotive (MTL)** — Cùng layout editorial spacious rhythm, oversized display type, và từ chối dùng chromatic brand color — độ ấm của neutrals làm công việc
- **Studio Dumbar** — Cùng kỷ luật single-weight typography và earth-toned palette, với sự phụ thuộc signature vào một bộ nhỏ custom typefaces làm mọi công việc typographic

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-roast-ink: #484036;
  --color-bone-canvas: #faf5eb;
  --color-linen-surface: #ecece4;
  --color-sandstone: #cacab0;
  --color-pebble: #d5d5c4;
  --color-manilla-cream: #f2e9cf;
  --color-slate-border: #666e72;
  --color-charcoal-depth: #33302c;
  --color-obsidian: #212529;

  /* Typography — Font Families */
  --font-surt: 'Surt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-clashdisplay: 'ClashDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bigdailyshort: 'BigDailyShort', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 17px;
  --leading-caption: 1.13;
  --tracking-caption: 0.34px;
  --text-body: 22px;
  --leading-body: 1.35;
  --tracking-body: 0.24px;
  --text-subheading: 29px;
  --leading-subheading: 1.1;
  --tracking-subheading: -0.29px;
  --text-heading: 45px;
  --leading-heading: 1.03;
  --tracking-heading: -0.45px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 0.98;
  --tracking-heading-lg: -2.24px;
  --text-display: 112px;
  --leading-display: 0.98;
  --tracking-display: -5.6px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-14: 14px;
  --spacing-29: 29px;
  --spacing-43: 43px;
  --spacing-58: 58px;
  --spacing-68: 68px;
  --spacing-86: 86px;
  --spacing-100: 100px;
  --spacing-121: 121px;
  --spacing-144: 144px;
  --spacing-161: 161px;
  --spacing-232: 232px;
  --spacing-233: 233px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 100px;
  --card-padding: 29px;
  --element-gap: 14px;

  /* Border Radius */
  --radius-md: 4px;

  /* Named Radii */
  --radius-tags: 4px;
  --radius-cards: 4px;
  --radius-images: 4px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;

  /* Surfaces */
  --surface-bone-canvas: #faf5eb;
  --surface-linen-surface: #ecece4;
  --surface-manilla-highlight: #f2e9cf;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-roast-ink: #484036;
  --color-bone-canvas: #faf5eb;
  --color-linen-surface: #ecece4;
  --color-sandstone: #cacab0;
  --color-pebble: #d5d5c4;
  --color-manilla-cream: #f2e9cf;
  --color-slate-border: #666e72;
  --color-charcoal-depth: #33302c;
  --color-obsidian: #212529;

  /* Typography */
  --font-surt: 'Surt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-clashdisplay: 'ClashDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bigdailyshort: 'BigDailyShort', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 17px;
  --leading-caption: 1.13;
  --tracking-caption: 0.34px;
  --text-body: 22px;
  --leading-body: 1.35;
  --tracking-body: 0.24px;
  --text-subheading: 29px;
  --leading-subheading: 1.1;
  --tracking-subheading: -0.29px;
  --text-heading: 45px;
  --leading-heading: 1.03;
  --tracking-heading: -0.45px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 0.98;
  --tracking-heading-lg: -2.24px;
  --text-display: 112px;
  --leading-display: 0.98;
  --tracking-display: -5.6px;

  /* Spacing */
  --spacing-14: 14px;
  --spacing-29: 29px;
  --spacing-43: 43px;
  --spacing-58: 58px;
  --spacing-68: 68px;
  --spacing-86: 86px;
  --spacing-100: 100px;
  --spacing-121: 121px;
  --spacing-144: 144px;
  --spacing-161: 161px;
  --spacing-232: 232px;
  --spacing-233: 233px;

  /* Border Radius */
  --radius-md: 4px;
}
```