Das Problem: Zwei Oberflächen, zwei Wahrheiten

Ein mittelständischer Onlineshop in Nordhessen pflegte Produktkarten doppelt: im Shop und im internen Kundenportal. Nach sechs Monaten existierten 14 Button-Varianten, drei unterschiedliche Abstände und zwei Farblogiken für denselben Zustand. Jede Änderung am Preisbadge musste zweimal umgesetzt und zweimal getestet werden. Das kostete nicht nur Zeit, sondern erzeugte sichtbare Unterschiede zwischen den Oberflächen.

Die Ursache: Styles wachsen schneller als Absprachen

Die Ursache lag weniger im Können der Beteiligten als im fehlenden gemeinsamen Vertrag. Jede Anforderung wurde direkt in CSS und Markup übersetzt, ohne verbindliche Namen für Zustände, Größen und Kombinationen. So entstanden Klassen wie price-red, price-highlight und price-sale, die dieselbe Aufgabe unterschiedlich lösten. Genau an dieser Stelle setzt twindor an: nicht mit einem weiteren Styleguide-Dokument, sondern mit einem prüfbaren Komponentenvertrag, der im Code und im Review-Prozess sichtbar wird.

Die Lösung: Ein verbindlicher Komponentenvertrag

Im konkreten Projekt wurde zunächst nur eine Produktkarte als Referenz definiert. Danach legte das Team für jede Komponente drei Dinge fest: erlaubte Varianten, zulässige Zustände und klare Grenzen für individuelle Anpassungen. Für den Button bedeutete das:

  • drei Größen statt freier Pixelwerte,
  • fünf Zustände inklusive Fokus und deaktiviert,
  • keine lokalen Farbüberschreibungen außerhalb der Komponente.

Die Umsetzung erfolgte schrittweise: erst die Referenzkomponente, dann die Migration der häufigsten Duplikate, zuletzt die Sperre für neue Einzelvarianten im Code-Review. Dieser Weg ist unspektakulär, aber wirksam, weil er Entscheidungen an einer Stelle bündelt und die Oberflächen nicht länger getrennt voneinander optimiert.

Beispiel: Preisbadge mit einem Zustand

Das Preisbadge zeigt den Unterschied. Vorher hatte das Shop-Team einen roten Rabatt-Badge mit anderer Schriftgröße als das Portal. Nach dem Komponentenvertrag nutzen beide Oberflächen dieselbe Badge-Komponente mit den Varianten neutral, sale und neu. Die Farbe bleibt kontextabhängig, die Struktur nicht. Dadurch sinkt die Zahl der Sonderfälle, und neue Teammitglieder finden die richtige Lösung ohne Rückfrage.

Das Ergebnis: Weniger Varianten, schnellere Reviews

Nach acht Wochen war die Zahl der Button-Varianten von 14 auf 4 gesunken. Reviews dauerten im Durchschnitt kürzer, weil Diskussionen über Farben und Abstände nicht mehr pro Seite neu geführt wurden. Wichtiger als die Zahlen ist die Verlässlichkeit: Shop und Portal sehen unterschiedlich aus, wo sie sollen, und gleich aus, wo Gleichheit erwartet wird.

Grenzen der Betrachtung

Ein Komponentenvertrag löst keine unklaren Produktentscheidungen. Wenn Marketing eine neue Sonderaktion ohne passende Variante verlangt, muss das Team den Vertrag erweitern oder bewusst eine Ausnahme dokumentieren. Der Gewinn entsteht nicht durch starre Regeln, sondern durch nachvollziehbare Entscheidungen, die beide Oberflächen tragen.