Farben

Inhaltsverzeichnis

Hauptkapitel
Designsystem
Unterkapitel
Grundlagen
Gilt für
Websites & Webapplikationen (mit Login)

Grundlagen

Wir verwenden im Webauftritt ausgewählte Farbthemen. Dies erlaubt es uns vielseitig aufzutreten, ohne die Konsistenz innerhalb eines Seitenerlebnisses zu verlieren. Die Farben führen zu einem lebendigen Auftritt, ohne dass der Einsatz von Bildern notwendig ist.

Darstellung und Verwendung

Varianten 

Akzentfarbe der Seite 

  • Für Inhalte aus dem Themenbereich verwenden wir die im Design definierten Farben. Die Akzentfarbe kommt im Titelbereich der Seiten zum Einsatz und wiederholt sich in ausgewählten Komponenten. Die Farben werden auf die darunter liegenden Seiten vererbt, können aber auch vom Autor verändert werden. Dadurch stellen wir sicher, dass die Farbe zum Thema passt, Nutzende aber nicht bei jeder Seite eine andere Farbe sehen.
  • Für Inhalte zu Organisationseinheiten verwenden wir die Farbe Blau.
  • Bestimmte Inhalte, wie beispielsweise Newsartikel, haben keine Akzentfarbe. 
  • Hex-Codes der Akzentfarben:
    • Blau: #0070B4
    • Dunkelblau: #00407C
    • Türkis: #00797B
    • Grün: #1A7F1F
    • Bordeaux: #B01657
    • Magenta: #D40053
    • Violett: #7F3DA7
    • Grau 60: #666666

Akzentfarben Soft

  • Alle Akzentfarben haben eine entsprechende Farbe für die Anwendung als Hintergrund.
  • Spezifische Elemente können eine Hinterlegung in der Akzentfarbe Hell aufweisen.
  • Als Texthinterlegung kann die Akzentfarbe Hell eingesetzt werden.
  • Die Akzentfarbe Hell wird immer im gleichen Farbton wie die Akzentfarbe (Ton in Ton) eingesetzt.

Akzentfarben für Darkmode

  • Alle Akzentfarben haben eine entsprechende Farbe für den Fall einer Darstellung im Darkmode. Wird eine Webseite oder Applikation mit einer Darkmode Variante umgesetzt, werden die Akzentfarben dementsprechend angepasst.

Grundfarben Grautöne

  • Die Farbe Schwarz wird hauptsächlich für alle typografischen Elemente eingesetzt.
  • Links und Buttons werden in Graustufen dargestellt.
  • Die Farbe Weiss wird hauptsächlich für negative Anwendungen von Text, Links und Buttons eingesetzt.

Farben mit Funktionen

  • Bei Interaktionselementen wie Radiobuttons oder Eingabefelder, die einen Aktiv-Zustand haben, wird dieser Status mit der Hauptfarbe Cyan ZH markiert.
  • Positive Feedback-Meldungen können in der Farbe Grün ausgezeichnet werden.
  • Negative Feedback-Meldungen und Warnhinweise sind rot markiert.

Farben für Infografiken

Siehe dazu mehr im Kapitel Infografiken und Visualisierungen.

Kontakt

Digitale Verwaltung und E-Government – ZHweb

Ist Ihnen etwas aufgefallen? Fehlt etwas? Möchten Sie etwas beitragen? Melden Sie sich bei uns!

Mehr erfahren