# HNST Studio

> HNST Studio — Style Reference

## Prompt Content

```
# HNST Studio — Style Reference
> atelier đất với gỉ sắt trên vải lanh — một gallery thời trang chậm nơi một điểm nhấn màu cam cháy duy nhất sưởi ấm nội thất kem và than củi vốn mang phong cách tu viện

**Theme:** light

HNST Studio nói bằng ngôn ngữ editorial ấm áp, mộc mạc: canvas trắng xương pha kem lụa thô, một điểm nhấn gỉ sắt neo mọi khoảnh khắc tương tác, và typography uppercase kiểu gallery giúp nhiếp ảnh có không gian thở. Trang web xử lý ảnh thời trang full-bleed như bề mặt chính — text và chrome siêu mảnh, được đặt như bảng chú thích trong bảo tàng xung quanh tác phẩm thị giác. Hai họ chữ phân chia công việc rõ ràng: Raleway đảm nhận UI, navigation, và body copy với tỷ lệ humanist, trong khi Poppins xử lý display heading với letter-spacing cực rộng, biến các nhãn section như 'TRENDING' thành bảng chỉ dẫn in ấn trong gallery. Các component được tinh giản đến mức tối thiểu — border mảnh, badge tông cát mềm, mực than cho hành động, không shadow, không gradient — để điểm nhấn gỉ sắt có trọng lượng editorial trên nền palette trung tính.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Rust Hearth | `#892500` | `--color-rust-hearth` | Logo thương hiệu, trạng thái navigation active, gạch chân section, dấu câu màu sắc duy nhất trong giao diện — mang toàn bộ trọng lượng nhận diện ở bất cứ đâu nó xuất hiện |
| Blush Whisper | `#ea9195` | `--color-blush-whisper` | Điểm nhấn màu phụ cho hover state, tag mềm, và các yếu tố trang trí đi kèm — không bao giờ đứng một mình, luôn hỗ trợ Rust Hearth |
| Linen | `#ffffff` | `--color-linen` | Trạng thái form trung tính, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ kín đáo. Không nâng cấp nó thành màu CTA chính |
| Raw Silk | `#f9f6f2` | `--color-raw-silk` | Nền trang ấm áp, thay thế cho trắng tinh khiết vô trùng — mang lại cảm giác xúc giác, sợi tự nhiên cho trang web |
| Sand Plaster | `#eee5d9` | `--color-sand-plaster` | Nền card, badge fill, bề mặt nâng nhẹ — tầng ấm thứ cấp giúp phân biệt container với canvas trang |
| Charcoal Ink | `#0e0e0e` | `--color-charcoal-ink` | Text chính, navigation text, action button đặc, dark hero overlay — gần đen đọc mềm hơn đen thuần trên nền trung tính ấm |
| Stone | `#868686` | `--color-stone` | Xám trung cho hairline border, divider, metadata phụ, khung UI không hoạt động — structural neutral chủ đạo |
| Ash | `#b7b7b7` | `--color-ash` | Border nhạt hơn, helper text mờ, disabled state, list separator nhẹ |
| Frost | `#d7d7d7` | `--color-frost` | Divider line mờ nhất trên link, separator gần như vô hình |

## Tokens — Typography

### Raleway — Primary UI and body typeface — humanist sans với terminal thanh lịch. Dùng cho navigation, body copy, link, button, và footer. Weight 600 xử lý button label và nav item; 400 mang running text với line-height 1.67–1.79 rộng rãi cho khả năng đọc editorial · `--font-raleway`
- **Thay thế:** Montserrat, Lato, Nunito Sans
- **Weights:** 400, 600, 700
- **Kích thước:** 12px, 13px, 14px, 15px, 16px
- **Line height:** 1.67 (body), 1.70, 1.20 (tight UI)
- **Letter spacing:** 0.1920em, 0.2310em
- **Vai trò:** Primary UI and body typeface — humanist sans với terminal thanh lịch. Dùng cho navigation, body copy, link, button, và footer. Weight 600 xử lý button label và nav item; 400 mang running text với line-height 1.67–1.79 rộng rãi cho khả năng đọc editorial

### Poppins — Display and section-heading typeface — geometric sans dùng cho section label cỡ hero như 'TRENDING' ở 62px. Letter-spacing cực rộng (0.154em ở display, 0.091em ở 20px) biến headline thành bảng chỉ dẫn in ấn trong gallery — khoảnh khắc typographic đặc trưng của thương hiệu · `--font-poppins`
- **Thay thế:** Montserrat, Outfit, Space Grotesk
- **Weights:** 500, 600, 700
- **Kích thước:** 11px, 13px, 16px, 20px, 62px
- **Line height:** 1.15 (display), 1.20, 1.25, 2.27 (small caps labels)
- **Letter spacing:** 0.154em ở 62px, 0.091em ở 20px, 0.065em ở 16px, 0.050em ở 11–13px
- **Vai trò:** Display and section-heading typeface — geometric sans dùng cho section label cỡ hero như 'TRENDING' ở 62px. Letter-spacing cực rộng (0.154em ở display, 0.091em ở 20px) biến headline thành bảng chỉ dẫn in ấn trong gallery — khoảnh khắc typographic đặc trưng của thương hiệu

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.25 | 1.69px | `--text-caption` |
| heading-sm | 20px | 1.2 | 1.82px | `--text-heading-sm` |
| display | 62px | 1.15 | 9.55px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 15 | 15px | `--spacing-15` |
| 20 | 20px | `--spacing-20` |
| 23 | 23px | `--spacing-23` |
| 40 | 40px | `--spacing-40` |
| 42 | 42px | `--spacing-42` |
| 45 | 45px | `--spacing-45` |
| 75 | 75px | `--spacing-75` |
| 114 | 114px | `--spacing-114` |
| 170 | 170px | `--spacing-170` |
| 185 | 185px | `--spacing-185` |

### Border Radius

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

### Layout

- **Page max-width:** 1200px
- **Section gap:** 75-170px
- **Card padding:** 42px
- **Element gap:** 15px

## Components

### Top Navigation Bar
**Vai trò:** Header chính của trang với brand mark và section link

Thanh full-bleed, padding dọc 10–15px, không shadow. Wordmark 'hnst' chữ thường màu Rust Hearth (#892500) ở ~32px Raleway 700 căn trái. Bên phải: nav link uppercase (HOME, SUSTAINABILITY, PRESS, SHOP) bằng Raleway 600 ở 12–13px với letter-spacing 0.192–0.231em và màu Stone (#868686), gap ngang 15px. Trạng thái active chuyển text sang Rust Hearth. Border-bottom hairline Stone mảnh ngăn cách với nội dung.

### Hero Carousel
**Vai trò:** Ảnh lifestyle full-viewport mở đầu homepage

Ảnh full-bleed rộng 100vw, cao ~80vh, không radius. Nút mũi tên trái/phải là chevron mảnh màu trắng bán trong suốt, vùng chạm 48px, căn giữa theo chiều dọc. Pagination bốn chấm căn giữa dưới cùng màu trắng, chấm active full opacity. Không có headline overlay — bức ảnh tự truyền tải thông điệp.

### Section Display Heading
**Vai trò:** Tiêu đề kiểu nhãn gallery cho các section nội dung

Poppins 700 ở 62px, letter-spacing 9.55px (0.154em), line-height 1.15, màu Charcoal Ink (#0e0e0e). Căn giữa hoặc căn trái tùy ngữ cảnh. Đây là khoảnh khắc type đặc trưng — tracking cực rộng khiến 'TRENDING' đọc như một nhãn tường in ấn, không phải heading web.

### Filled Action Button
**Vai trò:** CTA chính màu Charcoal Ink

Nền Charcoal Ink (#0e0e0e), text Linen (#ffffff), Raleway 600 ở 13–14px, uppercase với letter-spacing 0.192em. Padding ngang 15px, dọc 42px đến 45px trên các biến thể rộng hơn. Zero radius — góc sắc củng cố thẩm mỹ editorial gallery.

### Ghost Navigation Button
**Vai trò:** Link phụ hoặc không hoạt động được style dưới dạng text uppercase không viền

Không nền hoặc border. Raleway 600 ở 12–13px, uppercase, letter-spacing 0.192em, màu Stone (#868686). Hover chuyển sang Charcoal Ink (#0e0e0e). Dùng trong nav bar và cụm link footer.

### Editorial Image Block
**Vai trò:** Ảnh sản phẩm hoặc câu chuyện lớn trong section nội dung

Ảnh full-width hoặc cột phải với zero radius, không border, không shadow. Nổi ở cạnh container hoặc căn giữa. Nằm trên canvas Raw Silk (#f9f6f2) hoặc Linen (#ffffff). Bản thân ảnh là component — không có frame hoặc caption chrome xung quanh.

### Sand Badge
**Vai trò:** Tag tông ấm mềm cho metadata hoặc trạng thái

Nền Sand Plaster (#eee5d9), không border, zero radius. Raleway 600 ở 12–13px, text Charcoal Ink, padding ngang 8–10px, dọc 4–6px. Dùng cho label ngữ cảnh nhỏ, timestamp, và category marker.

### Info Icon Button
**Vai trò:** Nút tròn nổi nhỏ cho hành động phụ

Fill Charcoal Ink (#0e0e0e), glyph 'i' chữ thường màu trắng ở 16px, hình vuông 40×40px với zero radius. Nút utility cố định (toggle info panel, xem trước giỏ hàng). Độ tương phản cao trên canvas ấm.

### Carousel Arrow
**Vai trò:** Điều khiển slide cho hero và product carousel

Icon chevron tối giản, 24px, trắng ở độ mờ 70% trên ảnh, Charcoal Ink trên nền sáng. Không có hình nền — mũi tên nổi trực tiếp trên ảnh. Vùng chạm ẩn 48px cho touch.

### Section Divider Band
**Vai trò:** Dải ảnh full-bleed ngăn cách các section nội dung

Rộng 100vw, cao ~20–30vh, zero radius, ảnh edge-to-edge. Hoạt động như một "miếng rửa vòm miệng" thị giác giữa các khối text. Ví dụ: ảnh nhà máy dệt công nghiệp và ảnh cận cảnh da/chất liệu xuất hiện dưới dạng các dải ngang giữa các section editorial.

### List Item with Marker
**Vai trò:** Danh sách có bullet hoặc số trong copy editorial

Raleway 400 ở 14–15px, line-height 1.70, màu Charcoal Ink. Gap ngang 9px giữa marker và text. Left-border mảnh Stone (#868686) trên container list ở 1px. Không có glyph bullet tùy chỉnh — dùng marker mặc định hoặc chấm nhỏ màu gỉ sắt khi được brand-style.

### Pill Filter Tag
**Vai trò:** Tag tương tác bo tròn để lọc danh sách sản phẩm

Component bo tròn duy nhất trong hệ thống với radius 10px. Nền Sand Plaster (#eee5d9) hoặc Linen (#ffffff) với border 1px Stone (#868686). Raleway 600 ở 12–13px, padding ngang 10–15px, dọc 4–6px. Trạng thái active: border và text Rust Hearth.

### Footer Link Cluster
**Vai trò:** Cụm link có tổ chức trong footer trang

Bố cục nhiều cột, Raleway 400 ở 14px cho link, màu Stone, gap dọc 15px. Column header bằng Raleway 600 uppercase ở 12px với letter-spacing 0.192em. Top-border Stone mảnh ngăn cách footer với nội dung. Không đổi màu nền — footer nằm trên canvas Raw Silk.

## Do's and Don'ts

### Nên làm
- Chỉ dùng Rust Hearth (#892500) cho brand wordmark, nav state active, và section underline — để nó mang toàn bộ trọng lượng nhận diện như điểm nhấn màu sắc duy nhất
- Áp dụng Poppins 700 ở 62px với letter-spacing 0.154em cho tất cả display section heading để duy trì signature gallery-label
- Giữ tất cả góc component sắc (0px radius) ngoại trừ pill filter tag dùng 10px — ngoại lệ duy nhất này có chủ đích
- Đặt body text ở Raleway 400, 15px, line-height 1.70 để đọc editorial thoải mái trên canvas Raw Silk ấm
- Dùng Sand Plaster (#eee5d9) cho badge và tag fill để tạo container tông ấm mềm, cảm giác như giấy thủ công
- Ngăn cách section bằng dải ảnh full-bleed thay vì divider trang trí — ảnh là yếu tố cấu trúc
- Duy trì border hairline 1px Stone (#868686) cho mọi phân cách cấu trúc; không bao giờ dùng shadow để gợi ý độ cao

### Không nên làm
- Không thêm accent color nào ngoài Rust Hearth và Blush Whisper — 1% màu sắc chính là thương hiệu
- Không dùng góc bo tròn trên card, button, hoặc ảnh — góc sắc là yếu tố cốt lõi của nhận diện editorial-print
- Không thêm drop shadow hoặc hiệu ứng elevation cho bất kỳ component nào — design system cố tình flat
- Không dùng trắng tinh khiết (#ffffff) làm nền trang — luôn dùng Raw Silk (#f9f6f2) để giữ bầu không khí ấm, sợi tự nhiên
- Không đặt body text dưới 14px hoặc trên 17px — type scale hẹp và có chủ đích cho sự thoải mái khi đọc editorial
- Không áp dụng letter-spacing chặt cho display heading — tracking cực rộng (0.154em) ở 62px là signature, không phải lỗi
- Không đặt text, button, hoặc UI chrome chồng lên hero photography — để ảnh thở mà không bị can thiệp

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Raw Silk | `#f9f6f2` | Canvas trang — nền off-white ấm cho toàn bộ site |
| 1 | Linen | `#ffffff` | Bề mặt card, panel sản phẩm, và khối nội dung nâng cao |
| 2 | Sand Plaster | `#eee5d9` | Badge fill, nền tag mềm, container tông ấm |
| 3 | Charcoal Ink | `#0e0e0` | Section tối đảo ngược, navigation bar, filled action button |

## Elevation

- **Navigation Bar:** `none — chỉ được ngăn cách với nội dung bằng border-bottom 1px Stone (#868686)`
- **Product Cards:** `none — bề mặt phẳng với hairline border Stone mảnh hoặc không border`
- **Buttons:** `none — solid fill cung cấp toàn bộ trọng lượng thị giác`
- **Info Icon Button:** `none — solid fill Charcoal Ink là neo thị giác`

## Imagery

Nhiếp ảnh thời trang editorial chiếm ưu thế trong ngôn ngữ thị giác. Hero có chân dung studio ấm áp, ánh sáng dịu của người mẫu trong tư thế thư giãn trên nền trung tính — high-key với tông vàng, không shadow gắt. Các section editorial bên trong dùng ảnh công nghiệp và quy trình thủ công: máy dệt, denim thô, cận cảnh da với ánh sáng định hướng ấm. Tất cả ảnh đều full-bleed, góc sắc, không mask — không cạnh bo tròn, không overlay, không frame trang trí. Cách xử lý luôn điện ảnh và xúc giác, ưu tiên chất liệu vật lý (dệt denim, vân da, nếp gấp vải) hơn ảnh sản phẩm đóng gói. Không có illustration, không icon ngoài UI glyph đơn giản, không 3D render.

## Layout

Trang tuân theo nhịp editorial full-bleed: ảnh hero full-viewport mở đầu trải nghiệm, tiếp theo là section nội dung bất đối xứng nơi ảnh lớn chiếm nửa phải và canvas Raw Silk trống giữ nửa trái. Các section được ngăn cách bằng dải ảnh full-bleed hoạt động như hơi thở thị giác. Headline căn giữa hoặc căn trái với letter-spacing cực rộng, đọc như text tường gallery. Grid là single-column hoặc hai cột bất đối xứng, không bao giờ là multi-column card grid. Navigation là top bar tối giản — không sidebar, không mega-menu, không sticky header. Mật độ nội dung rộng rãi: 75–170px giữa các section, khoảng trắng dồi dào xung quanh mọi khối text. Cảm giác tổng thể là một zine được tuyển chọn hoặc catalog bảo tàng, không phải catalog bán lẻ.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Text: #0e0e0e (Charcoal Ink)
- Background: #f9f6f2 (Raw Silk)
- Border: #868686 (Stone)
- Accent: #892500 (Rust Hearth)
- Card/badge fill: #eee5d9 (Sand Plaster)
- Inverted text: #ffffff (Linen)
- primary action: #0e0e0e (filled action)

**3-5 Ví dụ Component Prompt**

1. **Top Navigation Bar**: Thanh full-bleed, nền Raw Silk (#f9f6f2), border-bottom 1px Stone (#868686). Trái: wordmark 'hnst' bằng Raleway 700, 32px, Rust Hearth (#892500). Phải: nav item (HOME, SUSTAINABILITY, PRESS, SHOP) bằng Raleway 600, 12px, uppercase, letter-spacing 0.192em, màu Stone (#868686), gap ngang 15px. Item active màu Rust Hearth.

2. **Section Display Heading**: 'TRENDING' đặt bằng Poppins 700, 62px, letter-spacing 9.55px (0.154em), line-height 1.15, màu Charcoal Ink (#0e0e0e). Căn giữa. Không gạch chân, không trang trí — chỉ riêng letter-spacing đã tạo sự hiện diện của gallery-label.

3. **Sand Badge**: Nền Sand Plaster (#eee5d9), zero radius, không border. Raleway 600, 12px, text Charcoal Ink (#0e0e0e), padding ngang 10px và dọc 5px. Dùng cho label ngữ cảnh nhỏ như 'New Arrival' hoặc 'Limited Edition'.

4. **Editorial Image Block**: Ảnh full-width, zero radius, không border, không shadow, không overlay. Nằm trên canvas Raw Silk (#f9f6f2). Ảnh lấp đầy container edge-to-edge. Caption tùy chọn bằng Raleway 400, 13px, Stone (#868686) bên dưới.

5. **Ghost Navigation Link**: Không nền, không border. Raleway 600, 13px, uppercase, letter-spacing 0.192em, màu Stone (#868686). Khi hover, chuyển sang Charcoal Ink (#0e0e0e). Spacing ngang 15px giữa các link liền kề.

## Typography Personality

Hệ thống hai font là lựa chọn cấu trúc đặc biệt nhất. Raleway làm công việc lặng thầm — navigation, body, button, form — với tỷ lệ humanist cảm giác được chế tác thủ công hơn là kỹ thuật. Poppins làm công việc nổi bật mỗi section một lần, ở 62px với tracking 0.154em, biến một từ duy nhất như 'TRENDING' thành một tấm biển vật lý trên tường gallery. Không bao giờ để Poppins xuất hiện ở kích thước body; không bao giờ để Raleway xuất hiện ở kích thước display. Sự tương phản giữa line-height body 1.67 của Raleway và line-height display 1.15 của Poppins là sự căng thẳng tạo nên giọng nói cho typography.

## Spacing Rhythm

Nhịp dọc hoạt động trên ba tầng: 15px cho gap intra-component (giữa nav item, list item, badge internal), 42–45px cho padding cấp component (button interior, không gian thở của card content), và 75–170px cho khoảng cách section-to-section. Không bao giờ nén dưới 15px giữa các sibling — mật độ thoải mái là bất khả thương lượng. Chuyển tiếp section luôn bao gồm một dải ảnh full-bleed như "miếng rửa vòm miệng" thị giác, không chỉ là khoảng trắng.

## Similar Brands

- **Patagonia** — Cùng palette trung tính ấm áp mộc mạc với một điểm nhấn thương hiệu gỉ sắt/cam cháy duy nhất, layout editorial ưu tiên nhiếp ảnh, và tông thời trang bền vững chống doanh nghiệp
- **Eileen Fisher** — Chung cam kết với ảnh lifestyle full-bleed, khoảng trắng rộng rãi, canvas kem/off-white, và hệ thống typography sans-serif tối giản
- **Toast (toa.st)** — Ngôn ngữ editorial thời trang chậm giống hệt — nền trắng xương ấm, component góc sắc, không shadow, và một điểm nhấn màu sắc duy nhất dùng tiết kiệm
- **Studio Nicholson** — Cùng cách tiếp cận catalog gallery với section heading uppercase tracking rộng, layout ảnh+text bất đối xứng, và palette gần như đơn sắc kiềm chế
- **Asket** — Chung navigation tối giản, triết lý một accent color, hệ thống type ưu tiên body text, và nhiếp ảnh lấp đầy viewport không có chrome trang trí

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-rust-hearth: #892500;
  --color-blush-whisper: #ea9195;
  --color-linen: #ffffff;
  --color-raw-silk: #f9f6f2;
  --color-sand-plaster: #eee5d9;
  --color-charcoal-ink: #0e0e0e;
  --color-stone: #868686;
  --color-ash: #b7b7b7;
  --color-frost: #d7d7d7;

  /* Typography — Font Families */
  --font-raleway: 'Raleway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.25;
  --tracking-caption: 1.69px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 1.82px;
  --text-display: 62px;
  --leading-display: 1.15;
  --tracking-display: 9.55px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-23: 23px;
  --spacing-40: 40px;
  --spacing-42: 42px;
  --spacing-45: 45px;
  --spacing-75: 75px;
  --spacing-114: 114px;
  --spacing-170: 170px;
  --spacing-185: 185px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 75-170px;
  --card-padding: 42px;
  --element-gap: 15px;

  /* Border Radius */
  --radius-lg: 10px;

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

  /* Surfaces */
  --surface-raw-silk: #f9f6f2;
  --surface-linen: #ffffff;
  --surface-sand-plaster: #eee5d9;
  --surface-charcoal-ink: #0e0e0;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-rust-hearth: #892500;
  --color-blush-whisper: #ea9195;
  --color-linen: #ffffff;
  --color-raw-silk: #f9f6f2;
  --color-sand-plaster: #eee5d9;
  --color-charcoal-ink: #0e0e0e;
  --color-stone: #868686;
  --color-ash: #b7b7b7;
  --color-frost: #d7d7d7;

  /* Typography */
  --font-raleway: 'Raleway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.25;
  --tracking-caption: 1.69px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 1.82px;
  --text-display: 62px;
  --leading-display: 1.15;
  --tracking-display: 9.55px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-23: 23px;
  --spacing-40: 40px;
  --spacing-42: 42px;
  --spacing-45: 45px;
  --spacing-75: 75px;
  --spacing-114: 114px;
  --spacing-170: 170px;
  --spacing-185: 185px;

  /* Border Radius */
  --radius-lg: 10px;
}
```