Empty State Branding (Cabin)
Geschäftlicher Kontext
Section titled “Geschäftlicher Kontext”Ein konsistentes Branding durch die Hausschrift „Cabin” in Empty-State-Erklärtexten reduziert die wahrgenommene Komplexität und vermittelt Professionalität beim Onboarding.
Technische Umsetzung
Section titled “Technische Umsetzung”Kernschritte:
- Font-Loading: Cabin via
next/font/googleinapp/fonts.tsladen, als CSS-Variable--font-cabinexportieren - Layout-Integration: Variable in
app/layout.tsxan den<body>anhängen - Tailwind-Mapping: CSS-Variable als
font-cabinintailwind.config.tsregistrieren - Komponenten-Update: Klasse
font-cabinimfrontend/src/components/ui/empty-state.tsxanwenden
Betroffene Dateien
Section titled “Betroffene Dateien”app/fonts.ts— Definition und Export der Cabin-Fontapp/layout.tsx— Globale Bereitstellung der CSS-Variabletailwind.config.ts— Design-System-Erweiterungfrontend/src/components/ui/empty-state.tsx— Anwendung der Font-Klasse