Kontext

Eine der wichtigsten Aufgaben beim Branding ist die Wahl der richtigen Farben. Einige Farben können das Aussehen der Web-App mehr beeinflussen als andere. So können einige der Farben wie Luma, Info und Icon auf ihrem Standardwert bleiben. Die Farben, die wir dir zum Ändern empfehlen, sind Haupt- und Tastenfarben, Sekundär- und Tertiärfarbe.

Bitte beachte: Alle Farben sollten im Hex-Farbcode-Format angegeben werden, z.B. (#ff6600)

Allgemeine Farben

Haupt-/Primärfarbe

Dies ist die Hauptfarbe der Marke. Sie wird als auffälligste Farbe in der gesamten App angezeigt und dient zur Hervorhebung wichtiger Aktionen und Ereignisse, die der Benutzer auswählen kann, sowie von wichtigen Elementen, die hervorgehoben werden sollten. Diese Farbe sollte einen ausreichenden Kontrast haben, damit die Textelemente in dieser Farbe gut lesbar sind. Wir verwenden diese Farbe für die folgenden Elemente in der Web-App:

1. Links
2. Schaltfläche „Aktive Menge“
3. Häkchen
4. Sprachauswahl
5. Schaltfläche zum Umschalten/Umlegen

Weiß

Eine rein weiße Farbe wird als kugelsichere Eigenschaft für Elemente verwendet, für die Markenfarben nicht geeignet sind. Die weiße Farbe in der Benutzeroberfläche kann durch andere Weißschattierungen ersetzt werden. Wenn du eine andere weiße Farbe wählst, ist es wichtig, die neue Farbe hell zu halten, damit sie genug Kontrast zu den Hintergrundelementen hat. Wir empfehlen, diese Farbe nicht zu ändern. Wir verwenden diese Farbe für die folgenden Elemente in der Web-App:

1. Häkchen-Symbol in der Häkchen-Komponente
2. Nummer im Zähler
3. Text innerhalb des Tooltips

Schwarz

Eine reine schwarze Farbe wird als kugelsichere Eigenschaft für Elemente verwendet, bei denen Markenfarben nicht angebracht sind.

Die schwarze Farbe in der Benutzeroberfläche kann durch andere Schwarztöne ersetzt werden. Wenn du eine andere schwarze Farbe wählst, ist es wichtig, die neue Farbe dunkel zu halten, damit sie einen ausreichenden Kontrast zu den Hintergrundelementen bildet. Wir empfehlen, diese Farbe nicht zu ändern. Wir verwenden diese Farbe für die folgenden Elemente in der Web-App:

1. Tooltip-Hintergrund

Hintergrundfarben

Die Hintergrundfarbe wird auf der gesamten Webseite verwendet. Hintergrund Hinten ist die Haupthintergrundfarbe und die Farbe Hintergrund Vorne wird für Elemente verwendet, die über der Hauptebene liegen - wie Dialogfenster und Karten. Auf manchen Bildschirmen wird der gesamte Hintergrund aus der Farbe Hintergrund Vorne gebildet: Außerdem wird die Fußzeilenfarbe für den Hintergrund der Fußzeile deiner Webseite verwendet:

1. Vordere Hintergrundfarbe
2. Hintere Hintergrundfarbe
3. Hintergrundfarbe der Fußzeile

Status-/Zustandsfarben

Status- bzw. Zustandsfarben werden verwendet, um Erfolgs- oder Fehlerzustände in deiner Web-App anzuzeigen. Sie sind normalerweise rot und grün, können aber auch in eine andere Farbe geändert werden.

1. Fehlerfarbe

1. Erfolgsfarbe:

Symbolfarben

Die Farbe des Symbols bei Inaktivität wird auf Symbole angewandt, die für die Navigation oder den inaktiven Zustand/Leerlauf verwendet werden: 

1. Farbe des Symbols bei Aktivität
2. Farbe des Symbols bei Inaktivität

Sonstige Farben

Die sonstigen Farben dienen als unterstützende Farben für verschiedene Elemente in deinem Branding. 

Vegetarisch

Die vegetarische Farbe wird für Symbole verwendet, die vegetarische und vegane Lebensmittel darstellen:

Luma

Diese Farbe betrifft einige Hintergrundbereiche oder Oberflächen interaktiver Komponenten und deren Zustände. Alle Luma-Farben werden aus dieser Farbe hergestellt, indem ihre Deckkraft reduziert wird. Deshalb muss die Luma-Farbe sehr dunkel sein, damit sogar 6% der Deckkraft sichtbar sind. Wir empfehlen, diese Farbe nicht zu ändern.

1. Hintergrund des Upselling-Abschnitts (10%)
   
2. Schwebe-Zustand in Angeboten und Belohnungen (20% und 10%)
   
3. Deaktivierte Schaltfläche „Menge“ (20 %)
   
4. Snackbar
   

Kontrastreicher Hintergrund & kontrastreicher Text

Farbeigenschaften, die bei der Barrierefreiheit helfen. Gilt für den Hintergrund hinter hellem oder dunklem Text sowie den Text selbst. Diese Farben treten in Kraft, wenn ein Benutzer den Hohen-Kontrast-Schalter in der Fußzeile aktiviert. Wir empfehlen, diese Farbe nicht zu ändern.

Info

Die Infofarbe wird für Oberflächenelemente verwendet, die zusätzliche Informationen anzeigen, z. B. den Hintergrund der Artikelmengen (siehe unten):