Spacing
Escala base 4 para espacios, tamaños de control y breakpoints.
Escala
Base de 4 px. Se usa para padding, gap y márgenes.
| Muestra | Token | Valor |
|---|
| | 0px |
| | 4px |
| | 8px |
| | 12px |
| | 16px |
| | 20px |
| | 24px |
| | 28px |
| | 32px |
| | 40px |
| | 48px |
| | 56px |
| | 64px |
| | 80px |
| | 96px |
| | 128px |
| | 160px |
| | 192px |
| | 224px |
| | 256px |
Tamaño de controles
Alto de botones, inputs y selects. El mínimo táctil es 44 px.
| Muestra | Token | Valor | Uso |
|---|
| | 32px | |
| | 36px | Botón sm. Antes 38px (fuera de la grilla de 4) |
| | 40px | |
| | 44px | |
| | 48px | Botón xl. Antes 46px (fuera de la grilla de 4) |
Contenedor y breakpoints
Ancho máximo del contenido y puntos donde cambia el layout.
| Token | Valor |
|---|
| 1280px |
| 640px |
| 768px |
| 1024px |