Sistema de diseño editorial

Un sistema no es una paleta de colores. Es el conjunto de decisiones que no hay que volver a tomar.

El diagnóstico que lo originó no fue de gusto sino de ausencia: once duraciones distintas, tres curvas de easing, seis recetas de botón y cuatro de campo, cada una escrita en su punto de uso. Nada de eso estaba mal por separado. Junto, hacía que un chip, una fila y un enlace del nav se sintieran como tres productos distintos bajo el puntero.

Las curvas son dos porque hay dos clases de cambio. standard para lo que solo cambia de color, que no tiene inercia y no debería fingirla. emphasis para lo que se mueve, con una salida larga que hace que las cosas se asienten en vez de frenar.

Las velocidades son cuatro: 120ms, 200ms, 320ms y 560ms. El número importa menos que el hecho de que sean cuatro y estén nombradas. Once duraciones no son once decisiones, son ninguna.

Hay un valor escrito como número, 6px, y todo lo demás se deriva de él. sm, md, lg y xl apuntan al mismo, lo cual parece un desperdicio de escala hasta que se ve el efecto: dejan de existir componentes que discrepan sobre cuán redondeado está el producto.

La excepción es la única que la geometría exige. Una caja dentro de otra no puede compartir su radio: para que los dos arcos sean concéntricos, el de dentro tiene que ser más cerrado exactamente por el grosor del padding. Eso es --radius-nested, y está calculado, no elegido.

Esta es la decisión que más se nota y la que más discusión cuesta.

gap es simétrico por definición: pone la misma distancia entre todo par de hermanos. Pero un texto no tiene ritmo simétrico. El espacio sobre un encabezado tiene que ser mayor que el de debajo, porque el encabezado pertenece a lo que viene después, no a lo que acaba de terminar. Con gap eso es literalmente inexpresable.

Con márgenes y colapso vertical, cada elemento declara su propio aire arriba y abajo, y el mayor de dos vecinos gana. Es el modelo que tienen los procesadores de texto desde siempre, y se abandonó por flexbox en un momento en que nadie estaba maquetando texto largo.

Está en curso, y lo que falta es la parte aburrida: documentar las primitivas de formulario, y decidir si la escala de elevación sobrevive. Hoy son dos sombras por tema —claro necesita sombra proyectada, oscuro necesita profundidad sin halo gris— y sospecho que dos es una más de las que hacen falta.