Spacing.

It is recommended to use 8 point grid in Atomize Design System. To Quantize the spacing, it is recommended to use spacing values in rem. html has default font-size of 16 points, and therefore, using 0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 2rem, 2.5rem, 3rem, etc. will quantize the value and follow 8 point grid.

Example -

// Padding
p={{ xs: '1rem', md: '4rem' }}
// Padding Directional
p={{ x: { xs: '1rem', md: '4rem' }, y: { xs: '2rem', md: '0rem' }}}
// Margin
m={{ xs: '1rem', md: '4rem' }}
// Margin Directional
m={{ x: { xs: '1rem', md: '4rem' }, y: { xs: '2rem', md: '0rem' }}}
// Height
h={{ xs: '1rem', md: '4rem' }}
// Width
h={{ xs: '1rem', md: '4rem' }}