Farben der coconutbox
Die nachfolgend aufgelisteten Farben dürfen nur in der coconutbox verwendet werden - weitere Farbtöne sind nicht erlaubt.
Keine Farbtöne dürfen mit Transparenz genutzt werden. Von jeder Farbe gibt es Abstufungen und nur diese dürfen verwendet werden. So verhindern wir blöde Überlagerungen und neue Farbmixturen.
Grautöne
Die Grautöne werden durchgehend als Schriftfarbe und Hintergrundfarbe genommen. Die Farbe Schwarz ist als Schriftfarbe verboten, denn diese taucht nirgendwo im System auf. Es muss darauf geachtet werden, dass man die Schrift auf der Hintergrundfarbe auch lesen kann.
@grey_100
#5e605f
@grey_80
#7e807f
@grey_60
#9ea09f
@grey_40
#bfbfbf
@grey_20
#dfdfdf
@grey_15
#e7e7e7
@grey_10
#efefef
@grey_5
#f7f7f7
@white
#ffffff
Brandingfarben
Die Brandingfarben werden genutzt, um die coconutbox mit den Hausfarben des Kunden zu individualisieren. Man findet diese in der Navigation wieder und auch teilweise als aktive Markierung. Prinzipiell wird die Farbe ganz dezent eingesetzt. Es ist auch die einzige Farbe, welche sich pro coconutbox unterscheiden kann.
@branding_100
#8ba72c
@branding_70
#adc260
@branding_40
#d8dfb4
Highlightfarben
Die Highlightfarben werden nur für Buttons, die Massenaktionsleiste und Speicherleiste verwendet. Als normalen Hintergrund ist diese Farbe verboten, genauso als Schriftfarbe. Die Farbe darf nicht zu oft auf einer Seite gesetzt werden, da so die Bedeutung Highlight an Wertung verliert.
@blue_100
#0170ca
@blue_70
#4c9cdb
Alerts / Kontextfarben
Diese Farben werden hauptsächlich für Warnungen und Hinweise verwendet. Am meisten wird man diese in den Aktualisierungsnachrichten und Labels wiederfinden.
@alert_yellow_100
#ebd56f
@alert_yellow_50
#f5eab8
@alert_red_100
#e9485c
@alert_red_50
#f7a5ae
@alert_blue_100
#4bb5e8
@alert_blue_50
#aadaf3
@alert_green_100
#66b554
@alert_green_50
#b4daaa