# Equals

> Equals — Style Reference

## Prompt Content

```
# Equals — Style Reference
> Broadsheet gặp spreadsheet — serif mang hơi hướng tòa soạn trên nền kem ấm, điểm xuyết những ô dữ liệu pastel lơ lửng.

**Theme:** light

Equals mang cảm giác như một tờ báo broadsheet biết thở — headline serif uy quyền cỡ 110px đặt trên nền kem ấm (#FAF9F5), trong khi những mảng màu pastel vui tươi trôi nổi lỏng lẻo phía sau như các ô spreadsheet đang tan rã. Sự căng thẳng giữa trọng lượng editorial của Serrif Condensed và độ chính xác UI chặt chẽ của Unica77 tạo ra hai tầng âm vực: công cụ dữ liệu nghiêm túc và sản phẩm dễ tiếp cận. Màu vàng (#FFCC00) chỉ xuất hiện trên thanh thông báo trên cùng, màu tím orchid (#B074CE) chỉ xuất hiện trên nút CTA — hai màu nhấn không bao giờ cạnh tranh vì không bao giờ chung một khu vực. Các đường kẻ ngang mảnh phân chia section thay vì đệm whitespace, lấy cảm hứng từ đường kẻ lưới của spreadsheet như một ẩn dụ cấu trúc xuyên suốt trang.

## Tokens — Màu sắc

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Analyst Yellow | `#FFCC00` | `--color-analyst-yellow` | Chỉ dùng làm nền thanh thông báo — vàng bão hòa trên chữ gần đen tạo cảm giác khẩn cấp tối đa trên diện tích tối thiểu, không dùng ở nơi khác để giữ nguyên tín hiệu cảnh báo |
| Orchid CTA | `#B074CE` | `--color-orchid-cta` | Nút CTA chính — tím ấm trên nền kem tạo cảm giác mời gọi thay vì khẩn cấp, phân biệt CTA với màu đỏ/cam thường thấy của SaaS |
| Brand Green | `#20A277` | `--color-brand-green` | Mảng màu nhấn cho danh mục Finance — một trong ba khối chỉ báo theo vai trò (RevOps đỏ, Founders xanh navy, Finance xanh lá) nằm cạnh các dòng solution |
| Glacier | `#2DCBDC` | `--color-glacier` | Khối màu trang trí nền trong hero, thuộc ngôn ngữ hình ảnh ô spreadsheet pastel nổi |
| Midnight Ink | `#000000` | `--color-midnight-ink` | Tất cả heading, body text, border, nav link, icon — đen tuyền không làm mềm; độ tương phản cao với nền kem cố tình mang phong cách old-media, không phải SaaS-neutral |
| Warm Cream | `#FAF9F5` | `--color-warm-cream` | Nền trang, nền section — sắc vàng ấm nhẹ giúp phân biệt với trắng lâm sàng và củng cố ẩn dụ giấy/spreadsheet |
| Cloud White | `#FFFFFF` | `--color-cloud-white` | Chữ trên nút orchid CTA, trạng thái hover của nav, nền input field |
| Slate Body | `#646462` | `--color-slate-body` | Body copy, chữ phụ trong nav, mô tả phụ dưới heading |
| Fog Border | `#CDCCC9` | `--color-fog-border` | Bóng đổ dropdown của nav, đường kẻ chia nhỏ |

## Tokens — Typography

### Serrif Condensed — Tất cả display và section heading — chỉ một weight 400 cho mọi kích thước là lựa chọn đi ngược quy ước; hầu hết SaaS headline dùng 700-800, condensed serif weight thường này thì thầm uy quyền editorial. Cỡ 110px chỉ dùng cho hero display text. · `--font-serrif-condensed`
- **Thay thế:** Freight Display Condensed, hoặc Playfair Display với condensed tracking
- **Weights:** 400
- **Kích thước:** 40px, 48px, 110px
- **Line height:** 1.00–1.10
- **Letter spacing:** -2.2px ở 110px, -0.48px ở 48px, -0.4px ở 40px
- **Vai trò:** Tất cả display và section heading — chỉ một weight 400 cho mọi kích thước là lựa chọn đi ngược quy ước; hầu hết SaaS headline dùng 700-800, condensed serif weight thường này thì thầm uy quyền editorial. Cỡ 110px chỉ dùng cho hero display text.

### Unica77 — Mọi element không phải heading: nav link, body copy, button, footer, input placeholder, label. Letter-spacing âm ở mọi kích thước thắt chặt một grotesque vốn đã gọn thành thứ UI-precise — một signature move khiến UI chrome có cảm giác được cân nhắc thay vì mặc định. · `--font-unica77`
- **Thay thế:** Inter, Aktiv Grotesk
- **Weights:** 400
- **Kích thước:** 14px, 16px, 18px, 24px
- **Line height:** 1.00–1.71
- **Letter spacing:** -0.084px ở 14px, -0.08px ở 16px, -0.072px ở 18px
- **Vai trò:** Mọi element không phải heading: nav link, body copy, button, footer, input placeholder, label. Letter-spacing âm ở mọi kích thước thắt chặt một grotesque vốn đã gọn thành thứ UI-precise — một signature move khiến UI chrome có cảm giác được cân nhắc thay vì mặc định.

### Aeonik Fono — Văn bản in nhỏ — text utility 13px dùng cho footnote hoặc micro-label. Sự hiện diện bên cạnh Unica77 gợi ý một giọng nói thứ ba cho chú thích dữ liệu hoặc nội dung gần pháp lý. · `--font-aeonik-fono`
- **Thay thế:** IBM Plex Mono
- **Weights:** 400
- **Kích thước:** 13px
- **Line height:** 1.54
- **Letter spacing:** normal
- **Vai trò:** Văn bản in nhỏ — text utility 13px dùng cho footnote hoặc micro-label. Sự hiện diện bên cạnh Unica77 gợi ý một giọng nói thứ ba cho chú thích dữ liệu hoặc nội dung gần pháp lý.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 13px | 1.54 | — | `--text-caption` |
| body | 16px | 1.5 | -0.08px | `--text-body` |
| subheading | 18px | 1.33 | -0.072px | `--text-subheading` |
| heading-sm | 24px | 1.29 | — | `--text-heading-sm` |
| heading | 40px | 1.1 | -0.8px | `--text-heading` |
| heading-lg | 48px | 1.04 | -0.48px | `--text-heading-lg` |
| display | 110px | 1 | -2.2px | `--text-display` |

## Tokens — Spacing & Hình dạng

**Đơn vị cơ sở:** 4px

**Mật độ:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 50px |
| inputs | 0px |
| buttons | 60px |
| dropdowns | 6px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| subtle | `rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.05)...` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80-120px
- **Card padding:** 24px
- **Element gap:** 12-20px

## Components

### Orchid CTA Button
**Vai trò:** Primary call-to-action

Nền #B074CE, chữ trắng, border-radius 60px (full pill), padding 4px 12px, Unica77 14px weight 400. Radius pill bên cạnh input 0px-radius tạo sự tương phản có chủ đích. Dùng cho 'Get a demo' toàn cục.

### Ghost Nav Link
**Vai trò:** Navigation items chính

Nền trong suốt, chữ #000000, radius 0px, padding 0px, Unica77 16px weight 400 với letter-spacing -0.08px. Không gạch chân ở trạng thái nghỉ. Navigation link hoàn toàn không được style ngoại trừ trạng thái hover.

### Solution Row
**Vai trò:** Danh sách tính năng/use-case được phân cách bằng đường kẻ ngang

Hàng full-width được phân cách bởi đường kẻ ngang 1px #000000 ở trên và dưới. Bên trái: heading Serrif Condensed 40px + body Unica77 16px #646462. Bên phải: khối màu đặc 24×12px (đỏ cho RevOps #FF3716, navy #00B cho Founders, xanh lá #20A277 cho Finance) đóng vai trò icon danh mục. Không có card background — nội dung nằm trực tiếp trên #FAF9F5.

### Nav Dropdown Panel
**Vai trò:** Mega-menu navigation dropdown

Nền trắng #FFFFFF, border-radius 6px, box-shadow rgba(0,0,0,0.1) 0 0 0 0.5px + rgba(0,0,0,0.05) 0 2px 8px -2px + rgba(0,0,0,0.14) 0 2px 10px -4px. Các mục bên trong dùng Unica77 14px-16px. Shadow ba giá trị phân lớp tạo khung viền mỏng mà không có độ sâu quá mạnh.

### Logo Tag
**Vai trò:** Hiển thị logo khách hàng (social proof)

Logo khách hàng đơn sắc hiển thị cùng kích thước trong layout ngang hoặc lưới trực tiếp trên #FAF9F5. Không card, không border, không padding container — logo nổi trên bề mặt trang. Tên thương hiệu (Notion, Intercom, Cursor, v.v.) hiển thị theo style logotype riêng nhưng ép thành màu đen.

### Floating Color Swatch
**Vai trò:** Element trang trí nền hero

Khối hình chữ nhật màu phẳng (glacier teal #2DCBDC, tím nhạt, vàng ấm, xanh lá pastel) rải rác trong nền hero với kích thước khác nhau. Không radius, không border, không shadow. Chúng tham chiếu đến phần tô ô spreadsheet, tạo trường thị giác xung quanh mà không ảnh hưởng đến nội dung chính.

### Testimonial Pull Quote
**Vai trò:** Khối text social proof

Dấu ngoặc kép mở lớn bằng Serrif Condensed, nội dung quote bằng Serrif Condensed 40-48px, attribution bằng Unica77 16px #646462. Đặt trên #FAF9F5, không container, không border. Kiểu chữ serif cho quote đối lập với sans-serif cho attribution tạo sự chuyển đổi âm vực có chủ đích.

## Nên và Không nên

### Nên
- Dùng Serrif Condensed weight 400 (không bao giờ bold) cho mọi heading — uy quyền editorial đến từ kích thước (lên đến 110px) và letter-spacing (-2.2px ở display), không phải weight
- Đặt nền trang là #FAF9F5 (Warm Cream), không bao giờ dùng trắng tinh — sắc ấm là canvas khiến chữ đen mang cảm giác typographic thay vì digital
- Chỉ dùng #FFCC00 cho thanh thông báo và #B074CE cho nút CTA — sức mạnh của chúng đến từ việc chỉ xuất hiện mỗi màu một lần, không bao giờ dùng lại làm màu trang trí
- Chỉ dùng border-radius 60px cho nút CTA; mọi element tương tác khác (input, dropdown, category pill) dùng 0px hoặc 6px — sự tương phản pill/sắc cạnh là tension có chủ đích của hệ thống
- Phân chia section bằng đường kẻ ngang 1px solid #000000 thay vì tăng whitespace dọc — điều này tham chiếu đường kẻ lưới spreadsheet và là công cụ tạo nhịp điệu cấu trúc chính
- Áp dụng letter-spacing âm cho Unica77 ở mọi kích thước: -0.084px ở 14px, -0.08px ở 16px — không bao giờ dùng default tracking cho UI text
- Hiển thị khối màu danh mục/vai trò dưới dạng hình chữ nhật đặc 24×12px (không radius, không border) — swatch phẳng thô là icon; không bao giờ thay thế bằng icon hoặc illustration

### Không nên
- Không bao giờ dùng #B074CE hoặc #FFCC00 làm nền cho content section hoặc card — cả hai màu đều là màu tín hiệu một mục đích, không phải lựa chọn palette
- Không bao giờ áp dụng border-radius cho input hoặc divider ngang — cạnh sắc 0px trên form element là tầng UI của hệ thống; bo tròn chúng sẽ phá vỡ tension với pill CTA
- Không bao giờ dùng Serrif Condensed ở weight khác 400 — không cố gắng bold hoặc italic heading, kể cả để nhấn mạnh
- Không bao giờ thay thế floating color swatch trang trí bằng ảnh chụp hoặc illustration — hình chữ nhật phẳng trừu tượng là ngôn ngữ hình ảnh của hero; bất cứ thứ gì mang tính tả thực đều phá vỡ ẩn dụ spreadsheet
- Không bao giờ dùng #646462 (Slate Body) cho heading hoặc CTA — nó chỉ dành cho body, duy trì hệ thống tương phản hai tầng nghiêm ngặt: đen cho cấu trúc, slate cho copy hỗ trợ
- Không bao giờ xếp nhiều nút orchid (#B074CE) gần nhau — mỗi page view chỉ nên có một CTA chính, thường là khối email capture trong hero
- Không bao giờ thêm drop shadow hoặc elevation cho section container hoặc card — shadow chỉ được phép trên nav dropdown panel; section nằm phẳng trên bề mặt cream

## Elevation

Ưu tiên phẳng với một ngoại lệ duy nhất: nav dropdown panel mang shadow ba giá trị phân lớp (0.5px outline ring + 8px soft spread + 10px tight shadow) mô phỏng một panel vật lý nhấc lên khỏi trang. Mọi thứ khác — content section, card, form element — nằm sát trên bề mặt cream, không có elevation. Sự vắng mặt của card shadow mang tính cấu trúc: section được phân chia bằng đường kẻ, không phải độ sâu.

## Hình ảnh

Không có ảnh chụp ở bất kỳ đâu trên trang hiển thị. Trường thị giác của hero được chiếm hoàn toàn bởi các khối màu hình chữ nhật phẳng — glacier teal, oải hương nhạt, vàng pastel, xanh mint — sắp xếp lỏng lẻo trong nền với kích thước khác nhau, không radius, không border, mô phỏng các ô spreadsheet chưa được tô. Chúng hoàn toàn mang tính trang trí và không bao giờ chứa nội dung. Phần logo dùng wordmark khách hàng đơn sắc ép thành màu đen, không badge, không container. Category indicator là khối màu đặc 24×12px — primitive trực quan hóa dữ liệu thô thay vì icon được thiết kế. Ngôn ngữ hình ảnh kiên quyết phi nhiếp ảnh: một sản phẩm đủ tự tin để typography CHÍNH LÀ hình ảnh.

## Layout

Layout centered với max-width (~1200px) trên nền cream full-bleed #FAF9F5. Hero là stack centered full-viewport-height: headline display 110px, subtext 18px, sau đó là khối email+CTA composite. Floating color swatch xuất hiện bên trái và phải của cột text mà không có cấu trúc chứa — chúng tràn gần mép viewport. Bên dưới hero, section được phân cách độc quyền bằng đường kẻ ngang đen 1px, không có khoảng cách dọc giữa chúng, tạo nhịp điệu spreadsheet-row dày đặc. Solution row dùng layout hai cột: text trái, swatch màu phải. Logo khách hàng xuất hiện trong grid row 5 cột, sau đó là hàng thứ hai, trực tiếp trên bề mặt cream, không container. Navigation là sticky top bar với logo trái, năm nav link ở giữa, sign-in + email input + CTA button phải. Dropdown panel nổi bên dưới nav item với hệ thống shadow phân lớp.

## Hướng dẫn Prompt cho Agent

**Tham chiếu màu nhanh**
- Text / heading: #000000
- Nền trang: #FAF9F5
- Body / secondary text: #646462
- Nền nút CTA: #B074CE
- Thanh thông báo: #FFCC00
- Border / đường kẻ: #000000
- Nền nav dropdown: #FFFFFF

**Ví dụ Prompt Component**

1. **Hero Section:** Nền cream (#FAF9F5) full-bleed với hình chữ nhật màu phẳng nổi (không radius, không border) màu teal #2DCBDC, oải hương, vàng nhạt rải rác trong nền. Stack centered: headline 'What's after Excel?' bằng Serrif Condensed 110px weight 400 #000000 letter-spacing -2.2px, line-height 1.0. Subtext 18px Unica77 weight 400 #646462 letter-spacing -0.072px bên dưới. Sau đó là email input (radius 0px, border 1px #000000, padding top/bottom 18px left 28px, placeholder Unica77 16px #646462) với nút orchid CTA (#B074CE, chữ trắng, radius 60px, padding 4px 12px) chồng lên cạnh phải.

2. **Solution Row:** Hàng full-width trên #FAF9F5, phân cách trên và dưới bằng đường kẻ ngang 1px solid #000000. Cột trái: heading Serrif Condensed 40px #000000 letter-spacing -0.8px, bên dưới là body text Unica77 16px #646462. Cột phải căn phải: khối màu đặc 24×12px (không radius, không border) — #FF3716 cho RevOps, #00B cho Founders, #20A277 cho Finance.

3. **Nav Bar:** Sticky top bar trên #FFFFFF, logo 'Equals' trái bằng Unica77 bold. Giữa: năm ghost link (Solutions, Use cases, Pricing, About) bằng Unica77 16px #000000 padding 0px. Phải: 'Sign in' ghost link + email input (compact, radius 0px) + nút 'Get a demo' pill (#B074CE, radius 60px, chữ trắng, Unica77 14px).

4. **Announcement Bar:** Dải full-viewport-width, nền #FFCC00, radius 0px, padding 6px 20px. Text: Unica77 14px #000000 weight 400, nội dung kết thúc bằng mũi tên '→'. Đặt phía trên nav bar, luôn ở đầu trang.

5. **Customer Logo Row:** Layout ngang 5 cột trực tiếp trên #FAF9F5, không container, không border, không shadow. Logo wordmark khách hàng đơn sắc ép thành #000000. Khoảng cách đều giữa các logo (~20px column gap). Không label, không caption.

## Hệ thống Khối Màu Spreadsheet

Ba dòng use-case (RevOps, Founders, Finance) mỗi dòng mang một khối màu đặc cụ thể đóng vai trò vừa là định danh danh mục vừa là ẩn dụ ô dữ liệu:
- RevOps: #FF3716 (Amber) — tính khẩn cấp của pipeline
- Founders: #00B (Brand Blue) — uy quyền thể chế
- Finance: #20A277 (Brand Green) — tín hiệu sức khỏe tài chính
Các khối này rộng 24px × cao 12px, zero border-radius, không border, không shadow. Khi xây dựng solution row mới cho các persona bổ sung, chọn màu mới từ bộ token thương hiệu (--brand-glacier, --brand-peach, --brand-aquamarine, --brand-sky, --brand-purple) và giữ nguyên tỷ lệ hình chữ nhật. Không bao giờ dùng #FFCC00 hoặc #B074CE cho các khối này — những màu đó được dành riêng cho vai trò announcement và CTA.

## Thương hiệu Tương tự

- **Notion** — Cùng cách tiếp cận typographic đen-trên-kem với nút CTA pill một màu nhấn duy nhất trên nền UI gần như không màu
- **Linear** — Cùng hệ thống editorial hai font ghép display serif với grotesque chặt chẽ cho UI chrome, với letter-spacing âm là signature move
- **Rows.com** — Ngôn ngữ hình ảnh sản phẩm spreadsheet có thể so sánh trực tiếp — headline editorial serif, nền kem, điểm nhấn màu tối thiểu tham chiếu thẩm mỹ ô dữ liệu
- **Retool** — Grid logo đơn sắc trên nền kem với nút CTA một màu nhấn và divider section bằng đường kẻ ngang thay vì layout dựa trên card

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-analyst-yellow: #FFCC00;
  --color-orchid-cta: #B074CE;
  --color-brand-green: #20A277;
  --color-glacier: #2DCBDC;
  --color-midnight-ink: #000000;
  --color-warm-cream: #FAF9F5;
  --color-cloud-white: #FFFFFF;
  --color-slate-body: #646462;
  --color-fog-border: #CDCCC9;

  /* Typography — Font Families */
  --font-serrif-condensed: 'Serrif Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-unica77: 'Unica77', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-aeonik-fono: 'Aeonik Fono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.54;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.08px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.072px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.29;
  --text-heading: 40px;
  --leading-heading: 1.1;
  --tracking-heading: -0.8px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.04;
  --tracking-heading-lg: -0.48px;
  --text-display: 110px;
  --leading-display: 1;
  --tracking-display: -2.2px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-80: 80px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80-120px;
  --card-padding: 24px;
  --element-gap: 12-20px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-full: 50px;
  --radius-full-2: 60px;

  /* Named Radii */
  --radius-tags: 50px;
  --radius-inputs: 0px;
  --radius-buttons: 60px;
  --radius-dropdowns: 6px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.05) 0px 2px 8px -2px, rgba(0, 0, 0, 0.14) 0px 2px 10px -4px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-analyst-yellow: #FFCC00;
  --color-orchid-cta: #B074CE;
  --color-brand-green: #20A277;
  --color-glacier: #2DCBDC;
  --color-midnight-ink: #000000;
  --color-warm-cream: #FAF9F5;
  --color-cloud-white: #FFFFFF;
  --color-slate-body: #646462;
  --color-fog-border: #CDCCC9;

  /* Typography */
  --font-serrif-condensed: 'Serrif Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-unica77: 'Unica77', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-aeonik-fono: 'Aeonik Fono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.54;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.08px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.072px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.29;
  --text-heading: 40px;
  --leading-heading: 1.1;
  --tracking-heading: -0.8px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.04;
  --tracking-heading-lg: -0.48px;
  --text-display: 110px;
  --leading-display: 1;
  --tracking-display: -2.2px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-80: 80px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-full: 50px;
  --radius-full-2: 60px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.05) 0px 2px 8px -2px, rgba(0, 0, 0, 0.14) 0px 2px 10px -4px;
}
```