Pictograms

VUD pictograms help you communicate concepts, guide your users, and establish the overall visual style.

CSS tokens

Only monochrome pictograms support overwriting tokens for colour customisation.

--ref-pictogram-primary-stroke-default for the default pictogram colour

--ref-pictogram-secondary-stroke-default for the first alternative pictogram colour

--ref-pictogram-tertiary-stroke-default for the second alternative/variant pictogram colour

Colour tokens

The following design tokens define the colours for the pictograms:

ref / pictogram / primary

#494a4a

#6f7a82

stroke-default

#116fae

stroke-emphasis

rgba(73,74,74,0.08)

rgba(228,235,240,0.08)

fill-default

rgba(17,111,174,0.24)

fill-emphasis

ref / pictogram / secondary

#494a4a

#6f7a82

stroke-default

#4e9c54

stroke-emphasis

rgba(73,74,74,0.08)

rgba(228,235,240,0.08)

fill-default

rgba(78,156,84,0.24)

fill-emphasis

ref / pictogram / tertiary

#494a4a

#6f7a82

stroke-default

#7365b8

stroke-emphasis

rgba(73,74,74,0.08)

rgba(228,235,240,0.08)

fill-default

rgba(115,101,184,0.24)

fill-emphasis

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.

Pictograms

CSS tokens

Colour tokens

VUD Product Design System

Resources

Support