Foundations

Spacing

A 4px scale. Stack and Grid `gap` take the step number (`gap={4}` = 16px); `--ds-space-<n>` holds the same values.

Token	Value	Preview
--ds-space-0 · gap={0}	0px
--ds-space-1 · gap={1}	4px
--ds-space-2 · gap={2}	8px
--ds-space-3 · gap={3}	12px
--ds-space-4 · gap={4}	16px
--ds-space-5 · gap={5}	20px
--ds-space-6 · gap={6}	24px
--ds-space-8 · gap={8}	32px
--ds-space-10 · gap={10}	40px
--ds-space-12 · gap={12}	48px
--ds-space-16 · gap={16}	64px

In code

/src/Layout.tsx

import { Stack } from '@krackedui/motion';

export function Layout() {
  return <Stack gap={{ base: 2, md: 4 }}>…</Stack>;
}

© 2026 Motion. Internal documentation.