Spacing

Spacing is a scale where one step is 4px. Step 4 is 16px, step 6 is 24px.

The scale

00px

0.52px

14px

1.56px

28px

2.510px

312px

416px

520px

624px

728px

832px

1040px

1248px

1456px

1664px

2080px

Using it

The layout components take a step for gap:

<Stack gap={6}>...</Stack>
<Flex gap={2}>...</Flex>
<Grid columns={3} rowGap={4} columnGap={8}>...</Grid>

In CSS, each step is a variable. Steps with a dot need a backslash:

.toolbar {
  padding: var(--su-spacing-4);
  margin-top: var(--su-spacing-0\.5);
}

Breakpoints

The preset defines these breakpoints. The library components themselves are not responsive by prop; Grid with minChildWidth adapts to the space it has.

Token	Value	Notes
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px