Spacing tokens separate elements inside components and layout blocks — both horizontally, and vertically.
Our spacing scale helps make things consistent, while also making content easier to scan in a screen layout.
We use foundational tokens to set up all of our components and templates. They are used as a base for our semantic tokens.
We have a defined scale for accessibility so that when screens are increased in size our content dynamically grows. This is so our customers continue to get that incredible Wise experience no matter what settings they have switched on.
So you know what space to use, and where, we use semantic tokens. These tokens are linked to our foundational tokens so that you don’t need to remember that component default is size-16 — neat, huh.
- Use semantic tokens from the design system.
- Use semantic tokens, not foundational tokens in your work.
- Don’t use custom or hard-coded values.
Horizontal spacing refers to elements that go next to each other.
Cards are self contained blocks of content. In product these can be placed next to one another and scroll off screen.
Chips allow us to filter content and are typically placed next to one another and scroll off screen.
This is the overarching spacing that contains our mobile designs.
When there are no other specific spacing tokens for components, use component default.
Vertical spacing refers to how sections of a screen are separated. It also applies to the spacing between components.
Text is any copy that isn’t using a display style.
It’s built into our text styles, but you’ll need to add it in when they’re not in the same block of content.
Text to component
This refers to any text style that isn’t using a display style to any component.
Sections are groups of content that we need stronger proximity between so that it’s evident they’re separate.
Spacing is built in to all option components due to the large touch area. This means spacing between options is set to 0px by default.
When there are no other specific component spacing tokens, use component default.