Airbnb Design System
Overview
A multi-end Design System serving as the foundational framework for Airbnb's web, tablet, and TV experiences in the China market. The system unifies design language, accelerates product velocity, and enforces quality at scale across 8 product teams.
- Principal UX Engineer
- Design system / Visual design
- Web / Tablet / TV
Context
Why a unified design system?
As Airbnb's China design team scaled, each product team maintained its own component libraries — resulting in design drift, inconsistent experiences, and slow development cycles. The system needed to be rebuilt from the ground up.
The goal was a single source of truth: a living library of components that any team could consume, with clear documentation and platform-specific variants built in.
Components
120+
Product teams
8
Platforms
3
Foundation
Design tokens & core primitives
Color & Typography
We established a complete token layer — semantic color roles, type scales, spacing units, and elevation values — that feeds into every component. Tokens are platform-aware: the same semantic name resolves to the correct value on web, tablet, or TV.
Spacing & Grid
A four-point spacing system combined with responsive grid definitions ensures that components reflow correctly across breakpoints without manual adjustment by product designers.
Components
Building 120+ components
Every component goes through a lifecycle: scope definition → design → accessibility review → documentation → handoff → developer QA. Only components that pass all gates are published to the library.
Components are built with variants at their core — state, size, theme, and platform variants are defined upfront so teams never need to detach or rebuild from scratch.
Adaptive components
Components respond to window size and input mode. No separate mobile and desktop variants — one component, all contexts.
State-complete
Every component ships with all interactive states defined: default, hover, focus, pressed, disabled, loading, and error.
Accessibility first
ARIA roles, keyboard navigation, and color-contrast ratios are validated before any component is published to the library.
Multi-platform
Web, tablet & TV
The system spans three distinct surface types. Web components use pointer-optimized interactions, tablet variants support multi-input (touch, trackpad, keyboard), and TV components are purpose-built for 10-foot remote-navigation with large focus rings and autoplay-safe layouts.
Tablet adaptations
Tablet components use a wider spacing scale, support pointer-based hover states, and include sidebar navigation variants. Split-view layouts are defined at the component level, not left to product teams.
TV adaptations
TV components remove all hover states and replace them with focus states. Font sizes scale to the 10-foot viewing distance, and all touch targets meet the minimum 44×44px focus area requirement for remote navigation.
Documentation
Making it easy to adopt
Every component ships with a documentation page covering Anatomy, Usage, Do & Don't, Accessibility, and Motion. The docs are built into Figma as component annotations so designers never have to leave their tool.
We also run monthly design system office hours and a Slack channel for real-time help, reducing the friction of adoption and surfacing edge cases early.
Impact
Results across 8 teams
After a 12-month rollout, all 8 China product teams migrated to the unified system. Design reviews went faster, developer handoff required fewer redlines, and the team shipped a cross-platform feature in 30% less time compared to the previous year.
−30%
Time to ship cross-platform features
8×
Teams on a single shared library
120+
Published & documented components