Spacing

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.

A set of colour blocks.
Foundational tokens

We use foundational tokens to set up all of our components and templates. They are used as a base for our semantic tokens.

Name

Value

size-4

4px

size-8

8px

size-12

12px

size-16

16px

size-24

24px

size-32

32px

size-40

40px

size-48

48px

size-56

56px

size-64

64px

size-72

72px

size-80

80px

size-88

88px

size-96

96px

size-104

104px

size-112

112px

size-120

120px

size-128

128px

Accessibility scaling

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.

100%

85%

130%

155%

4px

3px

5px

6px

8px

7px

10px

12px

12px

10px

16px

19px

16px

14px

21px

25px

24px

20px

31px

37px

etc...

Semantic tokens

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.

Usage

  • Use semantic tokens from the design system.
  • Use semantic tokens, not foundational tokens in your work.
  • Don’t use custom or hard-coded values.

product screen with token visuals
Horizontal

Horizontal spacing refers to elements that go next to each other.

Name

Value

Accessibility scaling

between-cards

size-12

between-chips

size-8

screen-mobile

size-24

component-default

size-16

Between cards

Cards are self contained blocks of content. In product these can be placed next to one another and scroll off screen.

space between balance cards
Balance cards
Space between promotional cards
Promotional cards
Spacing between other cards
Others

Between chips

Chips allow us to filter content and are typically placed next to one another and scroll off screen.

Space between chips
Chips

Screen mobile

This is the overarching spacing that contains our mobile designs.

Mobile spacing
Mobile screens

Component default

When there are no other specific spacing tokens for components, use component default.

space between buttons
Buttons
Vertical

Vertical spacing refers to how sections of a screen are separated. It also applies to the spacing between components.

Name

Value

Accessibility scaling

between-text

size-8

image-bottom

size-8

display-text-bottom

size-16

text-to-component

size-16

content-to-button

size-24

between-sections

size-32

between-options

size-0

component-default

size-16

Between text

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.

screen title to body
Screen title to body
Body copy paragraph spacing
Body copy paragraph spacing

Image bottom

Our 3D assets contain built in padding, but sometimes require a little bit of extra breathing room.

Image to title
Image to title

Display text bottom

Display text require a bit of extra space before other text due to their tight line height, uppercase and bold format.

Display bottom
Display bottom

Text to component

This refers to any text style that isn’t using a display style to any component.

Title to component
Title to component
Body copy to component
Body copy to component

Content to button

When a button is displayed directly below the content or form and not in a footer.

Form field to button
Form field to button

Between sections

Sections are groups of content that we need stronger proximity between so that it’s evident they’re separate.

Launchpad sections
Launchpad sections
Between option sections
Between option sections

Between options

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.

Between activity options
Between activity options

Component default

When there are no other specific component spacing tokens, use component default.

Below section header
Below section header
Between form fields
Between form fields
Between buttons
Between buttons