Spacing
T-shirt spacing scale for gaps, padding, and margins.
Gaps and padding use spacings. Prefer these keys on Stack, Box, and layout props — not arbitrary pixels.
| Token | Value |
|---|---|
| sizeNone | 0 |
| sizeXXXSmall | 2px |
| sizeXXSmall | 4px |
| sizeXSmall | 6px |
| sizeSmall | 8px |
| sizeMedium | 10px |
| sizeLarge | 16px |
| sizeXLarge | 20px |
| sizeXXLarge | 24px |
| sizeXXXLarge | 32px |
sizeNone0
sizeXXXSmall2px
sizeXXSmall4px
sizeXSmall6px
sizeSmall8px
sizeMedium10px
sizeLarge16px
sizeXLarge20px
sizeXXLarge24px
sizeXXXLarge32px
Icon glyph sizes
Section titled “Icon glyph sizes”Icon pixels are separate from spacing (iconSizes). Use them for WebIcon / glyph slots only.
xxsmall12px
xsmall16px
small20px
medium24px
large28px
xlarge32px
xxlarge48px
<Stack gap="sizeMedium"> <Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge"> Inset </Box></Stack>