Common UI styles

pattern elements fundamental

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.


Border radius

In case an interactive element has a border radius, it should be consistent throughout the product.

Border radius

border-radius: 3px

Interaction color

Interactive components on light background contain elements with our interaction color $turquoise-600.

Turquoise 600

Focus state

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.

Icon sizes

The icon sizes used in our product are:

16px icons

16px icons are used in components.

Icon example 16px

20px icons

The default icon size is 20px. They are used in table columns, in the menu bar, in infographics, etc.

Icon example 20px

32px icons

32px icons are used in tiles and often in list views.

Icon example 32px

44px icons

44px icons are used in combination with the headline within a card.

Icon example 44px

64px icons

64px icons are used in progress circles.

Icon example 64px