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.
Base Colors
Base Colors bilden das Fundament des Flow Design Systems. Sie prägen die Oberflächen und schaffen die visuelle Grundlage für alle Komponenten und Layouts.
Neutral Color
Neutral Colors sind zurückhaltend und vielseitig einsetzbar. Durch ihre Ausgewogenheit harmonieren sie mit allen weiteren Farben und kommen in nahezu allen UI-Elementen zum Einsatz.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--gray--100 | #FFFFFF | |
| color--gray--200 | #F4F8FC | |
| color--gray--300 | #E5EFF8 | |
| color--gray--400 | #DCE9F7 | |
| color--gray--500 | #B7C9DB | |
| color--gray--600 | #8FA1B4 | |
| color--gray--700 | #5E6C7A | |
| color--gray--800 | #3A434E | |
| color--gray--900 | #292F37 | |
| color--gray--1000 | #1B1F24 | |
| color--gray--1100 | #121518 | |
| color--gray--1200 | #000000 |
Hosting Blue
Hosting Blue ist unsere Primärfarbe. Sie verleiht dem mStudio ein prägnantes Erscheinungsbild und stärkt die Wiedererkennung der Marke mittwald. Aufgrund ihrer Leuchtkraft eignet sie sich besonders für gezielte Akzente, interaktive Elemente und visuelle Hervorhebungen.
| 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 |
Functional Color
Functional Colors kommunizieren Zustände und unterstützen die Nutzerführung. Sie helfen dabei, Informationen schnell einzuordnen und Handlungsbedarf zu erkennen. Weitere Details zur Anwendung finden sich im Informationskonzept.
Espelkamp Green
Espelkamp Green steht für positive Rückmeldungen und erfolgreiche Aktionen. Die Farbe signalisiert Bestätigung, Abschluss oder einen fehlerfreien Zustand.
| 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
Royal Orange kennzeichnet Warnungen und weist auf potenzielle Risiken oder unerwünschte Zustände hin. Die Farbe signalisiert, dass Aufmerksamkeit erforderlich ist und eine Handlung zeitnah erfolgen sollte, auch wenn noch kein kritischer Fehler 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 kennzeichnet kritische Zustände. Die Farbe signalisiert dringenden Handlungsbedarf oder Fehler, die unmittelbare Aufmerksamkeit erfordern.
| 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 | #AB1737 | |
| color--amaranth-red--1000 | #710F24 | |
| color--amaranth-red--1100 | #540B1B |
Decorative Color
Decorative Colors erweitern die Farbpalette um zusätzliche Markenfarben. Sie werden ausschließlich für dekorative Elemente sowie für Marketing- und Kommunikationsmaßnahmen eingesetzt und haben keine funktionale Bedeutung innerhalb des Interfaces.
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 |
mittwald Navy
| 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 |
Light und Dark Color
Light und Dark Colors wurden speziell für den Einsatz auf farbigen Hintergründen oder Bildern entwickelt. Sie bestehen aus jeweils 8 transparenten Abstufungen. Da die Farben auf Transparenzen basieren, muss der Kontrast zur jeweiligen Hintergrundfarbe eigenständig auf Barrierefreiheit geprüft werden. Aus diesem Grund stehen sie nur in definierten Components zur Verfügung, beispielsweise im Button.
Die Verwendung orientiert sich am HSL-Farbmodell. HSL steht für Hue, Saturation und Lightness. Für die Auswahl von Light oder Dark ist ausschließlich der Lightness-Wert relevant. Er beschreibt die wahrgenommene Helligkeit einer Farbe auf einer Skala von 0 bis 100.
Als Schwellenwert gilt 50. Liegt der Lightness-Wert unter 50, sollte Light verwendet. Liegt der Lightness-Wert über 50, sollte Dark verwendet.
Grundsätzlich gilt: Je weiter der Lightness-Wert vom Schwellenwert 50 entfernt ist, desto größer ist in der Regel der erreichbare Kontrast. Werte deutlich unter 50 verbessern den Kontrast mit Light, Werte deutlich über 50 verbessern den Kontrast mit Dark.
Light
Verwende die Light-Color, bei dunklen Hintergründen mit einem HSL Lightness-Wert von weniger als 50.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--white-alpha--100 | rgb(255 255 255 / 12.5%) | |
| color--white-alpha--200 | rgb(255 255 255 / 25%) | |
| color--white-alpha--300 | rgb(255 255 255 / 37.5%) | |
| color--white-alpha--400 | rgb(255 255 255 / 50%) | |
| color--white-alpha--500 | rgb(255 255 255 / 62.5%) | |
| color--white-alpha--600 | rgb(255 255 255 / 75%) | |
| color--white-alpha--700 | rgb(255 255 255 / 87.5%) | |
| color--white-alpha--800 | rgb(255 255 255 / 100%) |
Dark
Verwende die Dark-Color, bei hellen, farbigen Hintergründen mit einem HSL Lightness-Wert von größer als 50.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--black-alpha--100 | rgb(0 0 0 / 12.5%) | |
| color--black-alpha--200 | rgb(0 0 0 / 25%) | |
| color--black-alpha--300 | rgb(0 0 0 / 37.5%) | |
| color--black-alpha--400 | rgb(0 0 0 / 50%) | |
| color--black-alpha--500 | rgb(0 0 0 / 62.5%) | |
| color--black-alpha--600 | rgb(0 0 0 / 75%) | |
| color--black-alpha--700 | rgb(0 0 0 / 87.5%) | |
| color--black-alpha--800 | rgb(0 0 0 / 100%) |
Categorical Color
Categorical Colors eignen sich hervorragend, um Daten optisch in Kategorien zu unterscheiden. Die Farben sind so optimiert, dass sie durch hohe Kontraste auch für Menschen mit einer Farbsehschwäche gut unterscheidbar sind. Am besten funktionieren sie in der hier gegebenen Reihenfolge.
Achtung: Categorical Colors sind ausschließlich für Datenvisualisierung gedacht und heben sich bewusst von allen anderen Farben im Design System ab. Darum sollten sie nicht für dekorative Zwecke oder andere UI-Elemente verwendet werden.
| Beispiel | Token-Name | Wert |
|---|---|---|
| color--categorical--sea-green | #0fb5ae | |
| color--categorical--palatinate-blue | #4046ca | |
| color--categorical--tangerine | #f68511 | |
| color--categorical--magenta | #de3d82 | |
| color--categorical--tropical-indigo | #7e84fa | |
| color--categorical--malachite | #72e06a | |
| color--categorical--azure | #147af3 | |
| color--categorical--violet | #7326d3 | |
| color--categorical--yellow | #e8c600 | |
| color--categorical--alloy-orange | #cb5d00 | |
| color--categorical--green | #008f5d | |
| color--categorical--lime | #bce931 |