# Sprig

> # Sprig — Style Reference

## Prompt Content

```
# Sprig — Style Reference
> sổ tay nghiên cứu editorial trên giấy ấm — yên tĩnh, gần như không mực, với ánh sáng ấm hắt vào từ rìa

**Theme:** light

Sprig hoạt động trong một không gian editorial gần như đơn sắc: nền canvas bone-white ấm áp, đường viền siêu mảnh, và một tông mực duy nhất tối đến mức đọc như đen nhưng mang một chút xanh navy thoảng qua. Hệ thống mang phong cách như một cuốn sổ tay nghiên cứu — yên tĩnh, tự tin, và cố tình không trang trí — được ngắt quãng bởi các gradient hoàng hôn ấm áp đóng vai trò như điểm đánh dấu section chứ không phải trang trí. Typography là cuộc đối thoại giữa hai bộ chữ custom: ABC Diatype cho các khoảnh khắc editorial (heading, display) và TT Commons Pro cho UI chức năng (nav, button, label). Các component có dạng pill và được spacing rộng rãi; card có thể gần như hình tròn (100px radius) cho các khoảnh khắc feature, tạo sự tương phản thị giác giữa cực mềm và cực có cấu trúc. Màu sắc được phân bổ có chủ đích: màu sắc duy nhất trong giao diện là tông mực gần như đen, và gradient chỉ dành riêng cho hero và event imagery — không bao giờ trên button, không bao giờ trên control.

## Tokens — Colors

| Name | Value | Token | Vai trò |
|------|-------|-------|---------|
| Abyssal Ink | `#0b2330` | `--color-abyssal-ink` | Primary text, nav links, borders, icon strokes — màu gần như đen với một chút navy, là workhorse của hệ thống. Mang mọi bề mặt đọc trong hệ thống |
| Bone | `#faf9f8` | `--color-bone` | Page canvas, card surfaces, button text trên nền tối — màu off-white ấm, không bao giờ là #fff thuần |
| Obsidian | `#141312` | `--color-obsidian` | Headings, display text, strong UI fills — ấm hơn Abyssal một chút, dùng khi heading cần thêm chút ấm |
| Espresso | `#272420` | `--color-espresso` | Filled button background (primary action), dark surface sections — màu CTA chính, gần như đen pha ấm |
| Carbon | `#000000` | `--color-carbon` | Màu đen tuyệt đối cho SVG fills và các khoảnh khắc tương phản cao nhất — dùng tiết kiệm khi cần true black |
| Ash | `#f3f3f3` | `--color-ash` | Card surfaces, badge backgrounds, subtle elevated panels — bước đầu tiên lên từ canvas |
| Mist | `#e8e7e6` | `--color-mist` | Borders, dividers, secondary surface fills — xám ấm xác định cạnh mà không gây chú ý |
| Vapor | `#dddcd9` | `--color-vapor` | Viền nhìn thấy nhẹ nhất, ghost button outlines — cạnh yên tĩnh nhất trong hệ thống |
| Pebble | `#c4c4bc` | `--color-pebble` | Muted body text, subdued metadata, thông tin cấp ba |
| Fog | `#9a9a91` | `--color-fog` | Disabled text, placeholder text, heading accents rất nhẹ |
| Smoke | `#8f8d8b` | `--color-smoke` | Mid-tone surface fills, pressed button states |
| Graphite | `#6e6d6a` | `--color-graphite` | Tertiary text, subtle borders, icon strokes trong secondary contexts |
| Slate | `#575653` | `--color-slate` | Body text, nav borders, link underlines — mid-neutral cho thông tin thứ cấp dễ đọc |
| Coffee | `#322e2a` | `--color-coffee` | Deep dark surface, image borders, fill tối thứ hai — dùng trên bề mặt gần footer và image frames |
| Dusk | `linear-gradient(rgb(239, 220, 182), rgb(235, 163, 126) 0%, rgb(125, 122, 143))` | `--color-dusk` | Gradient start — vàng ấm, tông mở đầu của signature sunset gradient |
| Ember | `#eba370` | `--color-ember` | Gradient mid-stop — chuyển tiếp coral-orange trong signature sunset gradient |
| Twilight | `#7d7a8f` | `--color-twilight` | Gradient end — tím xám nhẹ kết thúc sunset gradient |

## Tokens — Typography

### TT Commons Pro — Functional UI typeface — nav links, button labels, badge text, small labels. Single weight 400 là lựa chọn có chủ đích: giao diện thì thầm thay vì hét to. Dùng ở 16-18px cho UI chrome và ở 40px cho một khoảnh khắc editorial hiếm hoi. · `--font-tt-commons-pro`
- **Thay thế:** Inter, Söhne, General Sans
- **Weights:** 400
- **Sizes:** 16px, 18px, 40px
- **Line height:** 1.50
- **Letter spacing:** normal ở mọi kích thước
- **Vai trò:** Functional UI typeface — nav links, button labels, badge text, small labels. Single weight 400 là lựa chọn có chủ đích: giao diện thì thầm thay vì hét to. Dùng ở 16-18px cho UI chrome và ở 40px cho một khoảnh khắc editorial hiếm hoi.

### ABC Diatype — Editorial typeface — display headings ở 40px weight 500, section headings ở 32px weight 500, subheadings ở 24px weight 400, body ở 16px. Cấu trúc hình học mang lại cho hệ thống vẻ uy quyền yên tĩnh; weight 500 (không phải 600-700) cho heading là lựa chọn chống lại convention, định nghĩa sự kiềm chế của Sprig. · `--font-abc-diatype`
- **Thay thế:** Söhne, GT America, Inter Display
- **Weights:** 400, 500
- **Sizes:** 14px, 16px, 24px, 32px, 40px
- **Line height:** 1.20 (display) / 1.30 (headings) / 1.40 (body)
- **Vai trò:** Editorial typeface — display headings ở 40px weight 500, section headings ở 32px weight 500, subheadings ở 24px weight 400, body ở 16px. Cấu trúc hình học mang lại cho hệ thống vẻ uy quyền yên tĩnh; weight 500 (không phải 600-700) cho heading là lựa chọn chống lại convention, định nghĩa sự kiềm chế của Sprig.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 14px | 1.3 | — | `--text-caption` |
| body | 16px | 1.5 | — | `--text-body` |
| body-lg | 18px | 1.5 | — | `--text-body-lg` |
| subheading | 24px | 1.3 | — | `--text-subheading` |
| heading-sm | 32px | 1.2 | — | `--text-heading-sm` |
| heading | 40px | 1.2 | — | `--text-heading` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** spacious

### 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` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 88 | 88px | `--spacing-88` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |
| 160 | 160px | `--spacing-160` |
| 224 | 224px | `--spacing-224` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| nav | 32px |
| cards | 100px |
| badges | 4px |
| buttons | 32px |
| special-card | 1600px |
| feature-cards | 100px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 48px
- **Element gap:** 8px

## Components

### Primary Filled Button
**Vai trò:** Button filled duy nhất trong hệ thống. Dùng cho hành động chuyển đổi chính trên mọi trang.

Nền Espresso (#272420), chữ Bone (#faf9f8), border-radius 32px (full pill), padding ngang 12px × dọc 6px. TT Commons Pro 16px weight 400. Tùy chọn icon mũi tên 3px với gap 3px. Không border. Hình pill là bắt buộc — filled buttons luôn được bo tròn hoàn toàn.

### Ghost/Outline Button
**Vai trò:** Hành động thứ cấp, nav-adjacent controls, đường dẫn chuyển đổi ít nổi bật hơn.

Nền trong suốt, border 1px màu Vapor (#dddcd9) hoặc Mist (#e8e7e6), chữ Abyssal Ink (#0b2330), border-radius 32px (pill), padding 12px × 6px. TT Commons Pro 16px weight 400.

### Top Announcement Banner
**Vai trò:** Thanh mỏng toàn trang phía trên navigation, dùng cho launch, sự kiện hoặc thông báo sản phẩm.

Nền Espresso (#272420) hoặc Obsidian (#141312), chữ Bone (#faf9f8), một dòng căn giữa. ABC Diatype 14px hoặc 16px weight 400. Full-bleed width, chiều cao ~40px.

### Primary Navigation Bar
**Vai trò:** Navigation chính của site — logo trái, nav links giữa, sign-in và CTA phải.

Nền Bone (#faf9f8), không có border bottom nhìn thấy. Logo (Sprig wordmark) trái ở padding 6px-8px. Nav links giữa bằng ABC Diatype hoặc TT Commons Pro 16px, chữ Slate (#575653) với gap 24px. Bên phải: text link 'Sign in' màu Slate, sau đó là Primary Filled Button ('Book a demo'). Tổng chiều cao ~64px.

### Large Product Preview Card
**Vai trò:** Visual hero hoặc feature-section — product UI được hiển thị bên trong khung gradient.

Được bọc trong card với border-radius 100px hoặc 1600px, đặt trên nền sunset gradient ấm (Dusk → Ember → Twilight). Gradient tạo nền editorial ấm áp, nhẹ nhàng. Product screenshot bên trong có white card riêng với internal navigation. Sự kết hợp này — gradient ấm bên ngoài, product UI sạch sẽ bên trong — là visual signature của hệ thống.

### Event/Content Card
**Vai trò:** Card trong events section và các content grid tương tự — nền ảnh hoặc gradient với text overlay.

Border-radius 100px, nền biến đổi (photography, brand gradient, hoặc solid). Aspect ratio khoảng 3:4 hoặc 1:1. Text overlays màu Bone (#faf9f8) hoặc Abyssal Ink (#0b2330) tùy theo độ tối của nền. Không border nhìn thấy, không shadow — gradient hoặc ảnh chính là card.

### Logo Bar
**Vai trò:** Social proof section — trusted-by logos trong một hàng ngang duy nhất.

Không container, không border. Logos trong một hàng, cách đều nhau, hiển thị bằng brand colors gốc (đây là khoảnh khắc màu sắc duy nhất trong một trang gần như đơn sắc). Bên dưới logo bar, một hairline divider ngang nhẹ màu Mist (#e8e7e6) có thể ngăn cách với section tiếp theo.

### Badge / Tag
**Vai trò:** Label danh mục nhỏ, event types, hoặc metadata pills.

Nền Ash (#f3f3f3), chữ Abyssal Ink (#0b2330), border-radius 4px, padding dọc 48px (căn giữa thị giác nhờ padding rộng), TT Commons Pro 14-16px. Nhỏ, không phô trương — badges mang tính chức năng, không trang trí.

### Section Heading Block
**Vai trò:** Mở đầu section theo phong cách editorial — chữ lớn, spacing rộng, trang trí tối thiểu.

ABC Diatype 32-40px weight 500, màu Abyssal Ink (#0b2330) hoặc Obsidian (#141312), line-height 1.20. Theo sau bởi body text ABC Diatype 16px weight 400, màu Slate (#575653). Căn trái, không bao giờ căn giữa. Section gap phía trên: 80px.

### Hairline Divider
**Vai trò:** Phân cách section, ranh giới cấu trúc giữa các band nội dung.

Border solid 1px màu Mist (#e8e7e6) hoặc Vapor (#dddcd9). Full-width hoặc giới hạn trong content max-width. Hệ thống dùng divider thay vì đổi nền section để duy trì tính liên tục của bone-white.

### Feature Highlight Section
**Vai trò:** Section hai cột xen kẽ — text một bên, visual bên kia.

Cột text trái (heading + body + CTA tùy chọn), cột visual phải (product preview hoặc illustration). Card padding 48px, section gap 80px. Text căn trái; visual được chứa trong khung. Xen kẽ text-trái/image-phải và text-phải/image-trái.

### CTA Card / End-of-Page Banner
**Vai trò:** Section chuyển đổi kết thúc với headline lớn và primary action.

Container bo tròn lớn (100px hoặc 1600px radius), nền Abyssal Ink (#0b2330) hoặc Espresso (#272420), chữ Bone (#faf9f8). Chứa heading 40px, body text, và Ghost/Outline Button (Bone border, Bone text) hoặc Primary Filled Button. Layout text căn giữa.

## Do's and Don'ts

### Nên làm
- Dùng #272420 (Espresso) làm nền filled button duy nhất — không bao giờ dùng xanh dương, đỏ hoặc xanh lá cho button
- Đặt tất cả filled và ghost buttons ở border-radius 32px (full pill) với padding ngang 12px × dọc 6px
- Dùng ABC Diatype weight 500 cho tất cả heading từ 24px trở lên — không bao giờ lên weight 600 hoặc 700
- Đặt large feature cards ở border-radius 100px và special hero cards ở 1600px — độ cong là signature của hệ thống
- Chỉ áp dụng gradient Dusk→Ember→Twilight (linear) làm nền cho product UI hoặc event card backgrounds — không bao giờ trên text, borders hoặc controls
- Giữ page canvas ở #faf9f8 (Bone) với divider 1px Mist (#e8e7e6) thay vì đổi nền section
- Căn trái tất cả nội dung text — body, headings và CTAs — không bao giờ căn giữa body copy hoặc section openers

### Không nên làm
- Không thêm drop shadows vào bất kỳ component nào — dùng surface tone shifts và curvature thay thế
- Không giới thiệu secondary brand color — hệ thống là đơn sắc cộng với warm gradient, thêm xanh dương, xanh lá hoặc đỏ sẽ phá vỡ không gian editorial
- Không căn giữa body text hoặc feature descriptions — căn trái là cấu trúc, không phải phong cách
- Không dùng border-radius dưới 4px trên bất kỳ element nhìn thấy nào — hệ thống cam kết mềm mại, không sắc cạnh
- Không áp dụng warm gradient lên text, icons hoặc UI controls — nó chỉ dành cho image backdrops và large decorative cards
- Không dùng bold (weight 700) ở bất kỳ đâu — ABC Diatype 500 là tối đa, TT Commons Pro chỉ weight 400
- Không đổi qua lại giữa nền sáng và tối để tạo nhịp điệu — dùng hairline dividers và spacing rộng thay thế

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|-----|---------|----------|
| 0 | Bone Canvas | `#faf9f8` | Nền trang cơ bản — off-white ấm định nghĩa toàn bộ bầu không khí của hệ thống |
| 1 | Ash Card | `#f3f3f3` | Bề mặt card nâng nhẹ, badge fills, bước đầu tiên lên từ canvas |
| 2 | Mist Divider | `#e8e7e6` | Hairline borders, divider cấu trúc nhẹ giữa các section |
| 3 | Espresso Surface | `#272420` | Bề mặt tối — buttons, announcement banners, dark section cards |
| 4 | Coffee Depth | `#322e2a` | Bề mặt sâu nhất cho image frames, nền gần footer, lớp visual lõm nhất |

## Elevation

Hệ thống cố tình tránh drop shadows. Thay vì tạo elevation qua blur và offset, nó dùng surface tone shifts (#faf9f8 → #f3f3f3 → #e8e7e6) và border-radius rộng (100px cho cards) để tạo sự phân tách. Ở nơi hệ thống khác thêm shadow để báo hiệu tầm quan trọng, Sprig thêm không gian và độ cong. Hiệu ứng 'giống shadow' duy nhất là warm gradient halo phía sau product preview cards, tạo chiều sâu qua màu sắc, không phải blur.

## Imagery

Imagery tuân theo ba register: (1) Warm sunset gradients — Dusk vàng → Ember coral → Twilight tím xám — chỉ dùng làm nền cho product UI screenshots và large feature cards. Các gradient này là màu sắc duy nhất trong hệ thống và đóng vai trò như 'lỗ sáng' editorial. (2) Candid professional photography — con người trong bối cảnh nghiên cứu, sản phẩm và công nghệ, thường ở tư thế nhóm hoặc trò chuyện. Full color, không filter, tông ấm. Dùng trong events/community section. (3) Product UI screenshots — luôn được chứa trong khung warm gradient card, không bao giờ hiển thị dưới dạng raw screenshots. Việc bọc gradient là điều làm cho product imagery mang đậm phong cách thương hiệu. Không illustrations, không 3D renders, không abstract graphics. Hệ thống là text + gradient + photography + product UI — không gì khác.

## Layout

Max-width 1200px căn giữa, nhưng hero và full-bleed sections kéo dài đến mép viewport. Trang chủ yếu là text căn trái — hệ thống không bao giờ căn giữa body content. Nhịp điệu section: hero (text-trái + product preview-phải trên warm gradient) → logo bar (full-width, không border) → content sections (xen kẽ text-trái/image-phải với gap 80px) → events card grid (4 cards ngang với 100px radius) → closing CTA. Vertical spacing rộng rãi: 80px giữa các major sections, 48px internal padding, 8px giữa các inline UI elements. Navigation là top bar sạch, không sticky. Mật độ tổng thể spacious và editorial — trang này đọc giống một bài báo dài hơn là một product page.

## Agent Prompt Guide

**Quick Color Reference**
- text: #0b2330 (Abyssal Ink)
- background: #faf9f8 (Bone)
- border: #e8e7e6 (Mist)
- accent: warm gradient (Dusk #efdcb6 → Ember #eba370 → Twilight #7d7a8f)
- primary action: #272420 (filled action)

**Example Component Prompts**

1. Tạo Primary Action Button: nền #272420, chữ #faf9f8, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính.

3. **Event Card Grid**: 4 cards trong một hàng ngang, mỗi card border-radius 100px, aspect ratio biến đổi ~3:4. Card đầu: nền warm gradient (Dusk→Ember) với Bone text overlay. Card thứ hai: nền tối solid (#141312) với Bone text. Card thứ ba: full-bleed photography của một người. Card thứ tư: gradient sáng (beige ấm) với Abyssal Ink text. Không borders, không shadows giữa các card. Gap 24px giữa các card.

4. **Feature Section (text + visual)**: Layout hai cột ở max-width 1200px, text căn trái ở cột trái, visual ở cột phải. Section gap 80px phía trên. Text: heading ABC Diatype 40px weight 500 màu #0b2330, body 16px màu #575653, gap 24px giữa heading và body. Visual: product screenshot bên trong card 100px-radius trên gradient Dusk→Twilight.

5. **Logo Bar**: Hàng full-width, không container, không border. 6-8 client logos (phong cách Microsoft, Figma, DoorDash, Clay, Notion, Ramp) cách đều nhau trong một đường ngang duy nhất, mỗi logo ở brand color gốc. Padding dọc 48px phía trên và dưới.

## Similar Brands

- **Linear** — Cùng bảng màu gần như đơn sắc với một accent tối duy nhất, pill-shaped controls, và sự kiềm chế editorial tương tự trong lựa chọn typography
- **Notion** — Canvas off-white ấm, border xám siêu mảnh, spacing rộng rãi, và cùng cam kết với một tông mực duy nhất cho tất cả text và structural elements
- **Vercel** — Kiềm chế typography cực độ, geometric sans custom ở moderate weights, và cùng từ chối dùng màu sắc làm yếu tố khác biệt chính
- **Attio** — Bảng màu trung tính ấm, pill buttons, và cùng sự căng thẳng editorial-product giữa kiềm chế và ấm áp

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-abyssal-ink: #0b2330;
  --color-bone: #faf9f8;
  --color-obsidian: #141312;
  --color-espresso: #272420;
  --color-carbon: #000000;
  --color-ash: #f3f3f3;
  --color-mist: #e8e7e6;
  --color-vapor: #dddcd9;
  --color-pebble: #c4c4bc;
  --color-fog: #9a9a91;
  --color-smoke: #8f8d8b;
  --color-graphite: #6e6d6a;
  --color-slate: #575653;
  --color-coffee: #322e2a;
  --color-dusk: #efdcb6;
  --gradient-dusk: linear-gradient(rgb(239, 220, 182), rgb(235, 163, 126) 0%, rgb(125, 122, 143));
  --color-ember: #eba370;
  --color-twilight: #7d7a8f;

  /* Typography — Font Families */
  --font-tt-commons-pro: 'TT Commons Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.3;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.2;
  --text-heading: 40px;
  --leading-heading: 1.2;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-160: 160px;
  --spacing-224: 224px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 48px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-3xl: 32px;
  --radius-full: 100px;
  --radius-full-2: 1600px;

  /* Named Radii */
  --radius-nav: 32px;
  --radius-cards: 100px;
  --radius-badges: 4px;
  --radius-buttons: 32px;
  --radius-special-card: 1600px;
  --radius-feature-cards: 100px;

  /* Surfaces */
  --surface-bone-canvas: #faf9f8;
  --surface-ash-card: #f3f3f3;
  --surface-mist-divider: #e8e7e6;
  --surface-espresso-surface: #272420;
  --surface-coffee-depth: #322e2a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-abyssal-ink: #0b2330;
  --color-bone: #faf9f8;
  --color-obsidian: #141312;
  --color-espresso: #272420;
  --color-carbon: #000000;
  --color-ash: #f3f3f3;
  --color-mist: #e8e7e6;
  --color-vapor: #dddcd9;
  --color-pebble: #c4c4bc;
  --color-fog: #9a9a91;
  --color-smoke: #8f8d8b;
  --color-graphite: #6e6d6a;
  --color-slate: #575653;
  --color-coffee: #322e2a;
  --color-dusk: #efdcb6;
  --color-ember: #eba370;
  --color-twilight: #7d7a8f;

  /* Typography */
  --font-tt-commons-pro: 'TT Commons Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.3;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.2;
  --text-heading: 40px;
  --leading-heading: 1.2;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-160: 160px;
  --spacing-224: 224px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-3xl: 32px;
  --radius-full: 100px;
  --radius-full-2: 1600px;
}
```