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.