Sizing
The design system uses a shared sizing scale from 2xs to 3xl, plus semantic control tokens for components such as buttons, badges, tags, switches, and inputs.
The sizing system is split into two layers:
- primitive tokens such as
spaceandfont size - semantic control tokens such as
control height,control padding inline,control padding block,control gap, andcontrol icon
This keeps typography and spacing flexible while still making controls line up cleanly on the same row.
Space Sizes
The space sizes are the primitive spacing tokens used for padding, margin, and gap utilities.
2xs (0.125rem)
xs (0.25rem)
sm (0.5rem)
md (0.75rem)
lg (1rem)
xl (1.5rem)
2xl (2rem)
3xl (3rem)
Font Sizes
The font sizes are the primitive typography tokens. These are separate from control heights.
For example, md typography is 16px, while md controls are 32px tall.
2xs (0.625rem / 10px)
The quick brown fox
xs (0.75rem / 12px)
The quick brown fox
sm (0.875rem / 14px)
The quick brown fox
md (1rem / 16px)
The quick brown fox
lg (1.25rem / 20px)
The quick brown fox
xl (1.5rem / 24px)
The quick brown fox
2xl (2rem / 32px)
The quick brown fox
3xl (3rem / 48px)
The quick brown fox
Control Heights
The control height tokens define the minimum target height for aligned controls. Text-bearing controls such as buttons, badges, tags, and details summaries should usually use these values as a min-height, then rely on control padding and line-height so custom content can expand cleanly when needed.
2xs (1.5rem / 24px)
xs (1.625rem / 26px)
sm (1.75rem / 28px)
md (2rem / 32px)
lg (2.25rem / 36px)
xl (2.5rem / 40px)
2xl (3rem / 48px)
3xl (3.5rem / 56px)
Control Padding Inline
The inline control padding tokens define the left and right padding for text-bearing controls.
2xs (0.375rem)
xs (0.5rem)
sm (0.625rem)
md (0.75rem)
lg (0.875rem)
xl (1rem)
2xl (1.25rem)
3xl (1.5rem)
Control Padding Block
The block control padding tokens define the top and bottom padding for text-bearing controls. These work with the control-height tokens so a one-line control lands on the intended size by default, while still allowing richer content to grow naturally.
2xs (0.375rem)
xs (0.375rem)
sm (0.375rem)
md (0.4375rem)
lg (0.4375rem)
xl (0.4375rem)
2xl (0.4375rem)
3xl (0.1875rem)
Control Gaps
The control gap tokens define internal spacing between icons, labels, and other inline control content. They are intentionally separate from the primitive space scale, which is meant for layout spacing such as stack gaps, margins, and section padding.
2xs (0.25rem)
xs (0.25rem)
sm (0.375rem)
md (0.5rem)
lg (0.5rem)
xl (0.625rem)
2xl (0.75rem)
3xl (0.875rem)
Control Icon Sizes
The control icon tokens define icon sizes that follow the same rhythm as the shared control scale.
2xs (0.75rem / 12px)
xs (0.875rem / 14px)
sm (0.9375rem / 15px)
md (1rem / 16px)
lg (1.125rem / 18px)
xl (1.25rem / 20px)
2xl (1.5rem / 24px)
3xl (1.75rem / 28px)
Border Radius Sizes
The border radius sizes are used for rounded corners on components.
none (0rem)
sm (0.25rem)
md (0.5rem)
lg (0.75rem)
pill (9999px)
full (100%)
Border Width Sizes
The border width sizes are used for borders on components.
none (0rem)
thin (1px)
thick (2px)