All BigCommerce UI components should be built to be proportional to the body font size. As you change the body font size, as you might do in responsive web design, each component resizes correctly and proportionally to the body font size and to each other in the whole UI.

As such, all padding, margin and positioning values should be one or more of the predefined spacing values.


Declare all sizing and positioning values based off the spacing function.

Token Value
spacing("eighth") 0.1875rem
spacing("sixth") 0.25rem
spacing("fifth") 0.3rem
spacing("quarter") 0.375rem
spacing("third") 0.5rem
spacing("half") 0.75rem
spacing("base") 1 rem
spacing("single") 1.5rem
spacing("double") 3rem