Size tokens
Size tokens refer to the spacing rhythm used throughout a design. They’re used to help create consistent experiences across different platforms, environments and screen sizes.
Border
Border tokens determine the stroke width and radius of different elements.
| Token | Value |
|---|---|
| width-xs | 0.5px |
| width-sm | 1px |
| width-md | 2px |
| width-lg | 4px |
| width-xl | 8px |
| width-base | 2px |
| radius-xs | 0.5px |
| radius-sm | 1px |
| radius-md | 2px |
| radius-lg | 4px |
| radius-xl | 12px |
| radius-base | 2px |
| radius-xs-hard-bottom | 0.5px 0.5px 0px 0px |
| radius-xs-hard-top | 0px 0px 0.5px 0.5px |
| radius-xs-hard-right | 0.5px 0px 0px 0.5px |
| radius-xs-hard-left | 0px 0.5px 0.5px 0px |
| radius-sm-hard-bottom | 1px 1px 0px 0px |
| radius-sm-hard-top | 0px 0px 1px 1px |
| radius-sm-hard-right | 1px 0px 0px 1px |
| radius-sm-hard-left | 0px 1px 1px 0px |
| radius-md-hard-bottom | 2px 2px 0px 0px |
| radius-md-hard-top | 0px 0px 2px 2px |
| radius-md-hard-right | 2px 0px 0px 2px |
| radius-md-hard-left | 0px 2px 2px 0px |
| radius-lg-hard-bottom | 4px 4px 0px 0px |
| radius-lg-hard-top | 0px 0px 4px 4px |
| radius-lg-hard-right | 4px 0px 0px 4px |
| radius-lg-hard-left | 0px 4px 4px 0px |
| radius-xl-hard-bottom | 12px 12px 0px 0px |
| radius-xl-hard-top | 0px 0px 12px 12px |
| radius-xl-hard-right | 12px 0px 0px 12px |
| radius-xl-hard-left | 0px 12px 12px 0px |
| radius-base-hard-bottom | 2px 2px 0px 0px |
| radius-base-hard-top | 0px 0px 2px 2px |
| radius-base-hard-right | 2px 0px 0px 2px |
| radius-base-hard-left | 0px 2px 2px 0px |
Spacing
Spacing tokens are the values that provide consistent space across components.
| Token | Value |
|---|---|
| xs | 2px |
| sm | 4px |
| md | 8px |
| lg | 16px |
| xl | 24px |
| 2xl | 32px |
| 3xl | 40px |
| 4xl | 48px |
| 5xl | 56px |
| 6xl | 64px |
| 7xl | 72px |
| 8xl | 80px |
| base | 8px |
Breakpoint
Breakpoint tokens contain specific viewport values, as applied to CSS media queries.
| Token | Value |
|---|---|
| max-width-2xs | 319.98px |
| max-width-xs | 575.98px |
| max-width-sm | 767.98px |
| max-width-md | 991.98px |
| max-width-lg | 1199.98px |
| max-width-xl | 1399.98px |
| min-width-2xs | 0px |
| min-width-xs | 320px |
| min-width-sm | 576px |
| min-width-md | 768px |
| min-width-lg | 992px |
| min-width-xl | 1200px |
| min-width-2xl | 1400px |
More about our layouts
You can read more about our layout system, including the baseline grid, on the layouts page.
Read more about our layoutsWas this page helpful?
Get in touch
We’re on hand to answer any questions you have or help you with your next project.