Spacing, layout and breakpoints

Breakpoints: Desktop ≥ 1024px, Tablet 768–1023px, Mobile < 768px (Figma frames 1440 / 768 / 375).

Token	Desktop	Tablet	Mobile	Use
--spacing-none	0	0	0	inside components (padding, gaps)
--spacing-xxs	2	2	2	inside components (padding, gaps)
--spacing-xs	4	4	4	inside components (padding, gaps)
--spacing-sm	6	6	6	inside components (padding, gaps)
--spacing-md	8	8	8	inside components (padding, gaps)
--spacing-lg	12	12	12	inside components (padding, gaps)
--spacing-xl	16	16	16	inside components (padding, gaps)
--spacing-2xl	20	20	20	inside components (padding, gaps)
--spacing-3xl	24	24	24	inside components (padding, gaps)
--layout-xs	32	32	24	between blocks and sections
--layout-sm	40	32	24	between blocks and sections
--layout-md	48	40	32	between blocks and sections
--layout-lg	56	48	32	between blocks and sections
--layout-xl	64	48	40	between blocks and sections
--layout-2xl	72	56	40	between blocks and sections
--layout-3xl	80	64	40	between blocks and sections
--layout-4xl	96	72	56	between blocks and sections
--layout-5xl	120	80	56	between blocks and sections
--layout-6xl	160	120	80	between blocks and sections
--layout-7xl	200	160	80	between blocks and sections
--layout-8xl	240	160	80	between blocks and sections
--icon-xs	12	12	12	icon size
--icon-sm	16	16	16	icon size
--icon-md	20	20	20	icon size
--icon-lg	24	24	24	icon size
--icon-xl	32	32	32	icon size
--size-xs	24	24	24	control height (sm 32, md 40, lg 48)
--size-sm	32	32	32	control height (sm 32, md 40, lg 48)
--size-md	40	40	40	control height (sm 32, md 40, lg 48)
--size-lg	48	48	48	control height (sm 32, md 40, lg 48)
--size-xl	56	56	56	control height (sm 32, md 40, lg 48)
--size-2xl	64	64	64	control height (sm 32, md 40, lg 48)
--container-padding	80	32	16	page container
--container-max-width	1280	704	343	page container
--section-padding	96	72	56	page container

Grid styles in Figma: Desktop 12 col (gutter 32, margin 80), Tablet 8 col (24 / 32), Mobile 4 col (16 / 16), plus 8px and 4px baseline grids.