Sistema de diseño
Espaciado
Para crear relaciones espaciales con ritmo vertical y lateral, utilizamos una escala con incrementos que nos permite controlar la densidad de un diseño mientras mantenemos la consistencia.
La escala de espaciado de Oxygen complementa la cuadrícula y la escala tipográfica mediante el uso de múltiplos de ocho píxeles para generar una serie de espaciados estándar. La escala incluye además incrementos pequeños (mitades de 8 píxeles), necesarios para crear relaciones adecuadas en diseños detallados.
Espaciado responsive
Cada nivel de la escala de espaciado tiene su propio token. Los tokens de espaciado se pueden utilizar dentro de componentes para construir y entre componentes para el espaciado de diseño. Estos espaciados son responsive a modo de referencia, lo que significa que al aplicar un nivel de espaciado en un breakpoint, al saltar a otro breakpoint deberíamos ajustar ese espaciado al tamaño correspondiente en su breakpoint, de esta manera la densidad del diseño se adapta al dispositivo.
Hacemos referencia a los tokens a modo orientativo ya que al cambiar entre breakpoints, además de modificar espaciados en ocasiones también modificaremos el layout y podemos incluso reubicar y mostrar u ocultar elementos, influyendo sobre los espaciados recomendados.
En ningún caso está permitido utilizar espaciados mayores o menores a los definidos, ni espaciados que no sean múltiplos de 8.
Hacemos referencia a los tokens a modo orientativo ya que al cambiar entre breakpoints, además de modificar espaciados en ocasiones también modificaremos el layout y podemos incluso reubicar y mostrar u ocultar elementos, influyendo sobre los espaciados recomendados.
En ningún caso está permitido utilizar espaciados mayores o menores a los definidos, ni espaciados que no sean múltiplos de 8.
Tabla de espaciados
Breakpoint: XS-S (0px-720px)· M-XXL (+720px)
Token
Desktop (M-XXL)
Mobile (XS-S)
Size 1 (SMALL)
4PX
4PX
Size 2 (SMALL)
8PX
8PX
Size 3 (SMALL)
12PX
12PX
Size 4 (SMALL)
16PX
16PX
Size 5 (SMALL)
24PX
24PX
Size 6 (SMALL)
32PX
24PX
Size 7 (MEDIUM)
40PX
24PX
Size 8 (MEDIUM)
48PX
32PX
Size 9 (MEDIUM)
56PX
40PX
Size 10 (LARGE)
64PX
48PX
Size 11 (LARGE)
72PX
48PX
Size 12 (LARGE)
80PX
48PX
Size 13 (LARGE)
96PX
48PX
Recomendaciones
Para lograr un espaciado vertical consistente en una página web, se pueden seguir las siguientes reglas de uso de tokens:
- Para el espaciado entre secciones o bloques de contenido, se puede utilizar un token de espaciado grande (spacing-large).
- Para el espaciado entre elementos de contenido dentro de una sección o bloque, se puede utilizar un token de espaciado medio (spacing-medium).
- Para el espaciado entre elementos de contenido dentro de un mismo grupo o sección, se puede utilizar un token de espaciado pequeño (spacing-small).
Es importante tener en cuenta que estos tokens deben ser aplicados de manera coherente en toda la página para lograr un diseño consistente y profesional.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
