The sizing scale defines the set of consistent values used for spacing and dimensions across the system. It is used in layout-related props such as logical sizes as well as margin, padding and gap props. It replaces arbitrary CSS values with a predictable scale, making layouts easier to reason about and maintain. The scale follows a progressive step pattern, allowing small adjustments at lower values and larger jumps for layout-level spacing.
| T-shirt size | Resolved value |
|---|---|
| 3xs | 2px |
| 2xs | 4px |
| xs | 8px |
| sm | 16px |
| md | 24px |
| lg | 32px |
| xl | 48px |
| 2xl | 64px |
| 3xl | 96px |
| 4xl | 128px |
Scale values can be used anywhere sizing props are accepted.
<Box padding="md" /><Box margin="lg" /><Box inlineSize="2xl" />Custom CSS values are still supported.
<Box padding="20px" /><Box inlineSize="50%" />