The 4px grid and every fixed size. Generated from phase-2/kit/tokens.css (kit v3); the full page is docs › Foundations.
Every gap, padding and margin is a step on this scale.
Write var(--s-4), never 16px. A negative step is calc(var(--s-4) * -1). Tailwind's default spacing is also a 4px grid, so p-4 equals --s-4; the token is the source.
| Token | Value | Scale | Direct refs |
|---|---|---|---|
--s-0 | 0 | 0 | |
--s-1 | 4px | 64 | |
--s-2 | 8px | 64 | |
--s-3 | 12px | 64 | |
--s-4 | 16px | 64 | |
--s-5 | 20px | 64 | |
--s-6 | 24px | 64 | |
--s-7 | 28px | 0 | |
--s-8 | 32px | 64 | |
--s-10 | 40px | 33 | |
--s-12 | 48px | 43 | |
--s-16 | 64px | 63 | |
--s-18 | 72px | 0 |
Fixed heights for controls, rows and chips, desktop and phone.
| Token | Value | Use | Direct refs |
|---|---|---|---|
--control-h | 40px | button, input, select (desktop) | 30 |
--control-h-sm | 34px | small button, row actions | 64 |
--control-h-m | 44px | phone minimum tap target | 53 |
--control-h-m-lg | 48px | phone primary / sheet buttons | 64 |
--row | 44px | table row | 42 |
--row-th | 36px | table header | 0 |
--row-compact | 36px | compact table density (raised by data-table) | 0 |
--control-h-xs | 28px | inline buttons inside photo slots, compact pills (raised by form-controls) | 9 |
--chip-h | 22px | status chip height | 0 |
--chip-h-lg | 26px | header-size chip (raised by status-feedback) | 0 |
--tab-h | 40px | page / section tab strip (.tabs) | 0 |
--tab-h-m | 44px | phone tab strip, thumb height | 0 |
--kv-label | 120px | key/value aside label column (.k-kv) | 0 |
--kv-label-m | 104px | phone key/value label column (.k-kv) | 0 |
--li-min-h | 72px | phone list row without a thumbnail (.k-li) | 0 |
--control-h-xs--control-h-sm--control-h--control-h-m--control-h-m-lg--chip-h--chip-h-lg