Design Tokens introduced

Last week was a big week for the designops team. We hit the button to release a system-wide major update to our component library to consume our new base layer of design tokens.

We are excited about the possibilities that this opens up for us and the design system. We have been working on this for a while and are excited to see it come to life. Tokens brings us:

• Much greater flexibility for white label partner brands
• More confidence in decisions when designing or developing — semantic variables make selecting the right value easier!
• A connected (multi-branded) figma library and codebase
• The opportunity to explore multi-platform support

Head over to the new Design Tokens docs area for an overview of our approach and some technical details.

Thank you

Everyone that has been around for the last year knows how long of a journey this design token epic has been. Thank you to everyone that has contributed to this initiative and for allowing us the space to research and experiment with our tokens system. If you want a little extra context on why the challenge went so deep, our Product Designer Trenton Woodley gave a talk a couple of weeks ago at the first Into Design Systems Meetup about the complexities we encountered after diving in.

What's next

Given the major version bump, we expect a somewhat slow uptake. Please give the tokenised figma libraries and react components a try, pair with your designer to understand how to approach "thinking in modes" for your assets, and feedback to us any findings. We have plans to roll out further improvements to tokens, including support for typography, dark modes and compact UI styles, but we look forward to tokens becoming just another part of BAU for the designops team.

Please reach out if you have any questions or feedback or help on what you need to do to update your assets. We're available on Slack or email.

Posted 9/07/2024