Spacing

Cinco pasos — todo el espaciado interno de los componentes de Orbit (padding, gaps) sale de acá, nunca de un px suelto.

xs8px

sm12px

md16px

lg24px

xl32px

Dónde se usa cada paso

• xs (8px) — el paso más chico: gap entre ícono y texto (OrbitButton, OrbitTextField, OrbitToast), padding vertical compacto, margen bajo un label.
• sm (12px) — padding vertical de controles de tamaño estándar (OrbitTextField/OrbitSelect), padding vertical de filas (OrbitTable, OrbitListItem).
• md (16px) — el paso por defecto: padding horizontal de campos y cápsulas grandes, padding interno de OrbitCard/OrbitPanel, padding de filas de OrbitTable/OrbitListItem/OrbitNavItem.
• lg (24px) — separación entre OrbitTabs, padding de OrbitModal/OrbitDrawer.
• xl (32px) — el paso más grande: padding horizontal de botones Lg/Xl.

No hay un paso más chico que xs ni más grande que xl todavía — si hace falta uno nuevo, se agrega a la escala, no se hardcodea un px suelto en un componente.

Uso

.card {
  padding: var(--space-md);
  gap: var(--space-sm);
}

Modifier.padding(DesignTokens.spaceMd.dp)

Referencia

Token (JSON)	CSS var	Kotlin (DesignTokens)	Valor
space.xs	--space-xs	spaceXs	8
space.sm	--space-sm	spaceSm	12
space.md	--space-md	spaceMd	16
space.lg	--space-lg	spaceLg	24
space.xl	--space-xl	spaceXl	32