# Replay

> Replay — Style Reference

## Prompt Content

```
# Replay — Style Reference
> editorial red-pen trên nền blueprint trắng. Một công cụ debug nói nhẹ nhàng và đánh dấu mục tiêu bằng màu coral.

**Theme:** light

Replay mang phong cách thương hiệu developer-tool nghiêm túc nhưng khoác lên mình vẻ tự tin trầm lặng: một canvas gần như hoàn toàn không màu, nơi chữ than và bề mặt trắng đảm nhận 95% công việc, và một màu coral-đỏ bão hòa duy nhất đóng vai trò như dấu chấm câu phẫu thuật trên headline, button và trạng thái nav active. Động tác typography đặc trưng là phân tách màu nhấn mạnh bên trong display headline — một dòng tối màu #111827 nối tiếp ngay sau đó bằng một dòng màu đỏ thương hiệu — khiến giọng văn mang chất editorial và có chính kiến thay vì kiểu doanh nghiệp. Các component vẫn nhẹ nhàng: pill buttons, đường viền mảnh như sợi tóc, card nổi trên bóng đổ mềm, và hầu như không có gradient trang trí nào ngoài một banner mỏng phía trên. Mọi bề mặt đều có lý do tồn tại; màu sắc được phân bổ như một tài nguyên, không phải vật trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Midnight Ink | `#111827` | `--color-midnight-ink` | Body text chính, nền headline, nav text — foreground mặc định trên mọi bề mặt |
| Slate 600 | `#374151` | `--color-slate-600` | Secondary text, viền button dạng outlined/ghost, list markers |
| Graphite 800 | `#1f2937` | `--color-graphite-800` | Surface fill tối cho secondary buttons, dark cards, reverse sections |
| Steel 500 | `#6b7280` | `--color-steel-500` | Helper text mờ, secondary link text, nav không active |
| Fog 400 | `#9ca3af` | `--color-fog-400` | Icon strokes, metadata cấp ba, placeholder text |
| Mist 300 | `#d1d5db` | `--color-mist-300` | Disabled controls, viền mờ, secondary dividers |
| Cloud 200 | `#e5e7eb` | `--color-cloud-200` | Hairline borders, icon outlines, màu viền UI chủ đạo trong toàn bộ hệ thống |
| Paper 100 | `#f3f4f6` | `--color-paper-100` | Nền trang, list rows, section tint nhẹ |
| Snow 50 | `#ffffff` | `--color-snow-50` | Bề mặt card, elevated panels, chữ trên dark fills, đỉnh của surface stack |
| Coral Pulse | `#f02d5e` | `--color-coral-pulse` | Màu nhấn thương hiệu — làm nổi bật một dòng của display headline, đánh dấu nav link active, viền ghost CTA, mực coral-đỏ của hệ thống editorial |
| Coral 500 | `#f43f5e` | `--color-coral-500` | Màu hành động đỏ cho filled buttons, trạng thái navigation được chọn, và các thời điểm chuyển đổi tập trung. |
| Cobalt Link | `#3762e2` | `--color-cobalt-link` | Text accent màu tím cho link, tag và các cụm từ ngắn được nhấn mạnh. Không nâng lên làm màu CTA chính |
| Lilac Whisper | `#e9d5ff` | `--color-lilac-whisper` | Viền card trang trí trên case-study cards — một màu tím nhẹ hầu như không thấy, làm mềm hệ thống đơn sắc |
| Banner Gradient | `linear-gradient(to right top, rgb(255, 128, 181), rgb(144, 137, 252))` | `--color-banner-gradient` | Banner thông báo phía trên — dải màu hồng sang tím báo hiệu sự khẩn cấp và năng lượng thương hiệu mà không thêm tạp âm bề mặt vĩnh viễn |

## Tokens — Typography

### Inter — Kiểu chữ thương hiệu duy nhất — xử lý mọi thứ từ micro-label 12px đến display headline 80px. Weight 500/600 cho headline giữ giọng văn tự tin mà không la hét; weight 400 đảm nhận body text. Letter-spacing chặt ở kích thước lớn (-0.025em ở 80px, -0.019em ở 40–48px) khiến các dòng display có cảm giác được đặt sẵn, không bị chồng lên nhau. · `--font-inter`
- **Thay thế:** Inter (Google Fonts)
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 12px, 14px, 16px, 18px, 20px, 40px, 48px, 80px
- **Line height:** 1.17–1.78
- **Letter spacing:** -2px ở 80px, -1.2px ở 48–40px, -0.4px ở 20px, normal ở 16px trở xuống; uppercase labels dùng +0.05em
- **Vai trò:** Kiểu chữ thương hiệu duy nhất — xử lý mọi thứ từ micro-label 12px đến display headline 80px. Weight 500/600 cho headline giữ giọng văn tự tin mà không la hét; weight 400 đảm nhận body text. Letter-spacing chặt ở kích thước lớn (-0.025em ở 80px, -0.019em ở 40–48px) khiến các dòng display có cảm giác được đặt sẵn, không bị chồng lên nhau.

### ui-monospace — Inline code, phím tắt, token kỹ thuật — xuất hiện tiết kiệm, không bao giờ dùng làm headline face · `--font-ui-monospace`
- **Thay thế:** JetBrains Mono, SF Mono, Menlo, Consolas
- **Weights:** 600
- **Kích thước:** 12px
- **Line height:** 1.33
- **Vai trò:** Inline code, phím tắt, token kỹ thuật — xuất hiện tiết kiệm, không bao giờ dùng làm headline face

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.33 | 0.6px | `--text-caption` |
| body-sm | 14px | 1.71 | — | `--text-body-sm` |
| body | 16px | 1.75 | — | `--text-body` |
| body-lg | 18px | 1.78 | — | `--text-body-lg` |
| subheading | 20px | 1.6 | -0.4px | `--text-subheading` |
| heading-sm | 40px | 1.17 | -1.2px | `--text-heading-sm` |
| heading | 48px | 1.1 | -1.2px | `--text-heading` |
| display | 80px | 1.1 | -2px | `--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` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |
| 224 | 224px | `--spacing-224` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 12px |
| icons | 4-8px |
| inputs | 8px |
| buttons | 9999px |
| smallChips | 8px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(17, 24, 39, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1...` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle-2` |
| xl | `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1)...` | `--shadow-xl` |

### Layout

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

## Components

### Announcement Banner
**Vai trò:** Dải gradient phía trên trang kèm CTA

Banner full-bleed với linear-gradient hồng sang tím (#ff80b5 → #9089fc). Chữ trắng 14px Inter weight 500, căn giữa. Bên phải có một pill button nhỏ viền trắng ('Apply now'). Chiều cao ~40px, nằm phía trên nav.

### Primary Navigation
**Vai trò:** Site nav cố định với logo, link và CTA

Nền trắng, cao 64–72px. Bên trái: wordmark Replay với icon play-triangle màu #111827. Giữa: các link ngang (Overview active state màu #f02d5, inactive màu #111827) ở 14px Inter 500 với column gap 32px. Bên phải: filled coral CTA pill 'Try Replay Free'.

### Filled Coral CTA
**Vai trò:** Primary action button

Hình pill với radius 9999px. Background #f43f5, chữ trắng 14–16px Inter 600. Padding 8px 24px. Bóng đổ nhẹ rgba(0,0,0,0.05) 0px 1px 2px. Hover làm đậm màu coral một chút. Chỉ dùng tối đa một hoặc hai lần trên mỗi viewport.

### Outlined Ghost CTA
**Vai trò:** Secondary action button trên bề mặt sáng

Hình pill với radius 9999px. Background trong suốt, viền 1px màu #f02d5 hoặc #374151, chữ cùng màu viền. Padding giống filled CTA. Đặt cạnh filled CTA để tạo bộ action ghép đôi.

### Display Headline with Color Split
**Vai trò:** Hero và section-level H1

Inter 80px weight 700, line-height 1.10, letter-spacing -2px. Headline nhiều dòng, một dòng màu #111827 và dòng tiếp theo màu #f02d5 — chữ ký editorial. Căn giữa trên hero, căn trái trong các section nội dung.

### Body Lead Paragraph
**Vai trò:** Hero subhead, phần giới thiệu section

Inter 18px weight 400, line-height 1.78, color #6b7280. Max-width ~640px để giữ độ dài dòng dễ đọc. Theo sau display headline với khoảng cách trên 24–32px.

### Eyebrow Label
**Vai trò:** Thẻ danh mục uppercase phía trên tiêu đề section

Inter 12px weight 600, uppercase, letter-spacing 1.5px (0.05em), color #f02d5e. Căn giữa, cách heading cha 16–24px phía trên.

### Case Study Card
**Vai trò:** Thẻ testimonial / quote trong grid bằng chứng xã hội

Bề mặt trắng, radius 12px, padding 24px. Viền 1px màu #e9d5ff (Lilac Whisper) để định hình mềm mại. Chứa quote màu #111827 ở 16px, link 'Read full case study →' màu Cobalt Link, và hàng footer với avatar tròn (32px), tên 14px 600, handle 12px #6b7280, và brand logo bên phải.

### Link with Arrow
**Vai trò:** Inline navigation link đến trang chi tiết

Inter 14px weight 500, color #3762e2, ký tự → ở cuối. Không gạch chân mặc định; xuất hiện gạch chân khi hover.

### Avatar with Brand Mark
**Vai trò:** Gán người trong case study cards

Ảnh avatar tròn 32px, tên 14px Inter 600 #111827, handle 12px Inter 400 #6b7280. Logo công ty hoặc product mark đặt ở cạnh phải của card footer.

### Section Container
**Vai trò:** Wrapper nhịp điệu dọc cho các khối nội dung

Max-width 1200px, căn giữa, padding ngang 24–32px. Padding dọc 64–80px giữa các section. Nền trắng hoặc #f3f4f6 xen kẽ để tạo sự phân cách giữa các band.

### Trust Logo Strip
**Vai trò:** Hàng logo khách hàng/đội ngũ theo chiều ngang

Layout một hàng dưới caption căn giữa 'Trusted by top engineering teams'. Logo đơn sắc #6b7280 hoặc #9ca3af, cao khoảng 32–40px, cách đều với column gap 48px.

## Do's and Don'ts

### Do
- Dùng #f43f5 cho chính xác một filled CTA trên mỗi viewport — nó mất hết sức mạnh nếu xuất hiện nhiều hơn hai lần trên một màn hình
- Chia display headline thành hai dòng sao cho dòng đầu là #111827 và dòng thứ hai là #f02d5 — sự tương phản màu sắc chính là thiết kế
- Đặt tất cả button và tag ở radius 9999px — hình pill là bắt buộc và thống nhất mọi element tương tác
- Dùng #e5e7eb cho hairline borders 1px trên card, input và divider — không bao giờ dùng viền dày hơn hoặc background fill để tạo sự phân cách
- Giới hạn body text ở 18px và max-width ~640px — hệ thống tin tưởng người đọc và từ chối lấp đầy không gian ngang một cách vô cớ
- Áp dụng letter-spacing -2px ở 80px và -1.2px ở 40–48px cho tất cả display và heading sizes — tracking chặt là thứ khiến chữ lớn có cảm giác được đặt sẵn chứ không phải thả rơi
- Xen kẽ nền section trắng và #f3f4f6 để tạo nhịp điệu mà không cần đường kẻ hay divider dày

### Don't
- Không dùng màu đỏ coral (#f43f5 / #f02d5e) cho body text, icon hoặc decorative fills — nó chỉ được dành cho emphasis lines, active states và CTAs
- Không đưa màu sắc mới vào cho illustration, badge hoặc section accents — hệ thống chạy trên than, trắng và một màu coral
- Không dùng card radius nhỏ hơn 12px trên case study / testimonial cards hoặc lớn hơn 8px trên inputs — radius mang ý nghĩa ngữ nghĩa
- Không dùng weight 300 hoặc 200 cho headline — Inter ở 600–700 là giọng văn; weight mỏng phá vỡ thẩm quyền editorial
- Không xếp hai filled CTA cạnh nhau — ghép một filled coral với một outlined ghost hoặc text link
- Không áp dụng drop shadow cho element không phải card hoặc floating panel — buttons chỉ có shadow 1px thì thầm, không hơn
- Không dùng #f3f4f6 làm nền card trên canvas trắng — nó chỉ hoạt động như section tint phía sau card trắng, không bao giờ là card trên nền trắng

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#f3f4f6` | Nền trang, tông màu nhẹ nhất mắt nhìn thấy |
| 1 | Card | `#ffffff` | Bề mặt nội dung mặc định, case study cards, pricing panels |
| 2 | Dark Section | `#1f2937` | Reverse hero hoặc feature panels nơi chữ trắng nằm trên nền graphite |

## Elevation

- **Cards, elevated panels:** `rgba(17, 24, 39, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- **Buttons, interactive controls:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`

## Imagery

Ngôn ngữ hình ảnh chủ yếu là text với hầu như không có ảnh trang trí. Hình ảnh chỉ giới hạn ở avatar người dùng tròn nhỏ trong case study cards và một hàng logo công ty đơn sắc thưa thớt trong trust strip. Hero hoàn toàn dựa vào typography — editorial color-split headline CHÍNH LÀ hình ảnh. Không có illustration, không 3D renders, không product screenshots hiển thị trong các screenshot đã chụp. Banner gradient hồng-tím mỏng phía trên là element đồ họa màu sắc duy nhất trên trang, và nó đọc như một thông báo chứ không phải trang trí. Iconography mang tính hình học và tối giản: logomark play-triangle, mũi tên → đơn giản trên link, và social icons phẳng có viền.

## Layout

Container căn giữa max-width 1200px với khoảng cách section dọc rộng rãi 64–80px. Hero là một chồng typographic căn giữa — display headline, lead paragraph, CTA đơn — nằm trên canvas trắng với hoa văn xước chéo mờ nhạt. Các section tiếp theo dùng khối text một cột căn giữa trên nền #f3f4f6, sau đó là grid card 3 cột cho case studies. Navigation là thanh trên cùng căn giữa với logo trái, link giữa, CTA phải. Nhịp điệu trang xen kẽ giữa các band trắng và #f3f4f6 để phân tách nội dung mà không cần divider dày.

## Agent Prompt Guide

**Quick Color Reference**
- text primary: #111827
- text muted: #6b7280
- background canvas: #f3f4f6
- background card: #ffffff
- border hairline: #e5e7eb
- accent / emphasis line: #f02d5e
- primary action: #f43f5e (filled action)

**Example Component Prompts**

1. *Display headline with color split:* Căn giữa 80px Inter weight 700, line-height 1.10, letter-spacing -2px. Dòng đầu màu #111827, dòng thứ hai màu #f02d5e. Theo sau bởi lead paragraph 18px Inter 400 màu #6b7280, max-width 640px.

2. *Case study card:* Bề mặt trắng, radius 12px, padding 24px, viền 1px màu #e9d5ff. Quote text 16px Inter 400 màu #111827. Hàng footer: avatar tròn 32px trái, tên 14px Inter 600 màu #111827, handle 12px Inter 400 màu #6b7280, brand mark ở cạnh phải. Phía trên quote: link 'Read full case study →' màu #3762e2 ở 14px Inter 500.

3. Tạo Primary Action Button: background #f43f5e, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính.

4. *Section band:* Background #f3f4f6 full-bleed, container căn giữa max-width 1200px bên trong, padding trên dưới 72px. Eyebrow label 12px Inter 600 uppercase #f02d5e với letter-spacing 1.5px, 16px bên dưới là heading 48px Inter 700 màu #111827, 24px bên dưới là body 16px Inter 400 màu #374151.

## Editorial Headline System

Headline split là động tác dễ nhận biết nhất của thương hiệu. Mọi display headline đều ngắt thành hai dòng, với dòng một màu #111827 và dòng hai màu #f02d5e. Sự thay đổi màu sắc hoạt động như một sự nhấn mạnh bằng lời nói — thương hiệu đang đưa ra một luận điểm, và màu coral là gạch dưới. Mẫu tương tự thu nhỏ lại: section H2 ở 40–48px dùng một cụm từ coral được nhúng bên trong một câu than còn lại. Không bao giờ dùng coral cho toàn bộ headline, và không bao giờ ngắt quá hai dòng.

## Similar Brands

- **Linear** — Cùng cách tiếp cận pill-button + canvas đơn sắc + accent color được phân bổ hợp lý, cả hai đều xem trang như một công cụ typographic
- **Vercel** — Cùng bảng màu nền gần đen/trắng với sự đơn giản hình học, display type lớn tự tin, và một accent sống động duy nhất dành cho sự nhấn mạnh
- **Posthog** — Developer-tool branding với giọng văn headline editorial, letter-spacing chặt trên display type, và sự kiềm chế coral-as-accent
- **Sentry** — Cùng category devtools với hệ thống card hairline-border, pill CTAs, và một accent ấm duy nhất tạo điểm nhấn trên giao diện xám

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-ink: #111827;
  --color-slate-600: #374151;
  --color-graphite-800: #1f2937;
  --color-steel-500: #6b7280;
  --color-fog-400: #9ca3af;
  --color-mist-300: #d1d5db;
  --color-cloud-200: #e5e7eb;
  --color-paper-100: #f3f4f6;
  --color-snow-50: #ffffff;
  --color-coral-pulse: #f02d5e;
  --color-coral-500: #f43f5e;
  --color-cobalt-link: #3762e2;
  --color-lilac-whisper: #e9d5ff;
  --color-banner-gradient: #ff80b5;
  --gradient-banner-gradient: linear-gradient(to right top, rgb(255, 128, 181), rgb(144, 137, 252));

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.71;
  --text-body: 16px;
  --leading-body: 1.75;
  --text-body-lg: 18px;
  --leading-body-lg: 1.78;
  --text-subheading: 20px;
  --leading-subheading: 1.6;
  --tracking-subheading: -0.4px;
  --text-heading-sm: 40px;
  --leading-heading-sm: 1.17;
  --tracking-heading-sm: -1.2px;
  --text-heading: 48px;
  --leading-heading: 1.1;
  --tracking-heading: -1.2px;
  --text-display: 80px;
  --leading-display: 1.1;
  --tracking-display: -2px;

  /* 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-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-224: 224px;

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

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

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

  /* Shadows */
  --shadow-subtle: rgba(17, 24, 39, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;

  /* Surfaces */
  --surface-canvas: #f3f4f6;
  --surface-card: #ffffff;
  --surface-dark-section: #1f2937;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-ink: #111827;
  --color-slate-600: #374151;
  --color-graphite-800: #1f2937;
  --color-steel-500: #6b7280;
  --color-fog-400: #9ca3af;
  --color-mist-300: #d1d5db;
  --color-cloud-200: #e5e7eb;
  --color-paper-100: #f3f4f6;
  --color-snow-50: #ffffff;
  --color-coral-pulse: #f02d5e;
  --color-coral-500: #f43f5e;
  --color-cobalt-link: #3762e2;
  --color-lilac-whisper: #e9d5ff;
  --color-banner-gradient: #ff80b5;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.71;
  --text-body: 16px;
  --leading-body: 1.75;
  --text-body-lg: 18px;
  --leading-body-lg: 1.78;
  --text-subheading: 20px;
  --leading-subheading: 1.6;
  --tracking-subheading: -0.4px;
  --text-heading-sm: 40px;
  --leading-heading-sm: 1.17;
  --tracking-heading-sm: -1.2px;
  --text-heading: 48px;
  --leading-heading: 1.1;
  --tracking-heading: -1.2px;
  --text-display: 80px;
  --leading-display: 1.1;
  --tracking-display: -2px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-224: 224px;

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

  /* Shadows */
  --shadow-subtle: rgba(17, 24, 39, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
}
```