Airbnb

# DESIGN.md: Airbnb Design System

## Overview

This document outlines the core design principles and specifications for the Airbnb interface, focusing on a clean, inviting, and user-centric experience. The design emphasizes clarity, ease of use, and a distinct brand presence through its vibrant primary color and approachable typography.

## Color System

The color palette is designed for high contrast and readability, with a strong emphasis on brand recognition through its signature red.

*   **Primary:** `#FF385C` (Airbnb Red) - Used for call-to-actions, primary highlights, and brand elements.
*   **Secondary:** `#FFFFFF` (White) - Dominant background color, providing a clean canvas.
*   **Accent:** `#FF385C` (Airbnb Red) - Reinforces primary actions and interactive elements.
*   **Background:** `#FFFFFF` (White) - General page and section backgrounds.
*   **Surface:** `#FFFFFF` (White) - Used for cards, modals, and distinct content blocks.
*   **Text Primary:** `#222222` (Dark Charcoal) - Main body text for optimal readability.
*   **Text Secondary:** `#717171` (Gray) - Supporting text, secondary information, and disabled states.

**Palette:**

*   `#FF385C` (Brand Red)
*   `#FFFFFF` (White)
*   `#222222` (Dark Charcoal)
*   `#717171` (Medium Gray)
*   `#EBEBEB` (Light Gray) - Borders, dividers, subtle backgrounds.
*   `#F7F7F7` (Very Light Gray) - Hover states, subtle contextual backgrounds.
*   `#999999` (Mid Gray) - Placeholder text, less prominent icons.
*   `#DDDDDD` (Light Border Gray) - Input borders, subtle separators.
*   `#EAF3FD` (Light Blue) - Contextual alerts, selected states.
*   `#224CA4` (Dark Blue) - Accent for specific interactive elements or brand messaging.

## Typography

Typography prioritizes readability and approachability, utilizing a blend of modern sans-serif fonts.

**Font Families:**

*   `--font-primary`: "Airbnb Cereal VF", "Circular", system defaults
*   `--font-heading`: "Circular", system defaults

**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:**

*   `--text-h1`: `28px`
*   `--text-h2`: `14px`
*   `--text-body`: `14px`

*Note: The design implies a responsive scaling of font sizes, with `h2` and `body` sharing the same base size, hinting at weight or line-height for distinction.*

## Spacing & Radius

Consistent spacing and rounded corners contribute to the friendly and polished aesthetic.

*   **Base Unit:** `4px`
    *   All spacing values (margins, paddings, gaps) should be multiples of `4px` to maintain rhythm and consistency.
*   **Border Radius:** `--border-radius-default`: `15px`
    *   Applied to cards, buttons, input fields, and images to create soft, approachable UI elements.

## Voice and Feel

The Airbnb design communicates a welcoming, trustworthy, and inspiring tone.

*   **Welcoming:** Soft edges, clean layouts, and a reassuring color palette evoke a sense of warmth and invitation.
*   **Trustworthy:** Clear hierarchy, ample white space, and consistent interactive elements build confidence.
*   **Inspiring:** Showcase stunning imagery and use the primary red to highlight moments of excitement and opportunity.
*   **Friendly:** Typography is legible and approachable, avoiding overly corporate or stark aesthetics.
*   **Efficient:** Focus on clear calls to action and intuitive navigation to make complex tasks feel simple.

## Implementation Notes (Tailwind Tokens)

```css
:root {
  /* Colors */
  --color-primary: #FF385C;
  --color-secondary: #FFFFFF;
  --color-accent: #FF385C;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #222222;
  --color-text-secondary: #717171;

  --color-palette-red: #FF385C;
  --color-palette-white: #FFFFFF;
  --color-palette-dark-charcoal: #222222;
  --color-palette-medium-gray: #717171;
  --color-palette-light-gray: #EBEBEB;
  --color-palette-very-light-gray: #F7F7F7;
  --color-palette-mid-gray: #999999;
  --color-palette-light-border-gray: #DDDDDD;
  --color-palette-light-blue: #EAF3FD;
  --color-palette-dark-blue: #224CA4;

  /* Typography */
  --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;

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

  /* Spacing */
  --spacing-base-unit: 4px; /* Use rem/px values derived from this. e.g., 1rem = 16px, so base unit is 0.25rem */

  /* Border Radius */
  --border-radius-default: 15px;
}
```

**Tailwind Config Example (extend section):**

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        accent: 'var(--color-accent)',
        background: 'var(--color-background)',
        surface: 'var(--color-surface)',
        text: {
          DEFAULT: 'var(--color-text-primary)',
          primary: 'var(--color-text-primary)',
          secondary: 'var(--color-text-secondary)',
        },
        palette: {
          red: 'var(--color-palette-red)',
          white: 'var(--color-palette-white)',
          'dark-charcoal': 'var(--color-palette-dark-charcoal)',
          'medium-gray': 'var(--color-palette-medium-gray)',
          'light-gray': 'var(--color-palette-light-gray)',
          'very-light-gray': 'var(--color-palette-very-light-gray)',
          'mid-gray': 'var(--color-palette-mid-gray)',
          'light-border-gray': 'var(--color-palette-light-border-gray)',
          'light-blue': 'var(--color-palette-light-blue)',
          'dark-blue': 'var(--color-palette-dark-blue)',
        },
      },
      fontFamily: {
        sans: ['var(--font-family-primary)'], // Default body font
        heading: ['var(--font-family-heading)'],
      },
      fontSize: {
        'h1': 'var(--font-size-h1)',
        'h2': 'var(--font-size-h2)',
        'body': 'var(--font-size-body)',
      },
      borderRadius: {
        DEFAULT: 'var(--border-radius-default)',
        '15px': 'var(--border-radius-default)', // Custom utility for direct use
      },
      spacing: {
        'base': 'var(--spacing-base-unit)', // Use `m-base` for margin-base, `p-base` for padding-base
        ...Array.from({ length: 10 }, (_, i) => `${(i + 1) * 4}px`).reduce((acc, val, i) => ({ ...acc, [`${(i + 1) * 4}px`]: val }), {}),
        // This generates utilities like `p-4px`, `m-8px` etc. (Consider defining a more structured scale like `1`, `2`, `3` corresponding to multiples of the base unit)
      },
    },
  },
  plugins: [],
};
```