Tokens

Marita Purins

The introduction of variables to Figma and the ability to deploy tokens across both web and native platforms has significantly enhanced our global experience language. This article provides an overview of tokens, why they matter and how they will impact you.

What are tokens?

Think of tokens as design shortcuts. Instead of choosing colours or styles manually every time, tokens store these decisions in reusable, semantically named values. They act as a shared language between designers and developers - making design delivery more scalable and faster, more consistent and easier to maintain.

Why they matter?

Journey consistency – at scale: Tokens make sure every screen, button, and text element looks and feels part of the same brand experience - no matter who designs it or where it appears.
Accessibility built in: They help meet colour contrast standards and support features like dark mode (COMING SOON), so our products work for everyone.
Faster delivery: Designers and developers don’t waste time reinventing the wheel. Tokens speed up work and reduce errors.
Future-proof: As our design system evolves, tokens make updates easy. Change a token once, and it updates everywhere.

Your role in making tokens work

Using tokens isn’t just a design detail—it’s a brand safeguard. When teams stick to tokens:

Products feel unified and professional.
Accessibility standards are met.
Updates happen faster and with less risk.

If you’re unsure which token to use, check the GEL documentation or ask the GEL team. Avoid creating custom colours or styles - they break consistency and slow us down.

The Big Picture

Tokens aren’t just for designers—they’re for everyone who cares about delivering a consistent, accessible, and scalable experience. By using them, we make our products easier to maintain, faster to build, and better for customers.

Please ensure your teams understand they must use GEL tokens ‘as is’ for their design & development work. It’s the simplest way to keep our brand strong and our experiences seamless.

What tokens do we have?

These are the tokens we currently provide. Over time we’ll be adding more tokens to the system.

Colour tokens
Border radius tokens

How do I start using tokens?

Designers will need to add the GEL Tokens library to their Figma files. All GEL tokens are available in this library. Follow the steps below to add the Tokens library to your files.

In Figma open the Assets panel
Click the Add more libraries button
Locate the GEL Tokens library and Add to file

Note: Before using the tokens be sure to familiarise yourself with this system and always refer to the usage guidelines when applying tokens.

More information

The links below provide detailed, design principles and usage guidelines. Allow time to familiarise yourself with the system and always refer to the usage guidelines when applying tokens. If you have any questions please contact the GEL team.