← Back to Index

Airbnb Design

Belonging · 归属感设计

220+
Countries
1B+
Guests
5M+
Hosts

Design Philosophy

Airbnb 的设计哲学是"Belonging Anywhere"(四海为家)。核心理念是创造温暖、友好、可信的用户体验。品牌红传达热情与欢迎,圆角设计传递亲和力。每个细节都为让用户感受到"归属"——就像回到自己的家一样舒适自在。

Design Tokens

Brand Colors

#ff5a5f
#e04348
#222222

Grayscale

#484848
#767676
#bebebe
#dddddd
#f7f7f7

Typography

Circular — Airbnb's Signature

Weights: 400, 600, 700

Spacing (4px Grid)

4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48

Button Styles

/* Airbnb Primary Button */ .airbnb-btn-primary { background: var(--airbnb-red); color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; transition: all 0.2s ease; border: none; } .airbnb-btn-primary:hover { background: var(--airbnb-red-dark); transform: scale(1.02); box-shadow: 0 4px 12px rgba(255, 90, 95, 0.3); }

CSS Implementation

/* Warm Card with Shadow */ .airbnb-card { background: var(--airbnb-white); border: 1px solid var(--airbnb-gray-300); border-radius: 12px; transition: all 0.3s ease; } .airbnb-card:hover { border-color: var(--airbnb-red); box-shadow: 0 8px 24px rgba(255, 90, 95, 0.12); transform: translateY(-2px); }

Key Insights