Spacing
The WPP DS spacing system offers recommendations on building components in detailed UI.
Overview
Our spacing system helps you organize content in a way that provides a consistent visual balance, making user interfaces easier to scan.
4px spacing system
All spacing values are increments of 4 px, making it the basic unit of measurement (except for Size 3XS, which has 2 px). Use incremental spacing values to create well-balanced components and combine them into layouts with a predictable and consistent rhythm.
Flexibility
Horizontal vs vertical
To create a harmonic experience, consider horizontal and vertical spacing:
- Horizontal. Base horizontal spacing on our grid system and ensure consistent spacing between elements.
- Vertical. Keep a balance in the minimal vertical spacing and use the same rhythm between components.
Best practices
Do:
- Use the 4 px unit base (4, 8, 16, 24, and so on) for spacing.
- Feel free to add custom spacing values within the 4 px system.
Don't:
- Use different horizontal and vertical spacing.
- Use another unit base system (5, 10, 15, and so on).
Exceptions
Do what will be best for your layout. For instance, set the paragraph or icon paddings based on the line height when you want to center them within a component.
Specification
The following table outlines the spacing values and component sizes used throughout the design system. You can use it as a reference in your design.
| Token | Value | Usage |
|---|---|---|
| wpp-spacing-0 | 0 px | Placing objects without spacing |
| wpp-spacing-2 | 2 px | Pagination, Segmented Control (Size S), Tooltip, Popover |
| wpp-spacing-4 | 4 px | Leading icon, Action button, Inline message, Inputs, Text select, Contained combobox multiple select, Dropdown list, Context menu, Segmented control, Date picker, Draggable chip, Text-only button group, Text tooltip, Dropdown list menu, Tag, Action button group |
| wpp-spacing-8 | 8 px | Inputs with labels, Selection controls with labels, Modal window header, Text-only action button, Inline message (Size M), Validation tooltip, Dropdown list menu, Context menu, Regular / Multiple action buttons, Date picker, Inputs with icons, Search input, Read-only input, Time picker, Message toast |
| wpp-spacing-12 | 12 px | Input, Text area, Combined input & select, Contained single select, Dropdown menu item, Context menu item, Segmented control item (Size S), Selectable chip (Size S), Tag, Title & text tooltip, Draggable chip, Single date picker, Primary and secondary buttons, Secondary and action buttons |
| wpp-spacing-16 | 16 px | Buttons (Size S), Destructive button, Modal action bar, Message toast, Popover, Card (Size M) |
| wpp-spacing-20 | 20 px | Buttons (Size M), Tab, Modal header, Card (Size M) |
| wpp-spacing-24 | 24 px | Card grid, Card (Size L) |
| wpp-spacing-32 | 32 px | Tabs |
| wpp-spacing-40 | 40 px | Page section |
| wpp-spacing-48 | 48 px | – |
| wpp-spacing-56 | 56 px | – |
| wpp-spacing-60 | 60 px | – |
| wpp-spacing-64 | 64 px | – |
| wpp-spacing-72 | 72 px | – |
| wpp-spacing-80 | 80 px | – |
| wpp-spacing-96 | 96 px | – |