Divider
Overview
En el sistema de diseño Energy, el Divider actúa como una línea visual que marca límites o agrupa secciones relacionadas, guiando la mirada del usuario y aportando estructura sin distraer.
Su uso permite que las interfaces respiren mejor, ayudando a distinguir zonas de contenido o bloques funcionales. Aunque es un elemento simple, su correcta aplicación contribuye a mantener la claridad, consistencia y equilibrio visual en todos los productos digitales de Repsol.
Variantes
En Energy, el componente Divider cuenta con dos variantes pensadas para adaptarse al nivel de contraste que cada diseño necesite: High y Low.
El Divider High utiliza un tono de gris más visible, ideal cuando se busca delimitar secciones con claridad o destacar divisiones de contenido. Es una opción efectiva, pero debe usarse con moderación, ya que un exceso puede sobrecargar visualmente la interfaz.
Por su parte, el Divider Low es más sutil y discreto. Su función es mantener el ritmo visual y ayudar a jerarquizar el contenido sin llamar la atención. Es perfecto para diseños más limpios o donde el foco debe mantenerse en la información principal.
Estos elementos tienen un carácter decorativo, por lo que no están obligados a cumplir con los criterios AA de contraste, aunque su correcta elección contribuye siempre a mejorar la legibilidad y la armonía del diseño.
Opciones
El componente Divider también ofrece opciones de configuración que permiten mantener una correcta visibilidad en distintos contextos. Puede utilizarse en su versión Default, pensada para fondos claros, o en su versión Inverse, diseñada para fondos oscuros o con imagen.
