Design Tokens

In Bauhaus Design System we use tokenized design decisions throughout our components. These design tokens are designed and set in our Design Tokens Figma File. There is 3 levels of tokens in BDS in order of specificity. These are:

Style tokens: Basic, foundational values like specific color hex codes or pixel dimensions that do not carry specific meaning on their own. Example: Lila 28, Grey 90, etc. We have style tokens for the following four design decisions:

• Colors
• Typographies
• Effects
• Gutters

Semantic tokens - Abstracted values derived from raw tokens that carry specific meaning, such as "--bds-primaryText-color-locked" or "--bds-color-error", to represent design intentions.

Component level tokens: Specific sets of values tailored for individual components, often built upon semantic tokens, ensuring a consistent design within that component. Example: $appButton-primary-bgColor, etc.

Style tokens form the base of the design system, semantic tokens give these values meaningful context, and component level tokens utilize both to ensure consistent design at the component level.

Figma Plugin

We use the Figma API that we adapted to our needs to fetch all the information of the defined tokens from Figma. Our Figma Plugin is used to do so. It fetches the tokens that Figma handles natively, as well as Gutters and Sizes. After processing the fetched data and generating harmonized and consistent information from it, the plugin creates documentation tables for all the style tokens.

More information on how to fetch these tokens from design to code is documented in contributing.md file in BDS repository.