Design tokens

With design tokens we want to create a clear design structure that can be used by both designers and developers across projects. They are still in test phase and need be updated but they already can be used. To know more about design tokens, please read this article from InVision.

The tokens are constructed as following: category.usage.component.subitem.state whereas subitem and state are optional.

Since our CSS structure heavily relies on @extend in order to properly combine BEM and Bootstrap, the tokens are related to both Bootstrap CSS variables and utility classes.

Token Role Variable Utility