Espaciado

El espaciado organiza la información en pantalla. Define qué elementos se perciben como relacionados y cuáles como independientes, y determina en gran medida si una interfaz se siente ordenada o saturada.

En los servicios públicos digitales, un espaciado consistente reduce la carga cognitiva de formularios y trámites extensos, facilita la lectura y mejora la usabilidad en dispositivos móviles, donde el espacio disponible es limitado.

El sistema utiliza una escala base de 4 píxeles: todos los valores de espaciado son múltiplos de esa unidad. Esta restricción evita decisiones arbitrarias, mantiene el ritmo visual entre distintos componentes y permite que interfaces desarrolladas por equipos diferentes se vean coherentes entre sí.

Cómo aplicar la escala

• Usa valores compactos (8 a 16) para el espacio interno de componentes densos.
• Usa valores intermedios (16 a 24) para separar elementos dentro de un mismo bloque.
• Usa valores amplios (32 a 64) para separar secciones de una página.
• Mantén el mismo valor de espaciado entre elementos del mismo nivel jerárquico.

Cuando necesites un valor que no está en la escala, revisa primero si el problema es de espaciado o de jerarquía: en la mayoría de los casos, reorganizar el contenido resuelve mejor que agregar un valor nuevo.