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.


Rich Purple

RGBA (80, 50, 145, 100)


Vibrant Magenta

RGBA (235, 60, 150, 100)


Rich Blue

RGBA (15, 105, 175, 100)


Vibrant Cyan

RGBA (45, 190, 205, 100)


Vibrant Green

RGBA (165, 205, 80, 100)


Rich Red

RGBA (230, 30, 80, 100)


Vibrant Yellow

RGBA (255, 200, 50, 100)


Rich Green

RGBA (20, 155, 95, 100)



RGBA (27, 27, 27, 100)



RGBA (248, 248, 252, 100)



RGBA (255, 255, 255, 100)

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.

Base color

Use similar colors as a base.


Always in combination with one highlight color.



The color harmonies of our brand tend to be too colorful when applied for illustrations.


Don't use gradients


Custom colors

Don't use custom colors


White fulfills several tasks. It defines spaces, balances out other colors and at the same time can accentuate important elements of both the user interface and illustrations. It should be the main color of every illustration.


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


Single solid colors

Plain white or grey background

No patterns in the background


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

The pure brand color must appear in every illustration at least once.

Try to use nine percentages of the base brand color.

The focus should be on light colors.

The different shades of the brand colors should only be used for illustrations and not the UI elements.