Common UI styles describe all necessary aspects, rules and fundamental elements that define our components. In case no valid component exists for a specific use case, these elements are the basis to create new UI components.
Welcome to the 4px grid
We are using a 4px grid for our product UI. Therefore every component, every spacing between components or sections has to fit the grid.
In case an interactive element has a border radius, it should be consistent throughout the product.
Interactive components on light background contain elements with our interaction color
All interactive components use the default focus state, specified by the browser. Therefore the appearance of the focus state may vary from browser to browser.
The icon sizes used in our product are:
- XS: 16px
- S: 20px (default)
- M: 32px
- L: 44px
- XL: 64px