Common UI styles
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
16px icons are used in components.
The default icon size is 20px. They are used in table columns, in the menu bar, in infographics, etc.
32px icons are used in tiles and often in list views.
44px icons are used in combination with the headline within a card.
64px icons are used in progress circles.