Tokens are predefined units of color, typography, spacing, and more that form a design language and can be customized to meet the needs of a specific context.
<aside> 🛠️ We use Token Studio to manage our design tokens in Figma and are currently working towards aligning our tokens across design assets and code.
</aside>
Websites are built from elements of style including color, spacing, typography, line height, and opacity. The CSS rules associated with these elements can accept a broad continuum of values.
Design tokens are a limited set of discrete options, just like a scale of musical notes drawn from the spectrum of all possible frequencies.
You can see the code files that implement our tokens within ui-seeds here, and peruse the Figma files for them below.
Override design tokens to set the value of variables in the theme settings files.