Colours

We typically start by choosing our brand colours. Specifically choosing our Primary, Secondary, Accent and grey scale.

Static Colours

• These are colours that are meant to stay static between themes.

System Colours

• Often brand colours don’t cover all semantic needs for a piece of Ui, so these are here to manage that.

Colour Scales

• These are scaled versions of the static brand colours to add more flexibility to the UI kit.

 

Swapping out foundation colours with different HEX values, updates the context tokens which then further updates the component tokens.