El espaciado define el ritmo de la interfaz — separación entre elementos, padding interno, gaps de grilla. Trabajamos sobre una escala basada en múltiplos de 4 px (0.25rem) para mantener proporciones armónicas y predecibles a lo largo de todo el producto.
--spacing-ds-0_5 0.125rem gap-0.5 / p-0.5 --spacing-ds-1 0.25rem gap-1 / p-1 --spacing-ds-2 0.5rem gap-2 / p-2 --spacing-ds-3 0.75rem gap-3 / p-3 --spacing-ds-4 1rem gap-4 / p-4 --spacing-ds-5 1.25rem gap-5 / p-5 --spacing-ds-6 1.5rem gap-6 / p-6 --spacing-ds-8 2rem gap-8 / p-8 --spacing-ds-10 2.5rem gap-10 / p-10 --spacing-ds-12 3rem gap-12 / p-12 --spacing-ds-16 4rem gap-16 / p-16 --spacing-ds-20 5rem gap-20 / p-20 --spacing-ds-24 6rem gap-24 / p-24 --spacing-ds-32 8rem gap-32 / p-32 Escala
Catorce pasos basados en una unidad de 4 px (1 = 0.25rem). Para detalles muy finos —ajustes de 1–2 px en bordes o íconos— existe el medio paso 0.5 (2 px). De ahí en adelante todos los valores son múltiplos de 4: 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32 — cubre desde el ajuste micro hasta el espaciado de secciones grandes. Cuando dudes entre dos valores, elige el más pequeño.
Breakpoints
Mobile-first: todo se diseña desde 360–420 px y se adapta hacia arriba. El breakpoint primario del proyecto es md: (768px) — la mayoría de adaptaciones suceden ahí.
| Nombre | Valor | Cuándo |
|---|---|---|
sm | 640px | Mobile landscape |
md | 768px | Tablets · breakpoint primario |
lg | 1024px | Desktop |
xl | 1280px | Desktop grande |