Foundations

Spacing

One unit = 8px. Every margin, padding and gap snaps to this scale. Skipping a step (e.g. 5 or 7) is forbidden — keep the visual rhythm.

Scale

Pick the lowest value that does the job. Use 1–4 for component-internal spacing, 6–8 for sections, 12+ for marketing layouts.

Token	px	rem	CSS variable
space-1	8px	0.5rem	--spacing-1
space-2	16px	1rem	--spacing-2
space-3	24px	1.5rem	--spacing-3
space-4	32px	2rem	--spacing-4
space-6	48px	3rem	--spacing-6
space-8	64px	4rem	--spacing-8
space-12	96px	6rem	--spacing-12
space-16	128px	8rem	--spacing-16
space-24	192px	12rem	--spacing-24

Stack defaults

The Stack component only accepts these gap values — TypeScript enforces it.

<Stack gap="3">       // 24px between children
  <Heading />
  <Text />
</Stack>

<Inline gap="2">      // horizontal row, 16px gaps
  <Button />
  <Button variant="ghost" />
</Inline>