Object styles
The WPP DS object styling system provides specific shapes and effects for better visual communication.
Border
Borders help you outline the component frame and structure content. Position all borders inside.
Styles
| # | Token | Usage | Comments |
|---|---|---|---|
| wpp-border-style-solid | All borders except the Upload form | – | |
| wpp-border-style-dashed | Upload form | Dash: 6 px |
Width
| # | Token | Size | Width | Usage |
|---|---|---|---|---|
| wpp-border-width-s | S | 1 px | UI elements, dividers | |
| wpp-border-width-m | M | 2 px | – | |
| wpp-border-width-l | L | 3 px | – |
Border radius
In the WPP DS, all components have rounded borders. This roundness is carried through in the design of icons, too.
| # | Token | Size | Radius | Usage |
|---|---|---|---|---|
| wpp-border-radius-xs | XS | 4 px | Drop-down menu item, Context menu item, Checkbox, Tag | |
| wpp-border-radius-s | S | 6 px | Input, Dropdown, Button, Action button, Drop-down list menu, Context menu, Tooltip, Tree, List | |
| wpp-border-radius-m | M | 8 px | Input, Dropdown, Button, Toast, Text select, Popover | |
| wpp-border-radius-l | L | 12 px | Popover, Toggle, Data card, Modal window | |
| wpp-border-radius-xs | XL | 20 px | – | |
| wpp-border-radius-round | – | 50% | Floating button, Pill |
Box shadow
In the WPP DS, box shadow is reserved for transient components that appear elevated and are dismissable (for instance, Card, dropdown menus, and so on).
| # | Token | Size | Properties | Usage |
|---|---|---|---|---|
| wpp-shadow-grey-xs | XS | X: 0 | Segmented control | |
| wpp-shadow-grey-s | S | X: 0 X: 0 | Card | |
| wpp-shadow-grey-m | M | X: 0 X: 0 | Dropdown list menu, Date picker dropdown, Context menu, Card, Tooltip, Popover | |
| wpp-shadow-brand-m | M | X: 0 | Floating button | |
| wpp-shadow-grey-l | L | X: 0 | Modal window, Side modal, Card |