---
title: MZ4 — Designsystem & UI-Komponenten (aus Live-UI + CSS)
date: 2026-06-30
status: aktiv
type: project
tags: [reverse-engineering, vsm, mz4, designsystem, ui]
---

# MZ4 — Designsystem & UI (aus Dashboard-Screenshot + CSS)

## Gesamteindruck
Helles, flaches Corporate-UI auf **Bootstrap**-Basis, BMW-gebrandet. Klar, nüchtern, grau-dominiert,
viel Weißraum. Kein Dark Mode erkennbar (zu verifizieren).

## Kopfzeile (Header)
- Weiße Leiste, links **BMW-Roundel + MINI-Wortmarke** (Logos nebeneinander).
- Mitte: **Such-Eingabefeld** mit dunklem Lupen-Button (globale Suche „Search").
- Rechts: **Zahnrad** (Einstellungen), **User-Icon + Name** („Kais Aseckzai"), **Power-Icon** (Logout).

## Hauptnavigation
- Horizontale **dunkle (anthrazit) Leiste**, weiße Schrift, zentrierte Items:
  Einsatzplanung · Projekte · Reporting · Lieferanten · Einstellungen.
- Aktiver Punkt vermutlich leicht hervorgehoben (verifizieren).

## Typografie
- **BMWGroup**-Font (Fallback Helvetica Neue/Arial). Seitentitel groß & in *leichter* Schnittstärke,
  hellgrau (z. B. „Einsatzplanung"). Fließtext dunkelgrau.

## Farbpalette (UI)
- Flächen/BG: Weiß `#fff`, helle Graustufen `#eeefea` / `#f9f9f9` / `#e2e8ef`.
- Nav-Bar: Anthrazit (~`#3a3a3a`).
- Text/Linien: `#333`/`#444`/`#666`, Rahmen `#d9d9d9`/`#d8d8d8`.
- Auswahl/Termin-Zellen: helles Blau (~`#a9c3e0`); aktuelle Zeile: hellgrau-Highlight.
- Status-/Akzentgrün im CSS (`#dea`, `#afa`).
- **Terminart-Legende (5 Farben):** 1. Kundenauftrag Durchführung = orange/pfirsich; 2. Kundenauftrag Vor-/Nachbereitung = hellblau; 3. Methoden/Prozesse/Standards = rosa; 4. Weiterbildung = türkis; 5. Persönliche Abwesenheit = grün.
- **Ort-Legende (3 Farben):** Homeoffice = blau; Vor Ort = grün; Remote = dunkelgrün.

## Form / Komponenten
- Border-Radius gemischt (0/3/5/20px). Buttons & Controls Bootstrap-typisch, flach, ~3px.
- **Toolbar-Pattern:** gruppierte Control-Bar mit Dropdowns (Caret), Icon-Buttons (Person/Add-Person),
  Such-Inputs, Monat/Jahr-Stepper mit « / ».
- **Dropdowns** mit Platzhaltern in Klammern: „(Alle Mitarbeiter)", „(Alle Terminarten)".
- **Kalender-Grid:** Zeilen-Header (Berater-Namen), Spalten-Header (KW + Wochentag + Datum),
  Zell-Färbung nach Terminart/Status; Legende unten in gerahmtem Block.
- **Icons:** Font Awesome (Zahnrad, User, Power, Lupe, Personen, Listen/Grid-Toggle).
- **Badges/Chips:** abgerundete Farbfelder in der Legende.

## Offen / zu verifizieren
- Hover/Active/Focus-States, Tooltips, Toasts/Benachrichtigungen.
- Modal-/Dialog-Design (Termin anlegen/bearbeiten) — kommt aus Modul-Notes.
- Responsive-Verhalten (Breakpoints), Ladeanimationen.
- Exakte Hex-Werte der Legende (aus Screenshot geschätzt) — bei Bedarf pixelgenau nachmessen.