Return to Sky UI homepage

Gradients - Overview

View on FigmaView on GitHub

Gradients

Reserved

These are specific gradients that should only be used for their named purpose.

  1. #000ff5
  2. #000fbe
primary
  1. #1aab31
  2. #007613
environmental

Channels

Gradients for each Sky Channel. Do not use a channel gradient if you are not talking about that specific channel.

  1. #041957
  2. #122d74
Sky-News
  1. #021158
  2. #122476
Sky-Sports
  1. #0d0d0d
  2. #262626
Sky-Witness
  1. #5c0f39
  2. #80082c
Sky-Box
  1. #003268
  2. #073fa0
Sky-Store
  1. #6626a1
  2. #4c0080
Sky-Kids
  1. #ff5200
  2. #ff5200
Sky-Challenge
  1. #e90000
  2. #e90000
Sky-Documentaries
  1. #8c00ff
  2. #ff5e1d
Sky-Max
  1. #003264
  2. #27749d
Sky-Atlantic
  1. #000000
  2. #000000
Sky-Arts
  1. #ff0031
  2. #9b0031
Sky-Cinema
  1. #361740
  2. #763175
Sky-Pick
  1. #182935
  2. #31576b
Sky-Crime
  1. #ff8200
  2. #ff8200
Sky-Comedy
  1. #2b6300
  2. #3e8f00
Sky-Nature

Channels - Accessible

The accessible gradients are to be used for typography (as the text colour or the background).
The gradients comply with a 3:1 contrast ratio against white, and are therefore only accessible for large fonts (>= 24px). They can only be used with the font style Display-5 or larger.

  1. #1A0202
  2. #570505
Sky-Cinema

Products

Gradients for each Sky Product. Only use them if you’re directly referencing a particular product.
For typography, accessible versions are available for gradients where the contrast against white is insufficient.

  1. #ff8c00
  2. #f80032
  3. #ff00a0
  4. #8c28ff
  5. #0023ff
  6. #19a0ff
spectrum
  1. #000ff5
  2. #00d2ff
tv
  1. #ff00a5
  2. #ff0a50
  3. #ff6400
mobile
  1. #6e00ff
  2. #ff00a5
broadband
  1. #000ff5
  2. #00e6ff
business
(previously connect)
  1. #0644a1
  2. #862e81
service
  1. #091153
  2. #0c1b87
glass
  1. #ff2800
  2. #ff371e
  3. #ff9600
protect
  1. #001211
  2. #00818a
nowtv

Products - Accessible

The accessible gradients are to be used for typography (as the text colour or the background). The gradients comply with a 3:1 contrast ratio against white, and are therefore only accessible for large fonts (>= 24px). They can only be used with the font style Display-5 or larger.

  1. #f05c00
  2. #f80032
  3. #ff00a0
  4. #8c28ff
  5. #0023ff
  6. #1690f2
spectrum
  1. #000ff5
  2. #0096ff
tv
  1. #ff00a5
  2. #ff0a50
  3. #f56400
mobile
  1. #6e00ff
  2. #ff00a5
broadband
  1. #003fff
  2. #158ff4
business
(previously connect)
  1. #ff2800
  2. #f56400
protect

Loyalty

Gradients for use across loyalty.

  1. #708186
  2. #a1acb2
one
  1. #c88b2e
  2. #e6bb63
two
  1. #6e6c89
  2. #8d8dbe
three
  1. #191919
  2. #474747
four

Regional Variations

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

Gradients

  1. #000ff5
  2. #0096ff
Sky-UltimateTV-DE
  1. #4c0080
  2. #6626a1
Sky-Entertainment-DE
  1. #ff6218
  2. #ffa300
Sky-Kids-DE
  1. #065730
  2. #0ba158
Sky-Bundesliga-DE
  1. #990033
  2. #cb0033
Sky-Cinema-DE
  1. #000000
  2. #555555
NonSkyDE

Accessible Gradients

  1. #c1481b
  2. #996200
Sky-Kids-DE
  1. #065730
  2. #08713e
Sky-Bundesliga-DE
  1. #990033
  2. #cc0027
Sky-Cinema-DE