Design tokens are special variables used to maintain a scalable visual system for UI development and brand consistency. Koobiq design tokens store the visual design attributes that define the visual language, including color, typography, and spacing we use.
Design tokens are key-value pairs. For example:
Key: value;
$card-dark-color-scheme-success-background: #276211;
- The key name defines the usage or how to apply the value to a specific context, such as using text on a light background
- The key stores visual design attributes
- The key replaces hard-coded values, such as hex values for color or pixel values for spacing