Airbnb

# DESIGN.md: Airbnb

## Overview

This document outlines the core design principles and system elements for the Airbnb platform. The design emphasizes a clean, modern aesthetic with a focus on user experience, hospitality, and global appeal.

## Color System

The color palette is vibrant yet balanced, using a signature red to convey energy and a sense of welcome, complemented by a neutral background and strong primary text color for readability.

*   **Primary:** `#FF385C` (Airbnb Red) - Used for call-to-actions, highlights, and brand emphasis.
*   **Secondary:** `#FFFFFF` (White) - Dominant background color, provides a clean canvas.
*   **Accent:** `#224CA4` (Dark Blue) - Used sparingly for interactive elements or secondary actions, provides contrast.
*   **Background:** `#FFFFFF` (White) - General page background.
*   **Text Primary:** `#222222` (Near Black) - Main text color for high readability.

## Typography

The typography system prioritizes clarity and a friendly, approachable tone. It uses a custom typeface family for a distinct brand identity.

*   **Primary Font Family:** `Airbnb Cereal VF`
*   **Heading Font Family:** `Circular` (fallback)
*   **Font Stacks:**
    *   **Heading:** `Airbnb Cereal VF`, `Circular`, `-apple-system`, `BlinkMacSystemFont`, `Roboto`, `Helvetica Neue`, `sans-serif`
    *   **Body:** `Airbnb Cereal VF`, `Circular`, `-apple-system`, `BlinkMacSystemFont`, `Roboto`, `Helvetica Neue`, `sans-serif`
    *   **Paragraph:** `Airbnb Cereal VF`, `Circular`, `-apple-system`, `BlinkMacSystemFont`, `Roboto`, `Helvetica Neue`, `sans-serif`
*   **Font Sizes:**
    *   **H1:** `28px`
    *   **H2:** `14px`
    *   **Body:** `14px`

## Spacing & Radius

A consistent spacing system ensures visual harmony and proper information hierarchy. Rounded corners contribute to a friendly and modern feel.

*   **Base Unit:** `4px` - All spacing values should be multiples of this base unit.
*   **Border Radius:** `14px` - Applied consistently to cards, buttons, and other interactive elements for a cohesive look.

## Voice and Feel

The Airbnb brand voice is:

*   **Friendly & Welcoming:** Emphasizes hospitality and a sense of belonging.
*   **Trustworthy & Reliable:** Instills confidence in the platform and its offerings.
*   **Inspiring & Adventurous:** Encourages exploration and unique experiences.
*   **Simple & Clear:** Communicates information effectively and without jargon.

The overall feel is modern, clean, and intuitive, designed to evoke comfort and excitement.

## Implementation Notes (Tailwind Tokens)

### Color Variables

```css
  --color-primary: #FF385C;
  --color-secondary: #FFFFFF;
  --color-accent: #224CA4;
  --color-background: #FFFFFF;
  --color-text-primary: #222222;
```

### Tailwind Color Mapping

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        accent: 'var(--color-accent)',
        background: 'var(--color-background)',
        textPrimary: 'var(--color-text-primary)',
      },
    },
  },
};
```

### Font Family Variables

```css
  --font-family-primary: 'Airbnb Cereal VF', Circular, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --font-family-heading: Circular, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
```

### Tailwind Font Family Mapping

```js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        primary: 'var(--font-family-primary)',
        heading: 'var(--font-family-heading)',
      },
    },
  },
};
```

### Font Size Variables

```css
  --font-size-h1: 28px;
  --font-size-h2: 14px;
  --font-size-body: 14px;
```

### Spacing & Radius Variables

```css
  --spacing-base-unit: 4px;
  --border-radius-default: 14px;
```

### Tailwind Spacing & Radius Mapping

```js
module.exports = {
  theme: {
    extend: {
      spacing: {
        'base': 'var(--spacing-base-unit)',
        // Example: '2x-base': 'calc(2 * var(--spacing-base-unit))'
      },
      borderRadius: {
        DEFAULT: 'var(--border-radius-default)',
      },
      fontSize: {
        h1: 'var(--font-size-h1)',
        h2: 'var(--font-size-h2)',
        body: 'var(--font-size-body)',
      },
    },
  },
};
```