131 lines
4.2 KiB
Markdown
131 lines
4.2 KiB
Markdown
# NAK Intranet – Design-Richtlinien
|
||
## Basierend auf dem CD-Manual NAK 2026
|
||
|
||
---
|
||
|
||
## 1. Farben (Digital-Palette)
|
||
|
||
| Farbe | HEX-Wert | Verwendung |
|
||
|-----------------|-----------|---------------------------------------|
|
||
| NAK Blau | `#2786cf` | Primärfarbe, Buttons, Links, Header |
|
||
| Schwarz | `#000000` | Texte, Icons |
|
||
| Sonnengelb | `#ffdc0f` | Akzente, Warnungen |
|
||
| Orange | `#f08200` | Akzente |
|
||
| Rot | `#d21400` | Fehlermeldungen, Warnstufen |
|
||
| Himbeere | `#d73282` | Akzente |
|
||
| Lila | `#731e7d` | Seelsorge-Bereich |
|
||
| Dunkelblau | `#1243a0` | Akzente |
|
||
| Türkisblau | `#00a091` | Akzente |
|
||
| Dunkelgrün | `#006e14` | Entwickler-Bereich, Erfolg |
|
||
| Gelbgrün | `#82be23` | Akzente |
|
||
|
||
### Neutrale Farben (Graustufen)
|
||
- Hintergrund: `#f8f9fa` (Gray-50)
|
||
- Karten/Panels: `#ffffff`
|
||
- Trennlinien: `#e9ecef` (Gray-200)
|
||
- Sekundärer Text: `#6c757d` (Gray-600)
|
||
- Primärer Text: `#212529` (Gray-900)
|
||
|
||
---
|
||
|
||
## 2. Typografie
|
||
|
||
- **Hausschrift**: Suisse Int'l (als woff2 eingebunden)
|
||
- Light (300) – Fließtext
|
||
- Medium (500) – Überschriften, Labels
|
||
- Semibold (600) – Buttons, Hervorhebungen
|
||
- **Fallback**: Arial, sans-serif
|
||
|
||
### Schriftgrößen
|
||
| Token | Größe |
|
||
|-------------|-----------|
|
||
| xs | 0.75rem |
|
||
| sm | 0.875rem |
|
||
| base | 1rem |
|
||
| md | 1.125rem |
|
||
| lg | 1.25rem |
|
||
| xl | 1.5rem |
|
||
| 2xl | 2rem |
|
||
| 3xl | 2.5rem |
|
||
|
||
---
|
||
|
||
## 3. Formsprache: Eckiges Design
|
||
|
||
Das CD-Manual schreibt eine **eckige Formsprache** vor:
|
||
- **Keine abgerundeten Ecken** (border-radius: 0) für UI-Elemente
|
||
- Ausnahme: Profilbilder (kreisförmig, border-radius: 50%)
|
||
- Ausnahme: Pillentags/Badges (border-radius: 9999px)
|
||
- Klare, geradlinige Kanten
|
||
- Scharfe Konturen bei Karten, Buttons, Eingabefeldern, Modals
|
||
|
||
---
|
||
|
||
## 4. Logo – Wort-Bild-Marke
|
||
|
||
- Das offizielle NAK-Logo wird immer zusammen mit dem Schriftzug verwendet
|
||
- Anordnung: Logo-Symbol links, daneben:
|
||
- Zeile 1: **Neuapostolische Kirche** (Medium, 500)
|
||
- Zeile 2: *Berlin-Reinickendorf* (Light, 300)
|
||
- Mindestgröße: Logo-Symbol 44px (Desktop), 36px (Mobile)
|
||
- Das Logo darf nicht verzerrt, eingefärbt oder manipuliert werden
|
||
|
||
---
|
||
|
||
## 5. Header
|
||
|
||
- Weißer Hintergrund (`#ffffff`)
|
||
- 3px NAK-Blau-Linie am unteren Rand
|
||
- Logo + Wordmark links
|
||
- Profilbild rechts (kreisrund)
|
||
- **Desktop**: Hover → Name + Abmelden ausfahren
|
||
- **Mobile**: Klick → Name + Abmelden ausfahren
|
||
- Sticky mit Hide-on-scroll-down, Show-on-scroll-up
|
||
|
||
---
|
||
|
||
## 6. Footer
|
||
|
||
- Weißer Hintergrund
|
||
- 2px NAK-Blau-Linie oben
|
||
- Zentrierte Links: Impressum | Admin kontaktieren | Datenschutz
|
||
- Kein Release-Marker (entfernt)
|
||
|
||
---
|
||
|
||
## 7. Hauptmenü (Intranet Startseite)
|
||
|
||
- **Desktop**: Volle Bildschirmbreite, Grid-Layout
|
||
- **Mobile**: Zentriert, angepasstes Grid (2 Spalten)
|
||
- Buttons: Eckig, mit Schatten, Hover-Effekt (leichte Vergrößerung)
|
||
- Farbige Buttons gemäß Bereichszugehörigkeit (Blau, Lila, Rot, Schwarz, Grün)
|
||
|
||
---
|
||
|
||
## 8. Authorization-Seiten (Login, Registrierung, Passwort-Reset)
|
||
|
||
- Zentriertes Card-Layout
|
||
- NAK-Logo mit Wordmark oben
|
||
- Eckige Eingabefelder
|
||
- Eckige Buttons (Pillform für primäre Actions beibehalten als Ausnahme)
|
||
- Hintergrund: Leichter Gradient (Gray-50 → NAK-Blau-Light)
|
||
|
||
---
|
||
|
||
## 9. Profil-Seiten
|
||
|
||
- Zentriertes Layout, max. 600px Breite
|
||
- Großes, kreisrundes Profilbild mit Hover-Effekt
|
||
- Eckige Eingabefelder und Karten
|
||
- Klare Gruppenübersicht
|
||
|
||
---
|
||
|
||
## 10. Allgemeine Regeln
|
||
|
||
- **Schatten**: Dezent, mehrstufig (sm, md, lg, xl)
|
||
- **Übergänge**: 150ms (schnell), 250ms (standard), 400ms (langsam)
|
||
- **Abstände**: Konsistentes Spacing-System (0.25rem bis 4rem)
|
||
- **Responsive**: Mobile-first, Breakpoints bei 480px und 768px
|
||
- **Barrierefreiheit**: Focus-Styles beibehalten, ausreichender Kontrast
|