# Spacing

A 4px grid. Group tightly, separate generously, and let radii grow with size.

Foundation · Free · https://tactileui.dev/docs/foundations/spacing

## Nine steps

--tui-1__4px--tui-2__8px--tui-3__12px--tui-4__16px--tui-5__20px--tui-6__24px--tui-8__32px--tui-10__40px--tui-12__48px

## Where each goes

- **Inside a panel**: 20px · 24px with screws
- **Between panels in a dashboard**: 16px
- **Between page sections**: 72–96px
- **Parts in a tray**: 3–4px from the walls, 3px apart
- **Label to its control**: 6px

## Radii grow with size

4 · tags, displays7 · keys, fields12 · panels999

Round only for switches and round keys. Layout is CSS grid; blocks respond to their container with container queries, pages to the viewport.

## The full law

This page is a summary in plain words. The brain holds the law itself, in `grid-and-spacing.md`, written for an agent to follow. It ships with the Kit.