Espaciado y Layout

Definir una escala base (4px o 8px) y derivar todo de ella: 4, 8, 12, 16, 24, 32, 48, 64, 96. Cada margin, padding, gap y tamano debe venir de esta escala. Elimina la duda de "13px o 15px?".

En contenedores, el espacio entre elementos y el borde del contenedor debe ser igual o mayor al espacio entre los elementos internos. Principio Gestalt: los items internos estan mas relacionados entre si que con el contenedor.

El ojo encuentra bordes de elementos por contraste. Medir spacing desde un punto de alto contraste al siguiente. Si un bloque tiene fondo de color, el spacing se mide desde el borde del fondo, no desde el texto.

Un formulario no necesita ser de 800px de ancho. Un parrafo debe ser 45-75ch. Dejar que el contenido dicte el ancho, no el viewport. Contenido estirado luce sparse y es dificil de leer.

Cuando el espacio alrededor de un elemento es igual por todos lados, no queda claro a que grupo pertenece. Un heading de seccion debe tener mas espacio arriba (separando de la anterior) que abajo (conectando con su contenido).

Es mas facil identificar que esta demasiado separado que demasiado junto. Disenos dense-first terminan apretados porque nunca se reconsidero el spacing.

12 es altamente divisible: 1, 2, 3, 4, 6 columnas. Otros conteos (10, 5) limitan opciones de layout. Pero no forzar todo a un grid de 12 columnas; muchos elementos UI tienen tamanos naturales.

Un headline que es 4x el body en desktop no debe ser 4x en movil. Elementos grandes se encogen desproporcionadamente en pantallas chicas. Botones y inputs apenas cambian. La relacion entre tamanos depende del viewport.