Text

We have different text styles to suit our range of Surfaces.

Status colours

These are for success, warning, and danger attributes, available as Spot colours and Fill colours. Spots apply to Icons, Fills apply to Surfaces.

Canvas

There can only be one canvas per screen, this is the bottom layer. Canvas Contrast is helpful when the screen contains many cards, this helps differentiate them from the canvas. Otherwiseyou can create more white space by using Canvas Default.

Surfaces

A screen may contain many surfaces. These sit one layer above the Canvas. There are different options to give this more emphasis if needed, try Surface Contrast.

Elevated sheet

The highest layer on screen, so naturally the brightest. In Day Mode this is achieved through adding shadow to the sheet, in 🌛Night Mode we use Elevated Sheet to simulate elevation.

Surfaces sit on top of the canvas, you can have multiple surfaces on a single canvas.

Other elements

Currently this is reserved for Dividing Lines, and Scrims.

Core colours

These are our core brand accent colours. These should be used sparingly if there isn't any other appropriate sementic colour.

Sky Blue

Effortless travel planning

Our accent colour, Skyscanner’s voice within Product pages. Sky Blue can be used a few ways.

• A spot colour in UI for critical guidance points, info or gestures to progress, such as flight ‘search’ button, or FAB.
• A flood of colour to emphasise our brand volume, such as a Graphic Promo
• Text links – hyperlink text should only ever be Sky Blue
• If you have one critical button in your flow, consider using Sky Blue (Primary Button) for the most emphasis.

On an entire screen, use Sky Blue sparingly. If we use it too much, then it just acts as noise.

Dark Sky

Everything else

Meet Sky Blue and Eco Green’s best friend, Dark Sky. If you don’t have a good reason to help travellers, or help generations to come, use Dark Sky. Because of its lack of hue, it won’t flood the page with unnecessary distraction. Think of it like using black, only with a little more personality.

Proportional usage

Accessibility

Our Product colours have been designed with accessible combinations in mind.

• Regular text (smaller than 24px or 19px bold) should have a minimum contrast of 4.5:1
• Large text (24px or 19px bold and larger) should have a minimum contrast of 3:1
• UI components should have a minimum contrast of 3:1