Extra leg room? Space leftover in your suitcase? Every bit of space counts. And it’s just as important in our product.

There are a number of ways spacing is used at Skyscanner to give our product a feeling of clarity, focus and calm.

Spacing lead image GP

When done correctly, good design should feel balanced. Skyscanner has a core set of spacing tokens that apply from tiny components all the way up to full-page layouts.

The size depends on the overall design and the content to show. There's no one size fits all solution. The range of sizes is based on the 8px grid.

Spacing tokens

Foundations Spacing 04

Foundations Spacing 04

Spacing in components

Typically sm – xl tokens are used within the construction of components. 4px of spacing should be used where it’s needed. Details matter.

Spacing Diagramme

Spacing Diagramme

Spacing between components

When design needs a little more space to breathe, xxl – xxxxl tokens give much-needed space. They create intentional white space on the screen to make it easier for travellers to subconsciously detect where sections start and end.

Spacing Between


Spacing tokens can also be used for padding, and there’s a subset of values for padding.

Padding Values

Padding in components

Padding is spacing that’s applied to the outer edges of cards on all sides. This pushes content inwards, making it easier to scan.

Padding Diagramme
  • Don’t spacing combine tokens to make new values.
Spacing Diagramme naugfhty

Spacing Diagramme naugfhty

Figma Autolayout

It’s best to build designs using Autolayout where possible. This allows the design to grow, shrink, wrap and reflow like code. The above examples show spacing turned on just for reference. Figma doesn't natively support spacing tokens, so values must be entered manually.

Spacing Figma Autolayout

Layout Grids

Spacing values are linked to our Layout Grids, where we use 16px and 24px margins. All spacing on Skyscanner adheres to a multiple of the 4px foundation.