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.
• Hex-Codes der Akzentfarben Soft:
  • Softblau: #EDF5FA
  • Blaugrau: #E0E8EE
  • Softtürkis: #E8F3F2
  • Softgrün: #EBF6EB
  • Softbordeaux: #F6E3EA
  • Softrot: #FCEDF3
  • Softviolett: #ECE2F1
  • Black 10 ZH: #F0F0F0

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.
• Hex-Codes der Akzentfarben Darkmode:
  • Hellblau: #7AB6E2
  • Himmelblau: #78A8F0
  • Helltürkis: #6BC9CB
  • Hellgrün: #6EBD72
  • Rosa: #FF94BA
  • Hellorange: #FFAE73
  • Lila: #B590F9
  • Hellgrau: #A9A9A9

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.
• Hex-Codes der Grundfarben Grautöne:
  • Black 100 ZH: #000000
  • Black 80 ZH: #333333
  • Black 60 ZH: #666666
  • Black 40 ZH: #949494
  • Black 20 ZH: #CCCCCC
  • Black 10 ZH: #F0F0F0
  • Black 5 ZH: #F7F7F7

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.
• Hex-Codes der Farben mit Funktionen:
  • Cyan: #009EE0
  • Rot: #D93C1A
  • Grün: #1A7F1F

Farben für Infografiken