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