Farben und Farbschattierungen können verwendet werden, um die Struktur der Seite zu verdeutlichen. Dabei ist stets darauf zu achten, dass funktionstragene Elemente einen Kontrast von 7:1 erfüllen. Grundsätzlich gilt, dass Farbe nie das alleinige informationstragende Element sein darf.

Grauschattierungen werden werden verwendet, um Vorder- und Hintergrundflächen voneinander abzuheben.

• Schwarz (#000000) = Schriftfarbe 1 
• Grau Dunkel (#475059) = Schriftfarbe 2 
• Grau Medium (#D0D2D8) = SchmückendeTrennlinien oder Rahmen 
• Grau Hell (#EEF1F4) = Hintergrundfläche 
• Weiß (#FFFFFF) = Haupt-Inhaltsbereich (Formular oder Tabelle)

Die Farbe Blau zeichnet klickbare oder aktive Flächen aus. Dabei darf die Farbe nicht als einziges Auszeichnungsmerkmal dienen. 

• Nachtblau (#183F7B) = Klickbares Element 
• Königsblau (#0049B4) = Aktives Element
• Hellblau (#C3E3FF) = Aktives Element bei dunklem Hintergrund

Grün oder Rot kann als Auszeichnungsfarbe für besondere Zustände verwendet werden. Dabei darf die Farbe nicht das einzige Unterscheidungsmerkmal der Zustände sein. 

• Grün (#2A6600) = Aktiv, Fehlerfrei, Erfolgsmeldung, ... 
• Rot (#9D0F0F) = Fehlerhaft, Unvollständig, Warnend, ... 
• Orange (#C05800)
• Gelb (#FED131)

Hier abgebildet sind die Farben des Standard-Farbthemas. Die Farbpalette wird mit Ausarbeitung der weiteren Farbmodi (Hochkontrast, Nacht, Blendfrei, Beere, Wald) entsprechend erweitert.

Das Farbschema Beere richtet sich vor allem an Nutzende, die unter den Farbfehlsichtigkeiten Rot-, Grün- und Blauschwäche leiden. Die Farben und Töne können von allen betroffenen gut unterschieden werden. 

Nach Anpassung der Farbtöne, gelten für den Farbeinsatz der Grauschattierungen, Themen- und Auszeichnungsfarben die gleichen Regeln, wie oben beschrieben. Die Schattierungen bleiben gleich. Die Farben für die Hintergrundabdunklung werden dem Farbthema angepasst und bleiben bei 40%.

Tooltip Farben bleiben die selben, wie im blauen Thema.

Das Farbschema Wald kann als alternative zum blauen Schema eingestellt werden.

Nach Anpassung der Töne, gelten für den Farbeinsatz der Grauschattierungen, Themen- und Auszeichnungsfarben die gleichen Regeln, wie oben beschrieben. Die Schattierungen bleiben gleich. Die Farben für die Hintergrundabdunklung werden dem Farbthema angepasst und bleiben bei 40%.

Tooltip Farben bleiben die selben, wie im blauen Thema.

Schattierungen werden verwendet, um Elemente von Hintergrundflächen abzuheben. Aktuell werden Schatten bei folgenden Elementen verwendet:

Schatten Typ 1:

• Formulare
• Listen
• Tabelle auf grauem Hintergrund 
• Overlay-Menüs

Schatten Typ 2:

• Filter-Pillen

Schatten Typ 3 mit Outline:

• Filter-Container
• Pop-up Element 
• Auswahlfeld-Dropdowns (Selects/Autosuggest-Inputfield, Comboboxes, ...) 

Schatten Typ 4:

• Sticky Footer

Hintergrundabdunklungen werden bei Modaldialogen eingesetzt, um den Fokus auf das im Vordergrund liegende Modal zu lenken. 

• Nachtblau 40% = Abdunklung bei Sicherheitsabfragen, modalen Formularen, nicht kritischen Meldungen 
• Rot 40% = Abdunklung bei Fehlermeldungen oder Warnungen