F3Planned
Spacing
4px-base grid, spacing scale, and rhythm guidelines. Dedicated spacing tokens will be added to tokens.css in Phase 3.
Spacing Scale
Use multiples of 4px. Tailwind's default scale maps directly to the 4px base grid.
p-1 / gap-14pxTight gaps, icon padding, compact rows
p-2 / gap-28pxDefault control padding
p-3 / gap-312pxCard inner padding (compact), extension rows
p-4 / gap-416pxStandard section padding, form fields
p-6 / gap-624pxCard inner padding (default)
p-8 / gap-832pxSection gaps, modal padding
p-10 / gap-1040pxLarge section separation
p-12 / gap-1248pxGenerous section gaps (landing)
p-16 / gap-1664pxPage section gaps (landing hero)
By Surface
| Surface | Recommended padding |
|---|---|
| Extension popup header | px-4 py-3 (16/12px) |
| Extension panel row | px-4 py-2 (16/8px) |
| Extension card | p-3 (12px) |
| Landing card | p-6 (24px) |
| Landing section | py-16 px-4 (64/16px) |
| Docs page | py-10 px-6 lg:px-10 (40/24px) |