Backpack

# Backpack — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Skyscanner. "Backpack" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Backpack
**Owner:** Skyscanner
**Official documentation:** https://www.skyscanner.design/
**Visual character:** Travel-search confidence: destination-named colors (Panjin, Monteverde, Kolkata), Relative type, and price-comparison legibility at 6am in an airport.

---

## Summary

Travel-search design system tuned for global commerce and locale-heavy surfaces.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Sky Blue | `#0770e3` | `--bpk-color-sky-blue` | Primary actions and links |
| Sky Gray Text | `#111236` | `--bpk-color-sky-gray` | Primary text (ink navy) |
| Mid Gray | `#68697f` | `--bpk-color-sky-gray-tint-02` | Secondary text |
| White | `#ffffff` | `--bpk-color-white` | Surfaces |
| Canvas Contrast | `#eff3f8` | `--bpk-canvas-contrast-day` | Subtle background |
| Line | `#c2c9cd` | `--bpk-line-day` | Borders |
| Panjin Red | `#d1435b` | `--bpk-color-panjin` | Errors |
| Monteverde Green | `#00a698` | `--bpk-color-monteverde` | Success and price confidence |
| Kolkata Yellow | `#ff9400` | `--bpk-color-kolkata` | Warnings and star ratings |

## Typography

- **Body:** Skyscanner Relative — weights 400, 500, 700, 900 — `'Skyscanner Relative', -apple-system, 'Segoe UI', Roboto, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| hero-4 | `40px` | `44px` |
| heading-1 | `32px` | `40px` |
| heading-3 | `20px` | `28px` |
| body-default | `16px` | `24px` |
| caption | `12px` | `16px` |

## Spacing

Base unit: `8px (bpk-spacing)`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| sm | `8px` |
| md | `12px` |
| lg | `24px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| sm | `0 1px 3px 0 rgba(37,32,31,0.3)` |
| lg | `0 4px 14px 0 rgba(37,32,31,0.25)` |

## Motion

| Name | Value |
| --- | --- |
| duration-sm | `200ms` |
| duration-base | `400ms` |

## Quick start (CSS)

```css
/* Backpack — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://www.skyscanner.design/ */

:root {
  /* Color */
  --bpk-color-sky-blue: #0770e3; /* Primary actions and links */
  --bpk-color-sky-gray: #111236; /* Primary text (ink navy) */
  --bpk-color-sky-gray-tint-02: #68697f; /* Secondary text */
  --bpk-color-white: #ffffff; /* Surfaces */
  --bpk-canvas-contrast-day: #eff3f8; /* Subtle background */
  --bpk-line-day: #c2c9cd; /* Borders */
  --bpk-color-panjin: #d1435b; /* Errors */
  --bpk-color-monteverde: #00a698; /* Success and price confidence */
  --bpk-color-kolkata: #ff9400; /* Warnings and star ratings */

  /* Typography */
  --font-body: 'Skyscanner Relative', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --text-hero-4: 40px /* line-height 44px */;
  --text-heading-1: 32px /* line-height 40px */;
  --text-heading-3: 20px /* line-height 28px */;
  --text-body-default: 16px /* line-height 24px */;
  --text-caption: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 3px 0 rgba(37,32,31,0.3);
  --shadow-lg: 0 4px 14px 0 rgba(37,32,31,0.25);

  /* Motion */
  --motion-duration-sm: 200ms;
  --motion-duration-base: 400ms;
}
```

## Origin

Backpack is Skyscanner's design system, open-sourced in 2017 to support the cross-platform product portfolio (web, iOS, Android). It powers the same flight, hotel, and car-rental search surfaces that Skyscanner ships to over 100 million users in 30+ languages.

## Governance

Skyscanner's design-systems team owns Backpack; the codebase is open on GitHub with a public roadmap and an active contribution model. Releases happen on a clear cadence, and breaking changes ship with documented migration paths.

## Known for

- First-class internationalization — every component is built for RTL, locale-aware date and currency formatting, and language-switching mid-session.
- Travel-specific patterns — date-range pickers tuned for trip planning, fare display with multi-currency support, search-result cards with airline / hotel / car branding.
- Cross-platform consistency — shared semantic tokens render the same brand across React on web, native iOS, and native Android.

## Underrated

- The token model carries explicit semantic naming for travel concepts — bkp-color-status-positive for available, bkp-color-status-warning for limited availability — domain-aware in a way most systems aren't.
- Their accessibility commitment is substantive: every component documents screen-reader behavior, focus order, and minimum tap-target sizes for mobile.

## Watch out for

- The visual identity is Skyscanner-blue-heavy; the patterns are the reusable part, not the brand.
- Travel-specific component depth (date-range pickers, fare cards) won't translate to non-travel surfaces.

## Components worth studying

- **Date Range Picker** — Travel-grade calendar with availability, minimum-stay, price-per-night overlay, and locale-aware month navigation.
- **Fare Card** — Search-result card showing flight or hotel detail with airline/chain branding, price in user-locale currency, and inline ratings.
- **Banner** — Inline status messaging with severity tiers, dismissal, and explicit content slots for action and link.

## When to choose Backpack

Study Backpack if you're building travel, hospitality, marketplace, or any product with heavy locale and date-handling requirements. The patterns are open-source and well-documented; the brand isn't yours to lift.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Backpack by Skyscanner — Travel-search design system tuned for global commerce and locale-heavy surfaces. Character: Travel-search confidence: destination-named colors (Panjin, Monteverde, Kolkata), Relative type, and price-comparison legibility at 6am in an airport. Use a primary colour near #0770e3, the typeface "Skyscanner Relative" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 8px (bpk-spacing) base. Lean into what it's known for: First-class internationalization — every component is built for RTL, locale-aware date and currency formatting, and language-switching mid-session. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Backpack docs](https://www.skyscanner.design/)
- [Backpack on GitHub](https://github.com/Skyscanner/backpack)
- [Skyscanner engineering blog](https://medium.com/@SkyscannerEng)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/skyscanner-backpack) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._