Core concepts

We follow a number of common concepts when designing our components. You can apply them when using our components to make your product design scalable and build your own components with the same approach in mind.

We find that providing ready-to-use components can be quite limiting when you have different requirements for the product and would result in detaching the components most of the time. Instead we provide low-level core components that can be grouped with each other to form complex patterns and product features. These components provide slot areas which let you swap them with other components.

For the simple layouts within the component slots, we provide a slot utility that supports 1-12 items, as well as horizontal and vertical directions. Each slot utility is a separate Figma component and you can search for them in Figma using slot-1, slot-2-horizontal, slot-3-vertical and other similar names. You can insert/swap them the same way as for any other component and nesting them should help you achieve more complex layouts.

There are some limitations coming from Figma:

Sometimes components are very abstract and it's not immediately clear why it's better to use a component from the library instead of implementing the same using styles. Most of the time such components are a part of the library, to make sure theming and accessibility are applied correctly and allow you easily update to the newer library versions. Over time we add examples to show how these components can be used in the products and you can copy paste those examples into your product as a starting point.

All components are using design tokens for their styles to make sure you can easily switch between themes and color modes. If you want to design custom components – you can use the same styles yourself and your components will automatically support theming and dark mode without any additional work or design mockups duplication.