Backpack libraries

Backpack is our design system. We like to describe it as the codification of design at Skyscanner. It’s a collection of design resources, reusable components and guidelines for creating our products with ease and consistency.

Backpack empowers our people, giving them the tools to quickly deliver amazing work that’s on-brand, highly accessible and includes things like theming, RTL and dark mode support.

Our design system supports four main platforms: Web, iOS, Android and React Native – so we’re able to build great experiences for every traveller, no matter which platform they’re using.

Web

All Web components are available to consume as React components, exposed as modules on the npm registry.

 

Mixins

Backpack's tokens are available as a library of Sass variables and mixins. Furthermore, most small components such as buttons are also available as mixins. bpk-mixins are available via the main Backpack Web library on npm

To get an idea of all the variables and mixins available, head on over to the full reference documentation.

Base stylesheet

All components are built on top of a lightweight base stylesheet. Ensure you include this on the page when consuming any Backpack components. bpk-stylesheets is available via the main Backpack Web library on npm

iOS

Backpack for iOS is distributed as a CocoaPod. Backpack is available for UIKit and SwiftUI. The pod contains several subspecs for different token-level aspects of Backpack such as colour, typography, spacing etc.

Android

Backpack for Android is distributed as a Gradle package. It supports two targets: Android View system and Jetpack Compose.

It also contains a common module with some shared code & tokens, like icons.

React Native

All React Native components are available to consume as React components, exposed as modules on the npm registry.