# Compound

> Compound — Style Reference

## Prompt Content

```
# Compound — Style Reference
> Ink-on-paper wealth journal — một hệ thống editorial nhẹ nhàng, nơi một font chữ duy nhất ở một weight duy nhất làm tất cả, và màu sắc duy nhất là dải ribbon màu kem ở đầu trang.

**Theme:** light

Compound vận hành trên sự im lặng gần như tuyệt đối về màu sắc: một typeface (Monument Grotesk) ở một weight duy nhất là 400, bảng màu hoàn toàn achromatic, và đổ bóng mờ đến mức chỉ còn là bầu không khí chứ không phải chiều sâu. Các bề mặt gần như vô hình — canvas trắng, viền mảnh #e5e7eb, và card bo tròn 20px — nên hệ thống phân cấp được truyền tải hoàn toàn bằng sự chênh lệch kích thước mạnh mẽ (body 14px nhảy lên display 60–72px) và khoảng trắng rộng rãi. Ghi chú màu sắc duy nhất trong hệ thống là thanh thông báo màu kem ấm (#ffe9bf) nằm sát mép trên cùng. Các yếu tố tương tác được cố tình làm yên tĩnh: một nút pill gần như đen duy nhất và các link text có gạch chân mờ, trông giống như chữ được sắp chữ hơn là UI chrome. Card xem trước sản phẩm — với đổ bóng bốn lớp tinh tế và border-radius 20px — là khoảnh khắc duy nhất có độ dày thị giác trong bố cục, thứ duy nhất mắt có thể nắm bắt như một vật thể.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink | `#171717` | `--color-ink` | Text chính, nút pill đặc, điểm nhấn navigation, logo wordmark — mỏ neo tối duy nhất trong hệ thống trắng |
| Paper | `#ffffff` | `--color-paper` | Canvas trang, bề mặt card, nền xem trước sản phẩm — nền mặc định cho mọi nội dung |
| Graphite Hairline | `#e5e7eb` | `--color-graphite-hairline` | Mọi đường viền cấu trúc, divider, cạnh card, viền input — màu được dùng nhiều nhất trong hệ thống, định nghĩa mọi container |
| Vellum | `#f3f3f3` | `--color-vellum` | Lấp đầy bề mặt phụ, hiệu ứng hover nhẹ, nền panel cấp ba — xám nhạt nhất vẫn phân biệt được với trắng |
| Slate | `#6f6f6f` | `--color-slate` | Body text phụ, metadata, nét icon, nhãn tab — giọng text muted chính |
| Pewter | `#5e5e5e` | `--color-pewter` | Text trợ giúp, chú thích mô tả, micro-copy — tối hơn Slate cho text phụ được nhấn mạnh |
| Ash | `#a0a0a0` | `--color-ash` | Text cấp ba, màu link disabled, text placeholder — xám đọc được yên tĩnh nhất |
| Carbon | `#222222` | `--color-carbon` | SVG fill và stroke cho icon, yếu tố đồ họa 3D — gần như giống Ink nhưng dành riêng cho vector trang trí |
| Stone | `#c7c7c7` | `--color-stone` | Fill trang trí, điểm cuối gradient, lớp nền mờ — không bao giờ dùng cho text hoặc border |
| Cream Notice | `#ffe9bf` | `--color-cream-notice` | Nền thanh thông báo, điểm nhấn ấm duy nhất trong toàn bộ hệ thống — chỉ dùng cho dải quảng cáo trên cùng |

## Tokens — Typography

### Monument Grotesk — Typeface duy nhất cho mọi thứ từ caption 12px đến display headline 72px. Không bold, không italic, không light — một weight duy nhất làm mọi công việc biểu cảm. Bước nhảy kích thước mạnh mẽ từ subheading 18px trực tiếp lên heading 36px tạo ra một tỷ lệ editorial đặc biệt, nơi display type sừng sững trên body text. Line-height chặt ở kích thước display (1.00–1.11) cho phép chữ lớn xếp chồng thành các khối gần như đặc. · `--font-monument-grotesk`
- **Thay thế:** Inter hoặc General Sans làm lựa chọn miễn phí; Söhne nếu có bản quyền — tất cả đều là geometric grotesk với x-height và tính trung tính tương tự
- **Weights:** 400
- **Kích thước:** 12, 13, 14, 16, 18, 36, 48, 58, 60, 72
- **Line height:** 1.00 / 1.10 / 1.11 / 1.25 / 1.33 / 1.38 / 1.43 / 1.50 / 1.56 / 1.71
- **OpenType features:** `"kern"`
- **Vai trò:** Typeface duy nhất cho mọi thứ từ caption 12px đến display headline 72px. Không bold, không italic, không light — một weight duy nhất làm mọi công việc biểu cảm. Bước nhảy kích thước mạnh mẽ từ subheading 18px trực tiếp lên heading 36px tạo ra một tỷ lệ editorial đặc biệt, nơi display type sừng sững trên body text. Line-height chặt ở kích thước display (1.00–1.11) cho phép chữ lớn xếp chồng thành các khối gần như đặc.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.38 | — | `--text-subheading` |
| heading-sm | 36px | 1.25 | — | `--text-heading-sm` |
| heading | 48px | 1.11 | — | `--text-heading` |
| heading-lg | 60px | 1.1 | — | `--text-heading-lg` |
| display | 72px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** thoải mái

### 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` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 112 | 112px | `--spacing-112` |
| 128 | 128px | `--spacing-128` |
| 160 | 160px | `--spacing-160` |
| 176 | 176px | `--spacing-176` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 20px |
| icons | 9999px |
| buttons | 9999px |
| list-items | 28px |
| large-cards | 24px |
| small-cards | 8px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| xl | `rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.0...` | `--shadow-xl` |
| xl-2 | `rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 1...` | `--shadow-xl-2` |
| xl-3 | `rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 2...` | `--shadow-xl-3` |

### Layout

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

## Components

### Announcement Bar
**Vai trò:** Dải quảng cáo đầu trang

Nền full-bleed #ffe9bf, text #171717 căn giữa ở 12–14px Monument Grotesk, padding dọc 7–8px. Chứa một thông điệp text và nút pill 'Read more' với nền #171717 và text trắng. Nằm sát mép trên viewport, không có border hoặc shadow.

### Top Navigation
**Vai trò:** Navigation chính của trang

Nền trắng, không border hoặc shadow. Wordmark 'compound' bằng #171717 ở 18–20px căn trái. Các link nav căn giữa ở 14px #171717 với khoảng cách ngang 20px. Bên phải: link text 'Sign in' và nút pill đặc (#171717, text trắng, radius 9999px, padding ngang 16px).

### Filled Pill Button
**Vai trò:** Kích hoạt hành động chính (ví dụ: 'Get started')

Nền #171717, text trắng, Monument Grotesk 14px, border-radius 9999px, padding ngang 16px, padding dọc 8–9px. Không border, không shadow. Nút đặc duy nhất trong hệ thống.

### Ghost Text Link
**Vai trò:** Navigation nội dòng, hành động phụ

Không nền, không border, text #171717 ở 14px Monument Grotesk với gạch chân 1px. Hover có thể tối thành #000000. Dùng cho mục nav, link footer, và tham chiếu nội dòng.

### Product Preview Card
**Vai trò:** Ảnh chụp dashboard nhúng trong hero

Bề mặt trắng (#ffffff), border-radius 20px, border 1px #e5e7eb, đổ bóng mềm bốn lớp (rgba(207,207,207, 0.01→0.1) ở khoảng cách 8–132px). Chứa một mockup UI dashboard đầy đủ. Yếu tố duy nhất có độ nâng thấy được trong hệ thống.

### Feature Service Card
**Vai trò:** Tile danh mục dịch vụ trong hàng feature

Nền trong suốt hoặc #f3f3f3, không border, radius 20px. Chứa một chỉ báo icon nhỏ màu tím (hiển thị trong dữ liệu như điểm nhấn màu), nhãn 14–16px #171717, và mô tả 12–14px #6f6f6f. Sắp xếp trong hàng 4 cột.

### Publication Logo Card
**Vai trò:** Trưng bày báo chí

Nền #f3f3f3, radius 20px, không border, không shadow. Chứa logo thương hiệu căn giữa (Y Combinator, Axios, InvestmentNews) ở thang xám. Sắp xếp trong hàng 3 cột với nhãn 'featured in' căn trái.

### Section Divider
**Vai trò:** Chuyển tiếp section với nhãn

Đường ngang mảnh 1px #e5e7eb trải dài chiều rộng nội dung, với nhãn 14px #6f6f6f căn giữa (ví dụ: 'Our approach') nằm trên đường kẻ như một điểm ngắt trong nét vẽ.

### Hero Display Headline
**Vai trò:** Headline chính của trang

60–72px Monument Grotesk weight 400, #171717, line-height 1.00–1.10, căn giữa. Một câu duy nhất được ngắt thành hai dòng, không bao giờ quá 12–14 từ tổng cộng. Không subtitle hoặc eyebrow — headline đứng một mình.

### Circular Icon Container
**Vai trò:** Wrapper icon cho chỉ báo UI

border-radius 9999px, đường kính 32–40px, nền #f3f3f3 hoặc trắng, chứa icon đơn sắc 16–20px. Dùng cho icon feature, chỉ báo tab, và marker biểu đồ.

### Stats Metric Row
**Vai trò:** Hiển thị dữ liệu hiệu suất

Hàng nội dòng với nhãn 12px #6f6f6f (ví dụ: 'Projected net worth 2029') phía trên giá trị 24–36px #171717 (ví dụ: '$16.2M'). Chỉ báo thay đổi dùng icon mũi tên lên màu xanh nhỏ — nơi duy nhất điểm nhấn màu không phải xám xuất hiện trong UI sản phẩm.

## Do's and Don'ts

### Nên
- Chỉ dùng Monument Grotesk ở weight 400 — không bao giờ thêm bold, italic, hoặc typeface thứ hai
- Dùng border-radius 9999px cho mọi button, tag, và icon container
- Dùng border-radius 20px cho mọi card và content container
- Dùng #e5e7eb cho mọi border và divider — không bao giờ tối hơn #dbdbdb
- Cách section bằng khoảng trống dọc 80px để khoảng trắng truyền tải hệ thống phân cấp
- Giữ bảng màu hoàn toàn achromatic — màu duy nhất là #ffe9bf cho thanh thông báo
- Dùng đổ bóng mềm bốn lớp với độ mờ 0.01–0.10 cho bất kỳ yếu tố nào có độ nâng

### Không nên
- Không bao giờ thêm màu nhấn chromatic bên ngoài thanh thông báo kem
- Không bao giờ dùng typeface khác ngoài Monument Grotesk hoặc thêm weight thứ hai
- Không bao giờ dùng góc nhọn trên card hoặc button — mọi góc đều được bo tròn
- Không bao giờ dùng đổ bóng nặng hoặc tối — độ mờ phải dưới 0.10
- Không bao giờ dùng màu nền khác ngoài #ffffff, #f3f3f3, hoặc #ffe9bf cho toàn bộ bề mặt
- Không bao giờ giảm khoảng cách section dưới 64px — khoảng trắng chính là hệ thống phân cấp
- Không bao giờ thêm border trang trí, outline, hoặc nét màu vào text hoặc heading

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Page Canvas | `#ffffff` | Nền trang mặc định, mặt đất cho mọi nội dung |
| 1 | Vellum Surface | `#f3f3f3` | Panel phụ, card logo ấn phẩm, hiệu ứng hover nhẹ |
| 2 | Graphite Edge | `#e5e7eb` | Border và divider — đường cấu trúc giữa các bề mặt |
| 3 | Stone Accent | `#c7c7c7` | Fill vector trang trí, điểm cuối gradient, chiều sâu không trọng lượng |
| 4 | Cream Notice | `#ffe9bf` | Thanh thông báo — bề mặt màu ấm duy nhất, luôn ở trên cùng |

## Elevation

- **Product Preview Card:** `rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 207, 207, 0.05) 0px 74px 44px 0px, rgba(207, 207, 207, 0.09) 0px 33px 33px 0px, rgba(207, 207, 207, 0.1) 0px 8px 18px 0px`
- **Link hover lift:** `rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.02) 0px 72px 43px 0px, rgba(0, 0, 0, 0.03) 0px 32px 32px 0px, rgba(0, 0, 0, 0.04) 0px 8px 18px 0px`
- **List container:** `rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 194, 194, 0.05) 0px 94px 57px 0px, rgba(194, 194, 194, 0.09) 0px 42px 42px 0px, rgba(194, 194, 194, 0.1) 0px 10px 23px 0px`

## Imagery

Hình ảnh được kiềm chế và mang phong cách editorial. Hình ảnh đặc trưng là một dạng xoắn ốc/ribbon 3D lớn màu xám trong suốt nổi phía sau text hero — được render bằng gradient #c7c7c7 đến #8f8f8f, nó hoạt động như chiều sâu khí quyển hơn là một vật thể cụ thể. Hình ảnh sản phẩm duy nhất là ảnh chụp UI dashboard nhúng được đóng khung trong Product Preview Card. Logo ấn phẩm (Y Combinator, Axios, InvestmentNews) xuất hiện ở thang xám trên card Vellum. Không có nhiếp ảnh, không có hình ảnh lối sống, không có hình người — hệ thống giao tiếp thông qua typography và dạng 3D trừu tượng một mình.

## Layout

Trang tuân theo bố cục căn giữa, max-width-contained ở ~1200px. Hero là một display headline căn giữa duy nhất (60–72px) không có eyebrow hoặc subheading, được đặt phía trên đồ họa 3D trong suốt lớn. Một Product Preview Card nằm căn giữa bên dưới hero. Bên dưới fold, một hàng 4 cột card dịch vụ trải dài chiều rộng, tiếp theo là một hàng 3 cột logo ấn phẩm. Các section được phân cách bằng khoảng trống dọc 80px hoặc đường divider mảnh với nhãn căn giữa. Navigation là một thanh sạch sẽ — wordmark trái, link trung tâm, nút hành động phải. Nhịp điệu tổng thể là xếp chồng dọc với không gian thở rộng rãi; không sidebar, không bố cục bất đối xứng, không nội dung chồng lấn.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #171717
- background: #ffffff
- border: #e5e7eb
- accent: #ffe9bf (chỉ thanh thông báo)
- secondary surface: #f3f3f3
- primary action: #171717 (hành động đặc)

**Ví dụ Component Prompts**

1. **Hero Section**: Nền trắng (#ffffff). Headline căn giữa ở 72px Monument Grotesk weight 400, #171717, line-height 1.00. Đồ họa ribbon 3D xám trong suốt trong gradient #c7c7c7 đến #8f8f8f nổi phía sau text. Một Product Preview Card (trắng, radius 20px, border 1px #e5e7eb, shadow mềm bốn lớp) nằm căn giữa bên dưới headline hiển thị mockup dashboard.

2. **Feature Service Card Row**: Bốn card trong một hàng. Mỗi card có nền #f3f3f3, radius 20px, không border, padding 24px. Chứa nhãn 14px #171717 và mô tả 12px #6f6f6f bên dưới. Khoảng cách 16px giữa các card. Section nằm giữa hai khoảng trống dọc 80px.

3. **Filled Pill Button**: Nền #171717, text trắng, Monument Grotesk 14px weight 400, border-radius 9999px, padding ngang 16px, padding dọc 8px. Không border, không shadow. Dùng cho hành động chính duy nhất trên bất kỳ trang nào.

4. **Section Divider**: Đường ngang 1px #e5e7eb trải dài chiều rộng nội dung (~1200px). Nhãn 14px #6f6f6f căn giữa nằm trên đường kẻ, phá vỡ nét vẽ. Padding dọc 64px phía trên và phía dưới.

5. **Announcement Bar**: Dải nền full-bleed #ffe9bf ở đầu viewport. Text #171717 căn giữa ở 14px Monument Grotesk với một nút pill đặc nhỏ (#171717, text trắng, radius 9999px, padding dọc 8px). Padding dọc 7px. Không border, không shadow, nằm sát mép trên.

## Similar Brands

- **Wealthfront** — Cùng bảng màu achromatic với một CTA tối duy nhất và khoảng trắng rộng rãi; cả hai đều xem quản lý tài sản như một sản phẩm editorial yên tĩnh
- **Mercury** — Typography grotesque một weight giống hệt, chủ nghĩa tối giản canvas trắng, và nút tối hình pill là màu tương tác duy nhất
- **Public.com** — Giao diện đầu tư đơn sắc dựa vào kích thước chữ và khoảng trắng cho hệ thống phân cấp thay vì màu nhấn
- **Modern Treasury** — Cùng thẩm mỹ editorial ấn phẩm tài chính với bố cục max-width căn giữa, viền mảnh, và card radius 20px

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #171717;
  --color-paper: #ffffff;
  --color-graphite-hairline: #e5e7eb;
  --color-vellum: #f3f3f3;
  --color-slate: #6f6f6f;
  --color-pewter: #5e5e5e;
  --color-ash: #a0a0a0;
  --color-carbon: #222222;
  --color-stone: #c7c7c7;
  --color-cream-notice: #ffe9bf;

  /* Typography — Font Families */
  --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.38;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.25;
  --text-heading: 48px;
  --leading-heading: 1.11;
  --text-heading-lg: 60px;
  --leading-heading-lg: 1.1;
  --text-display: 72px;
  --leading-display: 1;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-128: 128px;
  --spacing-160: 160px;
  --spacing-176: 176px;

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

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-cards: 20px;
  --radius-icons: 9999px;
  --radius-buttons: 9999px;
  --radius-list-items: 28px;
  --radius-large-cards: 24px;
  --radius-small-cards: 8px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.02) 0px 72px 43px 0px, rgba(0, 0, 0, 0.03) 0px 32px 32px 0px, rgba(0, 0, 0, 0.04) 0px 8px 18px 0px;
  --shadow-xl-2: rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 194, 194, 0.05) 0px 94px 57px 0px, rgba(194, 194, 194, 0.09) 0px 42px 42px 0px, rgba(194, 194, 194, 0.1) 0px 10px 23px 0px;
  --shadow-xl-3: rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 207, 207, 0.05) 0px 74px 44px 0px, rgba(207, 207, 207, 0.09) 0px 33px 33px 0px, rgba(207, 207, 207, 0.1) 0px 8px 18px 0px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-vellum-surface: #f3f3f3;
  --surface-graphite-edge: #e5e7eb;
  --surface-stone-accent: #c7c7c7;
  --surface-cream-notice: #ffe9bf;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #171717;
  --color-paper: #ffffff;
  --color-graphite-hairline: #e5e7eb;
  --color-vellum: #f3f3f3;
  --color-slate: #6f6f6f;
  --color-pewter: #5e5e5e;
  --color-ash: #a0a0a0;
  --color-carbon: #222222;
  --color-stone: #c7c7c7;
  --color-cream-notice: #ffe9bf;

  /* Typography */
  --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.38;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.25;
  --text-heading: 48px;
  --leading-heading: 1.11;
  --text-heading-lg: 60px;
  --leading-heading-lg: 1.1;
  --text-display: 72px;
  --leading-display: 1;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-128: 128px;
  --spacing-160: 160px;
  --spacing-176: 176px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.02) 0px 72px 43px 0px, rgba(0, 0, 0, 0.03) 0px 32px 32px 0px, rgba(0, 0, 0, 0.04) 0px 8px 18px 0px;
  --shadow-xl-2: rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 194, 194, 0.05) 0px 94px 57px 0px, rgba(194, 194, 194, 0.09) 0px 42px 42px 0px, rgba(194, 194, 194, 0.1) 0px 10px 23px 0px;
  --shadow-xl-3: rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 207, 207, 0.05) 0px 74px 44px 0px, rgba(207, 207, 207, 0.09) 0px 33px 33px 0px, rgba(207, 207, 207, 0.1) 0px 8px 18px 0px;
}
```