Foundations
Spacing & grid
A 4-point grid governs every gap, inset and control height. Thirteen spacing steps, nine radii and three border widths — chosen from, never invented.
Figma source: ★ Pixel Grid ↗The 4pt grid
Every measurement resolves to a multiple of 4 wherever possible. The odd steps that exist — 1, 2, 6, 10 — are for hairlines and optical corrections, not for layout.
Placement rules from the Figma grid page
Two rules are called out explicitly on the Pixel Grid artboards and are easy to violate without noticing.
| Rule | Token | Applies to |
|---|---|---|
| A text label sits 8px from the object it labels. | --spacing-8 | Field labels, checkbox and radio text, any caption bound to a control |
| Related controls group at 16px; unrelated groups separate at 24px or more. | --spacing-16 / --spacing-24 | Form sections, button groups, card contents |
Proximity is what tells a sighted user which label belongs to which control. When a
label drifts to 12 or 16px it starts to look equidistant between two fields, and users
fill in the wrong one. The for/id association fixes this for
screen readers; the 8px gap is the visual equivalent, and both are required.
Working width
The Figma page frames document two reference viewports and the working space inside each, after the 24px page gutters.
| Screen | Viewport | Working space | Notes |
|---|---|---|---|
| Standard HD | 1440px | 1392px | The primary design target. |
| Large HD | 1920px | 1872px | Extra width goes to content, not to wider gutters. Tile grids gain columns here rather than stretching. |
Radius and border
Nine radii exist; three are in real use.
| Token | Value | Applied to |
|---|---|---|
--radius-3 | 3px | The default. Buttons, inputs, containers, menus, tiles, table wrappers. |
--radius-5 | 5px | Scrollbar track and thumb. |
--radius-20 | 20px | Status pills only. |
--border-width-1 | 1px | Resting borders. |
--border-width-2 | 2px | Focus rings and error borders — thickness itself is a signal, not only colour. |
--border-width-3 | 3px | Active indicators: the tab underline, the side-menu left bar, the section-list marker, the banner’s left edge. |