---
title: "Gradients"
canonical: https://sky-ui.cf.sky.com/foundations/gradients
---

# Gradients

Colour gradients are used for different channels and products.

## Gradients

### Channels

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

Sky-News
  Sky-Sports
  Sky-Witness
  Sky-Box
  Sky-Store
  Sky-Kids
  Sky-Challenge
  Sky-Documentaries
  Sky-Max
  Sky-Atlantic
  Sky-Arts
  Sky-Cinema
  Sky-Cinema-dark
  Sky-Pick
  Sky-Crime
  Sky-Comedy
  Sky-Nature

### Products

Gradients for select Sky Products. Only use them if you’re directly referencing a particular product.

Looking for the sub-brand gradients? They’ve been removed as they are no longer in use as of the November 2025 Sky rebrand.

spectrum
  <b>
      business <br /> (previously connect)
    </b>
  service
  nowtv

### Products - Accessible

Gradients must not be used on typography or icons. They can however be used for illustrations (larger than icons with more details). See the [Icons documentation](/skycons/#gradients-are-not-supported) for more information.

Looking for the Accessible gradients for Spectrum and other sub-brands (TV, Mobile and Broadband)? They’ve been removed as they are no longer in use as of the November 2025 Sky rebrand.

<b>
      business <br /> (previously connect)
    </b>

### Loyalty

Gradients for use across loyalty.

one
  two
  three
  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

Sky-UltimateTV-DE
  Sky-Entertainment-DE
  Sky-Kids-DE
  Sky-Bundesliga-DE
  Sky-Cinema-DE
  NonSkyDE

### Accessible Gradients

Sky-Kids-DE
  Sky-Bundesliga-DE
  Sky-Cinema-DE