Design Tokens

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, _tokens.scss. 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.

Usage

To use a design token in your project, import the tokens module, @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.

<style lang="scss">
  @import '@getprovi/fizz/src/scss/_tokens/_tokens.scss';

  .my-class {
    color: $color-background-body;
  }
</style>