Spacing

The design system uses a 4px base-unit spacing scale. Component gap props accept step values that map to these tokens. The scale provides fine-grained control at the small end (2px, 4px, 6px) and consistent rhythm at larger sizes (multiples of 4px).

Most components accept a gap prop using step values (0 through 12). For custom layouts, use the spacing tokens directly in StyleX.

tsx
// Via component props (preferred)
<Stack gap={4}>{/* 16px gap */}</Stack>
​
// Via StyleX tokens (custom layouts)
import {spacingVars} from '@astryxdesign/core';
​
const styles = stylex.create({
  custom: {
    padding: spacingVars['--spacing-4'],
    gap: spacingVars['--spacing-3'],
  },
});