Airbnb Mobile — design system & UI screens
A mobile search results screen displaying rental listings with a search header showing filters (Anytime, 3 guests), card-based layout featuring property images, guest favorite badges, ratings, descriptions, and pricing. Carousel indicators below the featured image allow browsing multiple photos. Official Google Play listing screenshot.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/airbnb-mobile.
Decoded design system
Airbnb Mobile's decoded design system: background #FFFFFF, text #000000, accent #BF416C, link #BF416C, primary #BF416C; type scale h1 34px / h2 22px / body 17px; 8px spacing base; 12px base radius. The single interactive/action color is #BF416C — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFEFEF |
| border | #D8D8D8 |
| text | #000000 |
| text_muted | #606060 |
| primary | #BF416C |
| accent | #BF416C |
| link | #BF416C |
| button_bg | #BF416C |
| button_text | #FFFFFF |
Using these colors
- Action color
#BF416C— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#BF416C— one role, not several (the action color).- accent
#BF416C— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 8px
- scale: 2px, 3px, 4px, 6px, 8px, 10px, 12px, 13px, 15px, 16px
Radii
- base: 12px
- button: 12px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 4px 8px 0px - card:
rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.16) 0px 2px 4px 0px
Motion
Micro-interactions run at 250ms (dominant) with cubic-bezier(0.2, 0, 0, 1).
- durations: 250ms · 100ms · 300ms
- easings:
cubic-bezier(0.2, 0, 0, 1)·cubic-bezier(0, 0, 1, 1) - animated properties: transform, box-shadow, background-color, color
Native design tokens
| Token | Value |
|---|---|
--elevation-sharp-edge-background | rgba(0,0,0,0.08) |
--palette-black | #000000 |
--palette-hof | #222222 |
--palette-foggy | #6A6A6A |
--palette-bobo | #B0B0B0 |
--palette-deco | #DDDDDD |
--palette-bebe | #EBEBEB |
--palette-faint | #F7F7F7 |
--palette-white | #FFFFFF |
--palette-arches | #C13515 |
…and 110 more measured on the page.
Button states (measured)
- primary hover: background
#000000
Layout (measured)
- container max-width:
1440px - nav: 96px
- common grid: 3 columns
Motion choreography (measured)
Load order: div.spp1z2k → span.u4v6jzs×3 → button.l1ovpqvx → div.c5vrlhl
Stagger: span ×3 — 150ms apart.
Overlay recipe (measured)
dialog panel: #FFFFFF · radius 32px · enter 400ms linear
Responsive (measured)
- breakpoints: 744px
- mobile (390px): hero 28px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →