Colour

VUD colour system is a structured set of colours used consistently throughout a user interface to help you create visual harmony, hierarchy, and meaning.

Colour

Each colour token is assigned two colour values, one for light mode and one for dark mode. Furthermore, you have the option to customise and override the default brand colour values to align seamlessly with your unique identity.

 

 

Primary

The primary colour is the most frequently used colour, strengthening the brand identity of your product.

green-05
#ebf7eb
green-10
#cfe7cf
green-20
#afd4af
green-30
#9bc29b
green-40
#7faf7f
green-50
#67a870
green-60
#4e9c54
green-70
#2d7048
green-80
#316245
green-90
#254934

 

Secondary

The secondary colour highlights the interactive elements such as links, focus indicators and form controls like checkboxes or radio buttons.

blue-05
#e7f2f9
blue-10
#d2eafa
blue-20
#99cbec
blue-30
#6cb2e1
blue-40
#419bd7
blue-50
#1482cc
blue-60
#116fae
blue-70
#0d5788
blue-80
#14476a
blue-90
#1b384c

 

 

Neutrals

The neutral colour forms the majority of your user interfaces. They affect the majority of text styles or surfaces such as pages, cards and popover containers. As well as defining the supporting elements and effects such as dividers or most of the shadows.

neutral-light-05
#ffffff
neutral-light-10
#f7f7f7
neutral-light-20
#f2f2f2
neutral-light-30
#dadada
neutral-light-40
#c0c0c0
neutral-light-50
#a5a5a5
neutral-light-60
#8a8a8a
neutral-light-70
#6b6b6b
neutral-light-80
#494a4a
neutral-light-90
#252626
neutral-dark-05
#e4ebf0
neutral-dark-10
#c3d0d9
neutral-dark-20
#afbcc4
neutral-dark-30
#9aa5ae
neutral-dark-40
#86929b
neutral-dark-50
#6f7a82
neutral-dark-60
#4c545b
neutral-dark-70
#2b3033
neutral-dark-80
#15181a
neutral-dark-90
#000000

 

 

Supporting

The supporting colours help you to convey messages and can be applied to objects such as badges, alert and critical message boxes, or areas and sections that require immediate action.

red-05
#ffedef
red-10
#fad9de
red-20
#f1bdc4
red-30
#eaa1ac
red-40
#e28594
red-50
#db6b7d
red-60
#d44f64
red-70
#cc334c
red-80
#a12036
red-90
#801f30
orange-05
#fcf2dc
orange-10
#fcdfb1
orange-20
#fad7a2
orange-30
#f2c480
orange-40
#edb45f
orange-50
#e5a23e
orange-60
#ca7900
orange-70
#c26800
orange-80
#b35300
orange-90
#803b00
purple-05
#edecf5
purple-10
#dad7ea
purple-20
#c6c1df
purple-30
#b2abd3
purple-40
#9e96c8
purple-50
#8a80bd
purple-60
#7365b8
purple-70
#6154a5
purple-80
#4d3d99
purple-90
#403380