‍

Color

Farben verkörpern die Marke mittwald und sind ein wesentliches Kommunikationsmittel der Benutzeroberfläche. Sie lenken die Aufmerksamkeit der Nutzer und vermitteln gezielt Informationen wie z. B. einen Status.

Aufbau

Flow ordnet Farben in drei Ebenen. Wie die Ebenen aufeinander aufbauen, zeigt die Seite Design Tokens‍.

  • Brand enthält die Palette der Marke mittwald. Ein Brand Token hat in Light und Dark denselben Wert.
  • Semantic gibt einer Farbe eine Bedeutung, z. B. Fläche, Text oder Status. Nur diese Ebene unterscheidet zwischen Light und Dark.
  • Variant kombiniert Semantic Colors zu Paaren für die Varianten Solid, Soft, Plain und Outline.

Die Tabellen dieser Seite zeigen die Semantic Colors mit ihrem Wert in Light und Dark. Die Brand Colors‍ am Ende der Seite zeigen die Palette, aus der sie gewählt sind.

Quiet und Strong

Farbige Gruppen haben sechs Töne. Jeder Ton zählt nach Betonung: 100 ist in beiden Themes der ruhigste.

  • Quiet (quiet.100 bis quiet.300) für die Fläche der Variante Soft, ihr Hover und Pressed sowie Hover und Pressed der Varianten Plain und Outline.
  • Strong (strong.100 bis strong.300) für die Fläche der Variante Solid, ihr Hover und Pressed. strong.100 ist auch die Farbe von Text und Links in der Variante Plain, strong.200 die Farbe von Text auf Soft und Outline.

Best Practices

  • Nutze die Color Props der Komponenten, z. B. color am Badge‍ oder backgroundColor an der AccentBox‍. Die Komponenten wählen dann die passenden Farben für Light und Dark.
  • Greife für eigene Elemente auf Semantic oder Variant Tokens zurück, nicht auf Brand Tokens. Nur sie passen ihren Wert an das Theme an.
  • Setze Status Colors für Zustände ein und Decorative Colors für Dekoration. So bleibt die Bedeutung eines Status eindeutig.
  • Verwende auf farbigen Flächen die Light und Dark Colors‍ für Inhalte. Sie sind auf wechselnde Hintergründe ausgelegt.
  • Prüfe den Kontrast, wenn du Farben selbst kombinierst. Flow prüft die Kontraste innerhalb seiner Komponenten, nicht in eigenen Kombinationen.

Neutral Color

Neutral Colors prägen den Großteil der Oberfläche. Flow teilt sie nach ihrem Zweck in eigene Rollen auf: Elevation, Content und Border. Für alles Weitere gibt es die Gruppe Neutral.

Elevation

Elevation Colors sind Flächen, auf denen Inhalte liegen.

  • 100 für erhöhte Flächen wie LayoutCard‍ und Modal‍, außerdem für Elemente, die zu einer Fläche passen müssen, z. B. der Knopf eines Switch‍
  • 200 für den Seitenhintergrund, Formularfelder und Tracks
  • 300 für eingelassene Flächen

In beiden Themes liegt die Seite unter der Karte. Darum ist 100 auch in Dark heller als 200.

Token-NameLightDark
elevation--color--100
#ffffff
#1d1e1f
elevation--color--200
#f6f8fa
#141516
elevation--color--300
#ebeff3
#2c2f33

Content

Content Colors sind für Text und Icons auf neutralen Flächen.

  • 100 für sekundäre Inhalte wie Icons und Platzhalter
  • 200 für Labels
  • 300 für Text
  • inverse für Inhalte auf Strong-Flächen, z. B. im Solid Button‍
Token-NameLightDark
content--color--100
#595e64
#adb3bc
content--color--200
#404448
#c1c7d0
content--color--300
#141516
#ffffff
content--color--inverse
#ffffff
#1d1e1f

Border

  • 100 rahmt Flächen wie LayoutCard‍, Modal‍ und Popover.
  • 200 gruppiert Inhalte, z. B. in Separator‍, ListItem, FileCard‍ und Table‍.
  • 300 umrandet Steuerelemente wie Formularfelder. Sie erreicht auf neutralen Flächen einen Kontrast von mindestens 3:1.
Token-NameLightDark
border--color--100
#e3e8ef
#2c2f33
border--color--200
#d2d7df
#36393d
border--color--300
#777c84
#888d96

Neutral

Neutral deckt neutrale Varianten ab, z. B. den Button mit color="secondary".

Token-NameLightDark
neutral--color--quiet--100
#e3e8ef
#2c2f33
neutral--color--quiet--200
#d2d7df
#36393d
neutral--color--quiet--300
#c1c7d0
#404448
neutral--color--strong--100
#404448
#ebeff3
neutral--color--strong--200
#2c2f33
#f6f8fa
neutral--color--strong--300
#1d1e1f
#ffffff

Primary Color

Primary basiert auf mittwald Blue, der 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.

Token-NameLightDark
primary--color--quiet--100
#d8dbf2
#1e1b6a
primary--color--quiet--200
#c5c6f1
#211c7f
primary--color--quiet--300
#b2b2f0
#231e94
primary--color--strong--100
#2d23e8
#9f9eef
primary--color--strong--200
#2820be
#b2b2f0
primary--color--strong--300
#231e94
#c5c6f1

Status Color

Status 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‍.

Info

Info kennzeichnet neutrale Hinweise und ergänzende Informationen.

Token-NameLightDark
info--color--quiet--100
#e0e7f4
#2e3552
info--color--quiet--200
#d4dbf1
#374066
info--color--quiet--300
#c7d0ef
#414b79
info--color--strong--100
#5d6cb4
#95a3e3
info--color--strong--200
#4a568d
#aebae9
info--color--strong--300
#414b79
#bbc5ec

Success

Success steht für positive Rückmeldungen und erfolgreiche Aktionen. Die Farbe signalisiert Bestätigung, Abschluss oder einen fehlerfreien Zustand.

Token-NameLightDark
success--color--quiet--100
#dff6ec
#1c3f30
success--color--quiet--200
#cff2e3
#265440
success--color--quiet--300
#bfedd9
#2f6950
success--color--strong--100
#397f60
#5ed3a0
success--color--strong--200
#2f6950
#9fe5c6
success--color--strong--300
#265440
#afe9d0

Warning

Warning 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.

Token-NameLightDark
warning--color--quiet--100
#ffe2d8
#5b3021
warning--color--quiet--200
#ffd4c4
#723925
warning--color--quiet--300
#ffc6b0
#8a4228
warning--color--strong--100
#d05e33
#ff9b76
warning--color--strong--200
#a14c2c
#ffb79d
warning--color--strong--300
#8a4228
#ffc6b0

Danger

Danger kennzeichnet kritische Zustände. Die Farbe signalisiert dringenden Handlungsbedarf oder Fehler, die unmittelbare Aufmerksamkeit erfordern.

Token-NameLightDark
danger--color--quiet--100
#fcdae1
#56232e
danger--color--quiet--200
#fbc7d1
#6c2836
danger--color--quiet--300
#f9b4c2
#822d3e
danger--color--strong--100
#c43b57
#f57c94
danger--color--strong--200
#983146
#f8a2b3
danger--color--strong--300
#822d3e
#f9b4c2

Unavailable

Unavailable kennzeichnet, dass etwas nicht verfügbar ist. Deaktivierte Elemente nutzen die Quiet-Töne dieser Gruppe für Fläche, Rahmen und Inhalt.

Token-NameLightDark
unavailable--color--quiet--100
#ebeff3
#2c2f33
unavailable--color--quiet--200
#e3e8ef
#36393d
unavailable--color--quiet--300
#c1c7d0
#666b72
unavailable--color--strong--100
#595e64
#adb3bc
unavailable--color--strong--200
#404448
#c1c7d0
unavailable--color--strong--300
#2c2f33
#e3e8ef

Decorative Color

Decorative Colors bringen die Markenfarben von mittwald in die Oberfläche. Sie haben keine funktionale Bedeutung. Die Color Props von Badge‍, Avatar‍, Icon‍, Color‍ und AccentBox‍ nutzen sie mit den Werten blue, navy, lilac, sage und salmon.

Neben Quiet und Strong hat jede Gruppe einen Ton content für Icons und farbigen Text auf beliebigen Flächen. Er gibt den Farbton wieder, ist aber nicht auf einen bestimmten Kontrast ausgelegt. Nutze für Text auf den Quiet-Flächen darum die Light und Dark Colors‍.

Blue

Token-NameLightDark
decorative-blue--color--quiet--100
#b2b2f0
#211c7f
decorative-blue--color--quiet--200
#9f9eef
#231e94
decorative-blue--color--quiet--300
#8c89ee
#261fa9
decorative-blue--color--strong--100
#261fa9
#9f9eef
decorative-blue--color--strong--200
#211c7f
#b2b2f0
decorative-blue--color--strong--300
#1c1955
#c5c6f1
decorative-blue--color--content
#2d23e8
#9f9eef

Navy

Navy ist außerdem die Farbe des Avatar‍ ohne Bild und der eigenen Nachricht in Message‍.

Token-NameLightDark
decorative-navy--color--quiet--100
#c6ceec
#2f3551
decorative-navy--color--quiet--200
#bac3e9
#394065
decorative-navy--color--quiet--300
#adb8e7
#424b78
decorative-navy--color--strong--100
#394065
#a1ade4
decorative-navy--color--strong--200
#2f3551
#adb8e7
decorative-navy--color--strong--300
#262b3d
#bac3e9
decorative-navy--color--content
#5461a0
#6676c7

Lilac

Token-NameLightDark
decorative-lilac--color--quiet--100
#dbcbf8
#483b5c
decorative-lilac--color--quiet--200
#d7c2f9
#5a4873
decorative-lilac--color--quiet--300
#d3b8fa
#6b558b
decorative-lilac--color--strong--100
#5a4873
#dbcbf8
decorative-lilac--color--strong--200
#483b5c
#dfd4f7
decorative-lilac--color--strong--300
#372e45
#e3ddf5
decorative-lilac--color--content
#8e6eb9
#c294ff

Sage

Sage basiert auf mittwald Green.

Token-NameLightDark
decorative-sage--color--quiet--100
#c5cdcc
#3e4241
decorative-sage--color--quiet--200
#bdc6c4
#4c514f
decorative-sage--color--quiet--300
#b6c0bc
#59605d
decorative-sage--color--strong--100
#4c514f
#cdd4d3
decorative-sage--color--strong--200
#3e4241
#d4dbdb
decorative-sage--color--strong--300
#303332
#dce1e3
decorative-sage--color--content
#757e79
#9faba4

Salmon

Salmon basiert auf mittwald Orange.

Token-NameLightDark
decorative-salmon--color--quiet--100
#e9c8bd
#533f38
decorative-salmon--color--quiet--200
#e9c0b2
#684d43
decorative-salmon--color--quiet--300
#e8b8a7
#7e5b4e
decorative-salmon--color--strong--100
#684d43
#e9c0b2
decorative-salmon--color--strong--200
#533f38
#e9c8bd
decorative-salmon--color--strong--300
#3e312d
#e9d0c8
decorative-salmon--color--content
#e7a187
#e7a187

Gradient

Zu jeder Decorative Color außer Blue gibt es einen Farbverlauf der Marke mittwald. Die AccentBox‍ nutzt ihn mit backgroundColor="gradient-navy", "gradient-sage", "gradient-lilac" und "gradient-salmon". Die Komponenten legen eine Körnung über jeden Verlauf; sie ist nicht Teil des Tokens.

Token-NameLightDark
gradient-navy--color
linear-gradient(to top right, #a6b2e7 0%, #b7c1ea 35%, #bbc4ea 50%, #d5dbef 75%, #e2e7f1 100%)
linear-gradient(to top right, #25293a 0%, #2e3550 35%, #303653 50%, #414b7a 75%, #49558b 100%)
gradient-sage--color
linear-gradient(to top right, #a7b2ac 0%, #b7c0bc 35%, #bac4c0 50%, #d5dcdc 75%, #e3e8ea 100%)
linear-gradient(to top right, #272c2c 0%, #2c3232 25%, #323939 50%, #383f3f 75%, #383f3f 100%)
gradient-lilac--color
linear-gradient(to top right, #dcb1c2 0%, #d6b0d6 25%, #cdaef0 50%, #d2b9fb 75%, #ddcbfa 100%)
linear-gradient(to top right, #553a57 0%, #4f3f73 30%, #604f90 65%, #7c61b1 100%)
gradient-salmon--color
linear-gradient(to top right, #e7a48b 0%, #e8b5a3 35%, #e3b8b5 50%, #dbbccf 75%, #d4c0e8 100%)
linear-gradient(to top right, #392d2a 0%, #6f5249 35%, #8a655f 50%, #8d6c84 75%, #806a9c 100%)

Light und Dark Color

Light und Dark Colors wurden speziell für den Einsatz auf farbigen Hintergründen oder Bildern entwickelt. Sie basieren auf transparentem Weiß und Schwarz und haben wie die farbigen Gruppen je drei Quiet- und drei Strong-Töne. Da die Farben auf Transparenzen basieren, prüfe den Kontrast zur jeweiligen Hintergrundfarbe selbst. Aus diesem Grund stehen sie nur in definierten Komponenten 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. Nutze bei einem Lightness-Wert unter 50 die Light-Color, bei einem Wert über 50 die Dark-Color.

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.

Token-NameLightDark
light--color--quiet--100
rgb(255 255 255 / 10%)
rgb(0 0 0 / 10%)
light--color--quiet--200
rgb(255 255 255 / 20%)
rgb(0 0 0 / 20%)
light--color--quiet--300
rgb(255 255 255 / 30%)
rgb(0 0 0 / 30%)
light--color--strong--100
rgb(255 255 255 / 100%)
rgb(0 0 0 / 100%)
light--color--strong--200
rgb(255 255 255 / 90%)
rgb(0 0 0 / 90%)
light--color--strong--300
rgb(255 255 255 / 70%)
rgb(0 0 0 / 70%)

Dark

Verwende die Dark-Color bei hellen, farbigen Hintergründen mit einem HSL-Lightness-Wert von mehr als 50.

Token-NameLightDark
dark--color--quiet--100
rgb(0 0 0 / 10%)
rgb(255 255 255 / 10%)
dark--color--quiet--200
rgb(0 0 0 / 20%)
rgb(255 255 255 / 20%)
dark--color--quiet--300
rgb(0 0 0 / 30%)
rgb(255 255 255 / 30%)
dark--color--strong--100
rgb(0 0 0 / 100%)
rgb(255 255 255 / 100%)
dark--color--strong--200
rgb(0 0 0 / 90%)
rgb(255 255 255 / 90%)
dark--color--strong--300
rgb(0 0 0 / 70%)
rgb(255 255 255 / 70%)

Light Static und Dark Static

BeispielToken-NameWert
light-static--color--quiet--100rgb(255 255 255 / 10%)
light-static--color--quiet--200rgb(255 255 255 / 20%)
light-static--color--quiet--300rgb(255 255 255 / 30%)
light-static--color--strong--100rgb(255 255 255 / 100%)
light-static--color--strong--200rgb(255 255 255 / 90%)
light-static--color--strong--300rgb(255 255 255 / 70%)
dark-static--color--quiet--100rgb(0 0 0 / 10%)
dark-static--color--quiet--200rgb(0 0 0 / 20%)
dark-static--color--quiet--300rgb(0 0 0 / 30%)
dark-static--color--strong--100rgb(0 0 0 / 100%)
dark-static--color--strong--200rgb(0 0 0 / 90%)
dark-static--color--strong--300rgb(0 0 0 / 70%)

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.

Categorical Colors heben sich bewusst von allen anderen Farben im Design System ab. Setze sie darum nur für Datenvisualisierung ein, nicht für dekorative Zwecke oder andere UI-Elemente.

BeispielToken-NameWert
categorical--color--sea-green#0fb5ae
categorical--color--palatinate-blue#4046ca
categorical--color--tangerine#f68511
categorical--color--magenta#de3d82
categorical--color--tropical-indigo#7e84fa
categorical--color--malachite#72e06a
categorical--color--azure#147af3
categorical--color--violet#7326d3
categorical--color--yellow#e8c600
categorical--color--alloy-orange#cb5d00
categorical--color--green#008f5d
categorical--color--lime#bce931

Brand Color

Brand Colors sind die Palette der Marke mittwald, wie sie das Brand-Team übergibt. Sie haben in Light und Dark denselben Wert und sind die Grundlage, aus der die Semantic Colors gewählt sind. Nutze im Code die Semantic Colors; die Palette zeigt, aus welchen Tönen sie stammen.

Marken- und Systemfarben haben je 19 Abstufungen von hell (100) bis dunkel (1900). Bei den farbigen Paletten liegt die Grundfarbe bei 1000.

Markenfarben

mittwald Neutral

BeispielToken-NameWert
color--mittwald-neutral--100#ffffff
color--mittwald-neutral--200#f6f8fa
color--mittwald-neutral--300#ebeff3
color--mittwald-neutral--400#e3e8ef
color--mittwald-neutral--500#d2d7df
color--mittwald-neutral--600#c1c7d0
color--mittwald-neutral--700#adb3bc
color--mittwald-neutral--800#999fa8
color--mittwald-neutral--900#888d96
color--mittwald-neutral--1000#777c84
color--mittwald-neutral--1100#666b72
color--mittwald-neutral--1200#595e64
color--mittwald-neutral--1300#4c5156
color--mittwald-neutral--1400#404448
color--mittwald-neutral--1500#36393d
color--mittwald-neutral--1600#2c2f33
color--mittwald-neutral--1700#1d1e1f
color--mittwald-neutral--1800#141516
color--mittwald-neutral--1900#000000

mittwald Blue

BeispielToken-NameWert
color--mittwald-blue--100#d8dbf2
color--mittwald-blue--200#c5c6f1
color--mittwald-blue--300#b2b2f0
color--mittwald-blue--400#9f9eef
color--mittwald-blue--500#8c89ee
color--mittwald-blue--600#7975ed
color--mittwald-blue--700#6660ec
color--mittwald-blue--800#534cea
color--mittwald-blue--900#4038e9
color--mittwald-blue--1000#2d23e8
color--mittwald-blue--1100#2b22d3
color--mittwald-blue--1200#2820be
color--mittwald-blue--1300#261fa9
color--mittwald-blue--1400#231e94
color--mittwald-blue--1500#211c7f
color--mittwald-blue--1600#1e1b6a
color--mittwald-blue--1700#1c1955
color--mittwald-blue--1800#191840
color--mittwald-blue--1900#17162b

mittwald Navy

BeispielToken-NameWert
color--mittwald-navy--100#dfe4f1
color--mittwald-navy--200#d2d9ee
color--mittwald-navy--300#c6ceec
color--mittwald-navy--400#bac3e9
color--mittwald-navy--500#adb8e7
color--mittwald-navy--600#a1ade4
color--mittwald-navy--700#94a2e2
color--mittwald-navy--800#8897e0
color--mittwald-navy--900#7c8cdd
color--mittwald-navy--1000#6f81db
color--mittwald-navy--1100#6676c7
color--mittwald-navy--1200#5d6cb3
color--mittwald-navy--1300#5461a0
color--mittwald-navy--1400#4b568c
color--mittwald-navy--1500#424b78
color--mittwald-navy--1600#394065
color--mittwald-navy--1700#2f3551
color--mittwald-navy--1800#262b3d
color--mittwald-navy--1900#1d202a

mittwald Green

BeispielToken-NameWert
color--mittwald-green--100#e3e8eb
color--mittwald-green--200#dce1e3
color--mittwald-green--300#d4dbdb
color--mittwald-green--400#cdd4d3
color--mittwald-green--500#c5cdcc
color--mittwald-green--600#bdc6c4
color--mittwald-green--700#b6c0bc
color--mittwald-green--800#aeb9b4
color--mittwald-green--900#a6b2ac
color--mittwald-green--1000#9faba4
color--mittwald-green--1100#919c96
color--mittwald-green--1200#838d88
color--mittwald-green--1300#757e79
color--mittwald-green--1400#676f6b
color--mittwald-green--1500#59605d
color--mittwald-green--1600#4c514f
color--mittwald-green--1700#3e4241
color--mittwald-green--1800#303332
color--mittwald-green--1900#222424

mittwald Lilac

BeispielToken-NameWert
color--mittwald-lilac--100#e7e6f4
color--mittwald-lilac--200#e3ddf5
color--mittwald-lilac--300#dfd4f7
color--mittwald-lilac--400#dbcbf8
color--mittwald-lilac--500#d7c2f9
color--mittwald-lilac--600#d3b8fa
color--mittwald-lilac--700#cfaffb
color--mittwald-lilac--800#cba6fd
color--mittwald-lilac--900#c69dfe
color--mittwald-lilac--1000#c294ff
color--mittwald-lilac--1100#b187e8
color--mittwald-lilac--1200#a07bd0
color--mittwald-lilac--1300#8e6eb9
color--mittwald-lilac--1400#7d61a2
color--mittwald-lilac--1500#6b558b
color--mittwald-lilac--1600#5a4873
color--mittwald-lilac--1700#483b5c
color--mittwald-lilac--1800#372e45
color--mittwald-lilac--1900#25222d

mittwald Orange

BeispielToken-NameWert
color--mittwald-orange--100#ebe7e8
color--mittwald-orange--200#eadfdd
color--mittwald-orange--300#ead8d3
color--mittwald-orange--400#e9d0c8
color--mittwald-orange--500#e9c8bd
color--mittwald-orange--600#e9c0b2
color--mittwald-orange--700#e8b8a7
color--mittwald-orange--800#e8b09c
color--mittwald-orange--900#e7a992
color--mittwald-orange--1000#e7a187
color--mittwald-orange--1100#d2937b
color--mittwald-orange--1200#bd8570
color--mittwald-orange--1300#a87765
color--mittwald-orange--1400#93695a
color--mittwald-orange--1500#7e5b4e
color--mittwald-orange--1600#684d43
color--mittwald-orange--1700#533f38
color--mittwald-orange--1800#3e312d
color--mittwald-orange--1900#292321

Systemfarben

Die Systemfarben sind die Grundlage der Status Colors‍.

System Info

BeispielToken-NameWert
color--system-info--100#e0e7f4
color--system-info--200#d4dbf1
color--system-info--300#c7d0ef
color--system-info--400#bbc5ec
color--system-info--500#aebae9
color--system-info--600#a2aee6
color--system-info--700#95a3e3
color--system-info--800#8898e0
color--system-info--900#7c8dde
color--system-info--1000#6f81db
color--system-info--1100#6676c7
color--system-info--1200#5d6cb4
color--system-info--1300#5361a0
color--system-info--1400#4a568d
color--system-info--1500#414b79
color--system-info--1600#374066
color--system-info--1700#2e3552
color--system-info--1800#252b3f
color--system-info--1900#1b202b

System Success

BeispielToken-NameWert
color--system-success--100#effbf6
color--system-success--200#dff6ec
color--system-success--300#cff2e3
color--system-success--400#bfedd9
color--system-success--500#afe9d0
color--system-success--600#9fe5c6
color--system-success--700#8fe0bd
color--system-success--800#7edcb3
color--system-success--900#6ed7aa
color--system-success--1000#5ed3a0
color--system-success--1100#55be90
color--system-success--1200#4ba980
color--system-success--1300#429470
color--system-success--1400#397f60
color--system-success--1500#2f6950
color--system-success--1600#265440
color--system-success--1700#1c3f30
color--system-success--1800#132a20
color--system-success--1900#091510

System Warning

BeispielToken-NameWert
color--system-warning--100#fff1eb
color--system-warning--200#ffe2d8
color--system-warning--300#ffd4c4
color--system-warning--400#ffc6b0
color--system-warning--500#ffb79d
color--system-warning--600#ffa989
color--system-warning--700#ff9b76
color--system-warning--800#ff8d62
color--system-warning--900#ff7e4e
color--system-warning--1000#ff703b
color--system-warning--1100#e76737
color--system-warning--1200#d05e33
color--system-warning--1300#b85530
color--system-warning--1400#a14c2c
color--system-warning--1500#8a4228
color--system-warning--1600#723925
color--system-warning--1700#5b3021
color--system-warning--1800#43271d
color--system-warning--1900#2c1e1a

System Danger

BeispielToken-NameWert
color--system-danger--100#feecf0
color--system-danger--200#fcdae1
color--system-danger--300#fbc7d1
color--system-danger--400#f9b4c2
color--system-danger--500#f8a2b3
color--system-danger--600#f68fa4
color--system-danger--700#f57c94
color--system-danger--800#f36a85
color--system-danger--900#f25776
color--system-danger--1000#f04467
color--system-danger--1100#da405f
color--system-danger--1200#c43b57
color--system-danger--1300#ae364e
color--system-danger--1400#983146
color--system-danger--1500#822d3e
color--system-danger--1600#6c2836
color--system-danger--1700#56232e
color--system-danger--1800#401e26
color--system-danger--1900#2a1a1e

Transparenzen

Transparentes Weiß und Schwarz in zehn Stufen von 10 bis 100 % Deckkraft. Sie sind die Grundlage der Light und Dark Colors‍.

White Alpha

BeispielToken-NameWert
color--white-alpha--100rgb(255 255 255 / 10%)
color--white-alpha--200rgb(255 255 255 / 20%)
color--white-alpha--300rgb(255 255 255 / 30%)
color--white-alpha--400rgb(255 255 255 / 40%)
color--white-alpha--500rgb(255 255 255 / 50%)
color--white-alpha--600rgb(255 255 255 / 60%)
color--white-alpha--700rgb(255 255 255 / 70%)
color--white-alpha--800rgb(255 255 255 / 80%)
color--white-alpha--900rgb(255 255 255 / 90%)
color--white-alpha--1000rgb(255 255 255 / 100%)

Black Alpha

BeispielToken-NameWert
color--black-alpha--100rgb(0 0 0 / 10%)
color--black-alpha--200rgb(0 0 0 / 20%)
color--black-alpha--300rgb(0 0 0 / 30%)
color--black-alpha--400rgb(0 0 0 / 40%)
color--black-alpha--500rgb(0 0 0 / 50%)
color--black-alpha--600rgb(0 0 0 / 60%)
color--black-alpha--700rgb(0 0 0 / 70%)
color--black-alpha--800rgb(0 0 0 / 80%)
color--black-alpha--900rgb(0 0 0 / 90%)
color--black-alpha--1000rgb(0 0 0 / 100%)

Farbverläufe

Jeder Farbverlauf hat einen Wert für helle und einen für dunkle Oberflächen. Die Semantic Colors der Gradients‍ wählen daraus je Theme.

BeispielToken-NameWert
color--mittwald-gradient--navy-lightlinear-gradient(to top right, #a6b2e7 0%, #b7c1ea 35%, #bbc4ea 50%, #d5dbef 75%, #e2e7f1 100%)
color--mittwald-gradient--navy-darklinear-gradient(to top right, #25293a 0%, #2e3550 35%, #303653 50%, #414b7a 75%, #49558b 100%)
color--mittwald-gradient--sage-lightlinear-gradient(to top right, #a7b2ac 0%, #b7c0bc 35%, #bac4c0 50%, #d5dcdc 75%, #e3e8ea 100%)
color--mittwald-gradient--sage-darklinear-gradient(to top right, #272c2c 0%, #2c3232 25%, #323939 50%, #383f3f 75%, #383f3f 100%)
color--mittwald-gradient--lilac-lightlinear-gradient(to top right, #dcb1c2 0%, #d6b0d6 25%, #cdaef0 50%, #d2b9fb 75%, #ddcbfa 100%)
color--mittwald-gradient--lilac-darklinear-gradient(to top right, #553a57 0%, #4f3f73 30%, #604f90 65%, #7c61b1 100%)
color--mittwald-gradient--salmon-lightlinear-gradient(to top right, #e7a48b 0%, #e8b5a3 35%, #e3b8b5 50%, #dbbccf 75%, #d4c0e8 100%)
color--mittwald-gradient--salmon-darklinear-gradient(to top right, #392d2a 0%, #6f5249 35%, #8a655f 50%, #8d6c84 75%, #806a9c 100%)

Auf dieser Seite