Color
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.
#503291
Rich Purple
RGBA (80, 50, 145, 100)
#EB3C96
Vibrant Magenta
RGBA (235, 60, 150, 100)
#0F69AF
Rich Blue
RGBA (15, 105, 175, 100)
#2DBECD
Vibrant Cyan
RGBA (45, 190, 205, 100)
#A5CD50
Vibrant Green
RGBA (165, 205, 80, 100)
#E61E50
Rich Red
RGBA (230, 30, 80, 100)
#FFC832
Vibrant Yellow
RGBA (255, 200, 50, 100)
#149B5F
Rich Green
RGBA (20, 155, 95, 100)
#1B1B25
Black
RGBA (27, 27, 27, 100)
#F8F8FC
Grey
RGBA (248, 248, 252, 100)
#FFFFFF
White
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.
Highlight
Always in combination with one highlight color.
Harmony
Vibrancy
The color harmonies of our brand tend to be too colorful when applied for illustrations.
Gradients
Don't use gradients
Custom colors
Don't use custom colors
White
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.
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.
Background
Single solid colors
Plain white or grey background
No patterns in the background
Coloration
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.