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 classes
Figma variable
Shoelace token
0.125rem (2px)
p-0.5, m-0.5…3x-small--sl-spacing-3x-small
0.25rem (4px)
p-1, m-1…2x-small--sl-spacing-2x-small
0.5rem (8px)
p-2, m-2…x-small--sl-spacing-x-small
0.75rem (12px)
p-3, m-3…small--sl-spacing-small
1rem (16px)
p-4, m-4…medium--sl-spacing-medium
1.25rem (20px)
p-5, m-5…large--sl-spacing-large
1.5rem (24px)
p-6, m-6…ts-large--ts-spacing-large (Shoelace x-large token is 28px and not in our scale)
2rem (32px)
p-8, m-8…2x-large--ts-spacing-2x-large (Shoelace 2x-large token is 36px and not in our scale)
3rem (48px)
p-12, m-12…3x-large--sl-spacing-3x-large
4rem (64px)
p-16, m-16…4x-large--ts-spacing-4x-large (Shoelace 4x-large token is 72px and not in our scale)
5rem (80px)
p-20, m-20…5x-large--ts-spacing-5x-large