| Step | Size | Utility | Use for |
|---|---|---|---|
0.5 | 2px | p-0.5 | Hairline separation — icon-to-badge nudges, focus ring offsets |
1 | 4px | p-1 | Tight pairs — icon to label, chip internals |
1.5 | 6px | p-1.5 | Compact control interiors |
2 | 8px | p-2 | Related items — control rows, chip groups, list gaps |
3 | 12px | p-3 | Grouped content inside a component |
4 | 16px | p-4 | Component padding — cards, panels, inputs' surroundings |
6 | 24px | p-6 | Section separation inside a surface |
8 | 32px | p-8 | Between distinct blocks on a page |
10 | 40px | p-10 | Page-level breathing room |
12 | 48px | p-12 | Major section breaks |
16 | 64px | p-16 | The largest sanctioned gap |
Intermediate Tailwind steps (5, 7, 9, 11, 14…) exist and are legal; the table shows the rhythm the product actually uses.
The same card twice. Left: as shipped. Right: the redline spec — tinted bands are the exact utility sizes, measured in the gutter like a Figma inspect.
Ships an undocumented density variant.
Ships an undocumented density variant.
Title to badge — a tight pair, one unit of meaning.
Between sibling buttons — related items.
A stated pixel is a request for a step. "16px padding" means p-4. "10px" has no step at the default unit — use p-2 or p-3, and say which you chose.
Arbitrary values (`p-[10px]`) break two things at once: the Figma sync (a value that isn't on the scale has nowhere to land) and the propagation rule (a literal px ignores the Foundation's unit and the scaling base). The utilities are the scale — styling essentially comes from Tailwind.