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.
RGBA (80, 50, 145, 100)
RGBA (235, 60, 150, 100)
RGBA (15, 105, 175, 100)
RGBA (45, 190, 205, 100)
RGBA (165, 205, 80, 100)
RGBA (230, 30, 80, 100)
RGBA (255, 200, 50, 100)
RGBA (20, 155, 95, 100)
RGBA (27, 27, 27, 100)
RGBA (248, 248, 252, 100)
RGBA (255, 255, 255, 100)
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.
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.
How we use colors for illustrations.
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
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.