V6 Bright Organic Design System¶

Warm, organisch, professionell — das Gegenteil von kalter Enterprise-Software.

Status: done | Phase: vor-go-live | Aktualisiert: 2026-03-23

Aktueller Stand¶

Das V6 Bright Organic Design System definiert die visuelle Identitaet von Xolib. Es unterscheidet sich bewusst von der typischen Hausverwaltungssoftware-Aesthetik (grau, tabellenbasiert, funktional) durch warme Farben, organische Rundungen und klare Typografie.

Kanonische Quelle¶

Der Live-Styleguide unter xolib.com/styleguide (Auth erforderlich) zeigt alle Komponenten, Farben und Typografie-Varianten. Er gilt als Single Source of Truth fuer Design-Entscheidungen.

Design Tokens und CSS¶

Die Architektur ist zweigeteilt: src/styles/design-tokens.css enthaelt alle Variablen (Farben, Spacing, Shadows, Border-Radii), waehrend src/styles/v6-components.css ca. 30 fertige CSS-Klassen bereitstellt. Entwickler verwenden Tailwind fuer Layout (flex, grid, gap, padding) und V6-Klassen fuer visuelles Styling.

Farbschema¶

Token	Hex	Verwendung
--bg-page	#F2F0ED	Seitenhintergrund (warmes Off-White)
--bg-card	#FFFFFF	Karten und Panels
--accent	#E8733A	Primaer-Akzent (Buttons, Links, Highlights)
--teal	#2AA8A0	Sekundaer-Akzent (Erfolg, positive Werte)

Typografie¶

DM Sans wird als Body-Font eingesetzt, Plus Jakarta Sans fuer Headings. Beide sind Google Fonts und werden lokal geladen. Die Kombination erzeugt einen modernen, lesbaren Eindruck ohne die Sterililitaet von Inter oder Roboto.

Icons¶

Aktuell werden Lucide React Icons verwendet. Phosphor Duotone Icons wurden evaluiert (ADR-015) und sind als moeglicher Nachfolger vorgemerkt, da sie mehr visuelle Waerme bieten.

V6-Komponenten¶

17 Komponentendateien existieren unter src/components/v6/, davon 8 aktiv eingebunden und 9 Score-Cards vorbereitet. Die wichtigsten CSS-Klassen: v6-kpi (KPI-Cards mit Mini-Chart), v6-btn / v6-btn-primary / v6-btn-secondary (Buttons), v6-search (Suchfelder), v6-banner (Insight-Banner), v6-badge (Status-Badges), v6-modal-overlay / v6-modal (Dialoge), v6-tab (Tab-Navigation), v6-card (Content-Cards), v6-block (Layout-Bloecke), v6-empty (Leerzustaende).

Restyling-Status¶

6 von 66 Admin-Seiten sind bereits im V6-Design umgesetzt. Ein 8-Phasen-Stufenplan regelt die Migration der restlichen 60 Seiten, priorisiert nach Nutzungshaeufigkeit.

Logo-Assets¶

Unter docs/design/ liegen 12 HTML-Dateien mit Logo-Varianten und Wortmarken fuer verschiedene Kontexte (hell/dunkel, mit/ohne Claim, verschiedene Groessen).

Naechste Schritte¶

Objekt-Detail-Seite ins V6-Design migrieren (haeufigste Einzelseite)
Restliche 60 Admin-Seiten schrittweise migrieren (8-Phasen-Plan)
Phosphor Duotone Icons evaluieren und ggf. migrieren (ADR-015)

Historie¶

Datum	Aenderung
2026-03-23	Erstellt im Knowledge System

Quelldateien¶

Abhaengigkeiten¶

Keine