---
title: "Colours"
canonical: https://sky-ui.cf.sky.com/foundations/colours
---

# Colours

The colour palette includes base colours, greyscales and specific product colours.

## Colours

Design Note: As a default we use a 20% tint from the regular swatch to create dark counterparts. More detailed adjustments might be necessary depending on the individual colour and its purpose.

### Text

These are specific, reserved solid colours that should only be used for the purpose indicated by their names.

text-grey

### Primary

There are three primary colours for use within UI design.

regular
  dark

### Reserved

These are specific, reserved solid colours that should only be used for the purpose indicated by their names.

positive
    positive-dark
  negative
    negative-dark
  attention
    attention-dark

### Greyscale

White to black greyscale tones.<br />Please consider accessibility when selecting a tone.

white
  grey-2
  grey-5
  grey-10
  grey-20
  grey-40
  grey-50
  grey-70
  grey-80
  black

### Products

Solid colours for the promotion of Sky Products. <br /><strong>Note: do not use a product colour outside of the context indicated by its name.</strong>

business
  business-dark

### Loyalty

Solid colours for use across loyalty.<br />When used in text, loyalty-two and three are only accessible for large fonts (24px and above).

one
    one-dark
  two
    two-dark
  three
    three-dark
  four
    four-dark

### Surfaces

Additional surface colours to add depth.

surface-blue
  sky-white-flat
  scrim

### Interaction

These are specific, reserved solid colours that are used for interactive states and should only be used for their intended purpose.

interaction-focus
  interaction-focus-light

interaction-disabled-background
  interaction-disabled-background-light
  interaction-disabled-foreground
  interaction-disabled-foreground-light

### Figma Component Colours

Colours used in the design of components, to ensure consistency across states.

hover-outline
  hover-fill-transparent
  hover-fill-opaque
  hover-light-fill-transparent

## Regional variants

Certain Foundation Styles are required to have regional variations and indicate the region within folder and style name, i.e. Regional-Germany/Colours-DE.

### Colours

Fallback for product gradients.

Sky-Entertainment-DE
  Sky-Kids-DE
  Sky-Bundesliga-DE
  Sky-Cinema-DE
  Sky-Sport-DE