# Munro Partners

> # Munro Partners — Style Reference

## Prompt Content

```
# Munro Partners — Style Reference
> Editorial parchment dưới ánh sáng alpine — một nền cream ấm áp chứa đựng khoảng trắng rộng rãi, một grotesque siêu nhẹ, và ảnh núi non full-bleed nơi cảnh vật tự kể chuyện còn giao diện gần như vô hình.

**Theme:** light

Munro Partners vận hành ở một tông editorial trầm lắng: nền cream ấm (#fff9ee) chứa khoảng trắng rộng rãi, mọi thành phần giao diện được viền bằng một màu nâu sẫm ấm duy nhất (#3f322a) đọc như mực chứ không phải đen. Typography Neue Haas Grotesk được set tight và nhỏ, với display headline 68px weight 400 thì thầm bên cạnh ảnh núi non full-bleed thay vì la hét. Một màu teal đậm duy nhất (#004e4e) dành riêng cho những khoảnh khắc tương tác quan trọng nhất, trong khi violet nhạt, aubergine và xanh băng xuất hiện dưới dạng viền accent mảnh trên card và data treatments. Hệ thống này giống một bản báo cáo thường niên in ấn hơn là một sản phẩm tài chính — tĩnh lặng, rộng rãi và đủ tự tin để để hình ảnh phong cảnh gánh vác trọng lượng cảm xúc.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Cream Parchment | `#fff9ee` | `--color-cream-parchment` | Canvas trang, nền section, bề mặt card, nav bar fill — màu off-white ấm định nghĩa toàn bộ mood và thay thế cho pure white thông thường |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card được nâng lên, container nhúng video, panel tương phản trên nền cream |
| Bark Brown | `#3f322a` | `--color-bark-brown` | Text chính, tất cả border, nav links, body copy, headings — thay thế màu đen trong toàn bộ hệ thống, tạo cho mỗi dòng chữ chất mực ấm |
| Warm Gray | `#9f968c` | `--color-warm-gray` | Text phụ, border nhẹ, nav dividers — tone trung gian nối giữa Bark Brown headings và divider nhạt hơn |
| Stone | `#c5bdb3` | `--color-stone` | Hairline dividers, image borders, separator mảnh giữa các section |
| Driftwood | `#b3aea7` | `--color-driftwood` | Border input field, outline form element |
| Earth | `#796e65` | `--color-earth` | Secondary headings, muted label text |
| Light Stone | `#e5e5e5` | `--color-light-stone` | Tone border nhạt nhất, disabled states, đường cấu trúc mờ |
| Ink | `#000000` | `--color-ink` | Màu text input, form text tương phản cao — ngữ cảnh duy nhất màu đen thật xuất hiện |
| Deep Teal | `#004e4e` | `--color-deep-teal` | Primary action buttons, filled CTAs — màu chromatic fill duy nhất được phép cho các khoảnh khắc tương tác, tạo sự uy quyền trầm lặng trên nền cream |
| Aubergine | `#560e4b` | `--color-aubergine` | Decorative card borders, heading accent strokes, editorial highlight containers |
| Iris | `#a56eff` | `--color-iris` | Decorative card borders, accent strokes trên data containers |
| Cobalt | `#3074f9` | `--color-cobalt` | Link accents, decorative borders trên content block chủ đề xanh |
| Ice Blue | `#bfebfe` | `--color-ice-blue` | Input field backgrounds, soft highlight washes trên data rows, subtle surface tint |
| Saffron | `#feed5a` | `--color-saffron` | Thỉnh thoảng dùng làm button accent cho editorial highlight CTAs |
| Amber | `#c67700` | `--color-amber` | Thỉnh thoảng dùng làm button accent cho CTA chủ đề ấm |

## Tokens — Typography

### Neue Haas Grotesk Display — Typeface chính cho tất cả headings, body copy, nav và UI text — grotesque editorial cao cấp mang toàn bộ giao diện. Weight 400 cho display headlines tạo tiếng thì thầm thay vì la hét; weight 600 cho subheadings và emphasis; weight 700 dành riêng cho section labels và small-caps headers · `--font-neue-haas-grotesk-display`
- **Thay thế:** Inter, Helvetica Neue, Neue Haas Grotesk Text Pro (free alternative gần nhất: Inter với tracking tương ứng)
- **Weights:** 400, 600, 700
- **Kích cỡ:** 12, 13, 14, 16, 22, 24, 30, 43, 68
- **Line height:** 0.75, 0.81, 1.00, 1.05, 1.09, 1.10, 1.13, 1.17, 1.20, 1.30, 1.41, 1.43, 1.50
- **Letter spacing:** 0.008em ở 68px (0.54px), 0.009em ở 43px (0.39px), 0.013em ở 30px (0.39px), 0.015em ở 22px (0.33px), 0.017em ở 16px (0.27px)
- **OpenType features:** `"ss01" on, "tnum" on`
- **Vai trò:** Typeface chính cho tất cả headings, body copy, nav và UI text — grotesque editorial cao cấp mang toàn bộ giao diện. Weight 400 cho display headlines tạo tiếng thì thầm thay vì la hét; weight 600 cho subheadings và emphasis; weight 700 dành riêng cho section labels và small-caps headers

### Neue Haas Grotesk Text — Typeface phụ cho small utility text, nav micro-copy, fine print — nhỏ gọn hơn một chút so với biến thể Display ở kích cỡ 10–12px · `--font-neue-haas-grotesk-text`
- **Thay thế:** Inter, Helvetica Neue
- **Weights:** 400, 500
- **Kích cỡ:** 10, 11, 12
- **Line height:** 1.00, 1.50, 1.80
- **Letter spacing:** 0.018em ở 12px (0.22px)
- **OpenType features:** `"tnum" on`
- **Vai trò:** Typeface phụ cho small utility text, nav micro-copy, fine print — nhỏ gọn hơn một chút so với biến thể Display ở kích cỡ 10–12px

### Font Awesome 5 Brands — Font Awesome 5 Brands — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-font-awesome-5-brands`
- **Weights:** 400
- **Kích cỡ:** 18px
- **Line height:** 1
- **Vai trò:** Font Awesome 5 Brands — đượ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 cỡ | Line Height | Letter Spacing | Token |
|---------|---------|-------------|----------------|-------|
| caption | 10px | 1.8 | 0.18px | `--text-caption` |
| body | 14px | 1.43 | 0.24px | `--text-body` |
| heading-sm | 22px | 1.2 | 0.33px | `--text-heading-sm` |
| heading | 30px | 1.13 | 0.39px | `--text-heading` |
| heading-lg | 43px | 1.09 | 0.39px | `--text-heading-lg` |
| display | 68px | 1.05 | 0.54px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 20 | 20px | `--spacing-20` |
| 40 | 40px | `--spacing-40` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| cards | 2px |
| links | 15px |
| badges | 2px |
| images | 15px |
| inputs | 2px |
| buttons | 2px |

### Layout

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

## Components

### Full-Bleed Hero Image
**Vai trò:** Visual mở đầu section, tràn toàn bộ chiều rộng viewport

Ảnh phong cảnh full-bleed (núi non, đường uốn lượn, địa hình mở) trải rộng 100% viewport width và cao 60–80vh. Không border-radius. Text overlay nằm ở góc dưới bên trái màu trắng (#ffffff) dùng display weight 400 ở 68px. Một wordmark dọc lớn màu trắng ở 100–200px weight 700 neo cạnh phải.

### Editorial Wordmark
**Vai trò:** Dấu hiệu nhận diện thương hiệu, dùng làm cả logo và element trang trí

Chữ 'MUNRO' set bằng Neue Haas Grotesk Display weight 700, tất cả uppercase, letter-spacing 0.09em. Hoạt động như nav logo ở 16px (góc trên phải) và như element trang trí cỡ lớn ở 100–200px (cạnh phải của hero). Màu trắng trên ảnh tối, Bark Brown (#3f322a) trên nền cream.

### Slim Navigation Bar
**Vai trò:** Header cố định phía trên

Thanh full-width nền Cream Parchment (#fff9ee), cao 48–56px. Bên trái: icon hamburger menu + nhãn 'MENU' bằng Neue Haas Grotesk Text 12px weight 500, letter-spacing 0.018em, màu Bark Brown. Bên phải: wordmark 'MUNRO'. Không thay đổi background fill khi scroll, không shadow — thanh bar phẳng và gần như vô hình.

### Filled Teal CTA Button
**Vai trò:** Primary action trigger — button chromatic fill duy nhất trong hệ thống

Nền Deep Teal (#004e4e), text trắng, Neue Haas Grotesk Display 12px weight 600, letter-spacing 0.018em, uppercase. Padding 10px dọc, 20px ngang. Border-radius 2px. Không shadow. Đây là màu action fill duy nhất của hệ thống — chỉ dùng cho đúng một primary action trên mỗi view.

### Ghost Text Button
**Vai trò:** Secondary action hoặc link-style trigger

Không nền, không border. Chỉ text màu Bark Brown (#3f322a), Neue Haas Grotesk Display 12px weight 600, uppercase, letter-spacing 0.018em. Padding 10px dọc, 12px ngang. Gạch chân khi hover.

### Section Label
**Vai trò:** Small-caps heading giới thiệu một content block

Neue Haas Grotesk Display 12px weight 700, uppercase, letter-spacing 0.017em, màu Bark Brown (#3f322a). Không có accent line hay element trang trí — weight và casing của typography tự làm tất cả. Ví dụ: 'OUR GLOBAL GROWTH FUNDS'.

### Display Headline
**Vai trò:** Câu mở đầu hero hoặc section

Neue Haas Grotesk Display 68px weight 400, line-height 1.05, letter-spacing 0.54px. Màu trắng khi overlay trên ảnh, Bark Brown (#3f322a) trên nền cream. Lựa chọn weight-400 là signature — nó thì thầm thay vì la hét, tạo uy quyền qua sự kiềm chế.

### Video Embed Card
**Vai trò:** Container media nhúng (YouTube, v.v.)

Container tỷ lệ 16:9 nền Paper White (#ffffff), border-radius 2px. Video thumbnail fill container. Title overlay góc trên bên trái màu trắng Neue Haas Grotesk Display 22px weight 400 kèm subtitle ở 12px. Play button ở trung tâm.

### Financial Data Table
**Vai trò:** Các hàng dữ liệu xếp chồng hiển thị chỉ số với giá trị canh phải

Các hàng full-width được ngăn cách bởi hairline border 1px Stone (#c5bdb3). Cột trái: label bằng Neue Haas Grotesk Display 14px weight 400, màu Earth (#796e65). Cột phải: value cùng kích cỡ, màu Bark Brown (#3f322a), canh phải. Không có table header, không có màu hàng xen kẽ — chỉ hairlines và typography làm tất cả.

### Editorial Body Paragraph
**Vai trò:** Văn bản mô tả dài

Neue Haas Grotesk Display 16px weight 400, line-height 1.41, màu Bark Brown (#3f322a) trên nền Cream Parchment (#fff9ee). Max-width 680px để dễ đọc. Margin-bottom rộng (24–32px) giữa các đoạn.

### Underlined Input Field
**Vai trò:** Form input — nhập text

Không box hiện, không background fill. Bottom border 1px màu Ink (#000000) hoặc Driftwood (#b3aea7). Placeholder text màu Warm Gray (#9f968c) ở 14px. Khi focus: bottom border dày lên 2px màu Deep Teal (#004e4e). Không border-radius — chỉ cạnh dưới sắc.

### Accent Border Card
**Vai trò:** Content card với viền chromatic mảnh

Nền Cream Parchment (#fff9ee), border 1px màu chromatic accent (Aubergine #560e4b, Iris #a56eff, Cobalt #3074f9, hoặc Ice Blue #bfebfe). Border-radius 2px. Padding 20px. Không shadow, không fill change. Viền màu là yếu tố phân biệt — nhiều card trên một trang có thể dùng các accent color khác nhau.

### Hairline Divider
**Vai trò:** Section separator

Đường ngang 1px màu Stone (#c5bdb3), full container width, cao 1px. Không margin — nằm gọn trong nhịp spacing của section.

### Image Container
**Vai trò:** Khung ảnh hoặc hình minh họa

Ảnh nằm trong container với border-radius 15px. Không border. Full-bleed trong container. Dùng cho editorial photography, team portraits và landscape shots.

## Do's and Don'ts

### Nên làm
- Set body text bằng Neue Haas Grotesk Display 14px/1.43 màu Bark Brown (#3f322a) trên nền Cream Parchment (#fff9ee) — không bao giờ đảo ngược cặp này
- Dùng border-radius 2px cho tất cả buttons, badges, inputs và accent-border cards — cạnh gần vuông là signature
- Dùng border-radius 15px riêng cho image containers và decorative links
- Dành Deep Teal (#004e4e) cho một primary action duy nhất trên mỗi view — filled buttons bằng bất kỳ chromatic color nào khác đều bị cấm
- Set display headlines ở 68px weight 400 với letter-spacing 0.54px — whisper-weight là lựa chọn typography định hình
- Phân cách các content block bằng hairline 1px Stone (#c5bdb3), không dùng card containers hay background fills
- Dùng ảnh phong cảnh full-bleed làm section heroes với text overlay trắng — để hình ảnh mang trọng lượng cảm xúc
- Set section labels ở 12px weight 700 uppercase với letter-spacing 0.017em — casing và weight tự làm công việc phân cấp

### Không nên làm
- Không bao giờ dùng #000000 cho body text, headings hay borders — Bark Brown (#3f322a) thay thế màu đen trong toàn bộ hệ thống
- Không bao giờ dùng pure white (#ffffff) làm page canvas — Cream Parchment (#fff9ee) là nền duy nhất được chấp nhận
- Không bao giờ dùng border-radius lớn hơn 2px trên buttons, badges hay inputs — radii lớn phá vỡ tông editorial
- Không bao giờ xếp chồng nhiều chromatic accent colors trong một component — một accent cho mỗi container
- Không bao giờ dùng weight 700 cho editorial body copy hay long-form text — dành 700 cho labels và wordmarks
- Không bao giờ áp dụng box-shadows hay drop-shadows lên cards hay surfaces — hệ thống phẳng, chỉ phân cách bằng hairlines
- Không bao giờ dùng gradient dưới bất kỳ hình thức nào — hệ thống hoàn toàn flat color
- Không bao giờ dùng #feed5a hay #c67700 cho primary CTAs — đây là editorial accents một lần, không phải system action colors
- Không bao giờ set body text lớn hơn 16px hay nhỏ hơn 14px — editorial scale luôn tight

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Cream Parchment | `#fff9ee` | Canvas trang và nền section — tone ấm cơ bản |
| 1 | Paper White | `#ffffff` | Bề mặt card và video embed được nâng lên, nằm trên nền cream |
| 2 | Ice Blue Wash | `#bfebfe` | Bề mặt pha màu cho input fields và data row highlights |

## Imagery

Ảnh phong cảnh full-bleed chiếm ưu thế trong ngôn ngữ thị giác — núi non Scottish Highland, đường một làn uốn lượn qua thung lũng xanh, địa hình mở dưới bầu trời u ám. Xử lý mang tính tự nhiên, độ phân giải cao và không filter; không duotone, không color grading overlays, không vignettes. Ảnh luôn full-bleed (không bo góc khi dùng làm hero) nhưng dùng radius 15px khi inset làm content images. Photography là nội dung thị giác chính; illustration và đồ họa trừu tượng không xuất hiện. Phong cách icon là minimal line icons (hamburger menu hiện trong nav) với nét mảnh. Mật độ: nhiều ảnh ở phần mở đầu section, text chiếm ưu thế ở phần body. Vai trò của imagery là bầu không khí cảm xúc và kể chuyện thương hiệu — thiên nhiên như phép ẩn dụ cho đầu tư dài hạn.

## Layout

Ảnh hero full-bleed ở đầu trang, sau đó chuyển sang vùng nội dung centered max-width 1280px trên nền Cream Parchment. Hero là ảnh full-viewport-width với text overlay ở góc dưới bên trái và wordmark dọc lớn ở cạnh phải. Bên dưới hero, nội dung chảy theo một cột editorial đơn hoặc chia hai cột (video trái, data table phải) với khoảng cách dọc rộng (64px giữa các section). Nhịp section nhất quán: hairline divider, sau đó section label dạng small-caps, rồi content. Không có dải tối/sáng xen kẽ — toàn bộ body là cream. Navigation là slim bar tối giản ở trên cùng với hamburger menu trái và wordmark phải. Grid usage tối thiểu — chủ yếu là editorial flow một cột, thỉnh thoảng có split 2 cột. Mật độ tổng thể rộng rãi, giống tạp chí và không vội vã.

## Agent Prompt Guide

**Quick Color Reference**
- Text: #3f322a (Bark Brown)
- Background: #fff9ee (Cream Parchment)
- Border: #c5bdb3 (Stone) cho hairlines, #3f322a cho cấu trúc
- Accent: #004e4e (Deep Teal) cho primary action
- primary action: #a56eff (filled action)

**Ví dụ Component Prompts**

1. **Hero section**: Ảnh phong cảnh full-bleed fill 100vw × 70vh. Headline 'Invest in the journey' overlay góc dưới bên trái màu trắng, Neue Haas Grotesk Display 68px weight 400, letter-spacing 0.54px. Wordmark dọc 'MUNRO' ở cạnh phải màu trắng, weight 700, kích cỡ 120px, letter-spacing 0.09em. Không border-radius trên ảnh.

2. **Section label + body**: Section label 'OUR GLOBAL GROWTH FUNDS' bằng Neue Haas Grotesk Display 12px weight 700, uppercase, letter-spacing 0.017em, màu #3f322a. Bên dưới là body paragraph 16px weight 400, line-height 1.41, màu #3f322a, max-width 680px. Hairline divider 1px #c5bdb3 phía trên label.

3. **Data table**: Các hàng xếp chồng, mỗi hàng cách nhau bởi border 1px #c5bdb3. Cột trái label 14px weight 400, màu #796e65. Cột phải value 14px weight 400, màu #3f322a, canh phải. Không header row, không fill xen kẽ.

4. Tạo một Primary Action Button: nền #a56eff, text #3f322a, radius 9999px, pill padding gọn. Dùng filled treatment này cho main CTA.

5. **Accent border card**: Nền #fff9ee, border 1px #560e4b (Aubergine), border-radius 2px, padding 20px. Nội dung bên trong 14px weight 400, màu #3f322a. Không fill change, không shadow.

## Elevation Philosophy

Hệ thống này cố tình tránh shadows như một nguyên tắc thiết kế. Mọi sự phân cách bề mặt đều đạt được qua ba cơ chế: (1) hairline border 1px màu Stone (#c5bdb3) hoặc Bark Brown (#3f322a), (2) độ tương phản giữa bề mặt Cream Parchment (#fff9ee) và Paper White (#ffffff), và (3) cạnh thị giác nơi ảnh full-bleed gặp canvas cream. Không bao giờ áp dụng box-shadow, drop-shadow hay bất kỳ blur-based elevation nào — nó sẽ phá vỡ tông editorial phẳng.

## Border-Radius System

Hệ thống dùng chính xác hai giá trị border-radius để tạo sự căng thẳng có chủ đích: 2px cho tất cả element tương tác và cấu trúc (buttons, badges, inputs, accent-border cards) — cạnh gần vuông này đọc như editorial, typeset, in ấn. 15px cho tất cả image containers và decorative links — bo góc rộng rãi này làm mềm ảnh và mang lại sự ấm áp cho visual assets. Không bao giờ trộn lẫn hai radii này trên cùng một loại element. Sự tương phản giữa hai giá trị là một phần của bản sắc: trang vừa mang cảm giác editorial sắc sảo vừa ấm áp con người.

## Similar Brands

- **Stewart Investors** — Cùng nền cream ấm và cách tiếp cận typography editorial kiềm chế trong branding quản lý đầu tư
- **Orbis** — Cùng mẫu ảnh phong cảnh full-bleed + grotesque whisper-weight headline, xem đầu tư như một hành trình dài
- **Walter Scott Investment Partners** — Cùng nền cream parchment, chrome tối giản và sự kiềm chế editorial trong truyền thông tài chính
- **First Sentier Investors** — Cùng bảng màu off-white ấm và typography grotesque cao cấp trong bối cảnh quản lý đầu tư Úc
- **Magellan Asset Management** — Cùng cảm giác ấn phẩm editorial với ảnh phong cảnh và khoảng trắng rộng rãi như yếu tố khác biệt thương hiệu

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-cream-parchment: #fff9ee;
  --color-paper-white: #ffffff;
  --color-bark-brown: #3f322a;
  --color-warm-gray: #9f968c;
  --color-stone: #c5bdb3;
  --color-driftwood: #b3aea7;
  --color-earth: #796e65;
  --color-light-stone: #e5e5e5;
  --color-ink: #000000;
  --color-deep-teal: #004e4e;
  --color-aubergine: #560e4b;
  --color-iris: #a56eff;
  --color-cobalt: #3074f9;
  --color-ice-blue: #bfebfe;
  --color-saffron: #feed5a;
  --color-amber: #c67700;

  /* Typography — Font Families */
  --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-haas-grotesk-text: 'Neue Haas Grotesk Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-font-awesome-5-brands: 'Font Awesome 5 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.8;
  --tracking-caption: 0.18px;
  --text-body: 14px;
  --leading-body: 1.43;
  --tracking-body: 0.24px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 0.33px;
  --text-heading: 30px;
  --leading-heading: 1.13;
  --tracking-heading: 0.39px;
  --text-heading-lg: 43px;
  --leading-heading-lg: 1.09;
  --tracking-heading-lg: 0.39px;
  --text-display: 68px;
  --leading-display: 1.05;
  --tracking-display: 0.54px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-80: 80px;

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

  /* Border Radius */
  --radius-sm: 2px;
  --radius-xl: 15px;
  --radius-2xl: 20px;

  /* Named Radii */
  --radius-cards: 2px;
  --radius-links: 15px;
  --radius-badges: 2px;
  --radius-images: 15px;
  --radius-inputs: 2px;
  --radius-buttons: 2px;

  /* Surfaces */
  --surface-cream-parchment: #fff9ee;
  --surface-paper-white: #ffffff;
  --surface-ice-blue-wash: #bfebfe;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-cream-parchment: #fff9ee;
  --color-paper-white: #ffffff;
  --color-bark-brown: #3f322a;
  --color-warm-gray: #9f968c;
  --color-stone: #c5bdb3;
  --color-driftwood: #b3aea7;
  --color-earth: #796e65;
  --color-light-stone: #e5e5e5;
  --color-ink: #000000;
  --color-deep-teal: #004e4e;
  --color-aubergine: #560e4b;
  --color-iris: #a56eff;
  --color-cobalt: #3074f9;
  --color-ice-blue: #bfebfe;
  --color-saffron: #feed5a;
  --color-amber: #c67700;

  /* Typography */
  --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-haas-grotesk-text: 'Neue Haas Grotesk Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-font-awesome-5-brands: 'Font Awesome 5 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.8;
  --tracking-caption: 0.18px;
  --text-body: 14px;
  --leading-body: 1.43;
  --tracking-body: 0.24px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 0.33px;
  --text-heading: 30px;
  --leading-heading: 1.13;
  --tracking-heading: 0.39px;
  --text-heading-lg: 43px;
  --leading-heading-lg: 1.09;
  --tracking-heading-lg: 0.39px;
  --text-display: 68px;
  --leading-display: 1.05;
  --tracking-display: 0.54px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-80: 80px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-xl: 15px;
  --radius-2xl: 20px;
}
```