# Dub Links

> Dub Links — Style Reference

## Prompt Content

```
# Dub Links — Style Reference
> warm sunrise over monochrome architecture

**Theme:** light

Dub mang phong cách SaaS ấm áp, tự tin: giao diện gần như đơn sắc (near-monochrome) neo trên gradient kem-pha-trắng mềm mại, với một điểm nhấn cam rực duy nhất khiến mọi thao tác đều nổi bật. Hệ thống thở nhờ khoảng trắng rộng rãi trên lưới 4px nhỏ gọn, kết hợp độ chính xác tiện ích của Inter với nét display bo tròn của Satoshi cho headline. Bề mặt luôn mờ và sáng với viền mảnh (hairline border) và bóng cực nhạt — chiều sâu đến từ sự chuyển tông tinh tế và độ cao (elevation), không bao giờ dùng panel nặng. CTA chính luôn là pill đen với micro-accents màu cam than hồng (orange-ember) ở gần, tạo độ tương phản giữa tính trung tính cấu trúc và sự ấm áp của thương hiệu. Các component nên cảm giác nhanh và tiện dụng: bán kính 4px và 8px chiếm ưu thế, pill buttons mang CTA, và card là hình chữ nhật trắng phẳng trên nền canvas hơi ấm.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Cream | `#f5f5f5` | `--color-canvas-cream` | Nền trang — tông trắng ngà ấm tạo cảm giác ngập nắng cho giao diện |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, panel nâng cao, trường nhập liệu — trắng tinh cho container nội dung |
| Ink Black | `#0a0a0a` | `--color-ink-black` | Màu trung tính tối hỗ trợ cho text, icon và độ tương phản mạnh. Không dùng làm màu CTA chính |
| Charcoal | `#171717` | `--color-charcoal` | Text phụ, text button trên nền tối, heading weights |
| Graphite | `#404040` | `--color-graphite` | Text cấp ba, mô tả mờ, text button phụ |
| Steel | `#737373` | `--color-steel` | Placeholder text, trạng thái disabled, body copy ít nhấn mạnh |
| Ash | `#a3a3a3` | `--color-ash` | Icon fill ở trạng thái nghỉ, helper text mờ, icon cấp ba |
| Fog | `#d4d4d4` | `--color-fog` | Viền input ở trạng thái nghỉ, divider nhẹ, form control không hoạt động |
| Mist | `#e5e5e5` | `--color-mist` | Viền mảnh (hairline border) khắp nơi — màu divider chủ lực |
| Slate | `#6b7280` | `--color-slate` | Body text mờ, nét icon phụ, thông tin meta |
| Ember Orange | `#ea580c` | `--color-ember-orange` | Accent cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không dùng làm màu CTA chính |
| Ember Glow | `#fb923c` | `--color-ember-glow` | Cam nhạt hơn cho hover state trên element ember, accent fill mềm |
| Ember Deep | `#7c2d12` | `--color-ember-deep` | Cam đậm cho nét icon và accent trang trí cần chiều sâu |
| Signal Blue | `#3b82f6` | `--color-signal-blue` | Accent icon trang trí, highlight link, chạm thông tin — nốt nhạc màu phụ |
| Terminal Green | `#22863a` | `--color-terminal-green` | Accent xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent phụ, không phải màu trạng thái |
| Alert Red | `#d32f2f` | `--color-alert-red` | Accent đỏ hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent phụ, không phải màu trạng thái |
| Warm Sunrise | `linear-gradient(90deg, rgb(244, 149, 12), rgb(235, 92, 12))` | `--color-warm-sunrise` | Gradient endpoint cho lớp rửa ấm (warm peach wash) của hero — gradient không khí đặc trưng |

## Tokens — Typography

### Satoshi — Display headlines — custom Satoshi ở medium weight tạo sự uy quyền thân thiện, bo tròn ở tỷ lệ hero; sự mềm mại hình học của nó tương phản với độ chính xác tiện ích của Inter · `--font-satoshi`
- **Substitute:** General Sans, Switzer, Inter (weight 600)
- **Weights:** 500
- **Sizes:** 40px, 48px
- **Line height:** 1.00-1.15
- **Role:** Display headlines — custom Satoshi ở medium weight tạo sự uy quyền thân thiện, bo tròn ở tỷ lệ hero; sự mềm mại hình học của nó tương phản với độ chính xác tiện ích của Inter

### Inter — Primary UI font — xử lý body text, nav items, buttons, form labels, section headings; weight 500 cho nav active states và nhấn mạnh tinh tế, 600-700 cho subheadings; line-height 1.25-1.43 chặt chẽ ở kích thước body giữ mật độ nhỏ gọn · `--font-inter`
- **Weights:** 400, 500, 600, 700
- **Sizes:** 8px, 12px, 14px, 16px, 18px, 20px, 24px
- **Line height:** 1.25-1.56
- **Role:** Primary UI font — xử lý body text, nav items, buttons, form labels, section headings; weight 500 cho nav active states và nhấn mạnh tinh tế, 600-700 cho subheadings; line-height 1.25-1.43 chặt chẽ ở kích thước body giữ mật độ nhỏ gọn

### Geist Mono — Hiển thị short URL, code snippets, metadata kỹ thuật — monospace nơi độ chính xác dữ liệu quan trọng (link đã rút gọn, bộ đếm click) · `--font-geist-mono`
- **Weights:** 400
- **Sizes:** 12px, 13px, 14px
- **Line height:** 1.33-1.50
- **Role:** Hiển thị short URL, code snippets, metadata kỹ thuật — monospace nơi độ chính xác dữ liệu quan trọng (link đã rút gọn, bộ đếm click)

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.33 | — | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| body-lg | 18px | 1.56 | — | `--text-body-lg` |
| subheading | 20px | 1.5 | — | `--text-subheading` |
| heading-sm | 24px | 1.4 | — | `--text-heading-sm` |
| display | 48px | 1.15 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

| Name | Value | 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` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 112 | 112px | `--spacing-112` |
| 236 | 236px | `--spacing-236` |

### Border Radius

| Element | Value |
|---------|-------|
| tags | 9999px |
| cards | 12px |
| pills | 9999px |
| inputs | 8px |
| buttons | 8px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |
| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |
| sm-2 | `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset` | `--shadow-sm-2` |
| subtle-2 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 4px` | `--shadow-subtle-2` |
| subtle-3 | `rgba(0, 0, 0, 0.098) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |

### Layout

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

## Components

### Primary CTA Button
**Role:** Hành động chuyển đổi chính — 'Start for free', 'Sign up'

Fill Ink Black (#0a0a0a), text Paper White (#ffffff), radius 8px, Inter weight 500 ở 14px, padding 8px 16px, shadow nhẹ 0px 1px 2px với 5% black. Fill gần đen trên nền canvas kem ấm là element thị giác mạnh nhất trên mọi trang.

### Secondary Ghost Button
**Role:** Hành động phụ — 'Get a demo', 'Log in'

Fill trong suốt với viền Mist (#e5e5e5) 1px, text Charcoal (#171717), radius 8px, Inter weight 500 ở 14px, padding 8px 16px. Nằm cạnh primary CTA như một lựa chọn thay thế nhẹ nhàng.

### Sign Up Pill Button
**Role:** Hành động chính trên navigation

Fill Ink Black (#0a0a0a), text trắng, radius 9999px (full pill), Inter weight 500 ở 14px, padding 6px 14px. Padding hơi chặt hơn card CTA để phù hợp với ngữ cảnh nav.

### Ember Action Button
**Role:** Hành động nhấn mạnh thương hiệu — 'Shorten link', chuyển đổi chính trong ngữ cảnh sản phẩm

Fill Ember Orange (#ea580c), text trắng, radius 8px, Inter weight 500 ở 14px, padding 8px 16px. Button màu sắc duy nhất trong hệ thống — dùng tiết kiệm cho hành động quan trọng nhất trong sản phẩm.

### Text Input
**Role:** Đích URL, tìm kiếm, trường văn bản

Fill Paper White (#ffffff), viền Fog (#d4d4d4) 1px, placeholder text Ash (#a3a3a3), input text Charcoal (#171717), radius 8px, Inter ở 14px, padding 10px 14px. Focus state: vòng ngoài 4px black-at-10%.

### Link Shortener Card
**Role:** Demo sản phẩm hero — trung tâm của homepage

Bề mặt Paper White, radius 12px, shadow hai lớp (0px 4px 6px -1px / 0px 2px 4px -2px với 10% black). Chứa: hàng input với Ember Action Button, và hàng kết quả với Geist Mono short URL + badge đếm click. Đây là component đặc trưng.

### Brand Tag / Badge
**Role:** Nhãn danh mục phía trên headline — 'Dub Links', 'Branded Short Links'

Nền màu nhạt, text Charcoal, radius 9999px, Inter weight 500 ở 12px, padding 2px 10px. Có icon nhỏ dẫn đầu. Các tông màu bao gồm #fef9c3 (vàng ấm), #eff6ff (xanh lam mát), #dcfce7 (bạc hà).

### Navigation Bar
**Role:** Điều hướng cấp cao nhất của trang

Trong suốt trên canvas, logo wordmark Ink Black, nav items Inter ở 14px weight 500 màu Charcoal. Dropdown items có radius 8px. Nav item active có highlight nền nhạt.

### Trust Logo Grid
**Role:** Bằng chứng xã hội — logo khách hàng

Grid 2 hàng, 5 cột, row gap 40px, mỗi logo hiển thị ở màu Ash (#a3a3a3) hoặc đơn sắc mờ. Link 'CASE STUDY' bằng Geist Mono xuất hiện bên dưới một số logo. Không viền, chỉ phân cách bằng khoảng trắng.

### Product UI Mockup
**Role:** Hình ảnh trực quan cho section tính năng — giao diện tạo link

Bề mặt Paper White, radius 12px, shadow nhiều lớp. Chứa form fields, QR code preview, social link preview icons. Chrome trình duyệt giả lập với chấm đèn giao thông ở trên. Trường nhập liệu bo tròn 8px.

### QR Code Preview Tile
**Role:** QR code nhúng trong product mockup

Fill Paper White với radius 8px, viền Mist 1px, icon link ngoài nhỏ. Mẫu QR code đen ở trung tâm.

### Section Heading
**Role:** Tiêu đề section tính năng

Satoshi weight 500 ở 40-48px, màu Ink Black, căn giữa, line-height 1.15. Theo sau bởi body text 18px màu Slate (#6b7280) weight 400, max-width ~600px căn giữa.

## Do's and Don'ts

### Do
- Dùng radius 8px cho tất cả button và input hình chữ nhật, 9999px cho tag dạng pill và nav CTAs
- Áp dụng Inter weight 500 cho navigation items, button text và nhấn mạnh tinh tế; dành 600-700 cho subheadings
- Dùng Satoshi weight 500 ở 40-48px cho section display headlines — không bao giờ xuống dưới 40px
- Kết hợp primary CTA Ink Black (#0a0a0a) với hành động trong sản phẩm Ember Orange (#ea580c) để phân biệt rõ primary/secondary
- Dùng Geist Mono cho shortened URLs, click counts và bất kỳ hiển thị dữ liệu kỹ thuật nào
- Giữ section gaps ở 80px+ để duy trì nhịp điệu thoáng đãng, rộng rãi
- Dùng viền mảnh 1px Mist (#e5e5e5) cho tất cả divider và input resting states

### Don't
- Không dùng Ember Orange (#ea580c) cho nhiều hơn một hành động mỗi view — nó mất tác dụng khi lạm dụng
- Không áp dụng drop shadow nặng — hệ thống chỉ dùng lift nhẹ 1-6px
- Không dùng Satoshi cho body text hoặc UI labels — nó chỉ dùng cho display ở 40px+
- Không dùng nền màu đầy cho card — bề mặt chỉ trắng hoặc pha màu nhạt
- Không dùng radius 4px cho primary CTAs hoặc feature cards — 8px và 12px là mức tối thiểu của hệ thống cho element quan trọng
- Không thêm màu sắc mới — bảng màu là đơn sắc + cam + accent xanh lam
- Không dùng gradient trang trí trên bề mặt sản phẩm — gradient ấm chỉ dùng cho hero atmosphere

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#f5f5f5` | Nền trang với tông kem ấm — lớp nền mọi thứ đặt lên |
| 1 | Paper | `#ffffff` | Bề mặt card và product UI mockups — container trắng tinh |
| 2 | Elevated | `#ffffff` | Modal, popover, panel nổi với shadow elevation nhẹ |

## Elevation

- **Primary button:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- **Product card / link shortener:** `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- **Input focus ring:** `rgba(0, 0, 0, 0.1) 0px 0px 0px 4px`

## Imagery

Hình ảnh ưu tiên sản phẩm: trang web dùng UI mockups và ảnh chụp màn hình sản phẩm thay vì ảnh phong cách sống (lifestyle photography). Link-shortener card hero và product mockup branded-links là element thị giác chính. Logo khách hàng xuất hiện dưới dạng dấu hiệu đơn sắc nhỏ trong trust grid. Gradient trang trí duy nhất là lớp rửa ấm từ peach sang trắng phía sau hero section — mọi thứ khác nằm trên nền neutral canvas sạch. Không stock photography, không illustration, không 3D renders. Icon tối giản: icon nhỏ dẫn đầu trong section badges và icon link/chain nội dòng trong shortener UI.

## Layout

Trang dùng container căn giữa max-width ~1200px với padding ngoài rộng rãi. Hero là text căn giữa trên gradient ấm phai dần sang trắng — full-bleed gradient với content stack giới hạn. Bên dưới, các section xen kẽ giữa headline căn giữa + hình ảnh sản phẩm. Trust logo grid là bố cục 2×5 với khoảng cách đều. Feature sections dùng heading một cột căn giữa theo sau bởi product mockup card rộng. Navigation là top bar đơn giản với link ngang và auth buttons căn phải. Mật độ nội dung thấp — khoảng trống dọc lớn giữa các section (80px+).

## Agent Prompt Guide

**Quick Color Reference**
- text: #0a0a0a
- background: #f5f5f5 (canvas) / #ffffff (surfaces)
- border: #e5e5e5
- accent: #ea580c (Ember Orange)
- primary action: không có màu CTA riêng biệt
- secondary text: #6b7280

**3 Example Component Prompts**

Không quan sát thấy màu hành động chính riêng biệt; dùng các xử lý button trung tính đã trích xuất thay vì tự tạo màu CTA đầy.

2. Tạo một link shortener product card: bề mặt trắng, radius 12px, shadow 0px 4px 6px -1px rgba(0,0,0,0.1). Chứa một hàng với input field (fill trắng, viền 1px #d4d4d4, radius 8px, padding 10px 14px, Inter 14px) và Ember Orange (#ea580c) action button radius 8px với text trắng. Bên dưới, một hàng kết quả hiển thị shortened URL bằng Geist Mono 14px và click count trong badge pill nhạt.

3. Tạo một section với brand badge: tag dạng pill (radius 9999px) với nền #fef9c3 và text #171717, Inter weight 500 ở 12px, padding 2px 10px, có icon nhỏ dẫn đầu. Bên dưới, Satoshi 40px headline màu #0a0a0a, căn giữa, theo sau bởi Inter body 16px màu #6b7280.

## Similar Brands

- **Vercel** — Cùng thẩm mỹ đơn sắc (monochrome-first) với viền mảnh, primary CTAs gần đen và sử dụng màu sắc tối thiểu; cam kết chung với lưới 4px nhỏ gọn và typography Inter tiện ích
- **Linear** — Cách tiếp cận product-mockup-as-hero tương tự, CTAs dạng pill và cùng hệ thống phân cấp radius 8px/12px cho button và card
- **Cal.com** — Lớp rửa gradient ấm hero có thể so sánh, accent thương hiệu cam trên nền neutral canvas, và cùng headline display bo tròn phong cách Satoshi cho hero copy
- **Raycast** — Cùng nhấn mạnh ảnh chụp màn hình sản phẩm hơn ảnh phong cách sống, UI đơn sắc sạch với một accent màu sắc duy nhất, và Geist Mono cho dữ liệu kỹ thuật

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-cream: #f5f5f5;
  --color-paper-white: #ffffff;
  --color-ink-black: #0a0a0a;
  --color-charcoal: #171717;
  --color-graphite: #404040;
  --color-steel: #737373;
  --color-ash: #a3a3a3;
  --color-fog: #d4d4d4;
  --color-mist: #e5e5e5;
  --color-slate: #6b7280;
  --color-ember-orange: #ea580c;
  --color-ember-glow: #fb923c;
  --color-ember-deep: #7c2d12;
  --color-signal-blue: #3b82f6;
  --color-terminal-green: #22863a;
  --color-alert-red: #d32f2f;
  --color-warm-sunrise: #f97316;
  --gradient-warm-sunrise: linear-gradient(90deg, rgb(244, 149, 12), rgb(235, 92, 12));

  /* Typography — Font Families */
  --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.56;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.4;
  --text-display: 48px;
  --leading-display: 1.15;

  /* 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-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-236: 236px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 12px;
  --radius-pills: 9999px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 4px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.098) 0px 0px 0px 1px inset;

  /* Surfaces */
  --surface-canvas: #f5f5f5;
  --surface-paper: #ffffff;
  --surface-elevated: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-cream: #f5f5f5;
  --color-paper-white: #ffffff;
  --color-ink-black: #0a0a0a;
  --color-charcoal: #171717;
  --color-graphite: #404040;
  --color-steel: #737373;
  --color-ash: #a3a3a3;
  --color-fog: #d4d4d4;
  --color-mist: #e5e5e5;
  --color-slate: #6b7280;
  --color-ember-orange: #ea580c;
  --color-ember-glow: #fb923c;
  --color-ember-deep: #7c2d12;
  --color-signal-blue: #3b82f6;
  --color-terminal-green: #22863a;
  --color-alert-red: #d32f2f;
  --color-warm-sunrise: #f97316;

  /* Typography */
  --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.56;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.4;
  --text-display: 48px;
  --leading-display: 1.15;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-236: 236px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 4px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.098) 0px 0px 0px 1px inset;
}
```