Spacing
Spacing is the rhythm system built on a 3px base grid. Use multiples of 3 for margins and
padding to align with Windows Forms defaults and maintain visual rhythm.
Scale
Margin vs padding
Margin — outside the border
Padding — inside the border
Content
-
Orange #ff9800 — margin
-
Surface — padding area
-
Primary #2967c4 — content
Usage guidelines
| Context |
Value |
| Panel content margins (left/right/top/bottom) |
9px (3 × 3) |
| Between controls |
6px (2 × 3) |
| Label to associated control |
3px (1 × 3) |
| Between sections in a panel |
9px (3 × 3) |
Units
| Use case |
Unit |
| Typography, global layout |
rem |
| Component spacing tied to font size |
em |
| Borders, icons, 1px details |
px |