Grundsätzlich können alle Farben überall dort eingesetzt werden, wo Farben eingesetzt werden. Wir wollen aber nicht, dass das geschieht. Wir versuchen, mit minmalen Farbwechseln zu arbeiten und in erster Linie punktuell Akzente zu setzen. Hier sammeln wir Regeln.
| Thema | Umsetzung |
|---|---|
| Farbwechsel im Contentverlauf | Farben sparsam und bewusst einsetzen. Mit Light Grey kann man einen thematischen Wechsel markieren. Aktionen werblicher Art bitte in Deutsche Bank Blau setzen |
| Farben in Teasern/farblich hinterlegten Columns | Deutsche Bank blau; Text-Bild-Kombinationen am Seitenende haben bei Blaufärbung unterschiedliche Höhen und werden weiß gesetzt |
| Störer | Wir nutzen überwiegend Spring Green und Night Purple |
| Bühne | Einstellmöglichkeiten für Farben werden nicht genutzt (alle Bilder sollten die blaue Schräge auf dem Bild haben) |
| Column Control | Break out of content constraint, also der Farb- oder Bildeinsatz über die Navigationsbreite hinaus, ist unsere größtmögliche Unterbrechung des Seitenverlaufs. Hier stoppt der Leser, nur in Ausnahmen, bspw. bei der Aufforderung zur Kontaktaufnahme, zu verwenden. Auch hier: Deutsche Bank blau |
| Schriftfarben | Schriftfarben können eingeschränkt angepasst werden, wir versuchen diese Möglichkeit aber nicht zu nutzen. In den meisten Fällen muss die Komponente die aus Accessibilitysicht richtige automatisch ausspielen. Lediglich in der Standard Stage muss die passende Headlinefarbe eingestellt werden. |
| Farbe | Kategorie | Nutzung |
|---|---|---|
| Deutsche Bank blau | Primary | Hintergrundfarbe für Flächen zur Strukturierung von Seitenverläufen oder um Textblöcke abzuheben, erste Farbwahl bei Teasern |
| Deutsche Bank blau | Primary | Hintergrundfarbe für Flächen zur Strukturierung von Seitenverläufen oder um Textblöcke abzuheben, erste Farbwahl bei Teasern |
| Bright blue | Primary | Ausschließlich für primäre Linkziele einzusetzen, wird perspektivisch durch Water blue ersetzt |
| Weiß | Primary | Wichtigste Hintergrundfarbe, ist auch als Störerfarbe auf dunklen Hintergründen gedacht (für Informationen und wichtige Hinweise) |
| Light grey | Secondary | Akzentuierung und Textstruktur |
| Light blue | Secondary | Banderolen (ggf. für Standards wie Abschlusswegbeschreibungen) |
| Mid blue | Secondary | Kann ggf. ebenfalls entfernt werden/keine feste Funktion |
| Dark blue | Secondary | Als Störerfarbe zu verwenden (für Informationen und wichtige Hinweise) |
| Eden | Secondary | Nachhaltigkeitsthemen |
| Light turquoise green | Secondary | Nachhaltigkeit / Medizinische Themen |
| Night purple | Störer | Akzent- / Störerfarbe: für Aktionen werblicher Art |
| Spring green | Störer | Akzent- / Störerfarbe: für Aktionen werblicher Art |
| Gloomy Yellow | Störer | Nicht im Einsatz, aber gehört eigentlich zum festen Farbsatz, könnte als Aktionsfarbe sinnvoll sein |
| Farbe | Kategorie | Nutzung |
|---|---|---|
| Poster blue | CTA zum Online-Banking | |
| Strong blue | Secondary / zur Löschung vorgesehen | Wird als Teaserfarbe für deutsche-bank.de/pk verwendet und wird bis zur Neugestaltung der Seite gebraucht. Solange die Startseite der Deutschen Bank Deutsche Bank blau als Hintergrundfarbe hat, funktioniert (visuell und technisch nur Strong blue als Teaserfarbe. |
| Farbe | Hex Color | Nutzung |
|---|---|---|
| Bright grey | #D8D8D8 | Wird entfernt |
| Dust grey | #999999 | Wird entfernt |
| Shade Dust grey | #888888 | Wird entfernt |
| Dark Dust grey | #666666 | Wird entfernt (war als Schriftfarbe gedacht) |
| Blue grey | #74899E | Wird entfernt |
| Ming blue | #3D6A88 | Wird entfernt |
| Sky blue | #5C88AB | Wird entfernt |
| Strong blue | #2282C1 | Soll entfernt werden (wird aber noch für wichtige Teaser eingesetzt) |
| Dark Sky blue | #114969 | Wird entfernt |
