Colours
Colours invoke feelings and emotions, it also distinguishes our brand and reinforces consistent experiences across all the products.
Type of colours
The types of colours are divided into two sub categories-
Primary Colours
Secondary Colours
Primary Colours
Neutral and Saturated colours combine to form our primary colour pallet. In simple words these are the shades that are going to be used the most
Saturated Colours
Saturated colours can add meaning to an experience, highlight UI, or establish associations with similarly coloured UI.
Gray Colour/Neutral
Neutrals are our most used pallet, this provides easy readability, navigation and can be used equally well in dark and light mode both
Naming System
While defining any type of tokens is to follow the “/” naming convention rather than “-” or “|” convention
For example — Positive/Green/900
"/" convention usage
Colour sorting and sub-categorisation in Figma happen through variables only when using the "/" nomenclature as a separator
The greatest use case of variables is in defining and sorting colour tones. It is far better than using the old school style sheet.
The sub-categorisation of shades, this is made by the variables automatically.
Colour Roles
Colour roles describe the intention behind a colour. Buttons, for example, are assigned colour roles to distinguish between primary, secondary, warning, and dangerous actions.
Ramp Stepping Process
1. Define the base shade
This shade is going to act as the foundational brick for our colour ramp construction process
Change the lightness
Decrease the lightness of base colour to create light tones and increase it for the darker tones.
Although there are no strict rules for change in the lightness value; but follow a simple approach- Bigger difference for lighter tones and relatively smaller difference for darker tones.
Nudge the saturation and hue slightly
The colours look a little bit over-saturated at this point. So we are going to adjust the saturation and hue to get the desired final result.
Last updated