Design tokens are the foundational elements of our design system, defining key aspects of our product's visual language. They enable consistency and flexibility, allowing us to maintain a unified look and feel across all user interfaces.

Colors

Our color tokens are organized by their functional role, making it easy to apply the right color for backgrounds, text, borders, and more. This structured approach not only maintains a consistent and recognizable palette but also supports dynamic theming and customization.

If you are not sure which token to use, please visit our design token guideline page.

Typography

With a defined font family and various font sizes and weights, our typography maintains readability and hierarchy. The consistent use of typography contributes to a polished and cohesive user experience. For formatting dates or numbers we already have some helper components: NumericFormat, DateFormat.

The Value corresponds to the class name from Tailwind CSS.

We have tokens for:

Headlines

The <Headline> component supports by default certain styles. They are listed as Tailwind class names.

Spacing

Consistent spacing ensures harmonious layouts and enhances visual flow. The defined spacing scale helps create balanced and accessible interfaces across different screen sizes. It's used for gap, padding, width and margin.

Besides this there are percentage values available for width property, which is found in form components. You can use them similar to the tokens above. Here is a list of the values: Tailwind percentage tokens

Radius

Standardized border radius contribute to a clean and modern design. These properties are applied to components, ensuring a cohesive appearance throughout our product.

Alignment

Consistent alignment ensures that elements are arranged in a purposeful manner, enhancing clarity and user comprehension.