Spacing
Spacing tokens and classes are used to create consistent spacing between components and content. We use a base-4 progressive scale.
Example & value
Tailwind class / Figma variable
Shoelace token
0.125rem (2px)
p-0.5, m-0.5…--sl-spacing-3x-small
0.25rem (4px)
p-1, m-1…--sl-spacing-2x-small
0.5rem (8px)
p-2, m-2…--sl-spacing-x-small
0.75rem (12px)
p-3, m-3…--sl-spacing-small
1rem (16px)
p-4, m-4…--sl-spacing-medium
1.25rem (20px)
p-5, m-5…--sl-spacing-large
1.5rem (24px)
p-6, m-6…--ts-spacing-large (Shoelace x-large token is 28px and not in our scale)
2rem (32px)
p-8, m-8…--ts-spacing-2x-large (Shoelace 2x-large token is 36px and not in our scale)
3rem (48px)
p-12, m-12…--sl-spacing-3x-large
4rem (64px)
p-16, m-16…--ts-spacing-4x-large (Shoelace 4x-large token is 72px and not in our scale)
5rem (80px)
p-20, m-20…--ts-spacing-5x-large