Design System Inspiration of Skyscanner

1. Visual Theme & Atmosphere

Skyscanner's product speaks with the confidence of a global travel marketplace that has handled hundreds of millions of searches — clear, energetic, and trustworthy, without the corporate gravity of legacy airline booking tools. The system opens on a pure white canvas (#ffffff) wrapped in a luminous, cornflower-sky blue (#0062e3) for its primary CTA, while a deep midnight navy (#05203c) anchors contrast surfaces, headers-on-dark, and the brand's most authoritative moments. The result is a palette that feels genuinely sky-inspired — open, optimistic, and reliably actionable.

Skyscanner's typographic identity is built on a custom geometric sans, "Skyscanner Relative", a humanist typeface designed in-house that forms the foundation of every word in the product — from hero headlines at weight 900 to button labels at weight 700 to body text at 400. A secondary editorial serif, Larken, is reserved for brand storytelling surfaces (audience/campaign pages), giving the system an expressive toggle between two registers: functional sans and editorial serif. The body size is a deliberate 16px at 1.5 line-height, engineered for scan-first search interactions where users compare prices and routes at speed.

The design language is defined by rounded softness at every scale: corner radii cascade from 4px (checkbox borders) through 8px (buttons, chips) to 12px (search panels, major cards) and 100px (product-selector pill tabs). The search form itself — Skyscanner's most visited surface — is a card composed of white-background input blocks with generous 72px height, minimal borders, and a single electric-blue submit button. Depth comes from a dual-layer shadow system: a neutral rgba(0,0,0,0.08) fill-shadow layered with a subtle rgb(230,233,235) inset ring for cards, and a three-level ambient/standard/XL scale for floating panels.

Key Characteristics:

• Custom "Skyscanner Relative" typeface for all product text; Larken serif for editorial surfaces
• Sky blue #0062e3 (Backpack --bpk-core-accent) as the single interactive/CTA colour
• Midnight navy #05203c (Backpack --bpk-core-primary) for dark surfaces and brand depth
• Pill-shaped product-selector tabs (100px radius) on deep navy hero backgrounds
• Large (72px) search-input blocks with card-style grouping and 12px radius
• 8px radius for standard buttons; no square corners, no excessive rounding
• Dual-layer card shadow: rgba(0,0,0,0.08) + rgb(230,233,235) ring border
• "Eco" teal (#0fa1a9) for environmental/sustainability signals (green travel)
• Typography weight triad: 900 (display), 700 (headings/labels), 400 (body)

2. Color Palette & Roles

Primary

• Sky Blue / Core Accent (#0062e3): --bpk-core-accent. The system's single interactive colour — primary CTA backgrounds, links, active tabs, checkbox fills, segmented-control selected state, and the search submit button. This is the colour Skyscanner owns.
• Midnight Navy / Core Primary (#05203c): --bpk-core-primary / --bpk-surface-contrast. The deepest brand colour — hero section backgrounds (dark), the chip-filter active state, the search panel's "swap origin and destination" button ring. Not black; a deep indigo-navy with travel-brand personality.
• Pure White (#ffffff): Page canvas, card surfaces, text on dark/blue backgrounds, input fields.

Surface Scale

• Canvas Contrast (#eff3f8): --bpk-canvas-contrast. The cool-off-white secondary surface — badge backgrounds, info-banner backgrounds, alternate section tints.
• Surface Low Contrast (#f7f9fb): Subtler page tint, hover states on secondary items.
• Surface Subtle (#e3f0ff): Blue-tinted subtle surface for promotional sections and active DS sidebar items.
• Surface Highlight (#e0e4e9): --bpk-surface-highlight. Disabled backgrounds, secondary button fill.

Text & Border

• Foreground (#161616): --bpk-text-primary. Primary body text. Near-black with a warm undertone — not pure black.
• Muted (#626971): --bpk-text-secondary. Secondary body text, captions, metadata.
• Line Default (#c1c7cf): --bpk-other-line-default. Standard border — input outlines, chip borders, dividers.

Interactive States

• Primary Hover (#024daf): Button and active-state hover for blue actions.
• Primary Deep (#154679): Pressed state, date-selector highlight, deep hover.

Semantic & Eco

• Eco Teal (#0fa1a9): --bpk-core-eco. Sustainability / green travel signal — unique in the palette.
• Error / Danger (#e70866): --bpk-status-danger-spot. Form validation errors, destructive states.
• Success (#0c838a): --bpk-status-success-spot. Confirmation, positive status.
• Warning / Disruption (#f55d42): --bpk-status-warning-spot. Disruption / delay alerts.

3. Typography Rules

Font Family

• Product / Primary: 'Skyscanner Relative' — custom humanist geometric sans, developed in-house. Fallback: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif. Global locale fallbacks include Noto Sans family variants for CJK, Arabic, Hebrew, Thai.
• Editorial / Brand: 'Larken' — serif typeface reserved for Brand World / audience / campaign surfaces only. Never used in product UI.

Hierarchy

Principles

• Relative is always sans: Larken is for storytelling only; every product UI — buttons, inputs, tabs, navigation — uses Skyscanner Relative.
• Major-third scale: The type scale derives from a major-third progression (1.250 ratio), creating consistent harmonic jumps across sizes.
• 8px baseline grid: All sizes and line-heights snap to a 4px/8px grid.
• Two headline weights: Weight 900 for display-level brand moments; weight 700 for all other headings, labels, and button text; weight 400 for body and UI copy.
• No tracking manipulation: Unlike many brand systems, Skyscanner Relative is designed to run at 0 letter-spacing — the font's optical balance makes additional tracking unnecessary.

4. Component Stylings

Buttons

Primary

• Background: #0062e3
• Text: #ffffff
• Radius: 8px
• Height: 36px
• Padding: 0px 16px
• Font: 16px / 400 / Skyscanner Relative
• Hover: #024daf background
• Use: Primary CTAs — search submit, book, confirm

Primary Large

• Background: #0062e3
• Text: #ffffff
• Radius: 8px
• Height: 48px
• Padding: 0px 16px
• Font: 16px / 400 / Skyscanner Relative
• Use: Featured/Large button variant (high-emphasis surfaces)

Secondary

• Background: #e0e4e9
• Text: #161616
• Radius: 8px
• Height: 36px
• Padding: 0px 16px
• Font: 16px / 400 / Skyscanner Relative
• Hover: #c1c7cf background
• Use: Secondary actions alongside primary

Destructive (Danger)

• Background: #e0e4e9
• Text: #e70866
• Radius: 8px
• Height: 36px
• Padding: 0px 16px
• Hover: #e70866 background with white text
• Use: Delete, cancel, destructive actions

Secondary on Dark

• Background: rgba(255,255,255,0.1)
• Text: #ffffff
• Radius: 8px
• Height: 36px
• Padding: 0px 16px
• Use: Secondary actions on navy/dark surfaces (hero panels)

Inputs & Forms

Search Input Block

• Background: #ffffff
• Radius: 0px (individual block; 12px on the outer container)
• Height: 72px
• Padding: 0px 16px
• Font: 16px / 400 / Skyscanner Relative
• Border: none (grouped card with outer container border)
• Use: Departure/destination/date/passenger fields in the search widget

Standard Input

• Background: #ffffff
• Border: 1px solid #c1c7cf
• Radius: 8px
• Padding: 12px 16px
• Font: 16px / 400 / Skyscanner Relative
• Focus: 2px solid #0062e3
• Use: Standard form inputs (sign-in, booking details)

Checkbox

• Background (checked): #0062e3
• Border (unchecked): 2px solid #626971
• Radius: 4px
• Use: Filter toggles, trip options, preference checkboxes

Cards & Containers

Standard Card

• Background: #ffffff
• Radius: 12px
• Shadow: rgba(0,0,0,0.08) 0px 4px 8px 0px, rgb(230,233,235) 0px 0px 0px 1px
• Use: Flight result cards, hotel cards, content panels on white page

Surface Contrast Card

• Background: #05203c
• Text: #ffffff
• Radius: 12px
• Padding: 12px 16px
• Use: On-dark-surface information cards (e.g. Backpack docs dark panel)

Tinted Surface Card

• Background: #eff3f8
• Radius: 12px
• Use: Secondary/grouped content on canvas contrast background

Badges & Chips

Info Badge

• Background: #e3f0ff
• Text: #0062e3
• Radius: 6px
• Padding: 4px 8px
• Font: 12px / 400
• Use: Informational tags, labels, "best value" type pills

Filter Chip (Off)

• Background: transparent
• Border: 1px solid #c1c7cf
• Text: #161616
• Radius: 8px
• Height: 32px
• Padding: 0px 12px
• Use: Deselected filter chips (stops, airlines, times)

Filter Chip (On / Active)

• Background: #05203c
• Text: #ffffff
• Radius: 8px
• Height: 32px
• Padding: 0px 12px
• Use: Selected filter chips (active state)

Tabs

Product Tab (Active)

• Background: #0062e3
• Text: #ffffff
• Radius: 100px
• Padding: 0px 16px
• Height: 36px
• Font: 16px / 400
• Use: Active product selector tab (Flights, Hotels, Car hire) on dark hero

Product Tab (Inactive)

• Background: transparent
• Text: #ffffff
• Radius: 100px
• Padding: 0px 16px
• Height: 36px
• Border: rgba(255,255,255,0.5) 0px 0px 0px 1px inset
• Use: Inactive product tabs on dark/blue hero backgrounds

Navigation Tab (Active)

• Background: #024daf
• Text: #ffffff
• Use: Segmented control selected state on contrast surface

---

Verified: 2026-06-22 Tier 1 sources: https://www.skyscanner.design (Backpack design system — live CSS token extraction and component inspect); https://github.com/Skyscanner/backpack/blob/main/token-sync/css/theme-backpack-light.css (published CSS variables — authoritative token source); https://unpkg.com/@skyscanner/bpk-foundations-web@24.6.0/tokens/base.default.scss (npm package token file — spacing, radius, typography scale); https://www.skyscanner.co.kr/ (live homepage inspect via playwright getComputedStyle — button/tab/input computed values) Tier 2 sources: getdesign.md/skyscanner — "No designs found"; styles.refero.design/?q=skyscanner — no Skyscanner entry found (results were unrelated travel brands) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Backpack scale: sm=4px, md=8px, base=16px, lg=24px, xl=32px, xxl=40px, xxxl=64px, xxxxl=96px
• The search widget is the most layout-critical element: a card-shaped container with 12px radius, internal blocks at 72px height each, and a separate submit button at 12px radius

Grid & Container

• Centered max-width content (approximately 1280px)
• Hero: full-width dark (#05203c) background with centered search widget
• Product tabs: horizontal pill row centered in the hero
• Results: vertical list of cards, full container width on mobile, 3-column-capable layout on desktop
• Marketing pages: alternating white and tinted sections (#eff3f8)

Whitespace Philosophy

• Generous block spacing: The 72px search-input height deliberately provides large touch targets and visual breathing room
• Precision within components: Component internal padding is tight (8px-16px) while section-level spacing is generous (48px-64px)
• Scan-first density: Flight result cards are information-dense by design — price, airline, times, duration, stops in one readable block

Border Radius Scale

• 4px: Checkboxes, micro-elements
• 6px: Small badges, cookie consent buttons on Backpack docs
• 8px: Standard buttons, chips, form inputs (button-border-radius = 0.5rem)
• 12px (0.75rem): Card containers, search widget, input-large
• 24px (1.5rem): lg token — large viewport containers
• 100px / full: Product selector pill tabs, full-round avatars

6. Depth & Elevation

Shadow philosophy: Skyscanner's shadow system is neutral — rgba(22,22,22,0.25) uses the brand's off-black foreground colour (not pure black) as the shadow source, keeping depth warm rather than cold. The card-level shadow adds a rgb(230,233,235) inset ring (nearly invisible on white) that creates a crisp, inset-border effect without a visible CSS border — this is the characteristic "floating card" look of Skyscanner's search results.

7. Do's and Don'ts

Do

• Use #0062e3 (Sky Blue) for all interactive/CTA elements — it's the action colour
• Use "Skyscanner Relative" for every product UI text element
• Apply 8px radius to buttons and chips — it's the workhorse radius
• Use 100px pill radius for product-selector tabs only
• Give search input blocks 72px height — generous touch targets are the brand standard
• Use the dual-layer card shadow (rgba(0,0,0,0.08) + rgb(230,233,235) ring) for content cards
• Use #05203c navy as the hero background — the brand's confident dark surface
• Apply 12px radius to search panel containers and result cards
• Use "Larken" for editorial/brand campaign surfaces only
• Use #0fa1a9 eco teal exclusively for sustainability and environmental signals

Don't

• Use pure black (#000000) for text — foreground is #161616
• Apply Larken in product UI — it belongs to brand storytelling only
• Use weight 900 for anything but the most exceptional display copy
• Mix Sky Blue (#0062e3) with other accent colours on the same surface
• Decrease radius below 4px — Skyscanner is intentionally soft and rounded
• Use pill-radius (100px) on buttons — that's reserved for the product tab row
• Skip the eco teal signal when featuring environmental or carbon-conscious travel options
• Use drop shadows heavier than XL — the system stays subtle with neutral shadow tones

8. Responsive Behavior

Breakpoints

Touch Targets

• Search input blocks at 72px height — comfortably tappable on touch
• Buttons at 36px (standard) / 48px (large) height
• Product tabs at 36px height with generous 16px horizontal padding
• Minimum interactive target: 44px (accessibility guideline)

Collapsing Strategy

• Hero search widget: stacks vertically on mobile; horizontal row on desktop
• Product tabs: horizontal scroll on narrow viewports
• Result cards: single column on mobile; multi-column on desktop
• Navigation: hamburger menu on mobile; expanded horizontal nav on desktop
• Typography scale: hero sizes reduce proportionally (40px → 28px on mobile)

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Sky Blue (#0062e3)
• CTA Hover: Blue Mid (#024daf)
• Page Background: Pure White (#ffffff)
• Hero / Dark Surface: Midnight Navy (#05203c)
• Canvas Contrast: Cool Off-White (#eff3f8)
• Primary Text: Off-Black (#161616)
• Secondary Text: Slate (#626971)
• Line / Border: Cool Grey (#c1c7cf)
• Eco / Sustainability: Teal (#0fa1a9)
• Error: Magenta-Red (#e70866)
• Success: Teal Green (#0c838a)

Example Component Prompts

• "Create a hero section on #05203c midnight navy. Center a horizontal row of pill tabs (100px radius, 36px height, 0px 16px padding) — active tab: #0062e3 bg, white text; inactive: transparent, white text, 1px inset rgba(255,255,255,0.5) border. Below tabs: white search panel card, 12px radius, grouped input blocks 72px height each, Skyscanner Relative 16px/400. CTA button: #0062e3, 12px radius, 12px 16px padding, white text."
• "Design a flight result card: white background, 12px radius, dual shadow: rgba(0,0,0,0.08) 0px 4px 8px, rgb(230,233,235) 0px 0px 0px 1px. Airline logo left, route/time center, price right in Sky Blue #0062e3. Skyscanner Relative — price at 20px/700, details at 14px/400, #626971."
• "Build a filter chip row: each chip 32px height, 8px radius, Skyscanner Relative 14px/400. Off: transparent bg, #c1c7cf border, #161616 text. On: #05203c bg, white text."
• "Create an info badge: #e3f0ff background, #0062e3 text, 6px radius, 4px 8px padding, 12px/400 Skyscanner Relative."
• "Design an eco signal badge: #0fa1a9 background (or tinted surface with eco text), paired with leaf icon. Signals low-carbon flight option."

Iteration Guide

1. Skyscanner Relative is the only typeface for product UI — never substitute
2. #0062e3 Sky Blue = action. Use it for exactly one primary CTA per section
3. #05203c navy = the brand's confident dark — use for hero backgrounds and high-contrast surfaces
4. Card radius is 12px; button radius is 8px; pill tabs are 100px — never interchange
5. Dual-layer card shadow is the brand signature: rgba(0,0,0,0.08) 0px 4px 8px, rgb(230,233,235) 0px 0px 0px 1px
6. Search input blocks are 72px tall — don't reduce; touch ergonomics are intentional
7. Eco teal (#0fa1a9) belongs only to sustainability/environmental signals

---

10. Voice & Tone

Skyscanner's voice is curious, helpful, and refreshingly human — a savvy travel companion, not a booking engine. The product's purpose is to remove complexity from travel planning, and the copy reflects this: straightforward, jargon-free, and action-oriented. Skyscanner communicates with a light British wit — enough personality to feel alive, never enough to be distracting. The company's Edinburgh heritage shows in understated confidence: Skyscanner doesn't hype, it clarifies.

Voice samples (from live surfaces):

• "수백만 개의 저가 항공권. 검색 한 번으로 간단하게." — hero headline ("Millions of cheap flights. Simply found in one search.") (verified live 2026-06-22)
• "Are you a person or a robot?" — bot-detection captcha page (conversational, charming even in friction). (verified live 2026-06-22)
• "Backpack is Skyscanner's design system, a collection of guidelines, components and tools for creating intuitive traveller-first experiences." — Backpack homepage (clear, brand-purposeful prose). (verified live 2026-06-22)

Forbidden register: "Best prices GUARANTEED!", spam-adjacent urgency ("Only 2 seats left!"), dark-pattern FOMO, overclaim superlatives ("World's greatest"), corporate jargon, exclamation-heavy hype.

11. Brand Narrative

Skyscanner was founded in 2001 by Gareth Williams, Barry Smith, and Bonamy Grimes — three friends in Edinburgh who, working on a coding side project, realised they couldn't find a quick way to compare airfares across carriers. The company began as a tool for their own travel frustration. It launched publicly in 2003 as one of the first flight-aggregator search engines, predating Google Flights by nearly a decade.

The Edinburgh origin is foundational to the brand: Skyscanner grew from a developer's tool into a mass-consumer product while retaining a sense of curious, problem-solving pragmatism that distinguishes it from its American competitors. The product's promise — find the cheapest way to get from A to B, regardless of airline or booking site — was radical in an era when each airline kept fares inside its own walled garden.

Skyscanner's growth arc ran through a 2014 Series A investment by Sequoia Capital, followed by rapid international expansion (now supporting 52 languages and 70 currencies), until 2016, when Chinese travel giant Ctrip (now Trip.com Group) acquired Skyscanner for £1.4 billion — the largest-ever acquisition of a British tech company at the time. Despite the acquisition, Skyscanner continues to operate as an independent brand headquartered in Edinburgh, with offices in London, Barcelona, and Shenzhen.

The Backpack design system (open-sourced in 2016) represents the company's commitment to building product with the rigor of a design-forward tech company. The name "Backpack" is on-brand: it's the traveller's essential companion — reliable, well-organised, and always ready for the next destination.

What Skyscanner refuses: airline-owned bias (all results are ordered by price and relevance, not commercial arrangement by default), dark-pattern urgency tactics, and the visual register of legacy travel agencies (photo carousels of stock beach shots, heavy serif editorial fonts, cluttered layouts). What it embraces: clean information hierarchy, honest pricing, and the conviction that travel comparison should feel effortless.

12. Principles

1. Traveller-first, always. Backpack's stated mission is "creating intuitive traveller-first experiences." Every UI decision must ask whether it serves the traveller's goal (finding the best flight) or the business's short-term goal (a higher-margin booking). When they conflict, traveller wins. UI implication: Default sort is "Best" (price + convenience), not "Most profitable to partners."
2. Clarity over cleverness. Skyscanner operates in 52 languages. Every copy string, icon, and pattern must translate — literally and conceptually. Metaphors that work in English often break in Japanese. UI implication: Prefer universal iconography and literal label text over witty but cryptic shorthand.
3. Earn trust through honesty. Price alerts, fare history charts, and calendar-view cheapest-day tools all share the same underlying ethic: give travellers the information they need to make the best decision for themselves, even if it means saying "this isn't the cheapest week to fly." UI implication: Transparency about pricing, fees, and data sourcing is non-negotiable.
4. Softness signals safety. The rounded, sky-blue visual system is deliberate — buying airline tickets involves significant money and travel anxiety. The rounded corners and friendly palette lower the cognitive and emotional cost of engaging with a complex task. UI implication: Never introduce sharp edges, high-contrast warnings, or aggressive red on the primary booking surface.
5. Speed is a feature. The search widget is the product's beating heart. Every millisecond of perceived lag erodes trust. UI implication: Skeletons, optimistic UI, and progressive result-loading are first-class experiences — never an afterthought.

13. Personas

Personas below are fictional archetypes informed by Skyscanner's publicly documented user research and travel patterns, not individual people.

Priya Mehta, 28, London. A digital nomad who does quarterly visa runs and uses Skyscanner's Everywhere destination search to find the cheapest escape from the UK before winter. She books within a day of searching — she doesn't read airline blogs, she trusts the price calendar. Values speed over aesthetics; becomes immediately mistrustful if a result feels artificially highlighted.

Tomás García, 41, Madrid. A business traveller who flies four times a month within Europe. Uses price alerts to monitor fluctuating routes, and specifically appreciates Skyscanner's lack of sponsored placement in the default sort. He's noticed that other aggregators surface results "sponsored by" airlines; Skyscanner feels neutral. That neutrality is his primary loyalty driver.

Aiko Nakamura, 24, Osaka. A university student planning her first solo trip to Europe with a fixed ¥200,000 budget. Skyscanner is her first search every time because it shows all prices without requiring sign-in. She's overwhelmed by choice and relies heavily on the "Best" sort and the "Price alerts" feature to feel in control of a situation where she has low expertise.

Daniel Osei, 35, Accra. A diaspora traveller who flies Accra–London twice a year for family visits. Uses Skyscanner to monitor routes and set alerts, then often books directly with the airline. Values the breadth of route coverage and the fact that African routes are included — not all aggregators cover them comprehensively.

14. States

15. Motion & Easing

Durations (Backpack duration-* tokens):

Easings:

Motion rules: Skyscanner's motion language is functional and restrained — motion communicates state change, not personality. Search-widget inputs (72px height) expand/contract at duration-base / ease-enter. Price sort re-ordering uses staggered duration-sm on each card. The product tab switch (Flights → Hotels) transitions with a duration-sm background-colour swap — the pill moves, the content cross-fades at duration-base. Under prefers-reduced-motion: reduce, all transitions collapse to instant; skeleton-to-content switches become immediate. The eco teal signal animates with a subtle duration-base fade-in to draw the eye to environmental data without being intrusive.

Signature motion:

1. Search submit: On clicking the blue "Search" button, the button performs a brief duration-xs scale-down press, then the page transitions to results with the hero collapsing from 72px blocks to a compact sticky header at duration-base / ease-exit. The transition anchors the user spatially.
2. Price alert confirmation: The bell icon bounces once at duration-sm with ease-enter — the one place a slight delight motion appears, because a price alert is a moment of user accomplishment in a task-oriented flow.