Color Palette

Color sits at the heart of our brand identity. We use bold colors in stimulating combinations as an expression of the true nature of science, rather than the clichéd sterile laboratory. For our digital products we want to keep this vibrant attitute, but focus on the user’s needs. Always put the purpose in mind and use colors wisely. Do not use shades of the brand colors for UI elements.

Color Usage

Never use more than three colors prominently in an interface. If you start designing a digital product always select a primary, secondary & Highlight color. For content heavy areas leave enough white space to make the information consumable for the user. Below you can see Do’s & Don’ts for color combinations as well as how to use color for creating hierachies within a digital product.

For more details go to page “4. Themes” where you can find color themes you should use for your design.

Background Color

We emphasize the usage of Grey as a background color wherever possible. This ensures the best possible contrast and usability of our components throughout the design system. 

Hierarchy by Colors

If your product contains a lot of information  you can use colors to differentiate between layers within your information architecture. Rule of thumb is the less content on a screen, the more color you can use. And vice versa, the more content, the less color you should use in your interface.

Color Leveling

Illustration Colors

How we use colors for illustrations.

Highlight

Always in combination with one highlight color.

Grey

We use grey most of the time to calm down the boldness of
the other colors. It is generally used as a background color.

In order to obtain differentiated design possibilities, the illustrations shown here use graded tonalities of  our brand colors.