Convierte márgenes sueltos en una escala de espaciado

Abres un archivo de diseño y aparecen 13, 18, 22 y 27 píxeles entre bloques casi idénticos. Ninguno rompe la pantalla por sí solo. Juntos, en cambio, te obligan a decidir el mismo margen una y otra vez. Una escala corta sirve para dejar de improvisar sin convertir cada hueco en una regla sagrada.

Primero cuenta los valores que ya usas

Antes de elegir una base, haz inventario. Busca margin, padding y gap en el código; en el archivo de diseño, revisa componentes y pantallas representativas. Apunta cada medida junto a su uso. Un 16 dentro de un botón no resuelve la misma relación que un 16 entre dos secciones.

La lista suele dar un poco de vergüenza. También resulta útil. Si 15, 16 y 17 píxeles aparecen en el mismo componente, probablemente expresan una sola decisión con tres redondeos distintos. Si 24 separa tanto un icono de su texto como dos bloques completos, quizá sean dos funciones que comparten número por casualidad.

Reduce la lista sin borrar diferencias útiles

Agrupa primero los valores próximos y prueba una escala breve, por ejemplo 4, 8, 12, 16, 24, 32 y 48. Es un punto de partida, no una receta universal. El sistema de diseño web de Estados Unidos usa múltiplos de 8 píxeles y añade medidas pequeñas cuando el detalle las necesita.

Cuando dos candidatos estén cerca, sustituye ambos en una pantalla real. Si un margen de 16 conserva la agrupación y el ritmo donde antes había 15 y 18, has eliminado dos decisiones sin perder información. Si aplana la jerarquía, conserva otro escalón.

Nombra el uso, no solo la medida

Una escala numérica ordena el catálogo; los nombres explican para qué sirve. Puedes mantener fichas como space-2 y space-3, y añadir alias como control-gap o section-space en los componentes. La guía de espaciado de Atlassian combina una base de 8 píxeles con valores intermedios y recomienda ajustes ópticos hechos con la propia escala.

Las excepciones caben, pero conviene escribir el motivo. «Alinea el icono con la curva de la letra» ayuda. «Quedaba raro» sólo aplaza la conversación.

Prueba la escala en tres pantallas

Monta una tarjeta, un formulario y una cabecera en móvil, tableta y escritorio. La escala de GOV.UK separa medidas estáticas y adaptables: mantiene iguales los huecos pequeños y reduce varios espacios grandes en pantallas estrechas. No hace falta copiar sus cifras; merece la pena copiar la prueba.

Yo empezaría con siete valores y esos tres casos. Si una medida falla varias veces, falta un escalón o una regla adaptable. Si falla una sola vez, documenta la excepción. La siguiente pantalla debería poder componerse sin volver a inventar 13, 18, 22 y 27.