Design tokens (beta)

Our VUD tokens are customised for theming, data visualisation, and UI components.

Three token types

Three token types

 

Our token setup has three distinct types. Each type serves a specific purpose in defining the visual appearance and customisation. Here's a breakdown of the individual types.

 

  1. Base tokens are the primitive values and define the visual appearance of the final product. These base tokens are for VUD colours and are advised not to modify.

  2. Semantic tokens establish the intended usage of the tokens. They reference the base tokens. If you wish to incorporate your branding colours*, we advise you to add your values to the brand tokens. Note that functional tokens like alerts, toasts etc., are advised not to modify.

  3. Component tokens represent all values associated with a component. They often inherit the colours from the semantic tokens. You can customise attributes for multiple components in a category by overriding the reference tokens defined in ref as it will instantly impact the components associated with those tokens.