Design styleguide: size and spacing
As much as possible, size and spacing should be a multiple of 4px. This is obviously not always applicable, but let's look at an example with the primary button.
- its height is 40px, width is variable depending on the icon and label, so it's not applicable.
- in this case the button height dictates vertical spacing (label and icon are be vertically aligned to the container), so we are not able to apply the rule
- we still can decide spacing between the side borders and between icon and label, so we go with a 12px spacing from the borders, and 8px spacing between the icon and the label
As you can see from the example, there are some measures that follow the 4px rule, and some that don't. The ones that don't are dependent on constraints that don't allow us to apply the rule.