Produkt-Update: ValYouRise Design System: Eine Quelle der Wahrheit für jedes Pixel

Wir haben ein umfassendes Design System von Grund auf aufgebaut — 50+ Design Tokens, 32 wiederverwendbare Komponenten und 7 Abhängigkeiten eliminiert. Jeder Button, jede Karte und jeder Status-Indikator spricht jetzt dieselbe visuelle Sprache.

Ein Produkt schnell zu bauen ist einfach. Ein Produkt zu bauen, das wartbar bleibt, ist schwer. Mit v0.6.0 haben wir einen Schritt zurück von der Feature-Arbeit gemacht, um in das Fundament zu investieren: ein dediziertes Design System, das jedes visuelle Element in ValYouRise steuert.

Warum ein Design System?

Als ValYouRise vom MVP zu einer Multi-Org OKR-Plattform mit KI-Features, Demo-Modus und öffentlicher Marketing-Seite wuchs, sammelte unsere UI technische Schulden an:

• 4 verschiedene Button-Styles verteilt über CSS-Klassen
• 3 separate Footer-Implementierungen die dasselbe tun
• 15+ Karten-Patterns wiederholt als Inline-Tailwind-Strings
• HeroUI und react-icons fügten ~180KB zum Bundle hinzu für Komponenten die wir kaum nutzten

Jedes neue Feature bedeutete Copy-Paste von Styling-Patterns und hoffen, dass der Dark Mode noch funktioniert. Es war Zeit, das systematisch zu beheben.

Was sich geändert hat

Token-basiertes Theming

Jede Farbe, jeder Abstandswert, Radius, Schatten und Animations-Timing ist jetzt eine CSS Custom Property. Helle und dunkle Themes wechseln sofort — keine bedingten Klassen, keine Runtime-Berechnungen.

32 wiederverwendbare Komponenten

Von atomaren Icon (50+ Lucide-Style SVGs) und Button (7 Varianten) bis zu zusammengesetzten Card, Toast, Modal und InlineAlert — jedes UI-Pattern hat eine einzige kanonische Implementierung.

Abhängigkeiten bereinigt

Wir haben 7 npm-Pakete entfernt, einschließlich der gesamten HeroUI-Komponentenbibliothek und react-icons. Der Cookie-Consent-Dialog wurde mit nativem <dialog> und unserer eigenen Switch-Komponente neu geschrieben.

Private-Space-Migration

Dashboard, Benutzereinstellungen, Org-Einstellungen, Workspace-Ansichten und Token-Verwaltung nutzen jetzt DS-Komponenten statt Inline-Tailwind-Patterns. Statusmeldungen verwenden <InlineAlert>, Karten verwenden <Card>, Buttons verwenden <Button> — konsistent, überall.

In Zahlen

Wie geht es weiter

Das Design-System-Fundament steht. Nächste Schritte umfassen die Zerlegung des 2.600-Zeilen Board-Clients in DS-Board-Komponenten und die Erweiterung des Token-Systems für granulareres Theming.