Base Sizes
The core sizing scale is used for widths, heights, and general layout dimensions. It follows a consistent scale to ensure UI elements relate to each other harmoniously.
| Variable | Value | Visual |
|---|---|---|
| --size-4xs | 0.125rem (2px) | |
| --size-3xs | 0.25rem (4px) | |
| --size-2xs | 0.5rem (8px) | |
| --size-xs | 0.75rem (12px) | |
| --size-sm | 1rem (16px) | |
| --size-md | 1.25rem (20px) | |
| --size-lg | 1.5rem (24px) | |
| --size-xl | 1.75rem (28px) | |
| --size-2xl | 2rem (32px) | |
| --size-3xl | 2.25rem (36px) | |
| --size-4xl | 2.5rem (40px) | |
| --size-5xl | 2.75rem (44px) | |
| --size-6xl | 3rem (48px) | |
| --size-7xl | 4rem (64px) | |
| --size-8xl | 5rem (80px) | |
| --size-9xl | 6rem (96px) |
Border Radius
Radius tokens define the roundness of element corners.
--radius-none0px--radius-xs0.125rem--radius-sm0.25rem--radius-md0.375rem--radius-lg0.5rem--radius-xl0.75rem--radius-2xl1rem--radius-3xl1.5rem--radius-4xl2rem--radius-full9999pxBorders & Outlines
Border Widths
--border-width-none
0px
--border-width-xs
1px
--border-width-sm
2px
--border-width-md
3px
--border-width-lg
4px
Outline Widths
--outline-width-none
0px
--outline-width-default
2px
--outline-width-strong
3px