Rediseñar un producto tiene dos versiones. La de la cara: pantallas nuevas, otra tipografía, otra paleta. Y la de abajo: cómo haces que ese cambio no te cueste tocar cada botón de cada pantalla, uno por uno, para siempre.
Esta semana le dimos a LexPro —nuestro producto para abogados— un repaso completo de diseño, en cuatro fases: tokens, primitivos, esqueleto y pantallas. Salió el azul marino y el dorado; entró una paleta cálida —tinta sobre crema, ámbar solo para lo que pide un clic—. Fraunces para los títulos, Inter para leer. 38 componentes. 196 archivos cambiados en un solo PR.
Pero 196 archivos no se editan a mano sin morir en el intento. El truco es que el color no vive en los archivos: vive en una lista de tokens. --color-ink, --color-cream, --color-amber. Las pantallas no dicen #1a1a1a; dicen 'tinta’. El día que tinta cambie de valor, cambian las 196 a la vez —y el modo oscuro se voltea con la misma lista, no con una segunda copia de todo.
Un design system no es cómo se ve el producto. Es cuántos archivos tienes que tocar para cambiar cómo se ve. La respuesta correcta es: uno.
Lo contamos porque 'le hicimos un rediseño’ suena a estética y es, en realidad, infraestructura. La parte que se ve —que ahora LexPro se ve calmado y serio, como debe verse algo donde se manejan casos legales— es la consecuencia. La parte que importa es que la próxima vez el cambio cuesta un token, no un mes. El recibo está en el diff: 2.897 líneas que entran, 2.191 que salen, y un solo lugar —la lista de tokens— donde de verdad se decidió todo.