Design system

Size

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 using theme.size[tokenName]

NameValueCalculatedDescription
0250.25rem4pxOur smallest size
0500.5rem8px50% of the base value
0750.75rem12px75% of the base value
0870.875rem14px87.5% of the base value
1001rem16px100% of the base value
1251.25rem20px125% of the base value
1501.5rem24px150% of the base value
1751.75rem28px175% of the base value
2002rem32px200% of the base value
2252.25rem36px225% of the base value
2502.5rem40px250% of the base value
2752.75rem44px275% of the base value
3003rem48px300% of the base value
3503.5rem56px350% of the base value
4004rem64px400% of the base value
4504.5rem72px450% of the base value
5005rem80px500% of the base value