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, color. Colors can be defined in different ways, with the most common types in development being hex codes and RGB. When these colors are defined in code, they render the appropriate color for an element. However, when a color changes in the system, say the main blue color 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 color once, and using the token (i.e. --primary-blue) everywhere that the color is defined in code. This means, that when the blue color 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.