|
|
---
|
|
---
|
|
|
title: ⚠️ Design
|
|
title: Design
|
|
|
---
|
|
---
|
|
|
|
## Primärfarbe / Farbpalette
|
|
|
|
|
|
|
|
|
- _Kann konfiguriert werden durch: [wechange eG](Rollen-und-Berechtigungen#wechange-eg)_
|
|
|
|
- Das Design-Konzept für unsere Portale sieht vor, dass es eine Primärfarbe gibt, die in verschiedenen Helligkeitsstufen zum Einsatz kommt. Diese Primärfarbe kann für jedes Portal frei gewählt werden.
|
|
|
|
- Die Primärfarbe bildet ein Farbpalette mit 10 Abstufungen hinsichtlich Helligkeit/Deckkraft.
|
|
|
|
- Die Haupt-Stufe dieser Palette (Stufe 600) wird am häufigsten verwendet, und zwar als Schriftfarbe vor heißem Hintergrund bzw. als Hintergrundfarbe hinter weißer Schrift. Zwecks Barrierefreiheit muss diese Haupt-Stufe daher dunkel genug sein, dass der Kontrast zu weiß (`#ffffff`) mindestens 4.5 beträgt (entspricht WCAG AA).
|
|
|
|
- Mit dem Online-Tool [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 unter https://v2.chakra-ui.com/docs/styled-system/theme eine Standard-Palette auswählen.
|
|
|
|
|
|
|
|
|
## Logo
|
|
|
|
|
|
|
|
* Color Scheme
|
|
- An den folgenden Stellen wird das Logo verwendet:
|
|
|
* Logos (s. alter Portalfragebogen)
|
|
- Im Portal in der linken oberen Ecke
|
|
|
* Schriftart
|
|
- Auf Portalen mit dem 2. Redesign-Paket (s. [Menüs](Menüs)) wird das Logo nur einige Sekunden angezeigt, bevor es durch das Spaces-Dropdown-Menü aus dem Bildschirm geschoben wird.
|
|
|
* Illustrationen |
|
- In der [Nextcloud](Nextcloud) links oben
|
|
\ No newline at end of file |
|
- Als Favicon (s. [Definition von Wikipedia](https://de.wikipedia.org/wiki/Favicon)) für alle Seiten
|
|
|
|
- In den E-Mails, die vom System versendet werden (bspw. Einladungs- und Benachrichtigungsmails)
|
|
|
|
- Für die verschiedenen Zwecke brauchen wir das Logo in verschiedenen Formaten
|
|
|
|
- Quadratisch; 72x72px; SVG oder PNG mit transparentem Hintergrund; meistens ein reines Logo ohne Schriftzug
|
|
|
|
- Optional: Breiteres, rechteckiges Logo; 72px Höhe, größere Breite; SVG oder PNG mit transparentem Hintergrund; meistens das volle Logo mit Schriftzug
|
|
|
|
|
|
|
|
|
|
|
|
## Schriftart
|
|
|
|
|
|
|
|
- Als Standard-Schriftart bieten wir IBM Plex Sans an.
|
|
|
|
- Alternativ kann eine eigene Schriftart verwendet werden. Für diese müssen uns die Font Files zur Verfügung gestellt werden. Lizenzrechtliche Fragen sind ggf. zu klären.
|
|
|
|
|
|
|
|
|
|
|
|
## Illustrationen |
|
|
|
\ No newline at end of file |
