Farben

Die beiden Farben Grau und Orange kombiniert mit frischen, blauen Akzenten prägen unseren Markenauftritt. Eine Reihe weiterer Sekundärfarben können punktuell eingesetzt werden und vervollständigen unsere Farbpalette.

Die Suva Farben

Unsere Farben geben dem Nutzenden Orientierung. Sie lenken die Aufmerksamkeit auf die wichtigsten Informationen und Funktionen und tragen zur klaren Seitenhierarchie bei.

Durch die Anwendung unserer definierten Farbpalette stellen wir die Konsistenz über all unsere Touchpoints sicher und erzeugen ein klares und einheitliches Erscheinungsbild.

Farbverhältnisse

Um einen konsistenten Markenauftritt zu gewährleisten muss auf die Gewichtung der Farben im Gesamtauftritt geachtet werden.

Weissraum soll dominieren, gefolgt von den Primärfarben Grau und Orange.
Unsere CTA Farbe Blau akzentuiert Aktionsaufforderungen.
Die Sekundärfarben dürfen nur punktuell und sehr reduziert eingesetzt werden.

Auf unseren digitalen Kanälen kann im Gesamtauftritt die CTA-Farbe Blau im Gesamtkontext auch dominanter werden, wenn es für den Benutzer viele Aktionen auszuführen gibt. Deshalb ist jeder CTA stets gut zu überdenken.

Verwendung

Wir unterscheiden in drei Farbkategorien: Primärfarben, Sekundärfarben und Systemfarben. Diese geben vor, wie die Farben auf der Benutzeroberfläche zum Einsatz kommen.

1. Primärfarben

Die Primärfarben tragen zur Einzigartigkeit unserer Benutzeroberflächen bei. Sie generieren letztlich das Suva Erscheinungsbild. Wir nutzen sie sowohl für Auszeichnungen als auch um Aktionen zu kennzeichnen.

Graustufen

Der Einsatz von Graustufen sorgt für die Einfachheit der Benutzeroberflächen und senkt das Risiko einer Überstimulation des Auges. Sie werden primär für Fliesstext oder Titel in tiefer Hierarchie eingesetzt (siehe UI Prinzip Typografie), wirken ruhig und zurückhaltend.

Weiter hilft die flächige Hinterlegung einzelner Module oder Webseitenbereiche mit BG Grey in Abwechslung mit weissen Bereichen dabei einzelne Themenbereiche klar voneinander abzugrenzen.

Suva Orange (Zur Auszeichnung)

Mit dem Suva Orange wird hierarchisch wichtiger Text ausgezeichnet. Das betrifft alle Headlines bis einschliesslich H3.

Orange wird nur in Ausnahmefällen als Hintergrundfläche verwendet. Ausnahme sind die Illustrationen und Grafiken.

Suva Blau (Call-to-Action)

Das Suva Blau findet Verwendung bei interaktiven Elementen, die eine Aktion auslösen. Beispielsweise Buttons, Links, Icons und Tags. Aber auch bei aktiven Kontrollelementen wie ausgewählten Checkboxen, Radiobuttons, Datepicker oder Eingabefelder kommt das Suva Blau zum Einsatz.

Beispiele

2. Sekundärfarben

Zum Setzen von Akzenten können die Sekundärfarben Grün, Rot und Gelb angewendet werden. Sie dürfen jedoch nur sehr reduziert zum Einsatz kommen. Zu den Sekundärfarben gehört auch das Interaktion Blau, welches die Interaktionen des Benutzers mit der Benutzeroberfläche visualisiert.