Size
Size tokens are used for repeated components in the design system that require a fixed height, width, or both. Otherwise elements can fill or flex as needed.
when to use fixed sizes
USE FIXED SIZES
- ·Interactive elements like buttons, inputs, and controls
- ·Icons that need to align with text or other elements
- ·Avatars and profile images
- ·Components that appear repeatedly and must be consistent
DON'T USE FIXED SIZES
- ·Content containers that need to flex with their content
- ·Layout sections, page columns, or grid areas
- ·Text blocks, headings, or descriptive copy
- ·Anything that needs to reflow or adapt to screen width
scale
icon sizes
Icons come in two sizes. Use the base size by default. Use small only when space is very limited, such as within dense UI or inline with small body text.
--icon-size-base
24px
Base — default icon size
--icon-size-sm
16px
Small — use only in tight spaces
avatar sizes
Avatar sizes are fixed to ensure consistent presentation of profile images and placeholders across the product.
--avatar-size-xs
24px
--avatar-size-sm
32px
--avatar-size-lg
48px
--avatar-size-xl
56px
--avatar-size-2xl
72px
interactive elements
These tokens define the fixed height of interactive elements like buttons and inputs. Width is always flexible. Use these to ensure touch targets and visual weight are consistent across the product.