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.

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

hex: #00a1b2

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:

  • XS: 16px
  • S: 20px (default)
  • M: 32px
  • L: 44px
  • XL: 64px

16px icons

Icon example 16px

16px icons are used in components.

20px icons

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

32px icons

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

44px icons

Icon example 44px

44px icons are used in combination with the headline within a [card]({{link_to_id id='card' }}).

64px icons

Icon example 64px 64px icons are used in progress circles.