You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Airbnb's visual identity is human, warm, and travel-photography-driven. The Bélo logo is rounded and tactile; the brand color is a saturated coral-red ("Rausch") that feels welcoming rather than corporate. Pages are built around large square or 4:3 photography of homes and experiences, arranged in dense responsive grids.
70
66
71
67
Type is humanist (Cereal, the proprietary face) with rounded terminals. Iconography follows the same logic — outline icons with rounded corners and ends.
72
68
73
-
## Color Palette & Roles
69
+
## Colors
74
70
75
71
-`primary` (`#FF385C`) — Rausch; the unmistakable Airbnb coral-red. Used on the search button, hero CTAs, and the wishlist heart.
76
72
-`text` (`#222222`) — near-black; primary copy.
@@ -86,6 +82,14 @@ Cereal (custom, by Dalton Maag) is the brand face — geometric humanist with ro
86
82
87
83
Hierarchy uses 4-5 type sizes — large hero (40-56 px), section heading (22-26 px), card title (16 px), body (14-16 px), caption (12 px). Numerals are tabular in pricing and ratings.
88
84
85
+
## Layout
86
+
87
+
12-column grid, max width ~1280 px in product. Listing grids reflow from 4-up to 3-up to 2-up to 1-up across breakpoints. Section padding 48-96 px on marketing; 24-32 px in product. Map + listings split-view uses a 50/50 or 60/40 horizontal split on desktop.
88
+
89
+
## Elevation & Depth
90
+
91
+
The default surface is flat with hairline borders. Cards lift on hover with a soft `md` shadow. Modal sheets slide up from the bottom on mobile and use full-screen takeovers on desktop with a strong dimmed backdrop. Maps overlay floating cards with `lg` shadow. No glassmorphism or color tints.
92
+
89
93
## Components
90
94
91
95
-**Search bar**: pill-shaped, 1 px border, soft shadow, four field segments separated by faint dividers, coral search icon button at the right.
@@ -94,14 +98,6 @@ Hierarchy uses 4-5 type sizes — large hero (40-56 px), section heading (22-26
94
98
-**Star ratings**: filled black star + decimal rating + count in parens; never colored.
95
99
-**Wishlist heart**: outline by default, fills coral on save with a small bounce.
96
100
97
-
## Layout
98
-
99
-
12-column grid, max width ~1280 px in product. Listing grids reflow from 4-up to 3-up to 2-up to 1-up across breakpoints. Section padding 48-96 px on marketing; 24-32 px in product. Map + listings split-view uses a 50/50 or 60/40 horizontal split on desktop.
100
-
101
-
## Depth & Elevation
102
-
103
-
The default surface is flat with hairline borders. Cards lift on hover with a soft `md` shadow. Modal sheets slide up from the bottom on mobile and use full-screen takeovers on desktop with a strong dimmed backdrop. Maps overlay floating cards with `lg` shadow. No glassmorphism or color tints.
Apple.com is the canonical "luxury technology" page: enormous product photography on white or near-black backgrounds, very large display type, generous vertical rhythm, and a pill-shaped action button in Apple-blue. Pages alternate between full-bleed product hero sections (often dark) and lighter editorial bands (often `surface` gray). Motion is subtle — fades, parallax, scroll-driven product reveals — never bouncy.
69
67
70
68
The brand reads premium because it withholds: minimal color, restrained typography, almost no decoration, oceans of white space.
71
69
72
-
## Color Palette & Roles
70
+
## Colors
73
71
74
72
-`primary` (`#0071E3`) — Apple blue; reserved for links, CTAs, focus rings.
75
73
-`secondary` (`#1D1D1F`) — near-black; primary text and dark hero backgrounds.
@@ -86,6 +84,14 @@ SF Pro Display for headings (>20 px), SF Pro Text for body (<20 px) — Apple sh
86
84
87
85
Hierarchy is enforced through enormous scale jumps: hero (80-104 px) → section (40-56 px) → eyebrow (12-14 px uppercase) → body (17 px). The 17 px body baseline is a long-standing Apple convention.
88
86
87
+
## Layout
88
+
89
+
12-column grid, max content width ~1024-1240 px depending on page. Vertical rhythm is generous: section padding rarely below 96 px, often 128-192 px between major bands. Hero sections often go full-bleed; secondary content respects the central column.
90
+
91
+
## Elevation & Depth
92
+
93
+
The product surface is nearly flat with the exception of hover-state lifts on product tiles and modal overlays. Marketing depth comes from photography (lit aluminum, OLED glow, depth-of-field) and from scroll-driven parallax — never from drop shadows on UI chrome. Translucent backdrop blur is reserved for the top navigation.
94
+
89
95
## Components
90
96
91
97
-**Buttons**: pill-shaped (rounded-full or 980 px radius), 14-16 px vertical padding. Primary: solid Apple blue, white text, no border, no shadow. Secondary: blue text on transparent background with the same pill outline.
@@ -94,14 +100,6 @@ Hierarchy is enforced through enormous scale jumps: hero (80-104 px) → section
94
100
-**Navigation**: thin (44 px) translucent top bar with backdrop blur; expands on hover for category mega-menus.
12-column grid, max content width ~1024-1240 px depending on page. Vertical rhythm is generous: section padding rarely below 96 px, often 128-192 px between major bands. Hero sections often go full-bleed; secondary content respects the central column.
100
-
101
-
## Depth & Elevation
102
-
103
-
The product surface is nearly flat with the exception of hover-state lifts on product tiles and modal overlays. Marketing depth comes from photography (lit aluminum, OLED glow, depth-of-field) and from scroll-driven parallax — never from drop shadows on UI chrome. Translucent backdrop blur is reserved for the top navigation.
0 commit comments