Color
The whole brand is based on only 8 colors, that come together to form distinct combinations that make up a big chunk of successful brand recognition.
The whole brand is based on only 8 colors, that come together to form distinct combinations that make up a big chunk in brand recognition. They are divided into color groups, based on their common base colors.
Learn more about color usage for interfaces in our UI Guidelines.
Red
blue
grey
Hierarchy
Combining those brand colors produces brand gradients. Elements of color are subject to a hierarchy. Use the 50-30-20 ratio to determin how often to use colors of these groups. Try to use primary colors in 50% of the color use cases, secondary in 30% and tertiary in the remaining 20%.
Brand Gradients (Primary)
Style colors (Secondary)
Utility colors (Tertiary)
Red symbolizes passion, our liveliness and playful mind. The differnet shades make them work well together in a system. They also form our primary brand gradient.
Primary gradient
Alpi red
fire red
#B83122
RGB (184,49,33)
#BF4D28
RGB (192,78,40)
Origin Red
#A31F16
RGB (163,31,24)
Light red
#F1D6D3
RGB (242,215,212)
These blue tones stand for ice, winter, coolness and represent our reliable, professional side. They come together nicely to form our secondary brand gradient.
Secondary gradient
Dark Blue
Ice blue
#09505D
RGB (11,80,93)
#47CEDD
RGB (89,193,211)
Mid blue
#B0EFF7
RGB (176, 239, 247)
Light Blue
#E6EDEE
RGB (230, 237, 238)
Our grey tones are really great for any utility purposes. Stone Grey can play many roles, but it‘s mainly used in Body text. Off-White is used as a soft alternative to white.
Stone Grey
#636363
RGB (99, 99, 99)
Mid grey
#808080
RGB (128, 128, 128)
Light grey
#E4E4E4
RGB (228, 228, 228)
Off-white
#F7F7F7
RGB (247,247,247)
Here’s how to apply brand colors in a consistent way.
The primary gradient serves best as the showpiece for the angle.
Headlines can be (don’t have to be) styled with Alpi red if backgrounds allow for it.
Use utility colors as a soft background alternative to white (in some cases).
If circumstances and guidelines allow it, headlines can also exist in the depicted brand colors.
Bodycopy always comes in stone grey. Do not use another color for that. Headlines also usually come in stone grey.
Legibility
Some text colors are not allowed on certain background colors to ensure the written text to be readable by any viewer.
The proper and improper application examples of our brand colors.
No need to force the primary colors in.
No need for a background here.
Try to only use tone-on-tone with text on colored backgrounds.
Legible text is more valuable than primary colors here. Better save the primary colors for the next slide.
Summary
01
Use color as an important brand component - no other colors needed.
02
Use the hierarchy (Primary, Secondary, Tertiary) to determin how much to use the palettes (50-30-20).
03
White is your friend. Don’t over-color or they’ll loose their effect.