Digital Brand Design
Unser mittwald blue ist der Eyecatcher. In Kombination mit Neutral Light und Neutral Dark ergibt er eine ausgewogene, aber spannende Mischung.
mittwald blue
#2D23E8
45, 35, 232
Neutral Light
#ebeff3
235/239/243
Neutral Dark
#141516
20/21/22
Ergänzend zu den Primärfarben nutzen wir vier Sekundärfarben: Orange, Lilac, Green und Navy.
mittwald orange
#E7A187
231, 161, 135
mittwald lilac
#C194FF
193, 148, 255
mittwald green
#9FABA4
159, 171, 164
mittwald navy
#697EE5
105, 126, 229
Jede Farbe hat neben ihrem Grundton zwei weitere Abstufungen, die sich im Light- und im Darkmode unterscheiden. Für eine gute Lesbarkeit sind die Farbtöne im Light- und Darkmode teilweise angepasst. Für Schrift nutzen wir ausschließlich Neutral und Default.
Benutzung Light-Mode
Light-Mode nutzen wir, wenn die Zielgruppe nicht technisch versiert ist.
Benutzung Dark-Mode
Dark-Mode nutzen wir für Themen, die technisch versierte Personen abholen. Achtung: Bei wichtigen Entscheidungen wie Preisen wechseln wir zurück in den Light-Mode, so bekommen sie die volle Aufmerksamkeit.
Light
navy 100
#BBC5EC
187, 197, 236
navy 200
#A2AEE6
162, 174, 230
navy 300
#8898E0
136, 152, 224
green 100
#C6CFCE
198, 207, 206
green 200
#A7B2AC
167, 178, 172
green 300
#919C96
145, 156, 150
lilac 100
#D8C3FB
216, 195, 251
lilac 200
#CBA7FD
203, 167, 253
lilac 300
#C294FF
194, 148, 255
orange 100
#E6C8BF
230, 200, 191
orange 200
#E7B09D
231, 176, 157
orange 300
#E7A187
231, 161, 135
blue 100
#B3B4F3
179, 180, 243
blue 200
#8D8BF0
141, 139, 240
blue 300
#2D23E8
45, 35, 232
base
#EBEFF3
235, 239, 243
default
#FFFFFF
255, 255, 255
secondary
#000000 · 8%
0, 0, 0, 8
primary
#000000 · 64%
0, 0, 0. 64
highlight
#1D1E1F
29, 30, 31
Dark
navy 100
#2E3552
46, 53, 82
navy 200
#4A568D
74, 86, 141
navy 300
#6F81DB
111, 129, 219
green 100
#4A5150
74, 81, 80
green 200
#666F6C
102, 111, 108
green 300
#919C96
145, 156, 150
lilac 100
#594874
89, 72, 116
lilac 200
#8E6EBA
142, 110, 186
lilac 300
#B187E8
177, 135, 232
orange 100
#523F39
82, 63, 57
orange 200
#92695A
146, 105, 90
orange 300
#D2937C
210, 147, 124
blue 100
#171842
23, 24, 66
blue 200
#1D1B6B
29, 27, 107
blue 300
#2D23E8
45, 35, 232
base
#141516
20, 21, 22
default
#000000
0, 0, 0
secondary
#FFFFFF · 8%
255, 255, 255, 8
Primary
#FFFFFF · 64%
255, 255, 255, 64
Highlight
#FFFFFF
255, 255, 255
Kombiniere jede Farbe mit ihren eigenen Abstufungen, aber mische Light- und Darkmode nicht. Halte dich dabei an die Schemata unten. Die Brandfarben selbst kombinieren wir nicht miteinander, außer bei den Verläufen: Dort sind feste Kombinationen erlaubt, aber nur als ineinander übergehender Gradient.
Light
Dark
Integriere keine neuen Farben und verändere oder kombiniere die bestehenden nicht anders. Die Beispiele unten zeigen dir, was du vermeiden solltest.
Nutze Brandfarben nicht für Schrift oder Icons.
Halte die Abstufungen der Farbwerte ein. Kombiniere den 100er-Wert nicht mit dem 300er-Wert.
Kombiniere Farben aus dem Lightbereich nicht mit Farben aus dem Darkbereich.
Implementiere keine eigenen Farben.
Nutze nur die festgelegten Verläufe und kombiniere sie nicht mit eigenen Farben.
Kombiniere Brandfarben nicht miteinander in geschlossenen Flächen.