Sizing
The WPP DS sizing implements a comprehensive system that follows our grid and spacing guidelines.
Overview
Our sizing system enables you to create a layout with consistent and balanced sizing.
4 px sizing system
Use incremental sizing values with a step of 4 px to achieve the best visual accuracy and follow our Spacing guidelines. We also recommend adhering to our 24-grid layout architecture, as 4 px-based sizing works perfectly with it.
Max & min sizes
In some cases, we don't specify sizing values, but rather offer a minimum and maximum width, so that content can fit based on its size. For instance, Modals have min/max widths instead of a set size.
Best practices
Do:
- Add custom sizing tokens within our 4 px sizing system.
- Adhere to the layout and size of the specific components.
Don't:
- Assign size values to dynamic elements, such as body or heading height.
Specification
| Token | Value | Usage |
|---|---|---|
| wpp-size-icon-m | 20 px | Icons |
| wpp-size-height-20 | 20 px | Inline message (Size S), Checkbox, Radio button |
| wpp-size-height-24 | 24 px | Text select, Toggle, Tag |
| wpp-size-height-28 | 28 px | Chip (Size S), Segmented Control Item S size |
| wpp-size-height-32 | 32 px | Button (Size S), Input (Size S), Date (calendar), Inline message (Size M), Action button, Contained select (Size S), Dropdown menu item, Context menu item, Page control (Pagination), Segmented control bar (Size S), Segmented control item (Size M) |
| wpp-size-height-36 | 36 px | Chip (Size M) |
| wpp-size-height-40 | 40 px | Button (Size M), Input (Size M), Numeric input with steps, Combined input & select, Contained select (Size M), Contained combobox multiple select, Tab, Segmented control bar (Size M) |
| wpp-size-height-48 | 48 px | Toast |
| wpp-size-height-56 | 56 px | Toast with actions |
| wpp-size-height-60 | 60 px | Modal header |
| wpp-size-height-64 | 64 px | – |
| wpp-size-height-72 | 72 px | – |
| wpp-size-height-80 | 80 px | Navigation: Top bar |