Colors

Color is a key element in our design system used to create meaning and consistency. Our color palette helps to unify our brand’s experiences, from product interfaces to marketing.

General Usage

  • primary

    is used to convey the brands identity and draw attention to specific areas or interactive elements.

  • shades

    are used to layout trough contrast. Whenever possible, the transparency-scales of black and white are used to reduce complexity and create elements that adapt to their environment. (See example)

  • system

    System-colors have a specific meaning and are exlusively employed to express content within the respective concept (warning, information, error, confirmation)

Color Transparency Example Usage

Scales

Example Color Scale

Primary

Conveys the brands identity and draws attention to specific areas or interactive elements.
50
hsl(264, 83%, 98%)#f9f6fergb(249, 246, 254)
100
hsl(261, 100%, 97%)#f5f0ffrgb(245, 240, 255)
200
hsl(264, 94%, 93%)#eadcfergb(234, 220, 254)
300
hsl(262, 96%, 91%)#e2d2fergb(226, 210, 254)
400
hsl(263, 96%, 82%)#c7a5fdrgb(199, 165, 253)
500
hsl(263, 95%, 75%)#b183fcrgb(177, 131, 252)
600
hsl(263, 100%, 60%)#8133ffrgb(129, 51, 255)
700
hsl(263, 95%, 55%)#731ff9rgb(115, 31, 249)
800
hsl(263, 84%, 43%)#5812cargb(88, 18, 202)
900
hsl(259, 100%, 18%)#1d005crgb(29, 0, 92)

System

Specific meaning and exlusively employed to express content within the respective concept.

info

50
hsl(223, 100%, 99%)#fafbffrgb(250, 251, 255)
100
hsl(224, 100%, 97%)#f0f4ffrgb(240, 244, 255)
200
hsl(222, 92%, 95%)#e7eefergb(231, 238, 254)
300
hsl(225, 85%, 92%)#d9e2fcrgb(217, 226, 252)
400
hsl(225, 78%, 82%)#adbff5rgb(173, 191, 245)
500
hsl(226, 75%, 75%)#8fa6efrgb(143, 166, 239)
600
hsl(226, 70%, 55%)#3c61ddrgb(60, 97, 221)
700
hsl(226, 65%, 51%)#3157d3rgb(49, 87, 211)
800
hsl(226, 69%, 43%)#2245b9rgb(34, 69, 185)
900
hsl(226, 63%, 17%)#101d47rgb(16, 29, 71)

warn

50
hsl(40, 100%, 96%)#fff8ebrgb(255, 248, 235)
100
hsl(44, 100%, 92%)#fff4d6rgb(255, 244, 214)
200
hsl(43, 100%, 87%)#ffecbdrgb(255, 236, 189)
300
hsl(42, 100%, 82%)#ffe3a3rgb(255, 227, 163)
400
hsl(36, 94%, 70%)#fac16brgb(250, 193, 107)
500
hsl(35, 90%, 63%)#f6af4crgb(246, 175, 76)
600
hsl(35, 96%, 54%)#fa9c19rgb(250, 156, 25)
700
hsl(35, 90%, 50%)#f2930drgb(242, 147, 13)
800
hsl(30, 100%, 34%)#ad5700rgb(173, 87, 0)
900
hsl(20, 79%, 17%)#4e2009rgb(78, 32, 9)

error

50
hsl(7, 100%, 98%)#fff6f5rgb(255, 246, 245)
100
hsl(7, 100%, 97%)#fff1f0rgb(255, 241, 240)
200
hsl(8, 100%, 94%)#ffe4e0rgb(255, 228, 224)
300
hsl(7, 91%, 91%)#fdd8d3rgb(253, 216, 211)
400
hsl(10, 77%, 79%)#f3aea0rgb(243, 174, 160)
500
hsl(10, 72%, 71%)#ea9280rgb(234, 146, 128)
600
hsl(10, 81%, 56%)#ea5234rgb(234, 82, 52)
700
hsl(10, 72%, 50%)#db4224rgb(219, 66, 36)
800
hsl(10, 82%, 44%)#cc3314rgb(204, 51, 20)
900
hsl(10, 51%, 14%)#361811rgb(54, 24, 17)

success

50
hsl(138, 63%, 97%)#f3fcf5rgb(243, 252, 245)
100
hsl(139, 57%, 95%)#ebfaf0rgb(235, 250, 240)
200
hsl(139, 48%, 91%)#ddf3e4rgb(221, 243, 228)
300
hsl(141, 44%, 86%)#ccebd7rgb(204, 235, 215)
400
hsl(147, 45%, 73%)#9bd9b7rgb(155, 217, 183)
500
hsl(152, 44%, 58%)#65c397rgb(101, 195, 151)
600
hsl(151, 55%, 42%)#30a66drgb(48, 166, 109)
700
hsl(152, 57%, 38%)#2a9865rgb(42, 152, 101)
800
hsl(153, 67%, 28%)#18774crgb(24, 119, 76)
900
hsl(10, 51%, 14%)#361811rgb(54, 24, 17)

Shades

Used to layout trough contrast. The transparency-scales of black and white are used to reduce complexity and create elements that adapt to their environment.

white

50
hsla(0, 0%, 100%, 0.95)#ffffffrgba(255, 255, 255, 0.95)
100
hsla(0, 0%, 100%, 0.93)#ffffffrgba(255, 255, 255, 0.93)
200
hsla(0, 0%, 100%, 0.85)#ffffffrgba(255, 255, 255, 0.85)
300
hsla(0, 0%, 100%, 0.8)#ffffffrgba(255, 255, 255, 0.8)
400
hsla(0, 0%, 100%, 0.6)#ffffffrgba(255, 255, 255, 0.6)
500
hsla(0, 0%, 100%, 0.46)#ffffffrgba(255, 255, 255, 0.46)
600
hsla(0, 0%, 100%, 0.1)#ffffffrgba(255, 255, 255, 0.1)
700
hsla(0, 0%, 100%, 0.07)#ffffffrgba(255, 255, 255, 0.07)
800
hsla(0, 0%, 0%, 0.05)#000000rgba(0, 0, 0, 0.05)
900
hsla(0, 0%, 0%, 0.02)#000000rgba(0, 0, 0, 0.02)

black

50
hsla(0, 0%, 0%, 0.02)#000000rgba(0, 0, 0, 0.02)
100
hsla(0, 0%, 0%, 0.05)#000000rgba(0, 0, 0, 0.05)
200
hsla(0, 0%, 0%, 0.07)#000000rgba(0, 0, 0, 0.07)
300
hsla(0, 0%, 0%, 0.1)#000000rgba(0, 0, 0, 0.1)
400
hsla(0, 0%, 0%, 0.19)#000000rgba(0, 0, 0, 0.19)
500
hsla(0, 0%, 0%, 0.28)#000000rgba(0, 0, 0, 0.28)
600
hsla(0, 0%, 0%, 0.52)#000000rgba(0, 0, 0, 0.52)
700
hsla(0, 0%, 0%, 0.61)#000000rgba(0, 0, 0, 0.61)
800
hsla(0, 0%, 0%, 0.71)#000000rgba(0, 0, 0, 0.71)
900
hsla(0, 0%, 0%, 0.96)#000000rgba(0, 0, 0, 0.96)