Espaciado

Fundamentos

Aplicar el espaciado de manera coherente y deliberada produce interfaces más equilibradas y agradables para el usuario. Al mismo tiempo, establece los cimientos para adaptar la densidad de la interfaz y el comportamiento responsivo a futuro, elevando la calidad y la accesibilidad de la experiencia.

Unidad base de 8 píxeles

Todo el sistema de espaciado parte de una unidad base de 8 píxeles. Este valor de referencia rige la progresión de la escala y asegura uniformidad visual en toda la interfaz.

Escala

A partir de la unidad base de 8px, se construye la escala de espaciado: un conjunto acotado de valores que permite dimensionar el espacio entre elementos de la interfaz de forma predecible.

Los valores de la escala son múltiplos de la unidad base y abarcan desde 0px hasta 80px, ofreciendo el margen necesario para cubrir distintos escenarios sin sacrificar la coherencia del diseño.

Tokens de espaciado

La unidad base de 8px equivale al token space.100. Cada token de espaciado es un múltiplo de esta referencia, y su sufijo numérico indica el porcentaje respecto a ella.

Por ejemplo, space.200 corresponde al 200% de la unidad base, es decir, 16px.

Siempre que necesite incorporar espacio entre componentes u objetos en una página, utilice tokens de espaciado en lugar de valores fijos en píxeles o REM. A continuación se muestran ejemplos de aplicación.

Valores negativos

El sistema de tokens también contempla valores negativos, desde space.negative.025 (-2px) hasta space.negative.400 (-32px), disponibles en el código. Resultan útiles para compensar el relleno de un contenedor o superponer elementos. Antes de recurrir a tokens negativos, valore si la primitiva de sangrado —diseñada expresamente para gestionar espacios en blanco negativos— resuelve su caso de uso.

Uso del espaciado

Cada situación de diseño demanda un rango de espaciado distinto para obtener el mejor resultado. La escala se organiza en tres rangos según su magnitud:

Valores pequeños

Emplee los tokens de space.0 a space.100 (de 0px a 8px) para fragmentos de interfaz compactos y de alta densidad.

Ejemplos

• Separación entre iconos pequeños y texto adyacente
• Relleno interno de componentes reducidos (insignias, botones de icono, celdas de tabla)
• Distancia entre elementos repetidos (grupos de botones)
• Relleno interior de campos de entrada
• Separación vertical entre elementos de una tarjeta (título y descripción, descripción y acciones)
• Distancia entre un disparador y su elemento flotante (botón desplegable y menú)

Valores medios

Emplee los tokens de space.150 a space.300 (de 12px a 24px) para zonas de interfaz más amplias y con menor densidad.

Ejemplos

• Relleno interno de componentes de mayor tamaño (botones, por ejemplo)
• Separación entre un avatar o icono grande y el contenido asociado (mensajes de sección)
• Separación vertical entre elementos dentro de tarjetas
• Distancia entre elementos en componentes de mayor tamaño o menor densidad

Valores grandes

Emplee los tokens de space.400 a space.1000 (de 32px a 80px) para las áreas más amplias de la interfaz y para la composición general de la página.

Ejemplos

• Separación entre bloques de contenido de la página (distancia entre la parte superior y el encabezado)
• Alineación interna de secciones extensas de contenido (alineación del contenido en Flag)

Pautas de diseño

Todo diseño resulta de la combinación de elementos, componentes y el espacio que los separa. Seguir estas directrices permite al usuario identificar con rapidez cómo se relacionan los elementos entre sí, facilitando la lectura y comprensión del contenido.

Combine estas pautas con los tokens de espaciado para construir interfaces coherentes y de fácil interpretación.

Agrupar por similitud

Los usuarios asumen que los elementos agrupados comparten un significado común o pertenecen a una misma categoría.

Mantener un espaciado uniforme alrededor de los elementos refuerza esa percepción de parentesco visual. Por ejemplo, aplicar la misma separación entre las filas de una tabla o los ítems de una lista transmite la idea de una colección unitaria y cohesionada.

Agrupar por proximidad

La cercanía entre elementos comunica relación: cuanto más próximos estén, más vinculados los percibe el usuario.

Aproveche este principio situando los elementos relacionados a menor distancia y los independientes a mayor distancia. Por ejemplo, acerque los pasos que forman parte de un mismo flujo o acción para que el usuario capte su conexión de forma inmediata.

Crear orden y jerarquía

Los usuarios buscan estructura en la información visual para minimizar el esfuerzo cognitivo al recorrer una página. La disposición de los elementos puede emplearse para orientar al usuario a lo largo de un recorrido o flujo determinado.

La jerarquía permite priorizar elementos e incidir en el orden de lectura. Los elementos de mayor tamaño captan la atención primero, mientras que los más pequeños pasan a un segundo plano. Del mismo modo, aumentar o reducir el espacio en blanco alrededor de un elemento permite destacarlo o subordinarlo dentro del conjunto.

Introducir el ritmo visual

La alternancia de elementos y espacios en blanco genera un ritmo visual que condiciona la forma en que el usuario recorre la página y distribuye su atención.

Emplear una cadencia de espaciado uniforme entre elementos —como en una tabla o lista— establece un patrón predecible que el usuario sigue con naturalidad, reforzando la equivalencia de importancia entre cada ítem.

Variar el espaciado y las proporciones de los elementos produce un flujo más dinámico que guía al usuario de manera orgánica. Esa variación genera puntos de interés y contraste, lo que mejora la legibilidad general de la página.

Utilice el ajuste óptico

Aunque el sistema de espaciado favorece la consistencia, la armonía visual de una composición no siempre se alcanza a la primera. El peso visual de cada elemento influye en el espacio que necesita a su alrededor para parecer equilibrado, y en ocasiones se desvía de los valores estándar de la escala. Los ajustes ópticos sirven para corregir esas discrepancias y preservar la fluidez del diseño.

Realizar estos ajustes implica combinar los valores de la escala de espaciado con la percepción visual, aplicando variaciones sutiles en la separación entre objetos hasta lograr un resultado visualmente armónico.