DarkMod?
Modus Rot-Grün Schwäche?
Farbschema
In Zukunft bieten wir unseren Kunden entweder verschiedene vordefinierte Farbschemen an zum Beispiel ein blaues, ein rotes, ein pinkes u.s.w. oder ein verspieltes vs clean. Bei großen Kunden können wir indiviuel auf die Farben eingehen oder [Kunden können Ihre Farben individuell im Backend eingeben].
Hierzu habe ich ein Farbschema entwickelt um bestimmte Elementgruppen anzusprechen und anzupassen.
Primär und Sekundärfarbe
Diese Zwei Farben sind die Hauptfarben mit Abstufungen. Diese Farben sind Variabel und müssen einzeln ansprechbar sein.
Der Farbcode unter der jeweiligen Farbe beschreibt lediglich die Farbe, die die Variable Farbe im Farbschema CompanyMood hat.
Primär
Primär-1
CompanyMood Schemna:
#002e5a
Primär-2
CompanyMood Schema:
#35597c
Primär-3
6a849eCompanyMood Schema:
#3A76AE
Primär-4
CompanyMood Schema:
#9eb0c0
Primär-5
CompanyMood Chema:
#d3dbe3
Sekundär
Sekundär-1
CompanyMood Schema:
#FFFFFF
Sekundär-2
CompanyMood Schema:
#F2F2F2
Sekundär-3
CompanyMood Schema:
#BFBFBF
Sekundär-4
CompanyMood Schema:
#A6A6A6
Sekundär-5
CompanyMood Schema:
#8C8C8C
Farben die einen Gefühlszustand ausdrücken
Die Farben die einen Gefühlszustand ausdrücken wie zum Beispiel in den Diagrammen sind fest an unser Farbschema des Smileysystems gebunden. Diese dürfen sich niemals verändern.
Unsere Stimmungsfarben bestehen aus Dunkelrot (unglücklich), Hellrot (unzufrieden), Gelb (ok), Hellgrün (zufrieden) und Dunkelgrün (glücklich). Sie folgen dem Smiley-System – dem Kernstück des Feedback-Tools – und werden ausschließlich zur Visualisierung der jeweiligen Stimmung verwendet, zum Beispiel in den Smileys, in Auswertungen oder in Diagrammen.
Grün glücklich 1
#5AAF62
var(--e-global-color-180f489)
Grün glücklich 2 #9dd0a2
Grün glücklich 3 #c2e1c5
Hellgrün zufrieden 1
#80D08B
var(--e-global-color-66ddd44)
Hellgrün zufrieden 2 #b0e2b7
Hellgrün zufrieden 3 #e5f5e7
Gelb ok 1
#F2D585
var(--e-global-color-697f9c2)
Gelb ok 2 #f7e5b3
Gelb ok 3 #fcf6e6
Hellrot unzufrieden 1
#EB7C7C
var(--e-global-color-0b94fd6)
Hellrot unzufrieden 2 #f3aeae
Hellrot unzufrieden 3 #fbe4e4
Rot unglücklich 1
#E0414B
var(--e-global-color-c9adf7b)
Rot unglücklich 2 #e66870
Rot unglücklich 3 #f9d8da
Farben der SVG Icons
Aktuell haben die Farben der Icons ähnliche Farben wie die, die den Gefühlszustand anzeigen, da das unser Designchema ist. Diese Farben sind Variabel und müssen einzeln ansprechbar sein. .
Die SVG Dateien haben 5 Farben, die mit folgenden variablen angesprochen werden können.
SVG-1
SVG-1 = var(–e-global-color-fb5197d)
CompanyMood Chema:
#002E5A
SVG-2
SVG-2 = var(–e-global-color-f7a933a)
CompanyMood Chema:
#F2D585
SVG-3
SVG-3 = var(–e-global-color-8cf6930)
CompanyMood Chema:
#EB7C7C
SVG-4
VG 4 = var(–e-global-color-b31c318)
CompanyMood Chema:
#ADE1B4
SVG-5
SVG 5 = var(–e-global-color-d986030)
CompanyMood Chema:
#C7C7C7
Typographie
Farben für verschiedene Formate
H1-H5 #002e5a
H6 #002e5a
Fließtext #002e5a
Link #ffa8a9
Outline Button #002e5a
Schrift Button 1 #002e5a
Schrift Button 2 #f2f2f2
Buttons
Die Buttons werden an das Bootstrap Schema angepasst. Die Farben werden aus den bereits bestehenden Variablen definiert. Sie bestehen also aus der Primär und Sekundär Farbe, den Gefühlsfarben und den Typographischen Farben.
Primär
- Mitteilungsbox oder Stimmung bewerten (Dashboard)
- Aktiver Tab
Outline Button #002e5a
Schrift Button 1 #002e5a
Schrift Button 2 #f2f2f2
Primär-1
Grün glücklich 3 #c2e1c5
Sekundär
- Details
- Inaktiver Tab
- Abbrechen
- Zurück (bei Umfragen oder so)
- emoji reaktion chat
- attachement hinzufügen
Erfolg -> Success
- Speichern
- Neu erstellen
- Hinzufügen
- Senden
- Bearbeiten
Outline Button #002e5a
Schrift Button 1 #002e5a
Hellgrün zufrieden 2 #b0e2b7
Hellgrün zufrieden 1 #80D08B
Archiv
- Archivieren (Events, Maßnahmen, Umfragen, etc..)
- Vorschau
Warnung
- Schließen
Outline Button #002e5a
Schrift Button 1 #002e5a
Hellrot unzufrieden 2 #f3aeae
Hellrot unzufrieden 1 #EB7C7C
Gefahr
- Löschen