Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded properties (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
In Fizz, the design tokens are stored in a SASS file,
These include the base color tokens, spacing tokens, and typography tokens, and breakpoint tokens, plus the contextual
tokens that are derived from these base tokens.
To use a design token in your project, import the
@getprovi/fizz/src/scss/_tokens/_tokens.scss from the
@getprovi/fizz package inside of your
<style> block in your Svelte component or in the SCSS file. Make sure that you include the
lang attribute and set it to
scss so that the Svelte compiler knows to process the file as SCSS.