Sistema de Espaciado con Grid 8pt: Guía Completa para Diseño Consistente

Durante años diseñé interfaces poniendo valores de espaciado "a ojo". Un margen de 13px aquí, un padding de 22px allá, un gap de 17px más abajo. Todo se veía bien en el momento, pero había algo que no terminaba de encajar. El diseño se sentía inconsistente sin saber exactamente por qué.

Mira esta comparación:

A la izquierda, valores que elegí sin sistema. A la derecha, múltiplos de 8. La diferencia es sutil pero real: el segundo tiene ritmo.

El grid de 8 puntos es exactamente eso — una regla simple que dice: todos tus espaciados deben ser múltiplos de 8. Es decir: 8, 16, 24, 32, 40, 48, 64. Parece una restricción arbitraria, pero elimina cientos de micro-decisiones que ralentizan el proceso de diseño.

¿Por qué 8 específicamente? Porque se divide perfectamente entre 2 y 4 (útil cuando necesitas valores intermedios), porque las pantallas retina multiplican todo por 2 (los valores pares escalan mejor), y porque Google y Apple ya validaron este enfoque en Material Design y las Human Interface Guidelines.

Pero la razón más práctica es otra: cuando limitas tus opciones, diseñas más rápido. Ya no te preguntas si usar 14px o 17px. La respuesta es 16px. Siempre.

La card de la izquierda usa valores que "se ven bien" — 18px y 22px de padding, 12px de gap. La de la derecha usa el grid: 16px y 24px de padding, 16px de gap. Visualmente son casi idénticas, pero la segunda es infinitamente más fácil de mantener porque cualquier persona del equipo sabe exactamente qué valores esperar.

En mis proyectos uso esta escala mental: 8px para espaciar elementos muy relacionados (un icono y su texto), 16px dentro de componentes (el padding de un botón), 24px entre grupos de elementos, 32-48px entre secciones, y 64px o más para separar bloques grandes de contenido. No memorizo números — memorizo intenciones.

Lo que no debe seguir el grid es el texto. Los tamaños de fuente como 14px, 18px o 20px están perfectamente bien. El line-height se calcula para legibilidad, no para encajar en una cuadrícula. Lo que sí debe seguir el grid es el espaciado alrededor del texto.

Si usas Tailwind, ya tienes esto resuelto — la escala de espaciado usa múltiplos de 4, así que simplemente usa los valores pares (p-2 = 8px, p-4 = 16px, p-6 = 24px). Si prefieres CSS custom properties:

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
}

Prueba la herramienta interactiva. Mueve los sliders y observa cómo los elementos se alinean automáticamente al grid:

El error que veo constantemente no es usar valores incorrectos — es no documentar el sistema. He trabajado en equipos donde cada diseñador tenía su propia escala mental, y el resultado eran interfaces que se sentían inconsistentes aunque cada pantalla individual "se veía bien". Documenta qué valores usar y cuándo usarlos. "8px entre elementos relacionados, 24px entre grupos" es más útil que una lista de números.

Si nunca has usado un sistema de espaciado, empieza limitándote a 8, 16, 24, 32 y 48px en tu próximo proyecto. Si necesitas algo más pequeño, usa 4px pero piénsalo dos veces. Si algo "se ve raro", probablemente necesitas más espaciado, no menos.

Después de unas semanas te va a costar recordar cómo trabajabas sin esto.