Sistema de diseño

Qué hay dentro y qué está solo en el documento

La mayoría de las descripciones de un sistema de diseño son una lista de artefactos: tokens, componentes, patrones, documentación. La lista es exacta y ligeramente engañosa, porque describe lo que produces y no lo que hace que funcione. Cada capa existe en dos versiones: la que está escrita y la que algo te va a impedir romper de verdad.

• Tokens — valores con nombre para color, tipografía, espaciado y radio. Sin aplicación efectiva, se convierten en una paleta de la que la gente copia códigos hexadecimales.
• Componentes — la única implementación de un elemento que se repite. Sin aplicación efectiva, una carpeta de ejemplos junto a una docena de variantes hechas a mano.
• Patrones — cómo se combinan los componentes para un trabajo recurrente, como una cabecera de página o un estado vacío. Sin aplicación efectiva, cada página resuelve el mismo problema de forma distinta.
• Documentación — el razonamiento, y los casos en los que una regla deliberadamente no aplica. Sin aplicación efectiva, un sitio que nadie abre después de la primera semana.

La distinción muerde más fuerte en equipos pequeños, donde el sistema suele ser la memoria de una persona. La memoria no falla haciendo ruido. Falla como deriva — el mismo encabezado en cinco tamaños, el mismo botón en tres grosores — y cada caso individual parece defendible por sí solo.

El fallo que nadie detecta: una regla inerte

Aquí va uno de nuestro propio producto, y es la razón de que exista esta entrada. Nuestra tipografía de display se distribuye con un único grosor. Una regla global ponía todos los encabezados en grosor 500, y no hacía absolutamente nada, porque el emparejamiento de grosores de CSS resuelve una petición de 500 devolviéndola al único grosor que la fuente tiene de verdad. La declaración estaba presente, era plausible y era inerte. Lo que la hizo cara fue el apaño: unos 180 de los 223 sitios que usaban esa tipografía habían acabado escribiendo a mano un grosor de 400 para arreglar una declaración que nunca había surtido efecto, y esa misma superficie había derivado hasta 44 tamaños de fuente distintos.

Nada de eso es visible para un verificador de tipos, porque cada una de esas variantes es un objeto de estilo válido. Tampoco se ve apenas en revisión: cada diff es una línea, y cada línea es defendible. La reparación fue estructural y no cosmética — un componente pasó a ser el único sitio donde se puede escribir el tamaño del encabezado de una página, y ahora una prueba hace fallar la compilación cuando una página se fabrica el suyo a mano. Esa prueba es el sistema de diseño. Los tokens solo fueron siempre una descripción de él.

Qué necesita de verdad un equipo pequeño

• Parte de la repetición, no de una plantilla. Las primitivas que merece la pena nombrar son las que ya has vuelto a escribir tres veces. El resto es inventario que mantendrás y no usarás nunca.
• Pon la regla donde se aplica, no donde se lee. Un componente compartido, una regla de lint o una prueba que falla valen más que una página de un wiki, porque solo una de esas cosas sobrevive a un viernes con prisa.
• Juzga los cambios en composición, nunca aislados. Un grosor o un tamaño parece correcto a solas y está mal junto a una insignia, una cabecera de tabla y un tramo de texto en negrita. Renderiza la pantalla real con todos ellos a la vez.
• Vigila las declaraciones que no pueden hacer nada. Un token que apunta a algo que tu fuente, tu framework o tu política de seguridad de contenido no pueden honrar es peor que uno ausente, porque se lee como resuelto.
• Deja que el sistema se detenga en el borde de tu producto. Las páginas de marketing y la interfaz del producto a menudo quieren tipografías distintas; acotar una excepción a una de las dos es una decisión, y voltear el valor global por accidente no lo es.

Si es una IA la que escribe tus interfaces, esto importa más y no menos: un modelo tira hacia la mediana salvo que algo lo acote, que es justo el hueco que intentan cerrar los paquetes de reglas de diseño como UI UX Pro Max. La coherencia es además la forma más barata de credibilidad en las páginas donde alguien está decidiendo — la misma razón por la que Core Web Vitals y el trabajo de conversión suelen llegar el mismo mes.