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.

Brand

 

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

 

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

 

#edecf5
tertiary-05
Token set
semantic
#dad7ea
tertiary-10
Token set
semantic
#c6c1df
tertiary-20
Token set
semantic
#b2abd3
tertiary-30
Token set
semantic
#9e96c8
tertiary-40
Token set
semantic
#8a80bd
tertiary-50
Token set
semantic
#7365b8
tertiary-60
Token set
semantic
#6154a5
tertiary-70
Token set
semantic
#4d3d99
tertiary-80
Token set
semantic
#403380
tertiary-90
Token set
semantic
#403380
tertiary-gradient
Token set
semantic

Light

#ffffff
neutral-light-05
Token set
semantic
#f7f7f7
neutral-light-10
Token set
semantic
#f2f2f2
neutral-light-20
Token set
semantic
#dadada
neutral-light-30
Token set
semantic
#c0c0c0
neutral-light-40
Token set
semantic
#a5a5a5
neutral-light-50
Token set
semantic
#8a8a8a
neutral-light-60
Token set
semantic
#6b6b6b
neutral-light-70
Token set
semantic
#494a4a
neutral-light-80
Token set
semantic
#252626
neutral-light-90
Token set
semantic
#252626
neutral-light-gradient
Token set
semantic

 

Dark

#e4ebf0
neutral-dark-05
Token set
semantic
#c3d0d9
neutral-dark-10
Token set
semantic
#afbcc4
neutral-dark-20
Token set
semantic
#9aa5ae
neutral-dark-30
Token set
semantic
#86929b
neutral-dark-40
Token set
semantic
#6f7a82
neutral-dark-50
Token set
semantic
#4c545b
neutral-dark-60
Token set
semantic
#2b3033
neutral-dark-70
Token set
semantic
#15181a
neutral-dark-80
Token set
semantic
#000000
neutral-dark-90
Token set
semantic
#2b3033
neutral-dark-gradient
Token set
semantic

 

 

 

 

Functional

Light

#ffffff
default-light-05
Token set
component
#f7f7f7
default-light-10
Token set
component
#f2f2f2
default-light-20
Token set
component
#dadada
default-light-30
Token set
component
#c0c0c0
default-light-40
Token set
component
#a5a5a5
default-light-50
Token set
component
#8a8a8a
default-light-60
Token set
component
#6b6b6b
default-light-70
Token set
component
#494a4a
default-light-80
Token set
component
#252626
default-light-90
Token set
component

 

 

Dark

#e4ebf0
default-dark-05
Token set
component
#c3d0d9
default-dark-10
Token set
component
#afbcc4
default-dark-20
Token set
component
#9aa5ae
default-dark-30
Token set
component
#86929b
default-dark-40
Token set
component
#6f7a82
default-dark-50
Token set
component
#4c545b
default-dark-60
Token set
component
#2b3033
default-dark-70
Token set
component
#15181a
default-dark-80
Token set
component
#000000
default-dark-90
Token set
component
#ebf7eb
success-05
Token set
component
#cfe7cf
success-10