BACK
The Problem
Managing 10+ digital products, across 3 platforms, with 5 sub-brands , 100+ designers and developers, with the added task of maintaining consistency and coherent user experience was impossible.
Three goals for the project
Theming – To be able to handle theming and dark mode
Consistency – To have a single source of truth for all platforms and stacks
Ease of communication – To allow designers and developers speak the same language
Solution 01 – Single Source for All Platforms
We made design tokens platform-agnostic by establishing a single tokens.json file as the one true source of design decisions.
From there, two translation pipelines branched out: Tokens Studio pushed values into Figma as styles and variables, while Style Dictionary compiled the same tokens into platform-specific formats — CSS and Sass for web, Kotlin for Android, and Swift for iOS. One change in the source file would ripple out to every platform automatically.
Solution 02 – Semantic Tokens
Rather than applying raw color values directly to components, the system introduced two layers: core tokens and semantic tokens. Core tokens mapped raw hex values to named references like core.color.blue.60, while semantic tokens mapped those references to meaningful roles like color.text.link.initial.
This abstraction meant that switching a theme required only remapping semantic tokens to different core values — no need to dig through over 1,000 individual token assignments manually.
Solution 03 – Naming Convention
A clear and consistent naming convention was established to ensure that every token was instantly understandable to both designers and developers. Tokens were structured by type, style, size, and state — for example, text.label.S.regular.initial — making it easy to locate the right token for any use case without guesswork.
This shared vocabulary reduced back-and-forth between disciplines and minimized the misunderstandings that had previously slowed down handoff.
results
Not having to invent styles and make same decisions over and over again reduced time needed to ship products by about 15%
Using the same source for all of the platforms reduced the risk of inconsistent design decisions to almost 0.
Using the same token names in design and code removed the hustle of communication issues between different roles of contributors.
Read more