Lo llamamos tokenización de diseño. Aquí te explicamos qué es, por qué lo hicimos y qué significa para los equipos que desarrollan sobre Pendo.
El problema con el estilo "suficientemente bueno"
Los sistemas de diseño acumulan deuda de la misma manera que los repositorios de código: de forma silenciosa, gradual y, de repente, toda a la vez.
Con el tiempo, las decisiones de estilo se toman de forma aislada. Un valor hexadecimal codificado aquí. Un radio de borde puntual allá. Una tipografía que se desvía ligeramente entre superficies. Nada de esto parece catastrófico en el momento. Pero acumulado a lo largo de un producto con cientos de componentes y miles de decisiones, se convierte en algo real: una inconsistencia costosa de corregir y un repositorio de código donde cada cambio de diseño futuro requiere un proyecto de arqueología.
Lo vimos en nuestro propio producto. Cuando queríamos actualizar un color, teníamos que modificar docenas de archivos. Cuando un diseñador entregaba una especificación, los ingenieros tenían que interpretarla en lugar de implementarla directamente. Y a medida que hemos acelerado nuestro desarrollo de productos orientado a la IA, sabíamos que la brecha solo se ampliaría.
Así que corregimos los cimientos.
Lo que construimos: una capa semántica entre el diseño y el código
El núcleo de este trabajo es un sistema de tokens centralizado. Cada decisión visual del producto —colores, tipografía, radio de borde, espaciado— está ahora definida como un token con nombre semántico, obtenido directamente de Figma y procesado a través de nuestra biblioteca de sistema de diseño.
"Con nombre semántico" es la frase clave. En lugar de #1A1A1A disperso en docenas de archivos de componentes, ahora tenemos tokens como color.action.primary. En lugar de valores en píxeles codificados, tenemos una escala de espaciado. En lugar de casos únicos ambiguos, tenemos un vocabulario compartido que tanto el diseño como la ingeniería comprenden.
Suena simple. La implementación no lo fue. El equipo revisó todo el repositorio de código de Pendo —componente por componente, superficie por superficie— reemplazando los valores codificados por tokens. Jake Minor y Darshana Saravanan lideraron esta iniciativa, y todo el equipo de Flux realizó el trabajo tedioso y poco glamoroso que hace que los cimientos realmente se sostengan.
Courtney Kyle, quien lidera el equipo de plataforma front-end, explica cómo un nuevo sistema de tokens semánticos codifica la intención de diseño directamente en la infraestructura del producto.
Qué cambió en el producto
Para los usuarios, los cambios más visibles son:
Una paleta neutral refinada. Neutros claros y cálidos en toda la interfaz: grises más claros para bordes y líneas, fondos de página blancos. El objetivo fue mejorar el contraste y la legibilidad en todas las superficies.
Colores primarios e interactivos actualizados. Las acciones primarias ahora utilizan un color casi negro en lugar de un tono de marca dominante. Esto libera el color para usos significativos —datos, estados, superficies de IA— en lugar de ser una presencia constante en toda la interfaz.
Una nueva paleta de visualización de datos. Se pasa de tonos oscuros y apagados a colores suaves y brillantes. Rosas y naranjas alineados con la marca, con acentos de contraste donde los datos lo exigen. Mucho más limpio, mucho más claro.
Ninguno de estos cambios afecta la funcionalidad. Tus flujos de trabajo son los mismos. Pero la experiencia de usar Pendo ahora refleja la sofisticación del producto que hay detrás.
Por qué esto importa más allá de la estética
Esta es la parte a la que quiero que los equipos de producto presten atención, porque es directamente relevante para cómo construyen, no solo para en qué están construyendo.
Los cambios de diseño que antes tomaban semanas ahora toman horas. Cuando toda la capa visual está tokenizada, actualizar un sistema de colores es un único cambio en un solo lugar. Podemos lanzar iteraciones visuales más rápido, responder a los comentarios más rápido y mantener la coherencia visual del producto a medida que añadimos nuevas superficies (y estamos añadiendo muchas superficies nuevas).
El desarrollo asistido por IA mejora drásticamente. Esto es real. Herramientas como Cursor, Lovable y Claude generan una mejor interfaz de usuario cuando hay un sistema de tokens claro que seguir. En lugar de producir estilos únicos que se ven ligeramente fuera de lugar, generan componentes que se mantienen fieles a la marca por defecto. Si utilizas herramientas de codificación con IA en el desarrollo de tu propio producto, un sistema de diseño bien estructurado es una de las inversiones de mayor impacto que puedes hacer.
Las entregas entre diseño e ingeniería realmente funcionan. La nomenclatura semántica crea un contexto compartido. Cuando un diseñador dice color.feedback.error y un ingeniero implementa color.feedback.error, ambos trabajan desde la misma fuente de verdad. No se requiere interpretación, no hay sorpresas en la revisión.
El trabajo silencioso que hace posible todo lo demás
El trabajo en sistemas de diseño es invisible cuando se hace bien. No se nota un buen sistema de tokens. Lo que se nota es un producto que se ve nítido, responde rápidamente y no te sorprende con inconsistencias visuales.
Ese es el objetivo. Y es un objetivo que escala, no solo para Pendo, sino para cualquier equipo de producto que piense seriamente en cómo construir más rápido sin sacrificar la calidad.
La base ya está ahí. Todo lo que construyamos sobre ella será mejor gracias a ello.
