# Design System: airbnb.com

> Generated by UIDrop on 2026-06-01 — uidrop.site

---

## 1. Design Language Overview

**Vibe:** light · vibrant · rounded · Light theme
**Built with:** Material UI

**Design rhythm:** 4px grid · very rounded · flat (no shadows)

## 2. Color System

| Role     | Hex      | Usage |
|----------|----------|-------|
| Primary  | `#FF385C` | CTAs, primary actions, links |
| Accent   | `#CC2D4A` | Highlights, success states, decorative |
| Surface  | `#FFFFFF` | Main page background |
| Elevated | `#F2F2F2` | Cards, raised containers |
| Text     | `#222222` | Body and heading text |
| Muted    | `#6A6A6A` | Secondary text, captions |
| Border   | `#DDDDDD` | Dividers, borders |

### Named color tokens (from CSS custom properties)

- `--corner-radius-tiny4px-border-radius` → `4px`
- `--corner-radius-small8px-border-radius` → `8px`
- `--corner-radius-medium12px-border-radius` → `12px`
- `--corner-radius-large16px-border-radius` → `16px`
- `--corner-radius-xlarge20px-border-radius` → `20px`
- `--corner-radius-xxlarge24px-border-radius` → `24px`
- `--corner-radius-xxlarge28px-border-radius` → `28px`
- `--corner-radius-xxxlarge32px-border-radius` → `32px`
- `--elevation-high-border` → `1px solid rgba(0,0,0,0.04)`
- `--elevation-primary-box-shadow` → `0 6px 20px rgba(0,0,0,0.2)`
- `--elevation-primary-border` → `1px solid rgba(0,0,0,0.04)`
- `--elevation-secondary-box-shadow` → `0 6px 16px rgba(0,0,0,0.12)`
- `--elevation-secondary-border` → `1px solid rgba(0,0,0,0.04)`
- `--elevation-sharp-edge-background` → `rgba(0,0,0,0.08)`
- `--elevation-tertiary-border` → `1px solid rgba(0,0,0,0.08)`
- `--motion-springs-fast-duration` → `451.75438596491193ms`

## 3. Typography

- **H1** — Airbnb Cereal VF 28px / weight 700, line-height 1.43
- **H2** — Airbnb Cereal VF 14px / weight 400, line-height 1.43
- **H3** — Airbnb Cereal VF 14px / weight 500, line-height 1.29
- **Scale:** 28px / 20px / 14px

## 4. Spacing & Layout

- **Spacing scale:** 4,8,12,16
- **Border radius:** 32px buttons
- **Radius vocabulary:** button → 32px
- **Spacing tokens:** `--spacing-macro16px: 16px`, `--spacing-macro24px: 24px`, `--spacing-macro32px: 32px`, `--spacing-macro40px: 40px`, `--spacing-macro48px: 48px`, `--spacing-macro64px: 64px`

## 6. Component Specs

### Button
- #FF385C bg
- #222222 text
- 32px radius
- 400 weight

### Card
- white bg
- 1px subtle border
- 12px radius
- 24px padding

### Input
- default input

### Link
- #222222

## 7. Implementation Rules

**DO:**
- Use `#FF385C` for all primary CTAs and interactive accents
- Reserve `#CC2D4A` for accent moments — don't overuse
- Stick to the spacing scale (4,8,12,16) — don't introduce arbitrary values
- Match the radius vocabulary: 32px buttons
- Pair Airbnb Cereal VF 700 headings with Airbnb Cereal VF 14px 400, 1.43 line-height
- Honour the visual hierarchy: bold colour on primary actions, muted tones on secondary

**DON'T:**
- Copy this design verbatim — use the tokens as a system to build something original
- Mix in colours outside this palette (especially competing primary colours)
- Break the radius scale by introducing one-off values
- Use the same shadow tier for everything — match elevation to importance

---

*Source: airbnb.com · Snapped via UIDrop on 2026-06-01*
*Do not copy the design. Use these tokens to build similar UI with the same feel.*