Backpack Design System

Overview

What problem does it solve?

Backpack combines foundations, layout primitives, components, content, localization, accessibility, and brand guidance around globally diverse travel journeys.

What the system documents

• Design for traveller needs across language, locale, device, and platform contexts.Supporting reference: About Backpack
• Use shared foundations and layout primitives while respecting native interaction expectations.Supporting reference: Foundations, components, and patterns
• Treat content, localization, and accessibility as core system concerns alongside components.Supporting reference: Component principles and accessibility

Why this system is worth studying

Backpack adds an essential global-product lens: dates, currencies, destinations, long translations, right-to-left content, native platforms, and high-stakes booking decisions all pressure-test a system differently.

Consistent analysis model

System architecture at a glance

Target environmentDocumented

Global travel search, planning, and booking productsEvidence: About BackpackCompare this dimension

Platform strategyDocumented

Shared traveller-first language across web, iOS, Android, and React NativeEvidence: About BackpackCompare this dimension

FoundationsDocumented

Layout, color, typography, icons, illustration, motion, brand, and contentEvidence: Implementation librariesCompare this dimension

Token maturityDocumented

Shared foundational values distributed through platform librariesEvidence: Implementation librariesCompare this dimension

Component architectureDocumented

Cross-platform component families with platform-specific implementation detailsEvidence: Foundations, components, and patternsCompare this dimension

Interaction patternsDocumented

Search, date selection, travellers, destinations, pricing, booking, and account journeysEvidence: Foundations, components, and patternsCompare this dimension

AccessibilityDocumented

Dedicated accessibility guidance integrated with components and inclusive product practiceEvidence: Component principles and accessibilityCompare this dimension

Responsiveness / adaptivityDocumented

Responsive web plus native-platform components, localization, and right-to-left needsEvidence: About BackpackCompare this dimension

Content guidanceDocumented

Dedicated content, tone, terminology, localization, and global-product guidanceEvidence: About BackpackCompare this dimension

Documentation qualityDocumented

Foundations, components, content, accessibility, localization, code, and update datesEvidence: Backpack repositoryCompare this dimension

GovernanceDocumented

Skyscanner maintains the system and open-source implementation repositoriesEvidence: Backpack repositoryCompare this dimension

Design-to-codeDocumented

Design resources and maintained web, native, and React Native component packagesEvidence: Backpack repositoryCompare this dimension

Best learning valueDocumented

Localization, travel content, cross-platform parity, and global consumer journeysEvidence: About BackpackCompare this dimension

Notable tradeoffAnalysis

Travel-specific patterns and Skyscanner’s expressive brand require translation before use in other domains.Evidence: About BackpackCompare this dimension

What to study

Take these ideas into your own system

Primary references

Evidence and verification scope

Checked September 5, 2026: Foundations, components, content, localization, accessibility, cross-platform strategy, and implementation resources. UXD Systems explains and compares; these sources remain the authority for current implementation details.