Wise Design spacing refresh

The audit revealed inconsistencies in our spacing tokens and templates, with misaligned rules causing confusion across teams.

I standardised naming, structure, and global spacing rules to create a consistent, scalable system that was easier to use and maintain.

As part of the alignment work, I reviewed how spacing tokens were used across the product. I started by grouping them by size to understand scale relationships, then sorted them by usage.

This helped reveal inconsistencies in naming and structure, and gave me a clearer path for introducing more meaningful, semantic tokens based on actual design behaviours.

By baking accessibility scaling into our core foundations and components, we ensured the system could support all dynamic scaling sizes without breaking layouts or compromising design intent.

This approach allowed us to deliver a more inclusive experience by default, making accessibility a natural part of how we design and build.

We defined scaling rules based on where it would have the most impact on perceived proximity and usability. All vertical spacing tokens scale to support clearer visual separation as text sizes increase.

Horizontal spacing only scales in specific cases, such as when elements scroll off the screen. This ensures consistency without creating layout issues in constrained spaces.

To create consistent, scalable experiences, we applied scaling tokens not just to spacing but also to typography, asset sizing, and internal component padding.

This gave us full control over how components adapted across different settings, allowing us to test and fine-tune both individual elements and the experience as a whole.

Wise supports native platforms that allow for dynamic scaling to improve accessibility. As part of this work, we aimed to ensure spacing scaled alongside text to maintain clear proximity between sections.

To achieve this, we aligned on a consistent approach across iOS, Android, and web. We kept things simple by implementing percentage-based scaling mapped to each platform’s native settings.

The audit highlighted a few core spacing scenarios that appeared consistently across our product, such as padding, spacing between elements, and common layout structures.

These patterns helped us define a more focused and practical token set, tailored to how designers actually work and what the product truly needed.

To validate our spacing system, I created a game called Name That Space, where participants matched spacing names to examples across different UIs.

This helped uncover patterns and made it clear which names were intuitive and which ones needed improvement.

We started with a static foundational set using clear, scalable token names that gave us more control over the system.

From there, we created dynamic tokens using a percentage-based model. In Figma, we defined these as variables using modes, with 100% referencing the foundational value.

I created a shared public library in Figma for our designers, containing all of our validated horizontal and vertical semantic spacing values. These had been tested across different scenarios to ensure clarity and usability.

I also updated all of our templates to use these tokens by default, making it easier for teams to apply consistent spacing without needing to reference documentation.