Skip to content
Snippets Groups Projects

Changes

Page history
  • New page
  • Templates
    • Update Design authored by Felix Englisch's avatar Felix Englisch
    Hide whitespace changes
    Inline Side-by-side
    Showing
    with 22 additions and 21 deletions
    Design.md
    View page @ c8680175
    ---
    title: Design
    ---
    ## Primärfarbe / Farbpalette
    - _Kann konfiguriert werden durch: [wechange eG](Rollen-und-Berechtigungen#wechange-eg)_
    ......@@ -13,27 +14,27 @@ title: Design
    <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)
    > 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 am häufigsten zum Einsatz, wie hier z. B. zu sehen ist (alle grün gefärbten Elemente auf diesem Screen 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>
    ......