Defined values are used for padding, margin, and position coordinates.
Spacing is defined using REM (root em) proportions that are relative to the font size of the root element of the browser. We do not set a root em as this would create accessibility problems for users who may wish to set a different root em. For most users the default rem will be 16px. The pixel equivalents below assume a root em of 16px. The intention is that if a user sets a different root em in their browser settings the site design should scale accordingly.
Developers should, wherever possible, use the global SCSS variables when developing components. Directly setting the sizes (using px, em, rem, etc) within a component’s SCSS should be avoided.
Spacing can be applied using margin or padding. Both margin and padding share the same predefined scale.