¿Cuántos pasos de espaciado necesita un sistema?

Antes de fiarte de la recomendación de nadie, mide tu propio producto: haz grep en las hojas de estilo de cada valor de margin, padding y gap, y cuenta los resultados distintos. Los productos maduros que crecieron sin un sistema suelen situarse entre 30 y 60 valores distintos: 12px junto a 13px, 20px junto a 22px junto a 24px. Luego enumera los trabajos que esos valores están haciendo —espacio de icono, padding de controles, espacio entre campos de formulario, padding de tarjetas, espacio entre tarjetas, salto de bloque, salto de sección, margen de página— y la lista llega a unos ocho.

Un sistema de espaciado necesita de seis a diez pasos: uno o dos pasos micro para el interior de los componentes, tres o cuatro pasos medios para el espacio entre elementos y componentes, y dos o tres pasos macro para secciones y regiones de página. La brecha entre los cuarenta valores en uso y los ocho trabajos por hacer es la respuesta a “cuántos”: un sistema necesita más o menos tantos pasos como trabajos haya, más un poco de margen.

Este artículo reparte los pasos zona por zona, explica por qué tan pocos se sostienen perceptualmente y cubre la única razón legítima para añadir uno: la cuestión del dimensionado dentro del sistema más amplio de espaciado.

¿Cuántos valores de espaciado acumulan los productos sin sistematizar?

Haz el experimento de forma concreta:

grep -rhoE '(margin|padding|gap)[^;]*:[^;]*px' src/styles \
  | grep -oE '[0-9]+px' | sort -n | uniq -c | sort -rn

El histograma suele tener una forma reconocible: unos pocos pesos pesados en la cima (16px usado cientos de veces, 8px y 24px justo detrás) y luego una larga cola: 18px usado 22 veces, 22px usado 9 veces, 13px usado dos veces. Cada valor de la cola fue en su día una decisión local: un espacio ajustado para arreglar una pantalla apretada, un redondeo que nunca se reconcilió, la suposición de un tercer desarrollador sobre lo que quiso decir el segundo. Ninguno está mal por sí solo; en conjunto significan que la misma decisión de diseño se toma docenas de veces con resultados ligeramente distintos.

Pon los dos números uno al lado del otro —unos 40 valores en uso, aproximadamente ocho trabajos distintos— y la pregunta se responde sola. No necesitas más pasos; necesitas que cada trabajo tenga exactamente uno.

¿Cómo deberías repartir de seis a diez pasos?

Por zonas, porque los trabajos de espaciado se agrupan en tres tamaños distintos. Con una base de 16px, ratio 2 y dos notas por duplicación, la escala genera siete pasos —8, 11, 16, 23, 32, 45, 64— y se distribuyen así:

El reparto explica ambos modos de fallo. Menos de seis pasos deja una zona desabastecida —normalmente la micro, y los componentes pasan de apretados (8) a sueltos (16) sin nada en medio—. Muchos más de diez y el menú deja de ser corto: los pasos vecinos dejan de tener trabajos distintos, la gente elige entre ellos por capricho, y la fatiga de decisión que la escala debía eliminar vuelve a colarse, esta vez con un nombre de token adjunto.

Abre esta escala de siete pasos en Scale Composer: tres números generan los siete pasos, densos en el extremo micro y dispersos en el extremo macro.

¿Por qué menos pasos siguen cubriendo cada trabajo?

Porque el ojo compara el espacio de forma proporcional, no por número de píxeles. La diferencia entre 8px y 12px es inconfundible: un espacio es la mitad más grande que el otro. La diferencia entre 56px y 64px son esos mismos 8 píxeles y apenas se percibe. Dos pasos solo pueden albergar dos trabajos distintos si quien mira puede distinguirlos con fiabilidad, y en tamaños grandes eso requiere un ratio visible, no un incremento fijo.

Esa es la propiedad que una escala no lineal garantiza por construcción. En la escala de siete pasos de arriba, cada paso es un 41% más grande que el anterior (2^(1/2) ≈ 1,414): cada par adyacente se distingue de un vistazo, desde 8 frente a 11 hasta 45 frente a 64. Un menú lineal como el 8, 16, 24, 32, 40, 48, 56, 64 de la rejilla de 8 puntos gasta la mitad de sus opciones en distinciones del extremo grande que pocos lectores llegarán a percibir. Menos pasos, espaciados de forma proporcional, no son una concesión frente a un menú más rico; son el menú con las opciones imperceptibles eliminadas.

¿Cuándo deberías añadir un paso de espaciado?

Cuando una distancia recurrente queda genuinamente a caballo entre dos pasos existentes: la misma prueba de rol que se usa para añadir un tamaño de fuente. Una sola pantalla donde 23 se siente suelto y 16 apretado no es evidencia; una distancia que sigue perdiendo frente a ambos vecinos en muchas pantallas es un rol sin paso, y se ha ganado uno.

Prefiere cambiar la densidad de la escala antes que insertar un valor suelto: pasar de dos notas por duplicación a tres regenera todo el menú con incrementos más suaves (cada paso un 26% más grande en lugar de un 41%), de modo que los nuevos valores intermedios siguen compartiendo la lógica de la escala. Un 20 insertado a mano entre 16 y 23 resuelve un espacio y rompe la aritmética que obedece cada uno de los demás pasos.

¿Cuántos pasos usan los sistemas de diseño públicos?

Las escalas públicas son una calibración útil si se leen correctamente. Shopify Polaris, por ejemplo, documenta abiertamente su escala de espacio: pasos con nombre, densos en el extremo pequeño y más dispersos hacia el extremo grande, la misma forma que produce el reparto por zonas. Tómalo como evidencia sobre la forma de una escala viable, no como una autoridad sobre tu producto: Polaris está calibrado para la densidad de las superficies de administración de Shopify, y un sitio de marketing con mucho contenido o un dashboard con muchos datos aterrizarán en puntos distintos dentro del rango de seis a diez. El patrón convergente entre los sistemas publicados —un menú corto y no lineal— es la lección transferible; el recuento exacto te toca medirlo a ti.

Mide tu brecha y luego elige tu densidad

La auditoría te da los dos números que importan: valores en uso y trabajos por hacer. La decisión que queda es la densidad: si la zona media de tu producto necesita tres pasos o cuatro. Compara los candidatos directamente: la misma base y ratio con tres notas por duplicación hace crecer el menú de siete pasos hacia diez, y cada paso añadido tiene que responder a la prueba de rol: ¿qué trabajo recurrente posee este? Recorre la escala más densa y juzga cada adición frente a tu propio histograma: abre la escala de comparación en Scale Composer.