Design.md

 ---
 title: Design
 ---
-
-
-
 ## Primärfarbe / Farbpalette
 
 - _Kann konfiguriert werden durch: [wechange eG](Rollen-und-Berechtigungen#wechange-eg)_
@@ -14,6 +11,32 @@ title: Design
 - Mit dem [Color palette generator](https://palette.saas-ui.dev/) könnt ihr automatisch eine Farbpalette erstellen, die diesen Anforderungen entspricht. Gebt die Farbe, auf der die Palette basieren soll, als Primary color ein. Es wird automatisch eine 10-stufige Palette generiert, bei der die 600er-Stufe den Barrierefreiheis-Anforderungen an den Kontrast genügt. 
 - Alternativ könnt ihr eine der [Standard-Paletten unseres Design-Systems](https://v2.chakra-ui.com/docs/styled-system/theme) auswählen.
 
+<details><summary>BEISPIEL ANZEIGEN</summary>
+
+Das Portal mokwi.de verwendet eine eigene Palette, die mit dem [Color palette generator](https://palette.saas-ui.dev/) erstellt wurde:
+- 50: `#c4dd83`;
+- 100: `#afd055`;
+- 200: `#96c120`;
+- 300: `#87af1c`;
+- 400: `#7ca11a`;
+- 500: `#638115`;
+- 600: `#5d7813`;
+- 700: `#536b11`;
+- 800: `#4b6110`;
+- 900: `#44570e`;
+
+Die 600er Stufe (`#5d7813`) kommt vor allem zum Einsatz, wie hier z. B. zu sehen ist (alle grün gefärbten Elemente haben diese Farbe):
+
+![grafik](uploads/bac1f325eaea14e3cc904327d9850fc7/grafik.png)
+
+Andere Abstufungen kommen vor allem zur Hervorhebung von verschiedenen Zuständen zum Einsatz, wie z. B. hier:
+
+On hover (50er Stufe, also `#c4dd83`): ![grafik](uploads/cde880dcfa251e6fc8e1349c5236e559/grafik.png)
+
+Active (100er Stufe, also `#afd055`): ![grafik](uploads/8177c2e305488ad312e52e24bd5aa03a/grafik.png)
+
+</details>
+
 ## Logo
 
 - _Kann konfiguriert werden durch: [wechange eG](Rollen-und-Berechtigungen#wechange-eg)_