Nous appelons cela la tokenisation du design. Voici ce que c'est, pourquoi nous l'avons fait, et ce que cela signifie pour les équipes qui développent sur Pendo.
Le problème du style « suffisamment bon »
Les systèmes de design accumulent de la dette de la même façon que les bases de code — silencieusement, progressivement, puis tout d'un coup.
Au fil du temps, les décisions de style sont prises de manière isolée. Une valeur hexadécimale codée en dur ici. Un border-radius ponctuel là. Une typographie qui dérive légèrement d'une surface à l'autre. Rien de tout cela ne semble catastrophique sur le moment. Mais cumulé sur un produit comptant des centaines de composants et des milliers de décisions, cela finit par représenter quelque chose de concret : une incohérence coûteuse à corriger, et une base de code où chaque futur changement de design nécessite un véritable travail d'archéologie.
Nous avons constaté cela dans notre propre produit. Lorsque nous voulions mettre à jour une couleur, nous devions modifier des dizaines de fichiers. Lorsqu'un designer transmettait une spécification, les ingénieurs devaient l'interpréter plutôt que de l'implémenter directement. Et à mesure que nous avons accéléré notre développement produit axé sur l'IA, nous savions que l'écart ne ferait que se creuser.
Nous avons donc revu les fondations.
Ce que nous avons construit : une couche sémantique entre le design et le code
Le cœur de ce travail est un système de tokens centralisé. Chaque décision visuelle du produit — couleurs, typographie, border-radius, espacement — est désormais définie sous la forme d'un token nommé sémantiquement, issu directement de Figma et analysé via notre bibliothèque de système de design.
« Nommé sémantiquement » est l'expression clé. Au lieu de #1A1A1A dispersé dans des dizaines de fichiers de composants, nous avons désormais des tokens comme color.action.primary. Au lieu de valeurs en pixels codées en dur, nous avons une échelle d'espacement. Au lieu de cas particuliers ambigus, nous avons un vocabulaire partagé que le design et l'ingénierie comprennent tous les deux.
Cela semble simple. La mise en œuvre ne l'était pas. L'équipe a parcouru l'intégralité de la base de code de Pendo — composant par composant, surface par surface — en remplaçant les valeurs codées en dur par des tokens. Jake Minor et Darshana Saravanan ont mené la charge, et toute l'équipe Flux a accompli le travail fastidieux et ingrat qui permet aux fondations de vraiment tenir.
Courtney Kyle, qui dirige l'équipe de la plateforme front-end, explique comment un nouveau système de jetons sémantiques encode l'intention de conception directement dans l'infrastructure du produit.
Ce qui a changé dans le produit
Pour les utilisateurs, les changements les plus visibles sont :
Une palette neutre affinée. Des tons neutres clairs et chauds partout — des gris plus clairs pour les bordures et les lignes, des arrière-plans de page blancs. L'objectif était d'améliorer le contraste et la lisibilité sur toutes les surfaces.
Couleurs primaires et interactives mises à jour. Les actions principales utilisent désormais un quasi-noir plutôt qu'une teinte de marque dominante. Cela libère la couleur pour un usage significatif — données, états, surfaces IA — plutôt que comme présence constante dans l'interface.
Une nouvelle palette de visualisation des données. Passage de tons sombres et ternes à des couleurs douces et vives. Des roses et des oranges alignés sur la marque, avec des accents de contraste là où les données l'exigent. Beaucoup plus propre, beaucoup plus clair.
Aucun de ces changements n'affecte les fonctionnalités. Vos flux de travail restent identiques. Mais l'expérience d'utilisation de Pendo reflète désormais la sophistication du produit sous-jacent.
Pourquoi cela va au-delà de l'esthétique
Voici ce sur quoi je veux attirer l'attention des équipes produit — car c'est directement pertinent pour la façon dont vous construisez, et pas seulement pour ce dans quoi vous construisez.
Les modifications de design qui prenaient des semaines ne prennent plus que quelques heures. Lorsque l'ensemble de la couche visuelle est tokenisée, la mise à jour d'un système de couleurs se résume à un seul changement à un seul endroit. Nous pouvons livrer des itérations visuelles plus rapidement, répondre aux retours plus rapidement, et maintenir la cohérence visuelle du produit au fur et à mesure que nous ajoutons de nouvelles surfaces (et nous en ajoutons beaucoup).
Le développement assisté par IA s'améliore considérablement. C'est une réalité. Des outils comme Cursor, Lovable et Claude génèrent une meilleure interface utilisateur lorsqu'il existe un système de tokens clair à suivre. Au lieu de produire des styles ponctuels qui semblent légèrement décalés, ils génèrent des composants qui restent conformes à la marque par défaut. Si vous utilisez des outils de codage IA dans votre propre développement produit, un système de design bien structuré est l'un des investissements à plus fort effet de levier que vous puissiez réaliser.
Les transferts entre design et ingénierie fonctionnent vraiment. La dénomination sémantique crée un contexte partagé. Lorsqu'un designer dit color.feedback.error et qu'un ingénieur implémente color.feedback.error, ils travaillent à partir de la même source de vérité. Aucune interprétation requise, aucune surprise lors de la revue.
Le travail discret qui rend tout le reste possible
Le travail sur les systèmes de design est invisible quand il est bien fait. On ne remarque pas un bon système de tokens. On remarque un produit qui a l'air soigné, qui réagit rapidement et qui ne vous surprend pas par des incohérences visuelles.
C'est l'objectif. Et c'est un objectif qui passe à l'échelle — pas seulement pour Pendo, mais pour toute équipe produit qui réfléchit sérieusement à la façon de construire plus vite sans sacrifier la qualité.
Les fondations sont désormais en place. Tout ce que nous construirons par-dessus en sera meilleur.
