# Spotify

> # Spotify — Style Reference

**Spotify** — Giao diện tối giản, tối ưu cho âm nhạc: nền tối, typography sans-serif đậm, accent màu xanh lá cây.

## Prompt Content

```
# Spotify — Style Reference
> Cửa hàng đĩa tối om lúc nửa đêm — mọi bề mặt lùi dần để ảnh bìa album có thể phát sáng.

**Theme:** dark

Spotify hoạt động như một rạp chiếu phim tối dành cho âm nhạc: nền gần như đen tuyền để ảnh bìa album và ảnh nghệ sĩ cung cấp toàn bộ màu sắc, trong khi phần chrome gần như đơn sắc để giữ sự tập trung vào nội dung. Giao diện gọn nhẹ, giàu thông tin, được xây dựng xung quanh các hàng ngang cuộn (horizontal scrolling rails) gồm thẻ album vuông và chân dung nghệ sĩ hình tròn. Một màu xanh lá đặc trưng (#1ed760) tạo điểm nhấn cho các hành động chính, trạng thái phát và nhận diện thương hiệu, trong khi gradient tím-xanh chỉ xuất hiện trong banner quảng cáo Premium. Nút bấm có dạng pill (9999px), thẻ có border-radius 6px khiêm tốn cùng drop shadow rộng, và typography là sans-serif hình học chặt chẽ, nói ở âm lượng trò chuyện — không bao giờ la hét, luôn luôn hữu dụng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Void Black | `#000000` | `--color-void-black` | Canvas chính, nền trang — lớp sâu nhất trong ngăn xếp bề mặt tối |
| Obsidian | `#121212` | `--color-obsidian` | Bề mặt thẻ, panel nổi, nền modal — một bước lên từ canvas |
| Graphite | `#1f1f1f` | `--color-graphite` | Control nâng cao, bề mặt hover, nền nút filled — tầng bề mặt tương tác |
| Ash Gray | `#333333` | `--color-ash-gray` | Viền input, đường phân cách nhẹ, đường viền control không hoạt động |
| Steel Mist | `#767676` | `--color-steel-mist` | Text mờ, nav phụ, nhãn bị vô hiệu — text mờ dần vào nền |
| Cloud Gray | `#b3b3b3` | `--color-cloud-gray` | Body text phụ, metadata, timestamp — dễ đọc nhưng không bao giờ cạnh tranh với nội dung |
| Pure White | `#ffffff` | `--color-pure-white` | Text chính, heading, icon fill sáng, nút pill fill — phần tử có độ tương phản cao nhất trên nền tối |
| Spotify Green | `#1ed760` | `--color-spotify-green` | Màu xanh lá cho nền highlight, dải trang trí và điểm nhấn mềm phía sau nội dung. Không nâng cấp thành màu CTA chính |
| Premium Magenta | `#af2896` | `--color-premium-magenta` | Điểm neo gradient cho banner quảng cáo Premium, bề mặt upsell đăng ký |
| Premium Cobalt | `#509bf5` | `--color-premium-cobalt` | Điểm kết thúc gradient cho banner quảng cáo Premium, tính năng callout trên màn hình đăng ký |
| Amber Glow | `#a16b1b` | `--color-amber-glow` | Hơi ấm trang trí — ảnh bìa album đôi khi mang dải tông màu này |

## Tokens — Typography

### SpotifyMixUI — Primary UI typeface — xử lý tất cả body copy, navigation, button, metadata và heading nhỏ. Weight 400 dùng cho body và label, weight 600 xuất hiện trong tab header và metadata được nhấn mạnh, weight 700 làm neo cho tiêu đề phần. Dải kích thước 4px (11–16px) giữ toàn bộ giao diện ở âm lượng trò chuyện, không bao giờ mang tính editorial. Thay thế: Inter, IBM Plex Sans hoặc DM Sans — các lựa chọn miễn phí có độ ấm hình học tương tự. · `--font-spotifymixui`
- **Thay thế:** Inter
- **Weights:** 400, 600, 700
- **Kích thước:** 11px, 12px, 13px, 14px, 16px
- **Line height:** 1.20, 1.33, 1.50
- **Vai trò:** Primary UI typeface — xử lý tất cả body copy, navigation, button, metadata và heading nhỏ. Weight 400 dùng cho body và label, weight 600 xuất hiện trong tab header và metadata được nhấn mạnh, weight 700 làm neo cho tiêu đề phần. Dải kích thước 4px (11–16px) giữ toàn bộ giao diện ở âm lượng trò chuyện, không bao giờ mang tính editorial. Thay thế: Inter, IBM Plex Sans hoặc DM Sans — các lựa chọn miễn phí có độ ấm hình học tương tự.

### SpotifyMixUITitle — Rail and section headings — xử lý bold 24px cho các mục như 'Trending songs', 'Popular artists', v.v. — đây là khoảnh khắc typographic duy nhất vượt lên trên kích thước body. Thay thế nên là một geometric grotesque có x-height cao và stroke contrast đồng đều. · `--font-spotifymixuititle`
- **Thay thế:** Inter
- **Weights:** 700
- **Kích thước:** 24px
- **Line height:** 1.20
- **Vai trò:** Rail and section headings — xử lý bold 24px cho các mục như 'Trending songs', 'Popular artists', v.v. — đây là khoảnh khắc typographic duy nhất vượt lên trên kích thước body. Thay thế nên là một geometric grotesque có x-height cao và stroke contrast đồng đều.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|-------------|----------------|-------|-------------|
| caption | 11px | 1.33 | — | `--text-caption` |
| body | 14px | 1.5 | — | `--text-body` |
| heading | 24px | 1.2 | — | `--text-heading` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** compact

### 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` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 172 | 172px | `--spacing-172` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 6px |
| inputs | 4px |
| buttons | 9999px |
| artistImages | 9999px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| lg | `rgba(0, 0, 0, 0.5) 0px 8px 24px 0px` | `--shadow-lg` |
| subtle | `rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0...` | `--shadow-subtle` |

### Layout

- **Section gap:** 32px
- **Card padding:** 12px
- **Element gap:** 12px

## Components

### Pill Button — Green Primary
**Vai trò:** Nút hành động có độ nhấn mạnh cao

Pill filled với nền #1ed760, text #000000, weight 700 ở 14px. Border-radius 9999px, padding dọc 12px / ngang 32px. Không viền. Dùng cho 'Log in' và các hành động xác nhận. Là nút màu sắc duy nhất trong hệ thống.

### Pill Button — White Secondary
**Vai trò:** Hành động có độ nhấn mạnh trung bình

Pill filled trắng (#ffffff) với text #000000, weight 700 ở 14px. Radius 9999px, padding 12px 32px. Hoạt động như CTA phụ đi kèm với nút xanh chính — ví dụ: 'Sign up free' trong banner Premium. Tương phản cao trên nền tối.

### Pill Button — Ghost Outline
**Vai trò:** Hành động có độ nhấn mạnh thấp

Fill trong suốt với viền trắng 1px ở độ mờ giảm, text trắng. Radius 9999px. Dùng cho mục nav phụ và CTA 'Create playlist' / 'Browse podcasts' trong sidebar.

### Album Card
**Vai trò:** Ô nội dung cho album, single, playlist

Ảnh bìa album vuông 1:1 trên nền #121212, border-radius 6px, shadow 0px 8px 24px rgba(0,0,0,0.5). Tiêu đề #ffffff ở 16px weight 400 bên dưới ảnh; tên nghệ sĩ/phụ đề #b3b3b3 ở 14px. Padding 12px xung quanh khối text. Không viền.

### Artist Card
**Vai trò:** Chân dung nghệ sĩ hình tròn kèm tên

Ảnh 1:1 được cắt thành hình tròn hoàn chỉnh (radius 9999px) trên nền trong suốt. Tên nghệ sĩ #ffffff ở 16px bên dưới, nhãn vai trò ('Artist') #b3b3b3 ở 14px. Không có bề mặt thẻ hay shadow — ảnh tròn nổi trực tiếp trên canvas void.

### Sidebar Library Panel
**Vai trò:** Container navigation cố định bên trái

Nền #000000, cột full-height, padding ngang 8px. Chứa header 'Your Library' với biểu tượng +, sau đó là danh sách cuộn các lối tắt playlist/nghệ sĩ. Không có viền rõ ràng giữa sidebar và nội dung chính — sự phân cách chỉ dựa vào tầng bề mặt.

### Playlist Prompt Card
**Vai trò:** Call-out onboarding trong thư viện

Hình chữ nhật bo tròn radius 6px trên nền #121212 với shadow 0 8px 24px. Heading đậm #ffffff ở 16px, copy hỗ trợ #b3b3b3 ở 14px và nút ghost pill bên dưới. Padding trong 12px. Mẫu ví dụ: 'Create your first playlist' và 'Let's find some podcasts to follow'.

### Top Navigation Bar
**Vai trò:** Header toàn cục

Thanh ngang với nền #000000. Cụm trái: nút home icon, sau đó là trường tìm kiếm. Cụm phải: link nav dạng text (Premium, Support, Download) ở 14px weight 600 trong #b3b3b3, dấu phân cách dọc, link 'Install App', nút ghost 'Sign up' và pill xanh 'Log in'. Trường tìm kiếm là #1f1f1f với radius 9999px.

### Search Field
**Vai trò:** Input tìm kiếm toàn cục

Nền #1f1f1f, radius 9999px (dạng pill), placeholder text #ffffff ở độ mờ thấp, 14px SpotifyMixUI. Mở rộng khi focus. Icon tìm kiếm căn trái trong #b3b3b3. Không viền rõ ràng; sự khác biệt tầng bề mặt là dấu hiệu phân cách duy nhất.

### Content Rail Header
**Vai trò:** Thanh tiêu đề phần

Tên phần #ffffff ở 24px weight 700 (SpotifyMixUITitle), link 'Show all' căn phải trong #b3b3b3 ở 14px weight 700. Padding dọc 12px phía trên nội dung rail. Không nền hay viền.

### Horizontal Content Rail
**Vai trò:** Hàng thẻ cuộn ngang

Flex row gồm các thẻ album hoặc nghệ sĩ với column gap 16px. Tràn cuộn ngang. Thẻ có chiều rộng cố định (album ~180px, nghệ sĩ ~180px hình tròn) với radius 6px cho hình vuông và full circle cho chân dung. Không có scrollbar hiển thị.

### Premium Banner
**Vai trò:** Quảng cáo đăng ký toàn chiều rộng

Dải dính phía dưới với linear-gradient 90deg từ #af2896 đến #509bf5. Khối text trái: 'Preview of Spotify' bold trắng + copy mô tả trắng ở độ mờ giảm. Phải: nút pill trắng 'Sign up free' ở radius 9999px. Không viền hay shadow — gradient TỰ NÓ là trọng lượng thị giác.

### Language Selector
**Vai trò:** Control tiện ích footer

Nút pill ghost ở radius 9999px, viền #ffffff, icon quả địa cầu + nhãn 'English' trong #ffffff ở 14px weight 700. Padding dọc 8px / ngang 12px. Nằm ở góc dưới-bên trái của sidebar, phía trên banner Premium.

## Do's and Don'ts

### Do
- Dùng border-radius 9999px cho mọi button, tag và trường tìm kiếm — hình dạng pill là bắt buộc cho nhận diện của Spotify.
- Áp dụng radius 6px cho tất cả thẻ nội dung hình vuông (album, playlist) và 9999px cho chân dung nghệ sĩ hình tròn — không bao giờ trộn lẫn radius trong cùng một loại thẻ.
- Dành #1ed760 cho hành động quan trọng nhất trên mỗi màn hình — log in, play, confirm. Không bao giờ dùng cho link phụ, metadata hay yếu tố trang trí.
- Giữ tất cả text trong khoảng 11px đến 24px. Hệ thống gọn nhẹ; không body copy nào vượt quá 16px, và chỉ heading phần mới đạt 24px.
- Dùng #000000 cho canvas trang, #121212 cho thẻ nội dung và #1f1f1f cho control tương tác — duy trì hệ thống phân cấp ba tầng bề mặt này trên mọi màn hình.
- Áp dụng shadow 0px 8px 24px rgba(0,0,0,0.5) chỉ cho thẻ nội dung nâng lên khỏi canvas, không bao giờ cho navigation, button hay input.
- Để ảnh bìa album và ảnh nghệ sĩ cung cấp toàn bộ màu sắc trong giao diện. Phần chrome nên giữ đơn sắc với #ffffff và #b3b3b3 là hai màu text duy nhất.

### Don't
- Không giới thiệu màu nhấn mới. Toàn bộ hệ thống chạy trên một màu xanh lá (#1ed760) cộng với gradient magenta-cobalt cho quảng cáo Premium.
- Không dùng góc nhọn (<4px radius) trên bất kỳ phần tử tương tác nào. Pill và hình vuông bo tròn 6px là hình dạng duy nhất được chấp nhận.
- Không đặt body text dưới 11px hoặc trên 16px. Dải kích thước 4px là có chủ đích và gọn nhẹ.
- Không dùng #1ed760 cho trạng thái hover trên nút trắng hoặc tối — xanh lá chỉ dành riêng cho fill hành động chính, không bao giờ là chỉ báo trạng thái.
- Không áp dụng gradient magenta-cobalt Premium bên ngoài ngữ cảnh quảng cáo/đăng ký. Nó được dành riêng cho các khoảnh khắc upsell.
- Không dùng nền trắng hoặc sáng cho bất kỳ bề mặt nào. Hệ thống ưu tiên tối; ngay cả thẻ nâng cao cũng ở #1f1f1f hoặc thấp hơn.
- Không thêm nhiều lớp shadow, glow màu hay hiệu ứng neumorphic. Drop shadow rgba(0,0,0,0.5) đơn lẻ là xử lý độ cao duy nhất.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Void Canvas | `#000000` | Nền trang, sidebar trái, khu vực footer |
| 1 | Obsidian Card | `#121212` | Thẻ album, thẻ playlist prompt, bề mặt nội dung |
| 2 | Graphite Control | `#1f1f1f` | Thanh tìm kiếm, nút nâng cao, trạng thái hover |

## Elevation

- **Album / Playlist Card:** `0px 8px 24px 0px rgba(0, 0, 0, 0.5)`

## Imagery

Hình ảnh CHÍNH LÀ sản phẩm. Giao diện là khung cho nội dung người dùng tiêu thụ: bìa album vuông, chân dung nghệ sĩ tròn và ảnh bìa playlist. Xử lý sạch sẽ, không cắt xén (ngoại trừ cắt thành vuông hoặc tròn), không filter hay overlay trên ảnh nội dung. Shadow thẻ (0px 8px 24px rgba(0,0,0,0.5)) tạo độ nâng chiều cho artwork khỏi canvas void. Không có illustration, đồ họa trừu tượng hay ảnh lifestyle trong chính UI — trang là một gallery. Icon tối giản, đơn sắc, outline hoặc filled trắng ở độ mờ giảm. Yếu tố đồ họa có thương hiệu duy nhất là banner gradient Premium.

## Layout

Trang sử dụng bố cục hai cột: sidebar trái cố định (~340px) cho 'Your Library' và navigation, và khu vực nội dung chính linh hoạt cuộn độc lập. Khu vực chính được tổ chức thành các hàng ngang xếp chồng dọc — mỗi rail là một heading phần (24px căn trái, 'Show all' căn phải) theo sau là một hàng thẻ cuộn ngang. Thẻ có chiều rộng đồng nhất trong mỗi rail (album: 180px vuông, nghệ sĩ: 180px tròn). Khoảng cách giữa các rail là 32px; giữa các thẻ trong một rail là 16px. Thanh trên cùng là dải navigation toàn chiều rộng với cụm icon/tìm kiếm bên trái và link text/nút hành động bên phải. Banner gradient Premium toàn chiều rộng dính ở cuối viewport. Không có dấu phân cách phần, thay đổi màu nền hay dấu hiệu thị giác giữa các rail — bề mặt giữ đồng nhất #000000, và hệ thống phân cấp đến từ typography và spacing.

## Agent Prompt Guide

Tham khảo màu nhanh:
- canvas: #000000
- surface: #121212
- elevated: #1f1f1f
- border: #ffffff (ở độ mờ thấp, ~5-10%)
- text primary: #ffffff
- text secondary: #b3b3b3
- primary action: #1f1f1f (filled action)
- premium gradient: linear-gradient(90deg, #af2896, #509bf5)

Ví dụ Prompt Component:

1. Album Card: Hình vuông 180px với nền #121212, border-radius 6px, shadow 0px 8px 24px rgba(0,0,0,0.5). Ảnh bìa album vuông lấp đầy thẻ, không có padding trong. Bên dưới ảnh: tên bài hát #ffffff ở 16px SpotifyMixUI weight 400, tên nghệ sĩ #b3b3b3 ở 14px. Padding 12px xung quanh khối text.

2. Tạo Primary Action Button: Nền #1f1f1f, text #ffffff, radius 9999px, padding pill gọn nhẹ. Dùng xử lý filled này cho CTA chính.

3. Artist Portrait Card: Hình tròn đường kính 180px (radius 9999px) với ảnh nghệ sĩ 1:1, không nền, không shadow, không viền. Bên dưới: tên nghệ sĩ #ffffff ở 16px, nhãn 'Artist' #b3b3b3 ở 14px.

4. Search Field: Nền #1f1f1f, radius 9999px (pill), placeholder #ffffff ở độ mờ 40% ở 14px, icon tìm kiếm căn trái trong #b3b3b3. Mở rộng chiều rộng khi focus. Không viền.

5. Premium Banner: Dải toàn chiều rộng, nền linear-gradient(90deg, #af2896, #509bf5). Trái: 'Preview of Spotify' trong #ffffff ở 14px weight 700, phụ đề #ffffff ở độ mờ 60% ở 12px. Phải: nút pill trắng ở radius 9999px, text #000000 ở 14px weight 700, padding 12px 32px.

## Chromatic Discipline

Giao diện Spotify là một vật chứa cho nội dung đầy màu sắc. Phần chrome UI được cố tình làm bão hòa đến gần đơn sắc để ảnh bìa album, ảnh nghệ sĩ và ảnh bìa playlist có thể cung cấp toàn bộ năng lượng thị giác. Nếu một màn hình cảm thấy quá xám, câu trả lời là hình ảnh nội dung tốt hơn, chứ không phải thêm màu UI. Những lối thoát màu sắc duy nhất khỏi quy tắc này là: (1) màu xanh lá #1ed760 duy nhất cho hành động chính, (2) gradient magenta-cobalt cho banner upsell Premium và (3) chỉ báo 'now playing' màu xanh lá. Mọi thứ khác là từ #000 đến #ffffff.

## Similar Brands

- **Apple Music** — Cùng mô hình duyệt media ưu tiên tối với horizontal content rails, thẻ album vuông và chrome gần đơn sắc để artwork cung cấp màu sắc
- **YouTube Music** — Home feed dạng rail giống hệt với ảnh nghệ sĩ tròn và ô album vuông, nền tối và search/control dạng pill
- **Tidal** — Cùng giao diện tối tương phản cao với màu sắc do ảnh bìa album dẫn dắt và hàng ngang cuộn gồm ô nội dung vuông
- **SoundCloud** — Canvas tối, lưới thẻ dày đặc gọn nhẹ, pill navigation và giao diện gần đơn sắc coi artwork do người dùng tải lên là nội dung thị giác chính

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void-black: #000000;
  --color-obsidian: #121212;
  --color-graphite: #1f1f1f;
  --color-ash-gray: #333333;
  --color-steel-mist: #767676;
  --color-cloud-gray: #b3b3b3;
  --color-pure-white: #ffffff;
  --color-spotify-green: #1ed760;
  --color-premium-magenta: #af2896;
  --color-premium-cobalt: #509bf5;
  --color-amber-glow: #a16b1b;

  /* Typography — Font Families */
  --font-spotifymixui: 'SpotifyMixUI', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-spotifymixuititle: 'SpotifyMixUITitle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.33;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-heading: 24px;
  --leading-heading: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --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-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-172: 172px;

  /* Layout */
  --section-gap: 32px;
  --card-padding: 12px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-2xl: 16px;
  --radius-full: 500px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 6px;
  --radius-inputs: 4px;
  --radius-buttons: 9999px;
  --radius-artistimages: 9999px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.5) 0px 8px 24px 0px;
  --shadow-subtle: rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset;

  /* Surfaces */
  --surface-void-canvas: #000000;
  --surface-obsidian-card: #121212;
  --surface-graphite-control: #1f1f1f;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void-black: #000000;
  --color-obsidian: #121212;
  --color-graphite: #1f1f1f;
  --color-ash-gray: #333333;
  --color-steel-mist: #767676;
  --color-cloud-gray: #b3b3b3;
  --color-pure-white: #ffffff;
  --color-spotify-green: #1ed760;
  --color-premium-magenta: #af2896;
  --color-premium-cobalt: #509bf5;
  --color-amber-glow: #a16b1b;

  /* Typography */
  --font-spotifymixui: 'SpotifyMixUI', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-spotifymixuititle: 'SpotifyMixUITitle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.33;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-heading: 24px;
  --leading-heading: 1.2;

  /* 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-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-172: 172px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-2xl: 16px;
  --radius-full: 500px;
  --radius-full-2: 9999px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.5) 0px 8px 24px 0px;
  --shadow-subtle: rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset;
}
```