Spacing
Padding, margins and gaps on a 4 grid.
Draft
The values shown here are conceptual and may change.
Every step is a multiple of 4, and the key is the multiplier: spacing[4] is 16.
0
0
1
4
2
8
3
12
4
16
5
20
6
24
8
32
10
40
12
48
export const spacing = {
0: 0,
1: 4,
2: 8,
3: 12,
4: 16,
5: 20,
6: 24,
8: 32,
10: 40,
12: 48,
} satisfies Spacing;Usage
const styles = StyleSheet.create({
row: {
paddingHorizontal: tokens.spacing[4], // 16
gap: tokens.spacing[2], // 8
},
});If you need a value outside the scale, add a step instead of writing the number inline.