Spacing
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.
Notes:
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 |