Foundations

Spacing

El sistema de espaciado se basa en una unidad de 4px. Todos los valores son múltiplos de 4, garantizando alineación consistente en la cuadrícula de diseño. La escala fue extraída directamente del archivo Figma (Grid & Spacing).

Extraído12 tokens — Figma: Grid & Spacing (node 1282-3018)

Unidad base

4px

La unidad base del sistema. Toda distancia, padding, gap y margen es un múltiplo entero de 4px.

--ds-spacing-size-4

¿Por qué 4px?

La mayoría de pantallas tienen densidades donde 4px es el granulado visual más pequeño sin causar inconsistencias de renderizado. Alinea con iOS HIG y Material Design.

Escala de espaciado

Visualización proporcional. La barra representa el tamaño relativo al valor máximo (64px).

size-0

--ds-spacing-size-0

0px

Sin espaciado — separación nula entre elementos superpuestos

Extraído

size-2

--ds-spacing-size-2

2px

Micro — separación entre icono y etiqueta inline

Extraído

size-4

--ds-spacing-size-4

4px

Base — unidad mínima del sistema, 1× la unidad base

Extraído

size-8

--ds-spacing-size-8

8px

XS — gap interno de chips, badges y tags

Extraído

size-12

--ds-spacing-size-12

12px

SM — padding vertical de botones small y labels

Extraído

size-16

--ds-spacing-size-16

16px

MD — margen lateral en mobile, gutter de tablet, padding de cards

Extraído

size-24

--ds-spacing-size-24

24px

LG — margen lateral en tablet y desktop, gap entre secciones

Extraído

size-32

--ds-spacing-size-32

32px

XL — separación entre bloques de contenido

Extraído

size-40

--ds-spacing-size-40

40px

Altura mínima de área táctil (WCAG 2.5.5)

Extraído

size-48

--ds-spacing-size-48

48px

Altura de botón large y campos de input

Extraído

size-56

--ds-spacing-size-56

56px

Altura de topbar y navbar

Extraído

size-64

--ds-spacing-size-64

64px

2XL — separación entre secciones mayores de pantalla

Extraído

Reglas de uso

✓ Do

Usa siempre un valor de la escala — nunca valores arbitrarios como 13px o 22px

Usa size-16 como padding lateral base en mobile

Usa size-8 como gap interno entre elementos de un mismo componente

Usa size-24 o mayor para separar secciones de pantalla

Usa size-40 como altura mínima de áreas táctiles (WCAG 2.5.5)

✗ Don't

No uses valores fuera de la escala (ej. margin: 10px)

No uses size-2 para gaps entre bloques — es solo para elementos inline

No mezcles unidades: usa solo px o los tokens CSS

No uses spacing para tipografía — usa los tokens de typography

Tabla de referencia

Token Figma	CSS Variable	Valor	rem
size-0	--ds-spacing-size-0	0px	0rem
size-2	--ds-spacing-size-2	2px	0.125rem
size-4	--ds-spacing-size-4	4px	0.25rem
size-8	--ds-spacing-size-8	8px	0.5rem
size-12	--ds-spacing-size-12	12px	0.75rem
size-16	--ds-spacing-size-16	16px	1rem
size-24	--ds-spacing-size-24	24px	1.5rem
size-32	--ds-spacing-size-32	32px	2rem
size-40	--ds-spacing-size-40	40px	2.5rem
size-48	--ds-spacing-size-48	48px	3rem
size-56	--ds-spacing-size-56	56px	3.5rem
size-64	--ds-spacing-size-64	64px	4rem

Uso en CSS

/* Variables de spacing disponibles */
--ds-spacing-size-0:  0px;
--ds-spacing-size-4:  4px;
--ds-spacing-size-8:  8px;
--ds-spacing-size-16: 16px;
--ds-spacing-size-24: 24px;

/* Padding de card */
.card {
  padding: var(--ds-spacing-size-16);
  gap: var(--ds-spacing-size-8);
}

/* Sección con separación mayor */
.section + .section {
  margin-top: var(--ds-spacing-size-32);
}

/* Área táctil mínima (WCAG) */
.touch-target {
  min-height: var(--ds-spacing-size-40);
  min-width: var(--ds-spacing-size-40);
}