lensclear design system

Spacing

Source

One scale for padding, margin, and gap. The keys are the tailwind steps, so p-6 in a tailwind file becomes p="6" on Box.

Fifteen steps. Every spacing prop takes one of them. Margins and offsets also take the negative mirror, so mt="-4" is minus 16px, and margins take auto.

Scale

Each step and its px.

0
0px
0.5
2px
1
4px
1.5
6px
2
8px
2.5
10px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
24
96px

Usage

Gap and padding read the same scale, so rhythm holds across nesting.

First
Second
Third
<Box flexDirection="column" gap="3" padding="6">
  <Box>First</Box>
  <Box>Second</Box>
</Box>