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
#116fae
stroke-emphasis
rgba(73,74,74,0.08)
rgba(228,235,240,0.08)
fill-default
rgba(17,111,174,0.24)
rgba(17,111,174,0.24)
fill-emphasis

ref / pictogram / secondary

#494a4a
#6f7a82
stroke-default
#4e9c54
#4e9c54
stroke-emphasis
rgba(73,74,74,0.08)
rgba(228,235,240,0.08)
fill-default
rgba(78,156,84,0.24)
rgba(78,156,84,0.24)
fill-emphasis

ref / pictogram / tertiary

#494a4a
#6f7a82
stroke-default
#7365b8
#7365b8
stroke-emphasis
rgba(73,74,74,0.08)
rgba(228,235,240,0.08)
fill-default
rgba(115,101,184,0.24)
rgba(115,101,184,0.24)
fill-emphasis