Size tokens are relative to the baseSize. Use size tokens to specify a fixed width or height when designing a component or layout.
When using size tokens in code, you can access them usingtheme.size[tokenName]
| Name | Value | Calculated | Description |
|---|---|---|---|
| 025 | 0.25rem | 4px | Our smallest size |
| 050 | 0.5rem | 8px | 50% of the base value |
| 075 | 0.75rem | 12px | 75% of the base value |
| 087 | 0.875rem | 14px | 87.5% of the base value |
| 100 | 1rem | 16px | 100% of the base value |
| 125 | 1.25rem | 20px | 125% of the base value |
| 150 | 1.5rem | 24px | 150% of the base value |
| 175 | 1.75rem | 28px | 175% of the base value |
| 200 | 2rem | 32px | 200% of the base value |
| 225 | 2.25rem | 36px | 225% of the base value |
| 250 | 2.5rem | 40px | 250% of the base value |
| 275 | 2.75rem | 44px | 275% of the base value |
| 300 | 3rem | 48px | 300% of the base value |
| 350 | 3.5rem | 56px | 350% of the base value |
| 400 | 4rem | 64px | 400% of the base value |
| 450 | 4.5rem | 72px | 450% of the base value |
| 500 | 5rem | 80px | 500% of the base value |