Espaciado
Extraído de FigmaEl sistema de espaciado está construido sobre una unidad base de 8px. Esto garantiza alineación consistente en grids de 8 puntos y facilita la colaboración entre diseño y desarrollo.
Escala de espaciado
Cada valor es múltiplo de 4 o 8. Usar exclusivamente estos valores para margin, padding y gap.
space-14px
4px
space-28px
8px
space-312px
12px
space-416px
16px
space-520px
20px
space-624px
24px
space-832px
32px
space-1040px
40px
space-1248px
48px
space-1664px
64px
space-2080px
80px
Radius
El border-radius del sistema sigue 4 valores definidos en Figma. Usarlos consistentemente garantiza cohesión visual.
Gap vs Padding
Dos conceptos distintos con el mismo sistema de valores.
Gap
Espaciado entre elementos dentro de un contenedor. Se usa en layouts con flexbox o grid. Valores más usados:
8px, 12px, 16px, 24px.Padding
Espacio interior de un elemento, entre su contenido y el borde. Valores más usados:
12px, 16px, 20px, 24px.Tokens de referencia
| Token | Valor | Descripción |
|---|---|---|
--space-1 | 4px | — |
--space-2 | 8px | — |
--space-3 | 12px | — |
--space-4 | 16px | — |
--space-5 | 20px | — |
--space-6 | 24px | — |
--space-8 | 32px | — |
--space-10 | 40px | — |
--space-12 | 48px | — |
--space-16 | 64px | — |
--space-20 | 80px | — |
--radius-sm | 8px | Radius sm |
--radius-md | 16px | Radius md |
--radius-lg | 24px | Radius lg |
--radius-full | 999px | Radius Infinity |