Geschrieben von
Wir haben ein Design System von Grund auf aufgebaut — 50+ Design Tokens, 32 wiederverwendbare Komponenten und 7 Abhaengigkeiten eliminiert. Jedes UI-Element spricht jetzt dieselbe visuelle Sprache.
Image: @medbadrc
Geschrieben von
Ein Produkt schnell zu bauen ist einfach. Ein Produkt zu bauen, das wartbar bleibt, ist schwer. Mit v0.6.0 haben wir einen Schritt zurueck von der Feature-Arbeit gemacht, um in das Fundament zu investieren: ein dediziertes Design System, das jedes visuelle Element in ValYouRise steuert.
Als ValYouRise vom MVP zu einer Multi-Org OKR-Plattform mit KI-Features, Demo-Modus und oeffentlicher Marketing-Seite wuchs, sammelte unsere UI technische Schulden an:
Jedes neue Feature bedeutete Copy-Paste von Styling-Patterns und hoffen, dass der Dark Mode noch funktioniert. Es war Zeit, das systematisch zu beheben.
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.
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.
Wir haben 7 npm-Pakete entfernt, einschliesslich der gesamten HeroUI-Komponentenbibliothek und react-icons. Der Cookie-Consent-Dialog wurde mit nativem <dialog> und unserer eigenen Switch-Komponente neu geschrieben.
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, ueberall.
| Metrik | Vorher | Nachher |
|---|---|---|
| npm-Pakete | 41 | 34 (-7) |
| HeroUI-Imports | 14 Dateien | 0 |
| react-icons-Imports | 18 Dateien | 0 |
| Design Tokens | ~12 | 50+ |
| DS-Komponenten | 0 | 32 |
Das Design-System-Fundament steht. Naechste Schritte umfassen die Zerlegung des 2.600-Zeilen Board-Clients in DS-Board-Komponenten und die Erweiterung des Token-Systems fuer granulareres Theming.