# Aira

> # Aira — Style Reference

## Prompt Content

```
# Aira — Style Reference
> Sunday broadsheet lúc nửa đêm — ảnh ấm áp, chữ in mực, UI thì thầm.

**Theme:** light

Aira sử dụng ngôn ngữ editorial-monochrome: không khí nhiếp ảnh ấm áp trên nền UI gần như không màu, xây dựng từ một tấm canvas off-white duy nhất và chữ ink-black. Điểm nhấn đặc trưng là serif display face (Gestura) kết hợp với Inter cho mọi chức năng — một serif headline ở 56-72px khiến một AI tool fintech trông như tờ báo kinh doanh Chủ nhật, không phải dashboard. Giao diện giữ phong cách giấy tờ yên tĩnh: pill buttons, hairline borders, một dark surface mỗi section, và hầu như không có chromatic accent — một hero ảnh ấm áp duy nhất mang toàn bộ nhiệt độ cảm xúc. Màu sắc chỉ xuất hiện như sự vắng mặt của màu sắc, nên contrast (trắng → gần đen) và chất liệu (soft shadow, gentle radius) làm công việc nặng nhọc mà một bảng màu SaaS thông thường sẽ đảm nhận.

## Tokens — Colors

| Name | Value | Token | Vai trò |
|------|-------|-------|---------|
| Bone White | `#fafafb` | `--color-bone-white` | Canvas chính, bề mặt card, chữ button, input fills |
| Graphite Ink | `#2c2c2b` | `--color-graphite-ink` | Border chính, hairline dividers, link underlines, heading accents |
| Deep Coal | `#1f1f1f` | `--color-deep-coal` | Action fill trung tính độ tương phản cao cho primary buttons trên nền sáng |
| Obsidian | `#111111` | `--color-obsidian` | Body và heading text ở weight tối đa, dark hero overlays, icon strokes |
| Press Black | `#080808` | `--color-press-black` | Text và button fill cứng nhất khi cần pure black để tương phản trên ảnh ấm |
| Stone | `#70706f` | `--color-stone` | Secondary body text, helper copy, muted icon strokes |
| Fog | `#cbcbcb` | `--color-fog` | Disabled button borders, outlines mờ, decorative hairlines |
| Ash Gray | `#e3e3e3` | `--color-ash-gray` | Badge fills, input borders, tag backgrounds — neutral nhẹ nhất ngoài canvas |
| Cloud | `#ededed` | `--color-cloud` | Elevated card backgrounds, lớp nâng nhẹ phía trên canvas |
| Slate | `#444444` | `--color-slate` | Mid-weight button borders, heavy outlines trên dark surfaces |

## Tokens — Typography

### Gestura (custom serif) — Display và editorial headlines. Serif là lựa chọn dễ nhận biết nhất của thương hiệu — nó biến một landing page AI tool thông thường thành cảm giác tờ báo tài chính. Dùng ở 36-66px cho hero/section headlines và 20-30px cho subheadings. · `--font-gestura-custom-serif`
- **Thay thế:** Fraunces (Google Fonts) hoặc Source Serif Pro
- **Weights:** 400, 600
- **Kích cỡ:** 14, 20, 24, 30, 36, 48, 56, 66px
- **Line height:** 1.00–1.20 cho display; 1.40 cho heading nhỏ
- **Letter spacing:** -0.020em ở 66px → -0.007em ở 14px; luôn âm, càng chặt khi kích cỡ càng lớn
- **Vai trò:** Display và editorial headlines. Serif là lựa chọn dễ nhận biết nhất của thương hiệu — nó biến một landing page AI tool thông thường thành cảm giác tờ báo tài chính. Dùng ở 36-66px cho hero/section headlines và 20-30px cho subheadings.

### Inter — Toàn bộ UI chức năng: body, nav, buttons, inputs, badges, footers. Mang thông tin của hệ thống trong khi serif làm nhiệm vụ tạo cảm xúc. Uppercase eyebrows ở 12-14px với +0.14em tracking là pattern mở đầu section nhất quán. · `--font-inter`
- **Thay thế:** Inter (đã có sẵn trên Google)
- **Weights:** 400, 500, 600, 700
- **Kích cỡ:** 10, 12, 13, 14, 15, 16, 18, 72px
- **Line height:** 1.20–1.50 cho body; 0.80–1.00 cho utility label cỡ lớn hiếm gặp
- **Letter spacing:** -0.060em ở 72px → -0.009em ở 16px; 0.140em (uppercase tracking) cho eyebrow labels
- **Vai trò:** Toàn bộ UI chức năng: body, nav, buttons, inputs, badges, footers. Mang thông tin của hệ thống trong khi serif làm nhiệm vụ tạo cảm xúc. Uppercase eyebrows ở 12-14px với +0.14em tracking là pattern mở đầu section nhất quán.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|---------|---------|-------------|----------------|-------|
| caption | 12px | 1.4 | 0.14px | `--text-caption` |
| body-sm | 14px | 1.4 | -0.01px | `--text-body-sm` |
| body | 16px | 1.5 | -0.009px | `--text-body` |
| subheading | 20px | 1.4 | -0.015px | `--text-subheading` |
| heading-sm | 30px | 1.2 | -0.02px | `--text-heading-sm` |
| heading | 36px | 1.2 | -0.02px | `--text-heading` |
| heading-lg | 48px | 1.15 | -0.015px | `--text-heading-lg` |
| display | 66px | 1 | -0.02px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** 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` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| cards | 16px |
| badges | 999px |
| images | 8px |
| inputs | 8px |
| buttons | 999px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| lg | `rgba(0, 0, 0, 0.08) 0px 1px 20px 3px` | `--shadow-lg` |
| xl | `rgba(0, 0, 0, 0.18) 0px 20px 60px 0px, rgba(0, 0, 0, 0.08...` | `--shadow-xl` |

### Layout

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

## Components

### Filled Pill Button
**Vai trò:** Primary action (ví dụ 'Try Aira')

Pill radius 999px, background #111111, text #fafafb ở Inter 14-16px weight 500, padding 10px 20px. Không shadow. Không border. Nằm ở độ tương phản tối đa trên nền bone-white canvas — 'ink stamp' duy nhất của thương hiệu.

### Outlined Pill Button
**Vai trò:** Secondary action (ví dụ 'Request demo', 'Sign in')

Pill radius 999px, transparent background, 1px border ở #cbcbcb (nền sáng) hoặc #fafafb (trên dark hero), text cùng màu border, Inter 14-16px weight 500, padding 10px 20px.

### Dark Inverted Pill
**Vai trò:** Call-to-action dùng trên nền sáng khi cần tác động tối đa

Pill radius 999px, background #1f1f1f, text #fafafb. Ấm hơn Obsidian một chút, mang cảm giác 'mực' thay vì 'đen tuyền'. Padding 12px 24px.

### Editorial Headline
**Vai trò:** Hero và section H1

Gestura serif, weight 400, 48-66px, line-height 1.00-1.15, letter-spacing -0.015 đến -0.020em, color #1f1f1f trên nền sáng / #fafafb trên nền tối. Negative tracking càng chặt khi kích cỡ càng lớn — các open counters của serif sẽ cảm thấy thoáng nếu dùng ở tỷ lệ lớn.

### Section Eyebrow Label
**Vai trò:** Mở đầu section chữ in hoa nhỏ phía trên headlines

Inter 12px, weight 500, letter-spacing 0.14em uppercase, color #70706f. Tạo nhịp điệu editorial — hoạt động như dòng 'kicker' nói rằng 'đây là trang kinh doanh nghiêm túc' trước khi serif tiếp quản.

### Search Input Field
**Vai trò:** Hero conversational prompt

Background #ededed, border-radius 16px, padding 20-24px, Inter 16px weight 400 placeholder ở #70706f. Nút submit hình tròn 40px bên phải ở #2c2c2b. Không có focus ring — trường nhập liệu cố tình yên tĩnh.

### Dark Suggestion Pill
**Vai trò:** Quick-prompt tags bên dưới search input

Pill radius 999px, background #1f1f1f, text #fafafb ở Inter 13-14px weight 400, padding 8px 16px. Nằm như những chấm mực trên nền sáng — đối lập thị giác với cream search field.

### Badge / Tag
**Vai trò:** Status, category, metadata

Pill radius 999px, background #e3e3e3, text #1f1f1f ở Inter 12px weight 500, padding 4px 10px. Yên tĩnh, grayscale — không bao giờ chromatic.

### Elevated Card (Dark)
**Vai trò:** Dark-mode feature cards trên nền sáng

Border-radius 16-22px, background #111111, không border nhìn thấy được, padding rộng 24-40px. Chứa phone mockup hoặc showcase khác. Sự đảo ngược dark-on-light là thao tác bố cục chính của hệ thống.

### Phone Mockup Container
**Vai trò:** Bề mặt showcase sản phẩm

Card chứa ảnh chụp màn hình điện thoại theo tỷ lệ, background #fafafb bên trong một card tối, padding 40-60px. Layered shadow: 0 20px 60px rgba(0,0,0,0.18) + 0 4px 16px rgba(0,0,0,0.08) để tạo chiều sâu mềm mại không cần màu sắc.

### Nav Bar
**Vai trò:** Navigation cấp cao nhất

Transparent background trên hero photography, chuyển sang #fafafb với hairline 1px bottom border ở #ededed khi cuộn. Logo bên trái, nav links căn giữa hoặc phải ở Inter 14px weight 500 #fafafb/#1f1f1f, với 'Try Aira' dark pill ở góc phải.

### Footer Link
**Vai trò:** Inline text links và footer navigation

Inter 14-16px weight 400-500, color #1f1f1f với 1px underline ở #2c2c2b khi hover. Không có chromatic link color — hệ thống tránh hoàn toàn blue links.

### Photo Hero Container
**Vai trò:** Ảnh không khí màn hình đầu tiên

Ảnh full-bleed tông màu ấm (bàn tay, ánh sáng hổ phách) với dark overlay dày để chữ dễ đọc. Headline và body căn trái ở ~40% chiều rộng; phone mockup nổi bên phải ở ~50% chiều rộng. Không gradient — bản thân ảnh mang hơi ấm.

## Do's and Don'ts

### Nên làm
- Dùng Gestura (hoặc Fraunces thay thế) cho tất cả display headlines ở 36-66px với negative letter-spacing (-0.015 đến -0.020em).
- Ghép mỗi serif headline với một eyebrow label Inter 12px ở +0.14em tracking và Stone #70706f để tạo nhịp điệu editorial.
- Xây dựng tất cả buttons dạng pills (999px radius) — hệ thống không có button vuông hoặc 4px-radius ở bất kỳ đâu.
- Dùng #1f1f1f hoặc #111111 cho filled actions và #fafafb cho text trên các fill đó; không bao giờ đưa màu thương hiệu chromatic vào button.
- Đảo ngược surface contrast (dark card trên nền sáng, light card trên dark section) cho các feature blocks chính thay vì dùng shadow hoặc màu để phân cách.
- Giữ Inter ở 14-16px weight 400-500 cho body, nav và inputs — chỉ dùng 600-700 cho label ngắn và button text.
- Để photography mang hơi ấm và màu sắc; để UI giữ phong cách giấy tờ yên tĩnh trong bone white và ink.

### Không nên làm
- Không đưa xanh dương, xanh lá, đỏ hoặc bất kỳ chromatic accent nào vào bảng màu UI — hệ thống cố tình monochromatic và bất kỳ màu nào cũng sẽ phá vỡ tâm trạng broadsheet.
- Không dùng Inter cho headlines lớn hơn 24px — serif là thứ làm nên nhận diện thương hiệu.
- Không dùng shadows để phân cách cards trên cùng một surface — thay vào đó dùng hairline 1px borders ở #2c2c2b hoặc đảo ngược toàn bộ surface.
- Không dùng radius vuông hoặc 4-8px trên buttons hoặc badges; pill (999px) là ngôn ngữ hình dạng duy nhất của hệ thống cho các element tương tác.
- Không dùng hover states sáng hoặc bão hòa — hover changes chỉ giới hạn ở underline appearance hoặc làm tối border 1 shade.
- Không đặt light text trên light card hoặc dark text trên dark card nếu không có contrast 15:1+ rõ ràng — hệ thống dựa vào extreme contrast làm công cụ thị giác chính.
- Không thêm gradient fills, glows hoặc colored blurs ở bất kỳ đâu trong UI — 'glow' duy nhất được phép là soft shadow trên phone mockups.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Bone White Canvas | `#fafafb` | Nền trang cơ bản trên tất cả light sections |
| 1 | Cloud Surface | `#ededed` | Elevated card background nằm một bước trên canvas |
| 2 | Ash Surface | `#e3e3e3` | Tag/badge fills và trạng thái nghỉ của input field |
| 3 | Obsidian Surface | `#111111` | Dark inverted sections, hero overlays, dark cards trên nền sáng |

## Elevation

- **Soft photo card:** `0px 1px 20px 3px rgba(0, 0, 0, 0.08)`
- **Phone mockup card:** `0px 20px 60px 0px rgba(0, 0, 0, 0.18), 0px 4px 16px 0px rgba(0, 0, 0, 0.08)`

## Imagery

Imagery thưa thớt nhưng tác động cao: một ảnh full-bleed ấm áp duy nhất (tay cầm điện thoại, ánh sáng tungsten hổ phách) mang toàn bộ hero. Phần còn lại của trang dựa vào product phone mockups đặt giữa các dark inverted cards. Không illustrations, không abstract graphics, không icon-filled decorative scenes. Xử lý ảnh mang phong cách tài liệu/thân mật — tight crop, shallow depth, warm color temperature. Sự tương phản giữa photographic hero ấm áp và UI monochromatic lạnh lẽo bên dưới là luận điểm thị giác trung tâm của trang. Icons xuyên suốt tối giản và dạng line-based ở Stone #70706f.

## Layout

Container căn giữa max-width 1200px với section gaps rộng 80px+. Hero là ảnh full-bleed với tỷ lệ 40/50: khối text bên trái (headline + body + buttons), phone mockup bên phải không có card chrome. Light sections (bone white #fafafb) xen kẽ với một dark inverted section duy nhất — không bao giờ quá một dark band mỗi fold, để trang không bao giờ cảm thấy nặng. Centered stacks chiếm ưu thế trong content sections: eyebrow → serif headline → body → single input, tất cả trên một trục dọc duy nhất với khoảng không dọc 80-120px. Cards bên trong dark sections là 3-column grids với 8px gaps và 16-22px radius. Navigation là top bar tối giản trở nên opaque bone-white khi cuộn.

## Agent Prompt Guide

## Quick Color Reference
- text: #1f1f1f (light surfaces), #fafafb (dark surfaces)
- background: #fafafb
- surface (elevated): #ededed
- border / hairline: #2c2c2b
- muted text: #70706f
- primary action: #1f1f1f (filled action)

## Example Component Prompts

1. **Editorial Hero Section** — Ảnh full-bleed tông màu ấm với dark overlay. Cột trái ở 40% chiều rộng: Gestura serif 66px weight 400, color #fafafb, letter-spacing -0.02em, line-height 1.00. Body text 18px Inter weight 400, #fafafb, line-height 1.50. Hai buttons xếp ngang với 8px gap: filled pill (#1f1f1f bg, #fafafb text, 999px radius, 10px 20px padding) và outlined pill (transparent bg, 1px #fafafb border, #fafafb text). Cột phải: phone mockup ở 50% page width, soft shadow 0 20px 60px rgba(0,0,0,0.18).

2. **Search Prompt Section** — Bone white #fafafb background, centered stack. Eyebrow label 12px Inter weight 500, +0.14em tracking, uppercase, #70706f. Headline 48px Gestura weight 400, #1f1f1f, letter-spacing -0.015em. Subtext 16px Inter weight 400, #70706f. Bên dưới: input field 16px-radius rộng 640px, #ededed background, Inter 16px placeholder, với nút submit hình tròn 40px dark bên trong bên phải. Bên dưới input: ba dark suggestion pills (#1f1f1f, #fafafb text, 999px radius, 8px 16px padding, 13px Inter).

3. **Dark Inverted Feature Card** — Background #111111, border-radius 22px, padding 48px. Bên trong: phone mockup card trắng căn giữa với 16px radius, 60px internal padding, layered shadow 0 20px 60px rgba(0,0,0,0.18) + 0 4px 16px rgba(0,0,0,0.08). Màn hình điện thoại hiển thị giao diện app light-mode với serif greeting headline bên trong.

4. **Navigation Bar** — Transparent trên hero, chuyển thành #fafafb với 1px bottom border ở #ededed khi cuộn. Logo (sparkle mark + 'Aira' wordmark) căn trái ở #1f1f1f. Nav links căn giữa: 14px Inter weight 500, #1f1f1f, 32px gap. Cụm bên phải: outlined pill 'Sign in' (1px #cbcbcb border, #1f1f1f text, 999px radius) + filled pill 'Try Aira' (#1f1f1f bg, #fafafb text, 999px radius), cách nhau 8px.

## Similar Brands

- **Stripe** — Cùng cách tiếp cận broadsheet-monochrome: sự kiềm chế không serif được thay thế ở đây bằng custom serif, nhưng cùng bone-white canvas, hairline borders và ink-black type.
- **Linear** — Chia sẻ pill-button + tight letter-spacing + photographic dark hero opening, nhưng Aira thêm editorial serif mà Linear thiếu.
- **Pitch** — Cùng cảm giác premium-tool: ảnh full-bleed ấm áp trên nền UI gần như không màu, với khoảng không rộng rãi và một serif/mixed display face duy nhất mang nhận diện.
- **Notion** — Kỷ luật giao diện tối giản, gần như không màu tương tự — cả hai đều dựa vào bề mặt gần trắng và ink text, để content (hoặc trong trường hợp của Aira, photography) cung cấp toàn bộ màu sắc.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-bone-white: #fafafb;
  --color-graphite-ink: #2c2c2b;
  --color-deep-coal: #1f1f1f;
  --color-obsidian: #111111;
  --color-press-black: #080808;
  --color-stone: #70706f;
  --color-fog: #cbcbcb;
  --color-ash-gray: #e3e3e3;
  --color-cloud: #ededed;
  --color-slate: #444444;

  /* Typography — Font Families */
  --font-gestura-custom-serif: 'Gestura (custom serif)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: 0.14px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: -0.01px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.009px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.015px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.02px;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --tracking-heading: -0.02px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.015px;
  --text-display: 66px;
  --leading-display: 1;
  --tracking-display: -0.02px;

  /* 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-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-192: 192px;

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

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-2xl-2: 22px;
  --radius-full: 99px;
  --radius-full-2: 999px;
  --radius-full-3: 13486.5px;
  --radius-full-4: 15984px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-badges: 999px;
  --radius-images: 8px;
  --radius-inputs: 8px;
  --radius-buttons: 999px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.08) 0px 1px 20px 3px;
  --shadow-xl: rgba(0, 0, 0, 0.18) 0px 20px 60px 0px, rgba(0, 0, 0, 0.08) 0px 4px 16px 0px;

  /* Surfaces */
  --surface-bone-white-canvas: #fafafb;
  --surface-cloud-surface: #ededed;
  --surface-ash-surface: #e3e3e3;
  --surface-obsidian-surface: #111111;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-bone-white: #fafafb;
  --color-graphite-ink: #2c2c2b;
  --color-deep-coal: #1f1f1f;
  --color-obsidian: #111111;
  --color-press-black: #080808;
  --color-stone: #70706f;
  --color-fog: #cbcbcb;
  --color-ash-gray: #e3e3e3;
  --color-cloud: #ededed;
  --color-slate: #444444;

  /* Typography */
  --font-gestura-custom-serif: 'Gestura (custom serif)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: 0.14px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: -0.01px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.009px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.015px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.02px;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --tracking-heading: -0.02px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.015px;
  --text-display: 66px;
  --leading-display: 1;
  --tracking-display: -0.02px;

  /* 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-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-2xl-2: 22px;
  --radius-full: 99px;
  --radius-full-2: 999px;
  --radius-full-3: 13486.5px;
  --radius-full-4: 15984px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.08) 0px 1px 20px 3px;
  --shadow-xl: rgba(0, 0, 0, 0.18) 0px 20px 60px 0px, rgba(0, 0, 0, 0.08) 0px 4px 16px 0px;
}
```