Radius

Softer, rounder edges give a touch of modernity and friendliness to our product.

Rounded edges are everywhere in the Skyscanner product. Badges, buttons, chips and cards all use soft corners. Even the smallest piece of UI, the humble icon is rounded and softened to perfection.

Foundations Radius 02

Radius tokens

xs – sm tokens

The xs – sm tokens are reserved for the smallest elements.

Foundations Radius xs-sm

md token

The md is the default radius. It works for most scenarios.

Foundations Radius md-pill 4

lg token

The lg token is the largest radius. This works best when the user interface stretches to fill an entire viewport. Think of the Russian doll principle, the more the container expands, the more the radius does.

Foundations Radius md-pill 03