---
name: "Airbnb"
mode: "light"
---
# Airbnb
## Visual theme and atmosphere
Inviting, trust-building, travel-aspirational — generous space lets imagery breathe.
Warm hospitality with a coral-rose heartbeat, generous whitespace, and photography-first cards.
## Color palette and roles
- **White (#ffffff)**: Page canvas, card backgrounds.
- **Fog (#f7f7f7)**: Section backgrounds, divider fills.
- **Haze (#dddddd)**: Borders, input outlines.
- **Gray (#717171)**: Secondary text, metadata.
- **Dark (#222222)**: Primary headings and body text.
- **Rausch (#ff5a5f)**: Logo, hearts, primary accent.
- **Arches (#fc642d)**: Secondary CTA, urgency.
- **Kazan (#00a699)**: Success, verified states.
## Typography rules
- **Display**: Cereal, 800, 48px. Hero headlines and campaign type.
- **Body**: Cereal, 400, 16px. Listing descriptions, reviews.
- **Caption**: Cereal, 600, 12px. Price callouts, badge text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 24px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.2, 0, 0, 1).
## Guardrails
- Use Rausch (#ff5a5f) only for the logo and heart/save icons.
- Photos always lead — never crop below a 4:3 ratio on listing cards.
- Set price and key info in bold 600 weight — never all caps.
- Use generous 24px gaps between listing cards.
- Keep the page canvas pure white — never off-white or gray.
---
name: "Airbnb"
mode: "light"
---
# Airbnb
## Visual theme and atmosphere
Inviting, trust-building, travel-aspirational — generous space lets imagery breathe.
Warm hospitality with a coral-rose heartbeat, generous whitespace, and photography-first cards.
## Color palette and roles
- **White (#ffffff)**: Page canvas, card backgrounds.
- **Fog (#f7f7f7)**: Section backgrounds, divider fills.
- **Haze (#dddddd)**: Borders, input outlines.
- **Gray (#717171)**: Secondary text, metadata.
- **Dark (#222222)**: Primary headings and body text.
- **Rausch (#ff5a5f)**: Logo, hearts, primary accent.
- **Arches (#fc642d)**: Secondary CTA, urgency.
- **Kazan (#00a699)**: Success, verified states.
## Typography rules
- **Display**: Cereal, 800, 48px. Hero headlines and campaign type.
- **Body**: Cereal, 400, 16px. Listing descriptions, reviews.
- **Caption**: Cereal, 600, 12px. Price callouts, badge text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 24px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.2, 0, 0, 1).
## Guardrails
- Use Rausch (#ff5a5f) only for the logo and heart/save icons.
- Photos always lead — never crop below a 4:3 ratio on listing cards.
- Set price and key info in bold 600 weight — never all caps.
- Use generous 24px gaps between listing cards.
- Keep the page canvas pure white — never off-white or gray.
---
name: "Airbnb"
mode: "light"
---
# Airbnb
## Visual theme and atmosphere
Inviting, trust-building, travel-aspirational — generous space lets imagery breathe.
Warm hospitality with a coral-rose heartbeat, generous whitespace, and photography-first cards.
## Color palette and roles
- **White (#ffffff)**: Page canvas, card backgrounds.
- **Fog (#f7f7f7)**: Section backgrounds, divider fills.
- **Haze (#dddddd)**: Borders, input outlines.
- **Gray (#717171)**: Secondary text, metadata.
- **Dark (#222222)**: Primary headings and body text.
- **Rausch (#ff5a5f)**: Logo, hearts, primary accent.
- **Arches (#fc642d)**: Secondary CTA, urgency.
- **Kazan (#00a699)**: Success, verified states.
## Typography rules
- **Display**: Cereal, 800, 48px. Hero headlines and campaign type.
- **Body**: Cereal, 400, 16px. Listing descriptions, reviews.
- **Caption**: Cereal, 600, 12px. Price callouts, badge text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 24px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.2, 0, 0, 1).
## Guardrails
- Use Rausch (#ff5a5f) only for the logo and heart/save icons.
- Photos always lead — never crop below a 4:3 ratio on listing cards.
- Set price and key info in bold 600 weight — never all caps.
- Use generous 24px gaps between listing cards.
- Keep the page canvas pure white — never off-white or gray.
---
name: "Airbnb"
mode: "light"
---
# Airbnb
## Visual theme and atmosphere
Inviting, trust-building, travel-aspirational — generous space lets imagery breathe.
Warm hospitality with a coral-rose heartbeat, generous whitespace, and photography-first cards.
## Color palette and roles
- **White (#ffffff)**: Page canvas, card backgrounds.
- **Fog (#f7f7f7)**: Section backgrounds, divider fills.
- **Haze (#dddddd)**: Borders, input outlines.
- **Gray (#717171)**: Secondary text, metadata.
- **Dark (#222222)**: Primary headings and body text.
- **Rausch (#ff5a5f)**: Logo, hearts, primary accent.
- **Arches (#fc642d)**: Secondary CTA, urgency.
- **Kazan (#00a699)**: Success, verified states.
## Typography rules
- **Display**: Cereal, 800, 48px. Hero headlines and campaign type.
- **Body**: Cereal, 400, 16px. Listing descriptions, reviews.
- **Caption**: Cereal, 600, 12px. Price callouts, badge text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 24px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.2, 0, 0, 1).
## Guardrails
- Use Rausch (#ff5a5f) only for the logo and heart/save icons.
- Photos always lead — never crop below a 4:3 ratio on listing cards.
- Set price and key info in bold 600 weight — never all caps.
- Use generous 24px gaps between listing cards.
- Keep the page canvas pure white — never off-white or gray.
---
name: "Airbnb"
mode: "light"
---
# Airbnb
## Visual theme and atmosphere
Inviting, trust-building, travel-aspirational — generous space lets imagery breathe.
Warm hospitality with a coral-rose heartbeat, generous whitespace, and photography-first cards.
## Color palette and roles
- **White (#ffffff)**: Page canvas, card backgrounds.
- **Fog (#f7f7f7)**: Section backgrounds, divider fills.
- **Haze (#dddddd)**: Borders, input outlines.
- **Gray (#717171)**: Secondary text, metadata.
- **Dark (#222222)**: Primary headings and body text.
- **Rausch (#ff5a5f)**: Logo, hearts, primary accent.
- **Arches (#fc642d)**: Secondary CTA, urgency.
- **Kazan (#00a699)**: Success, verified states.
## Typography rules
- **Display**: Cereal, 800, 48px. Hero headlines and campaign type.
- **Body**: Cereal, 400, 16px. Listing descriptions, reviews.
- **Caption**: Cereal, 600, 12px. Price callouts, badge text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 24px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 400ms; easing is cubic-bezier(0.2, 0, 0, 1).
## Guardrails
- Use Rausch (#ff5a5f) only for the logo and heart/save icons.
- Photos always lead — never crop below a 4:3 ratio on listing cards.
- Set price and key info in bold 600 weight — never all caps.
- Use generous 24px gaps between listing cards.
- Keep the page canvas pure white — never off-white or gray.
