design.md – Designsystem für das Buchungssystem

Übersicht

Dieses Dokument beschreibt das aktuelle Designsystem von CalBook. Es dient als Referenz für Konsistenz bei Weiterentwicklungen.

Zwei Bereiche:

Kundenansicht (/buchen) – Öffentliche Buchungsoberfläche
- Ablauf: Person wählen → Datum → Uhrzeit → Kontaktdaten → Bestätigung
- Auto-Scroll zum nächsten Schritt
- Framer-Motion-Animationen im Success-Screen
Admin-Backend (/admin/*) – Interne Verwaltungsoberfläche
- 9 Seiten: Dashboard, Termine, Kalender, E-Mails, Branding, Rechtliches, Instant Meeting, Backup, Einstellungen
- Seiten-Layout einheitlich: Sidebar (260px) + Content (max-w-6xl, zentriert)
- Framer-Motion AnimatedPage-Wrapper für konsistente Page-Transitions

Kundenansicht: slate-50 Hintergrund, indigo-600 als Akzentfarbe
Admin: slate-50 Hintergrund, slate-900 für Header/Aktionen, indigo-600 für aktive Elemente
Statusfarben: emerald (bestätigt/aktiv), amber (ausstehend/no-show), red (Fehler/storniert)
Text: slate-900 (primär), slate-500 (sekundär), slate-400 (deaktiviert)

Schrift: System-UI-Stack (font-sans) via Tailwind
Hierarchie: text-3xl font-black (Seitentitel) → text-lg font-bold (Sektionsheader) → text-sm font-medium (Fließtext) → text-xs (Metadaten)
Labels: text-xs font-bold uppercase tracking-wider text-slate-500

rounded-2xl border border-slate-200 bg-white shadow-sm

h-11 rounded-xl border border-slate-200 bg-slate-50 px-4
focus:border-indigo-600 focus:ring-1 focus:ring-indigo-600

rounded-t-2xl border border-b-0 bg-slate-50/80
Aktiv: border-b-2 border-slate-900 bg-white text-slate-900
Inaktiv: text-slate-500 hover:bg-white/50

Desktop: Fixierte Sidebar links (260px), Content rechts (lg:pl-60)
Mobile: Topbar mit Burger-Menü, Slide-Over-Navigation
Animation: AnimatedPage-Wrapper (framer-motion, key={pathname}) für Page-Transitions
Loading: loading.tsx mit Skeleton-Karten, erscheint sofort bei Navigation

Sidebar: 8 Items mit Icons (Dashboard, Termine, Kalender, E-Mails, Branding, Rechtliches, Instant Meeting, Backup, Einstellungen)
Bottom: Link zur öffentlichen Buchung + Logout
Aktiver Zustand: bg-indigo-50 text-indigo-600

Modale/Dialoge: ConfirmDialog-Komponente mit Backdrop, Danger/Default-Variante
Inline-Edit: Kalender-Personen bearbeiten direkt in der Zeile statt Modal
Expand/Collapse: Chevron-Icons für Detail-Panels (Dashboard-Buchungen, Kalender-Ressourcen)
Toast: sonner-Bibliothek, Position top-right, richColors

Schritte: 1. Person → 2. Datum → 3. Uhrzeit → 4. Kontaktdaten
Auto-Scroll: Nach jeder Auswahl scrollt die Seite zum nächsten Schritt
Kalender: Monatsraster mit Verfügbarkeits-Indikatoren
Slots: Flexible Buttons, 15-Minuten-Raster
Formular: Name, E-Mail, Telefon (optional), Thema (optional)
Success: Framer-Motion animierte Bestätigungskarte, ICS-Download, "Weiteren Termin"-Button

Event-Typen: 10 Kategorien (Bestätigung, Benachrichtigung, Stornierung, Erinnerungen, Instant Meeting, SMTP-Test)
Sidebar: Gruppierte Event-Typ-Auswahl (Buchung/Stornierung/Erinnerungen/Spezial)
Live-Vorschau: Immer sichtbar, aktualisiert bei Template-Wechsel
Design-Styles: 9 vordefinierte Farbschemas (Minimal, Corporate, Startup, Serif, Mono, Glass, Ink, Warm, Soft)
Editor: Inline unter der Template-Liste, Name/Betreff/Inhalt-Felder

Export: JSON-Download mit allen Daten (inkl. CalDAV-Key für Re-Encryption)
Import: Upload mit Vorschau, Schritt-für-Schritt-Roadmap, Fehler pro Kategorie sichtbar
URL-Filter: PUBLIC_URL, NEXTAUTH_URL, APP_BASE_URL werden nicht exportiert/importiert
Standalone-Script: scripts/export-backup.sh für ältere Versionen ohne API