Espaciado

El espacio en blanco

El espacio en blanco no es un vacío, sino un elemento fundamental en el diseño. Nos ayuda a jerarquizar la información, mejorar la legibilidad y crear interfaces más equilibradas y fáciles de entender. Para mantener esta armonía, en Energy utilizamos una escala de espaciado que garantiza coherencia en la distribución de los elementos.

Nuestra escala se basa en múltiplos de 8 píxeles, lo que permite controlar la densidad del diseño y mantener un ritmo visual consistente. Además, incluye excepciones de 4, 6 y 12 píxeles, pensadas para ajustes más detallados en componentes específicos.

Esta escala complementa la retícula y la tipografía, asegurando que cada elemento tenga el espacio adecuado para respirar y que los diseños sean claros, estructurados y accesibles en cualquier contexto digital.

‍

Recomendaciones para aplicar espaciado en productos digitales

El espaciado en un diseño no es solo una cuestión estética, sino una herramienta clave para estructurar el contenido y mejorar la experiencia del usuario. En productos responsive, es fundamental mantener una relación equilibrada entre los espacios en desktop y mobile, adaptándolos según las necesidades de cada interfaz.
‍

En Energy, no definimos una única relación fija de espaciado entre desktop y mobile, ya que en Repsol trabajamos con productos digitales muy distintos:

• Plataformas con amplios espacios para lectura, donde el aire entre elementos ayuda a la comprensión.
• Herramientas digitales donde cada píxel cuenta, y la densidad del diseño debe optimizarse al máximo.

‍
Por eso, recomendamos que cada producto establezca su propia regla de espaciado responsive y la documente para que el equipo de desarrollo la implemente correctamente. Esta relación debe basarse siempre en nuestra escala de espaciado global, asegurando consistencia dentro del ecosistema digital de Repsol.

‍

Espaciados en componentes core

En Energy, nuestros componentes core siguen reglas de espaciado específicas que garantizan coherencia y alineación en todos los productos digitales de Repsol. Estos componentes, como botones, imputs... , están diseñadas con una estructura modular donde cada margen, padding y separación ha sido cuidadosamente definido para asegurar equilibrio y funcionalidad.

Estas reglas de espaciado están establecidas desde el equipo de sistema para aplicarse en todos los breakpoints, permitiendo que los componentes se adapten de manera óptima en cualquier dispositivo. Al ser piezas fundamentales del sistema, no se permite modificar su espaciado ni crear versiones personalizadas, asegurando así una experiencia unificada en todos nuestros productos.