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

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.

Colour

Colour

Primary

Secondary

Neutrals

Supporting

VUD Product Design System

Resources

Support