# Airbnb

> Airbnb — Style Reference

## Prompt Content

```
# Airbnb — Style Reference
> Ảnh kỳ nghỉ ghim trên bảng liệu trắng — ảnh sáng được đặt trong khung bo tròn trên nền gần trắng, với một chiếc ghim màu san hô duy nhất giữ mọi thứ lại với nhau.

**Theme:** light

Giao diện của Airbnb là một marketplace ấm áp, thoáng đãng được xây dựng trên nền gần trắng và một điểm nhấn thương hiệu màu đỏ san hô duy nhất. Canvas #f7f7f7 với bề mặt card #ffffff tạo ra chiều sâu rất nhẹ — giấy xếp chồng lên giấy — nơi nhiếp ảnh đảm nhận toàn bộ trọng lượng thị giác. Font biến thiên tùy chỉnh Airbnb Cereal VF chạy ở các weight 400–700 trên một thang đo chặt chẽ, nhỏ gọn với letter-spacing âm ở kích thước lớn, mang lại cho UI sự tự tin nhẹ nhàng mà không cần yếu tố trang trí. Màu đỏ san hô #ff385c duy nhất xuất hiện tại các điểm chạm thương hiệu (logo, trạng thái active, nút tìm kiếm), khiến nó giống như một chữ ký hơn là một màu hệ thống. Ảnh card tràn cạnh (edge-to-edge) với góc bo 20px — bán kính bo tròn duy nhất hào phóng trong một layout thông tin dày đặc, nhỏ gọn.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Rausch Coral | `#ff385c` | `--color-rausch-coral` | Tô màu logo brand, gạch chân nav active, nền icon nút tìm kiếm, trạng thái active của carousel dot — chữ ký màu sắc duy nhất giúp nhận diện giao diện |
| Rausch Deep | `#e00b41` | `--color-rausch-deep` | Làm tối màu Rausch Coral ở trạng thái hover trên các phần tử brand tương tác |
| Carbon | `#222222` | `--color-carbon` | Văn bản chính, heading, border, icon stroke — màu trung tính chủ đạo cho hầu hết nội dung typographic |
| Slate | `#6a6a6a` | `--color-slate` | Văn bản phụ (metadata, subtext, nhãn phụ), icon fill phụ |
| Silver | `#c1c1c1` | `--color-silver` | Văn bản nút disabled và icon stroke, mũi tên điều hướng carousel inactive |
| Stone | `#b0b0b0` | `--color-stone` | Nền placeholder skeleton/loading |
| Pebble | `#dddddd` | `--color-pebble` | Nền placeholder ảnh card, border cấp ba, border disabled |
| Mist | `#ebebeb` | `--color-mist` | Đường phân cách nhẹ và border section phụ |
| Fog | `#f7f7f7` | `--color-fog` | Canvas trang, nền footer, nền trạng thái hover/selected của button |
| Cloud | `#ffffff` | `--color-cloud` | Bề mặt card, nền header, nền modal/popover, fill pill badge |

## Tokens — Typography

### Airbnb Cereal VF — Kiểu chữ duy nhất cho mọi phần tử văn bản trên toàn UI. Weight 400 xử lý body và metadata; 500 làm nổi bật label và heading phụ; 600 đánh dấu tiêu đề section; 700 dùng cho hiển thị giá và nhấn mạnh chính. Font biến thiên tùy chỉnh mang lại các chỉ số quang học chặt chẽ ở kích thước display mà font thông thường không thể tái tạo — letter-spacing âm ở -0.02em kéo các chữ số lớn lại gần nhau. Bộ tính năng 'salt' kích hoạt các dạng chữ thay thế giúp phân biệt với system sans-serif. · `--font-airbnb-cereal-vf`
- **Thay thế:** Inter Variable
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 8px, 11px, 12px, 13px, 14px, 16px, 20px, 21px, 22px, 28px
- **Line height:** 1.18–1.43
- **Letter spacing:** -0.02em ở kích thước lớn (20px+), -0.009em ở kích thước trung bình (14–16px), +0.04em ở ngữ cảnh small caps/label (11–12px)
- **OpenType features:** `"salt"`
- **Vai trò:** Kiểu chữ duy nhất cho mọi phần tử văn bản trên toàn UI. Weight 400 xử lý body và metadata; 500 làm nổi bật label và heading phụ; 600 đánh dấu tiêu đề section; 700 dùng cho hiển thị giá và nhấn mạnh chính. Font biến thiên tùy chỉnh mang lại các chỉ số quang học chặt chẽ ở kích thước display mà font thông thường không thể tái tạo — letter-spacing âm ở -0.02em kéo các chữ số lớn lại gần nhau. Bộ tính năng 'salt' kích hoạt các dạng chữ thay thế giúp phân biệt với system sans-serif.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.29 | 0.44px | `--text-caption` |
| body | 14px | 1.43 | -0.13px | `--text-body` |
| heading-sm | 20px | 1.25 | -0.18px | `--text-heading-sm` |
| heading | 22px | 1.23 | -0.2px | `--text-heading` |
| display | 28px | 1.18 | -0.56px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 11 | 11px | `--spacing-11` |
| 12 | 12px | `--spacing-12` |
| 13 | 13px | `--spacing-13` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 44 | 44px | `--spacing-44` |
| 48 | 48px | `--spacing-48` |

### Border Radius

| Phần tử | Giá trị |
|---------|-------|
| cards | 20px |
| pills | 32px |
| badges | 4px |
| inputs | 14px |
| buttons | 8px |
| searchBar | 20px |
| iconButtons | 50% |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.16) ...` | `--shadow-subtle-2` |

### Layout

- **Page max-width:** 1760px
- **Section gap:** 48px
- **Card padding:** 12px
- **Element gap:** 8px

## Components

### Listing Card
**Vai trò:** Đơn vị nội dung có thể duyệt chính trong carousel cuộn ngang

Nền placeholder #dddddd chuyển tiếp sang ảnh full-bleed. Border-radius 20px. Không có border. Không có shadow mặc định. Ảnh chiếm toàn bộ chiều rộng card; bên dưới ảnh: padding 12px bao gồm tiêu đề (14px weight 600 #222222), loại chủ nhà (12px weight 400 #6a6a6a), khoảng ngày và giá (14px weight 400 #222222). Xếp hạng sao hiển thị ở 12px với #222222. Tỷ lệ khung hình xấp xỉ 1:1 trên phần ảnh. Badge 'Guest favorite': nền trắng, văn bản #222222 ở 11px weight 600, radius 4px, định vị tuyệt đối trên cùng bên trái phía trên ảnh.

### Guest Favorite Badge
**Vai trò:** Tín hiệu tin cậy đè lên ảnh listing card

Pill nền trắng (#ffffff), border-radius 4px, padding dọc 6px / ngang 10px. Văn bản 'Guest favorite' ở 11px weight 600 #222222, letter-spacing +0.04em. Định vị trên cùng bên trái tuyệt đối phía trên ảnh card với drop-shadow nhẹ: rgba(0,0,0,0.25) 0px 2px 6px.

### Primary Search Bar
**Vai trò:** Giao diện tìm kiếm chính trong header

Ba input phân đoạn (Where / When / Who) trong một container pill trắng (#ffffff) duy nhất với radius 20px và shadow phân lớp: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px 0px, rgba(0,0,0,0.1) 0px 4px 8px 0px. Văn bản label 12px weight 600 #222222; văn bản placeholder 14px weight 400 #6a6a6a. Đường phân cách giữa các phân đoạn là 1px #ebebeb. Nút kích hoạt tìm kiếm: nút hình tròn 40px, nền #ff385c, icon kính lúp màu trắng.

### Circular Icon Button — Default
**Vai trò:** Mũi tên điều hướng carousel, nút lưu/wishlist

Border-radius 50%. Hai trạng thái: nền trong suốt với icon stroke #222222 (active), và nền #f7f7f7 với icon stroke #c1c1c1 (disabled). Không có padding; button chỉ có kích thước bằng icon. Shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.16) 0px 2px 4px 0px áp dụng cho mũi tên carousel.

### Rounded Pill Button — Secondary
**Vai trò:** Tab bộ lọc danh mục (Popular, Beach, Cities, Historic)

Nền trong suốt hoặc #f7f7f7 khi được chọn. Border 1px solid #222222. Văn bản 14px weight 500 #222222. Border-radius 8px. Padding dọc 10px / ngang 10px. Khi hover, nền chuyển sang #f7f7f7.

### Ghost Text Button — Nav Link
**Vai trò:** Liên kết điều hướng trên cùng: Homes, Experiences, Services

Không nền, không border. Văn bản 14px weight 600 #222222. Trạng thái active hiển thị gạch chân 2px solid #222222. Badge 'NEW': 11px weight 600 #ff385c, định vị trên cùng bên phải của label. Padding 8px dọc.

### Become a Host Button
**Vai trò:** CTA cấp ba trong điều hướng header toàn cầu

Không nền fill, không border. Văn bản 14px weight 600 #222222. Khi hover, nền #f7f7f7, radius 8px. Nằm inline trong cụm nav bên phải cùng với icon quả địa cầu và menu hamburger.

### Section Header with Arrow Link
**Vai trò:** Tiêu đề section + liên kết inline 'See all'

Văn bản heading 22px weight 600 #222222 với letter-spacing -0.2px. Theo sau inline là liên kết icon mũi tên phải màu #222222. Liên kết dự phòng 'See all': 14px weight 500 #222222, không gạch chân mặc định, gạch chân khi hover. Margin-bottom 12px trước carousel card.

### Star Rating Indicator
**Vai trò:** Tín hiệu chất lượng listing bên dưới ảnh card

Icon sao tô màu #222222 ở 10px. Số xếp hạng 12px weight 600 #222222. Số lượng đánh giá 12px weight 400 #6a6a6a trong ngoặc đơn. Hiển thị inline với khoảng cách 2px.

### Global Header
**Vai trò:** Thanh trên cùng cố định chứa logo, nav và tìm kiếm

Nền trắng (#ffffff), chiều cao 96px, border dưới 1px #ebebeb. Logo Airbnb căn trái: mark màu san hô (#ff385c) + wordmark ở 30px. Giữa: Nav Homes/Experiences/Services với gạch chân active. Phải: Văn bản 'Become a host', nút icon quả địa cầu (hình tròn), nút menu hamburger (hình tròn, nền #f7f7f7). Khi cuộn, thanh tìm kiếm thu gọn thành một pill nhỏ gọn với shadow.

### Carousel Scroll Container
**Vai trò:** Hàng listing có thể cuộn ngang theo từng section

Các card được sắp xếp thành một hàng ngang duy nhất với khoảng cách cột 12px. Nút điều hướng chevron trái/phải (hình tròn, đường kính 40px, nền trắng với shadow) được định vị ở giữa dọc của phần ảnh. Cuộn được phân trang. Không có scrollbar hiển thị.

## Do's and Don'ts

### Do
- Chỉ sử dụng #ff385c cho logo thương hiệu, nền nút kích hoạt tìm kiếm và các chỉ báo trạng thái active/selected — không bao giờ dùng cho fill trang trí hoặc khối văn bản.
- Áp dụng border-radius 20px cho tất cả listing card và container thanh tìm kiếm chính; dùng 8px cho nút pill bộ lọc và trường input; dành 50% (hình tròn) cho nút chỉ có icon.
- Đặt tất cả typography bằng Airbnb Cereal VF (thay thế: Inter Variable) với font-feature-settings: 'salt'; áp dụng letter-spacing -0.02em ở kích thước 20px+ và +0.04em cho label small-caps ở 11–12px.
- Phân lớp shadow dưới dạng stack ba giá trị — rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px 0px, rgba(0,0,0,0.1) 0px 4px 8px 0px — chỉ trên các container nâng cao như thanh tìm kiếm và modal; listing card không dùng shadow.
- Duy trì hệ thống phân cấp bề mặt một cách nghiêm ngặt: canvas trang #f7f7f7 → bề mặt card/header #ffffff → fill disabled/placeholder #dddddd → skeleton loader #b0b0b0.
- Giữ section heading ở 22px weight 600 với mẫu inline arrow-link; dùng 14px weight 400 #6a6a6a cho tất cả metadata (ngày tháng, loại chủ nhà, số lượng đánh giá).
- Sử dụng 12px làm khoảng cách cơ sở cho các phần tử trong card và 48px cho nhịp điệu section dọc giữa các hàng listing.

### Don't
- Không bao giờ dùng #ff385c cho body text, heading hoặc stroke trang trí — sự xuất hiện của nó bên ngoài logo/nút tìm kiếm/trạng thái active phá vỡ sự khan hiếm mang tính chữ ký của màu thương hiệu.
- Không thêm drop-shadow nặng vào listing card — card không dùng shadow; màu placeholder #dddddd và radius 20px mang trọng lượng thị giác mà không cần độ cao.
- Không bao giờ đặt heading trên weight 700 hoặc dưới weight 500; Airbnb Cereal VF ở weight 800+ không có trong design system và phá vỡ nhịp điệu typographic có chủ đích.
- Không dùng giá trị border-radius khác ngoài 4px, 8px, 14px, 20px, 32px hoặc 50% — việc pha trộn các radius tùy ý (ví dụ: 6px, 12px, 24px) làm gián đoạn hệ thống radius có chủ đích.
- Không bao giờ đặt văn bản trực tiếp lên ảnh card mà không có scrim hoặc bề mặt badge — nội dung đè lên sử dụng container #ffffff hoặc trắng bán trong suốt, không phải văn bản thô trên ảnh.
- Không dùng gradient xanh (rgb(45,60,91) → rgb(128,157,192)) làm bề mặt UI — nó chỉ dành riêng cho hoạt ảnh card CTA hero và không thuộc bảng màu component có thể tái sử dụng.
- Không bao giờ bỏ qua cài đặt tính năng font 'salt' trên Airbnb Cereal VF — nếu không có nó, các dạng chữ thay thế sẽ trở về hình dạng chung chung, làm suy yếu tính đặc trưng của thương hiệu.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Canvas | `#f7f7f7` | Nền trang và fill footer — tờ giấy bên dưới mọi thứ |
| 2 | Card / Header | `#ffffff` | Khu vực thông tin listing card, thanh header toàn cầu, container thanh tìm kiếm, bề mặt modal |
| 3 | Placeholder | `#dddddd` | Skeleton tải ảnh trong card trước khi ảnh tải xong |
| 4 | Loader | `#b0b0b0` | Lớp phủ xung skeleton hoạt ảnh trên placeholder ảnh card |

## Elevation

- **Search Bar / Elevated Popover:** `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 4px 8px 0px`
- **Carousel Navigation Arrow Button:** `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.16) 0px 2px 4px 0px`
- **Guest Favorite Badge:** `drop-shadow(rgba(0, 0, 0, 0.25) 0px 2px 6px)`

## Imagery

Nhiếp ảnh nội thất và kiến trúc full-bleed không qua xử lý màu sắc — ảnh sống động và không bị lọc, chiếm 70–75% diện tích thị giác của mỗi listing card. Ảnh được chứa trong card bo góc 20px; không có ảnh cạnh sắc hoặc full-bleed-to-viewport trên lưới listing. Ảnh mang phong cách gần với lối sống nhưng tập trung vào sản phẩm: phòng, giường, không gian sống được chụp trong ánh sáng tự nhiên, được dàn dựng nhưng không chiếu sáng quá mức. Không có minh họa, không có đồ họa trừu tượng, không có 3D render. Icon là dạng outline (stroke mỏng ~1.5px), đơn sắc màu #222222, chỉ dùng cho UI chức năng (điều hướng, lưu, tìm kiếm, chia sẻ). Thiết kế rất giàu ảnh — trong bất kỳ section nào, nhiếp ảnh chiếm diện tích thị giác gấp khoảng 4 lần văn bản — khiến lưới listing giống như một album ảnh với chú thích metadata hơn là một catalog sản phẩm.

## Layout

Max-width khoảng 1760px, căn giữa, với padding trang ngang ~24px. Header cố định ở 96px với nền trắng, chứa logo bên trái, tab nav giữa, utility bên phải. Bên dưới header, thanh tìm kiếm pill nổi ở giữa với chiều cao khoảng 72px. Nội dung chính bắt đầu từ khoảng 200px từ trên cùng với mẫu section heading + carousel card ngang lặp lại mỗi 48px nhịp điệu dọc. Mỗi section là một label + dải card một hàng có thể cuộn (7–8 card hiển thị, được phân trang). Card duy trì chiều rộng bằng nhau (~160–180px) với gutter 12px. Không có nhịp điệu band sáng/tối xen kẽ — mọi section đều nằm trên cùng một canvas #f7f7f7 với bề mặt card trắng. Footer là lưới liên kết nhiều cột dày đặc trên nền #f7f7f7. Điều hướng là thanh trên cùng mỏng, không có sidebar, không có mega-menu và không có nav phụ cố định.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Văn bản chính: #222222
- Văn bản phụ: #6a6a6a
- Nền (canvas): #f7f7f7
- Bề mặt (card, header): #ffffff
- Border / divider: #ebebeb
- Điểm nhấn thương hiệu: #ff385c
- primary action: không có màu CTA riêng biệt

**Ví dụ Prompt Component**

1. **Listing Card**: Khu vực thông tin trắng (#ffffff) bên dưới placeholder ảnh full-bleed (#dddddd), border-radius 20px, không shadow. Bên dưới ảnh: tiêu đề listing ở 14px Airbnb Cereal VF weight 600 #222222; loại chủ nhà + ngày tháng ở 12px weight 400 #6a6a6a; giá ở 14px weight 600 #222222. Icon sao + xếp hạng ở 12px weight 600 #222222 với số lượng đánh giá ở 12px #6a6a6a. Badge 'Guest Favorite': tuyệt đối trên cùng bên trái, nền trắng, radius 4px, 11px weight 600 #222222, letter-spacing +0.04em, shadow drop-shadow(rgba(0,0,0,0.25) 0px 2px 6px).

2. **Search Bar**: Pill trắng (#ffffff), radius 20px, shadow rgba(0,0,0,0.02) 0px 0px 0px 1px + rgba(0,0,0,0.04) 0px 2px 6px + rgba(0,0,0,0.1) 0px 4px 8px. Ba phân đoạn inline (Where / When / Who) với padding dọc 12px, label 12px weight 600 #222222, placeholder 14px weight 400 #6a6a6a, được phân cách bằng divider 1px #ebebeb. Cuối bên phải: hình tròn 40px nền #ff385c với icon tìm kiếm màu trắng.

3. **Section Header**: Văn bản 22px Airbnb Cereal VF weight 600 #222222, letter-spacing -0.2px, theo sau ngay lập tức là icon mũi tên → màu #222222. Margin dưới 12px trước carousel card. Subtext (tùy chọn) 14px weight 400 #6a6a6a ngay bên dưới heading.

4. **Filter Pill Button**: Border-radius 8px, border 1px solid #222222, nền trong suốt (hover: #f7f7f7). Văn bản 14px Airbnb Cereal VF weight 500 #222222. Padding 10px tất cả các cạnh. Trạng thái selected: nền #222222, văn bản #ffffff.

5. **Carousel Arrow Button**: Hình tròn đường kính 40px, radius 50%. Active: nền trắng (#ffffff), icon chevron #222222, shadow rgba(0,0,0,0.02) 0px 0px 0px 1px + rgba(0,0,0,0.16) 0px 2px 4px. Disabled: nền #f7f7f7, icon #c1c1c1, không shadow.

## Motion Philosophy

Các chuyển tiếp chạy ở 0.25s ease cho hầu hết các thay đổi trạng thái tương tác (nền hover, shadow lift), với 0.1s cho phản hồi snap tức thì (nhấn nút). Hero card stack trên trang chủ sử dụng một spring curve tùy chỉnh — linear(0 0%, 0.238367 8.33%... 1 100%) — cho hoạt ảnh xòe card xếp chồng, tạo ra độ nảy vật lý giúp phân biệt với các chuyển tiếp tiện ích khác. Transform là thuộc tính chuyển tiếp chính (141 trường hợp), củng cố rằng thiết kế di chuyển các phần tử thay vì làm mờ chúng. Backdrop-filter: blur(32px) được sử dụng trên các bề mặt lớp phủ (ví dụ: thanh tìm kiếm nhỏ gọn cố định khi cuộn).

## Similar Brands

- **Booking.com** — Cùng lưới card chủ đạo nhiếp ảnh với canvas gần trắng, metadata bên dưới ảnh và xếp hạng sao làm tín hiệu tin cậy chính
- **Vrbo** — Mẫu layout carousel ngang theo section giống hệt với ảnh card full-bleed và container ảnh bo tròn
- **Tripadvisor** — Chia sẻ thang đo typographic nhỏ gọn sử dụng một custom sans-serif duy nhất trên tất cả các cấp văn bản với một điểm nhấn màu thương hiệu sống động duy nhất
- **Etsy** — Cùng hệ thống phân cấp bề mặt (canvas trắng ngà → card trắng → không shadow card) với nhiếp ảnh là nguồn phong phú thị giác duy nhất và một điểm nhấn thương hiệu ấm áp duy nhất

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-rausch-coral: #ff385c;
  --color-rausch-deep: #e00b41;
  --color-carbon: #222222;
  --color-slate: #6a6a6a;
  --color-silver: #c1c1c1;
  --color-stone: #b0b0b0;
  --color-pebble: #dddddd;
  --color-mist: #ebebeb;
  --color-fog: #f7f7f7;
  --color-cloud: #ffffff;

  /* Typography — Font Families */
  --font-airbnb-cereal-vf: 'Airbnb Cereal VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.29;
  --tracking-caption: 0.44px;
  --text-body: 14px;
  --leading-body: 1.43;
  --tracking-body: -0.13px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.18px;
  --text-heading: 22px;
  --leading-heading: 1.23;
  --tracking-heading: -0.2px;
  --text-display: 28px;
  --leading-display: 1.18;
  --tracking-display: -0.56px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;

  /* Layout */
  --page-max-width: 1760px;
  --section-gap: 48px;
  --card-padding: 12px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-sm: 1.5px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 32px;
  --radius-full: 50px;
  --radius-full-2: 100px;

  /* Named Radii */
  --radius-cards: 20px;
  --radius-pills: 32px;
  --radius-badges: 4px;
  --radius-inputs: 14px;
  --radius-buttons: 8px;
  --radius-searchbar: 20px;
  --radius-iconbuttons: 50%;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 4px 8px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.16) 0px 2px 4px 0px;

  /* Surfaces */
  --surface-canvas: #f7f7f7;
  --surface-card-header: #ffffff;
  --surface-placeholder: #dddddd;
  --surface-loader: #b0b0b0;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-rausch-coral: #ff385c;
  --color-rausch-deep: #e00b41;
  --color-carbon: #222222;
  --color-slate: #6a6a6a;
  --color-silver: #c1c1c1;
  --color-stone: #b0b0b0;
  --color-pebble: #dddddd;
  --color-mist: #ebebeb;
  --color-fog: #f7f7f7;
  --color-cloud: #ffffff;

  /* Typography */
  --font-airbnb-cereal-vf: 'Airbnb Cereal VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.29;
  --tracking-caption: 0.44px;
  --text-body: 14px;
  --leading-body: 1.43;
  --tracking-body: -0.13px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.18px;
  --text-heading: 22px;
  --leading-heading: 1.23;
  --tracking-heading: -0.2px;
  --text-display: 28px;
  --leading-display: 1.18;
  --tracking-display: -0.56px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;

  /* Border Radius */
  --radius-sm: 1.5px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 32px;
  --radius-full: 50px;
  --radius-full-2: 100px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 4px 8px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.16) 0px 2px 4px 0px;
}
```