Wir nennen es Design-Tokenisierung. Hier erfahren Sie, was es ist, warum wir es gemacht haben und was es für Teams bedeutet, die auf Pendo aufbauen.
Das Problem mit „gut genug"-Styling
Design-Systeme häufen technische Schulden genauso an wie Codebasen – still, schrittweise und dann auf einmal.
Im Laufe der Zeit werden Styling-Entscheidungen isoliert getroffen. Ein fest codierter Hex-Wert hier. Ein einmaliger Border-Radius dort. Typografie, die zwischen Oberflächen leicht abweicht. Nichts davon fühlt sich im Moment katastrophal an. Aber kumuliert über ein Produkt mit Hunderten von Komponenten und Tausenden von Entscheidungen ergibt sich etwas Reales: Inkonsistenz, die teuer zu beheben ist, und eine Codebasis, bei der jede zukünftige Design-Änderung ein Archäologieprojekt erfordert.
Wir haben das in unserem eigenen Produkt gesehen. Wenn wir eine Farbe aktualisieren wollten, mussten wir Dutzende von Dateien anfassen. Wenn ein Designer eine Spezifikation übergab, mussten Entwickler sie interpretieren, anstatt sie direkt umzusetzen. Und da wir unsere KI-orientierte Produktentwicklung beschleunigt haben, wussten wir, dass die Lücke sich nur vergrößern würde.
Also haben wir das Fundament repariert.
Was wir gebaut haben: eine semantische Schicht zwischen Design und Code
Der Kern dieser Arbeit ist ein zentralisiertes Token-System. Jede visuelle Entscheidung im Produkt – Farben, Typografie, Border-Radius, Abstände – ist jetzt als semantisch benanntes Token definiert, das direkt aus Figma stammt und durch unsere Design-System-Bibliothek verarbeitet wird.
„Semantisch benannt" ist der Schlüsselbegriff. Anstatt #1A1A1A über Dutzende von Komponentendateien verteilt zu haben, haben wir jetzt Token wie color.action.primary. Anstatt fest codierter Pixelwerte haben wir eine Abstands-Skala. Anstatt mehrdeutiger Einzelfälle haben wir ein gemeinsames Vokabular, das Design und Entwicklung beide verstehen.
Es klingt einfach. Die Implementierung war es nicht. Das Team ging die gesamte Pendo-Codebasis durch – Komponente für Komponente, Oberfläche für Oberfläche – und ersetzte fest codierte Werte durch Token. Jake Minor und Darshana Saravanan führten die Arbeit an, und das gesamte Flux-Team leistete die mühsame, unspektakuläre Arbeit, die Fundamente tatsächlich tragfähig macht.
Courtney Kyle, die das Front-End-Plattform-Team leitet, erklärt, wie ein neues semantisches Token-System Design-Absichten direkt in die Produktinfrastruktur einbettet.
Was sich im Produkt verändert hat
Für Nutzer sind die sichtbarsten Änderungen:
Eine verfeinerte neutrale Farbpalette. Durchgehend helle, warme Neutraltöne – hellere Grautöne für Rahmen und Linien, weiße Seitenhintergründe. Das Ziel war ein besserer Kontrast und eine bessere Lesbarkeit auf allen Oberflächen.
Aktualisierte Primär- und Interaktionsfarben. Primäre Aktionen verwenden jetzt Beinahe-Schwarz anstelle eines dominanten Markenfarbtons. Dadurch bleibt Farbe für bedeutungsvolle Verwendung frei – Daten, Zustände, KI-Oberflächen – anstatt als ständige Präsenz in der gesamten Benutzeroberfläche.
Eine neue Datenvisualisierungspalette. Der Wechsel von dunklen, trüben Tönen zu weichen, hellen Farben. Markenabgestimmte Pinktöne und Orangetöne, mit Kontrastakzenten, wo die Daten es erfordern. Viel klarer, viel deutlicher.
Keine dieser Änderungen beeinträchtigt die Funktionalität. Ihre Arbeitsabläufe bleiben gleich. Aber die Erfahrung bei der Nutzung von Pendo spiegelt nun die Raffinesse des darunter liegenden Produkts wider.
Warum das über Ästhetik hinaus wichtig ist
Das ist der Teil, auf den ich möchte, dass Produktteams achten – denn er ist direkt relevant dafür, wie Sie bauen, nicht nur womit Sie bauen.
Design-Änderungen, die früher Wochen dauerten, dauern jetzt Stunden. Wenn die gesamte visuelle Ebene tokenisiert ist, ist die Aktualisierung eines Farbsystems eine einzige Änderung an einer Stelle. Wir können visuelle Iterationen schneller ausliefern, schneller auf Feedback reagieren und das Produkt visuell konsistent halten, während wir neue Oberflächen hinzufügen (und wir fügen viele neue Oberflächen hinzu).
KI-gestützte Entwicklung wird deutlich besser. Das ist real. Tools wie Cursor, Lovable und Claude erzeugen bessere UIs, wenn ein klares Token-System vorhanden ist. Anstatt einmalige Stile zu produzieren, die leicht fehl am Platz wirken, generieren sie Komponenten, die standardmäßig markenkonform bleiben. Wenn Sie KI-Coding-Tools in Ihrer eigenen Produktentwicklung einsetzen, ist ein gut strukturiertes Design-System eine der wirkungsvollsten Investitionen, die Sie tätigen können.
Übergaben zwischen Design und Engineering funktionieren tatsächlich. Semantische Benennung schafft gemeinsamen Kontext. Wenn ein Designer color.feedback.error sagt und ein Ingenieur color.feedback.error implementiert, arbeiten beide aus derselben Quelle der Wahrheit. Keine Interpretation erforderlich, keine Überraschungen im Review.
Die stille Arbeit, die alles andere ermöglicht
Design-System-Arbeit ist unsichtbar, wenn sie richtig gemacht wird. Man bemerkt kein gutes Token-System. Man bemerkt ein Produkt, das scharf aussieht, schnell reagiert und einen nicht mit visuellen Inkonsistenzen überrascht.
Das ist das Ziel. Und es ist ein Ziel, das skaliert – nicht nur für Pendo, sondern für jedes Produktteam, das ernsthaft darüber nachdenkt, wie man schneller baut, ohne Qualität zu opfern.
Das Fundament ist jetzt vorhanden. Alles, was wir darauf aufbauen, wird davon profitieren.
