4.2 KiB
4.2 KiB
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