Espaciado

La escala de espaciado define los valores de separación del sistema: padding, gap, margin y posicionamiento interno de componentes. Los valores deben tomarse siempre de esta escala; no se usan medidas ad-hoc en componentes.

El patrón de nombre es --gn-spacing-{paso}, con 11 pasos de 2 px a 160 px.

Escala

--gn-spacing-0

2 px

--gn-spacing-1

4 px

--gn-spacing-2

8 px

--gn-spacing-3

16 px

--gn-spacing-4

20 px

--gn-spacing-5

24 px

--gn-spacing-6

28 px

--gn-spacing-7

40 px

--gn-spacing-8

64 px

--gn-spacing-9

80 px

--gn-spacing-10

160 px

Cuándo usar cada paso

0–2 (2–8 px) ajustes micro: separación interna de iconos, gaps mínimos, ajuste de bordes.
3–4 (16–20 px) padding de componentes compactos: inputs, badges, botones, etiquetas.
5–6 (24–28 px) padding estándar: tarjetas, paneles, bloques de contenido.
7 (40 px) separación entre grupos de elementos relacionados dentro de una misma sección.
8–9 (64–80 px) separación entre secciones de página.
10 (160 px) espaciado de hero o margen superior de páginas con gran bloque inicial.

Uso en código

.mi-componente {
  padding: var(--gn-spacing-5);          /* 24 px */
  gap: var(--gn-spacing-2);             /* 8 px */
  margin-bottom: var(--gn-spacing-7);   /* 40 px */
}