Space Tokens

Intended for use with margin, padding, grid gaps, positioning and other layout-related CSS properties. A space scale can be defined as either a plain object or an array, but by convention an array is preferred. This is an intentional constraint that makes it difficult to add one-off or in-between sizes that could lead to unwanted and rippling affects to layout.

— Theme Specification - space

Size Tokens

Intended for use with layout-related CSS properties such as width and height. A size scale can be defined as either a plain object or an array, but by convention an array is preferred. This is an intentional constraint that makes it difficult to add one-off or in-between sizes that could lead to unwanted and rippling affects to layout.

— Theme Specification - sizes

Breakpoints

Breakpoints are CSS lengths intended for use in media queries. In Styled System the breakpoints scale is used to create mobile-first responsive media queries based on array values.

— Theme Specification - breakpoints

For example, using a margin value of [ 2, 3, 4 ] creates styles with multiple mobile-first min-width media queries.

{
   margin: '8px',
   '@media screen and (min-width: 40em)': {
     margin: '16px',
   },
   '@media screen and (min-width: 56em)': {
     margin: '32px',
   },
 }
Copy