Ausgewählte Colors verkörpern die Marke und dienen gleichzeitig als wesentliches Kommunikationsmittel in der Benutzeroberfläche. Sie lenken die Aufmerksamkeit des Users und vermitteln gezielt wichtige Informationen wie z. B. den Status.
Color palette
Das Flow Design System bietet 9 Colors mit 11 Farbabstufungen an. Die Farbabstufungen reichen von 100 bis 1100 wobei die Stufe 800 die Grundfarbe ist. Zusätzlich werden Light und Dark Color angeboten.
Brand Color
Die Brand Colors spiegeln die Marke mittwald wider und sind somit ein wichtiger Bestandteil des Corporate Designs. Sie sollen den Wiedererkennungswert in den Benutzeroberflächen erhöhen.
Hosting Blue
Hosting Blue ist die Primary Color und sorgt für ein lebendiges Erscheinungsbild im mStudio. Sie wird für wichtige Klickflächen wie Links und Primary Buttons verwendet, aber auch aktive States haben diese Color. In den dunkleren Abstufungen ist Hosting Blue in Headings oder in dunkleren dekorativen Elementen zu finden. Darüber hinaus soll Hosting Blue wissenswerte Informationen hervorheben.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--hosting-blue--100 | #F0F5FF | |
| color--hosting-blue--200 | #E0EBFF | |
| color--hosting-blue--300 | #ABC6FF | |
| color--hosting-blue--400 | #85AFFF | |
| color--hosting-blue--500 | #6197FF | |
| color--hosting-blue--600 | #3D80FF | |
| color--hosting-blue--700 | #1A68FF | |
| color--hosting-blue--800 | #0054F5 | |
| color--hosting-blue--900 | #003FB8 | |
| color--hosting-blue--1000 | #002A7B | |
| color--hosting-blue--1100 | #00205C |
mittwald Navy
mittwald Navy ist im Gegensatz zu Hosting Blue dunkler und wirkt dadurch eleganter. Im mStudio wird mittwald Navy derzeit nicht eingesetzt, da die dunkleren Hosting Blue Stufen mittwald Navy ähnlich sind und das mStudio eher lebendig als elegant wirken soll.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--mittwald-navy--100 | #E4E7F6 | |
| color--mittwald-navy--200 | #C8CFEE | |
| color--mittwald-navy--300 | #A5B0E2 | |
| color--mittwald-navy--400 | #8291D7 | |
| color--mittwald-navy--500 | #5F73CC | |
| color--mittwald-navy--600 | #3D55C1 | |
| color--mittwald-navy--700 | #32459E | |
| color--mittwald-navy--800 | #27367B | |
| color--mittwald-navy--900 | #1D285C | |
| color--mittwald-navy--1000 | #131B3D | |
| color--mittwald-navy--1100 | #0E142E |
Functional Color
Functional Color vermitteln User den Status eines Elements. Sie spielen eine wichtige Rolle bei der Übermittlung von Informationen. Um den User nicht zu verwirren, sollten diese Farben nur mit einem expliziten Zweck zum Einsatz kommen.
Espelkamp Green
Espelkamp Green wird als Success-Color verwendet. Zum Beispiel werden Anlege- und Speichern-Button in Espelkamp Green dargestellt.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--espelkamp-green--100 | #DCFFF4 | |
| color--espelkamp-green--200 | #C0FFEB | |
| color--espelkamp-green--300 | #87FFDA | |
| color--espelkamp-green--400 | #4FFFC9 | |
| color--espelkamp-green--500 | #17FFB8 | |
| color--espelkamp-green--600 | #00DE9A | |
| color--espelkamp-green--700 | #00A673 | |
| color--espelkamp-green--800 | #00825B | |
| color--espelkamp-green--900 | #005F42 | |
| color--espelkamp-green--1000 | #003B29 | |
| color--espelkamp-green--1100 | #00291C |
Royal Orange
Die Royal Orange soll den User darauf aufmerksam machen, dass eine Handlungsempfehlung vorliegt.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--royal-orange--100 | #FFF4EB | |
| color--royal-orange--200 | #FFEBDC | |
| color--royal-orange--300 | #FFD9BD | |
| color--royal-orange--400 | #FFC89F | |
| color--royal-orange--500 | #FFA562 | |
| color--royal-orange--600 | #FF9343 | |
| color--royal-orange--700 | #FF8225 | |
| color--royal-orange--800 | #F56800 | |
| color--royal-orange--900 | #C25200 | |
| color--royal-orange--1000 | #8F3D00 | |
| color--royal-orange--1100 | #763200 |
Amaranth Red
Amaranth Red soll dem User ein kritisches Signal geben. Sie wird als Button-Color bei Fehlermeldungen oder vor kritischen Aktionen (z. B. Löschen oder Kündigen) verwendet. Außerdem soll sie dem User signalisieren, dass akuter Handlungsbedarf besteht, indem sie beispielsweise in einem InlineAlert eingesetzt wird.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--amaranth-red--100 | #FDF0F3 | |
| color--amaranth-red--200 | #FBE0E6 | |
| color--amaranth-red--300 | #F7C1CC | |
| color--amaranth-red--400 | #F2A2B3 | |
| color--amaranth-red--500 | #EE8299 | |
| color--amaranth-red--600 | #EA637F | |
| color--amaranth-red--700 | #E54366 | |
| color--amaranth-red--800 | #E1244C | |
| color--amaranth-red--900 | #B4193A | |
| color--amaranth-red--1000 | #83122A | |
| color--amaranth-red--1100 | #6A0F22 |
Neutral Color
Neutral Colors sind unaufdringliche Farben, die vielseitig eingesetzt werden können. Sie harmonieren gut mit allen anderen Farben und können daher gut für z. B. Hintergründe und Texte verwendet werden.
Gray
Gray findet sich in jeder Benutzeroberfläche des mStudios wieder, um durch verschiedene Grauabstufungen Tiefe zu erzeugen. So ist z. B. der Hintergrund des mStudios oder eines TextFields in verschiedene Gray-Stufen eingefärbt. Zudem wird Gray im Fließtext verwendet.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--gray--100 | #FFFFFF | |
| color--gray--200 | #FDFDFD | |
| color--gray--300 | #F8F8F8 | |
| color--gray--400 | #E6E6E6 | |
| color--gray--500 | #D5D5D5 | |
| color--gray--600 | #B1B1B1 | |
| color--gray--700 | #909090 | |
| color--gray--800 | #6D6D6D | |
| color--gray--900 | #464646 | |
| color--gray--1000 | #222222 | |
| color--gray--1100 | #000000 |
Decorative Color
Decorative Colors ergänzen die bestehenden Colors, indem sie für dekorative Zwecke verwendet werden.
Soft Contrast Violet
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--soft-contrast-violet--100 | #F4F3FE | |
| color--soft-contrast-violet--200 | #EAE7FD | |
| color--soft-contrast-violet--300 | #D6D0FA | |
| color--soft-contrast-violet--400 | #C2B9F8 | |
| color--soft-contrast-violet--500 | #AEA2F5 | |
| color--soft-contrast-violet--600 | #998BF3 | |
| color--soft-contrast-violet--700 | #8574F0 | |
| color--soft-contrast-violet--800 | #715DEE | |
| color--soft-contrast-violet--900 | #5d4abf | |
| color--soft-contrast-violet--1000 | #483b9f | |
| color--soft-contrast-violet--1100 | #302a6f |
Super Teal
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--super-teal--100 | #ebfdff | |
| color--super-teal--200 | #cffaff | |
| color--super-teal--300 | #96f3ff | |
| color--super-teal--400 | #5eedff | |
| color--super-teal--500 | #26e7ff | |
| color--super-teal--600 | #00d3ed | |
| color--super-teal--700 | #00a1b5 | |
| color--super-teal--800 | #008696 | |
| color--super-teal--900 | #006b78 | |
| color--super-teal--1000 | #004f59 | |
| color--super-teal--1100 | #00424a |
Bright Lilac
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--bright-lilac--100 | #f9e9ff | |
| color--bright-lilac--200 | #f6dfff | |
| color--bright-lilac--300 | #f1caff | |
| color--bright-lilac--400 | #ebb6ff | |
| color--bright-lilac--500 | #e6a1ff | |
| color--bright-lilac--600 | #e08dff | |
| color--bright-lilac--700 | #ce4bff | |
| color--bright-lilac--800 | #bc08ff | |
| color--bright-lilac--900 | #9000c5 | |
| color--bright-lilac--1000 | #5f0083 | |
| color--bright-lilac--1100 | #470062 |
Light und Dark Color
Die Colors Light und Dark wurden speziell für farbige Hintergründe entwickelt, können aber auch auf jeder anderen Benutzeroberfläche verwendet werden, solange das HSL Lightnesslevel passt. Light und Dark bestehen aus 8 Abstufungen, die in 12,5 %-Schritte unterteilt sind. Light und Dark dürfen nur mit den dafür vorgesehenen Components verwendet werden. Zum Beispiel sind die Light und Dark Color in den folgenden Components zu finden: Button, Heading, IllustratedMessage, HeaderNavigation und Link.