Espaciado
El espaciado organiza los elementos de la interfaz y permite comunicar visualmente qué contenidos están relacionados y cuáles pertenecen a grupos diferentes.
Relaciones entre elementos
La distancia entre elementos ayuda a comprender la estructura del contenido. Los espacios pequeños suelen expresar una relación cercana, mientras que los espacios mayores permiten separar grupos, bloques o secciones.
Aplicar este criterio de manera consistente mejora la lectura y evita interfaces visualmente saturadas o fragmentadas.
Escala de espaciado
El sistema dispone de una escala progresiva para resolver desde separaciones pequeñas entre elementos hasta espacios amplios entre secciones. Esta escala puede utilizarse en márgenes, rellenos internos y separaciones entre componentes.
Los valores deben elegirse considerando la relación entre los contenidos y no solamente el espacio disponible.
Los tokens de espaciado son custom properties de CSS que representan cada paso de la escala, con pasos nombrados de 3xs a 3xl.
Escala nominal
Los 9 pasos semánticos del sistema, la escala recomendada para nuevos desarrollos.
| Paso | Vista previa | Variable | rem | px |
|---|---|---|---|---|
3xs | --spacing-3xs | 0.125rem | 2px | |
2xs | --spacing-2xs | 0.25rem | 4px | |
xs | --spacing-xs | 0.5rem | 8px | |
s | --spacing-s | 1rem | 16px | |
m | --spacing-m | 1.5rem | 24px | |
l | --spacing-l | 2.25rem | 36px | |
xl | --spacing-xl | 3rem | 48px | |
2xl | --spacing-2xl | 3.75rem | 60px | |
3xl | --spacing-3xl | 5rem | 80px |
Última actualización: Septiembre de 2026