# Foundations · Spacing KDS is built on a **4px base unit**. All spacing, sizing, and layout dimensions are multiples of 4. ## Scale | Token | px | rem | Use | |-------|-----|-----|-----| | `0` | 0 | 0 | Reset | | `1` | 4 | 0.25 | Hairline / icon-to-text | | `2` | 8 | 0.5 | Tight stack | | `3` | 12 | 0.75 | Default field-to-label | | `4` | 16 | 1 | Default container padding (mobile) | | `5` | 20 | 1.25 | Card inner gap | | `6` | 24 | 1.5 | Default card padding, section gap | | `8` | 32 | 2 | Form section separator | | `10` | 40 | 2.5 | Page section separator (small) | | `12` | 48 | 3 | Page section separator (default) | | `16` | 64 | 4 | Hero block padding | | `20` | 80 | 5 | Marketing hero | | `24` | 96 | 6 | Marketing hero, very generous | ## Density Product apps expose `[data-density="compact|default|cozy"]` on the `` root (see kdcmapper). Each density rebinds two CSS variables: | Density | `--gap` | `--pad` | |---------|---------|---------| | compact | 12px (`3`) | 14px | | default | 18px | 22px | | cozy | 18px | 22px | Use density for table-heavy / wizard-heavy screens. Don't fork component padding per screen — change density instead. ## Rules - ✅ Always pick from the scale. If the value isn't on the scale, you're probably making the wrong choice. - ✅ Pair gap and padding from the same step where possible (`gap-4` inside `p-4`). - ❌ Don't use 1px, 3px, 5px etc. as spacing — those are border / decoration only.