A Design Token or Variable is an entity that houses visual design attributes about an element. On the surface it may look like a label or a simple text string, but on the backend it contains all the vital visual information a system needs to render that element appropriately.
Starting with a simple example, colour. Colours can be defined in different ways, with the most common types in development being hex codes and RGB. When these colours are defined in code, they render the appropriate colour for an element. However, when a colour changes in the system, say the main blue colour for a brand, the hex or RGB value being used must be updated everywhere that it occurs in code. This can be a tedious and error prone process.
Design tokens remove the burden of ‘find and replace’ by defining the colour once and using the token (i.e. --primary-blue) everywhere that the colour is defined in code. This means, that when the blue colour needs to be updated, changing the definition of --primary-blue happens once and propagates everywhere in the design. This saves significant development time and reduces the chance of a value being missed.