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

# Colours — Usage

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

## Basic Guidelines

We generally recommend checking colour descriptions in the Figma style for any notes on specific usage restrictions and contrast requirements.

- Text smaller than 24px should generally use the colour text-grey (or white on dark backgrounds), but can also use the dark variant of solid colours.
- Only Display-5 or larger styles can use the regular variant of solid colours.

  
  
  
  

## Figma Component Colours

These colours are only used in the creation of components to ensure consistency across different states and appearances. They are not to be used as background colours or highlights.

  

### Hover state colours

| Style | Usage | Style in Figma | Usage Example |
| --- | --- | --- | --- |
| Outline | Used to create a halo effect around a selectable object. | Hover-outline | HoverOutline visual example |
| Fill<br><br>semi-transparent | A transparent background fill behind a free floating element. | Hover-fill-transparent | HoverFillSemiTransparent visual example |
| Fill<br><br>opaque | A solid background fill for when the component needs to stand out against a busy background. | Hover-fill-opaque | HoverFillOpaque visual example |
| Light Fill<br><br>semi-transparent | A transparent background fill behind elements for the Light appearance. | Hover-light-fill-transparent | HoverLightFillSemiTransparent visual example |