Saltar al contenido

Espaciado

Beta

La escala de spacing de FDS — 19 tokens oficiales, visualizados e interactivos.

El espaciado de Polen es una escala nombrada, no números mágicos. Los 19 pasos vienen de la colección Spacing de Figma (spacing-none … spacing-13xl) y en código se exponen como variables CSS --space-{nombre}.

Escala

Cada barra es proporcional al valor real del token. Seleccioná uno para verlo aplicado como separación en vivo.

gap en vivospacing-md · 8px

Elegí un token de la escala para verlo aplicado como separación real.

Cómo elegir un paso

RangoTokensPara qué
Micronone xxs xs smAjustes ópticos, separación icono–label, padding de badges y chips.
Componentemd lg xl 2xlPadding y gap dentro de un componente (Button, Input, Card).
Composición3xl 4xl 5xl 6xlSeparación entre componentes: campos de un formulario, cards de una grilla.
Layout7xl … 13xlMárgenes de sección, respiración de página, heros.

Reglas de uso

  • Lo relacionado va más junto. La distancia comunica pertenencia: un label está a sm de su input, y ese campo a 4xl del siguiente.
  • Subí o bajá de a un paso. Si xl queda apretado probá 2xl, no un valor intermedio inventado.
  • 6xl es 36, no 40. La escala no es estrictamente geométrica: respetá el nombre, no el número que recordás.
  • Si necesitás un valor que no existe, no lo hardcodees: es una conversación con diseño para extender la escala.

En Figma

Las variables tienen scope Gap, así que aparecen tanto en el gap como en el padding de auto-layout. Escribí spacing- en el campo para filtrarlas. Un componente bien construido no tiene ningún padding ni gap con valor suelto.

En código

.card {
  padding: var(--space-4xl);
  gap: var(--space-xl);
}