z - multi-theme design token system
rebuilding foundations for scalability
the problem
The absence of a true theming architecture meant that switching between themes for new features or bug fixes involved manually changing colors, typography, and other foundations for each element. This proved to be a time-consuming, error-prone process that significantly hindered production speed. Besides that, the different naming conventions between Figma and Storybook led to a complex and inefficient workflow, causing constant misinterpretations and rework.
the work
A meticulous audit of the primary product theme was conducted, inventorying all foundations, base elements and components. A universal, scalable naming convention for all design tokens (up to tier 2) was established to support different themes.
Another critical component of this audit was a thorough review of the main theme’s accessibility, checking for WCAG compliance in color contrast, focus states, keyboard navigation, and semantic HTML, ensuring the new system would be inclusive by design.
The Figma design system was rebuilt with true theming capabilities using variables. The Storybook component library was synchronised, refactoring existing components to align with new naming conventions.
the outcomes
A unified language emerged, fostering enhanced collaboration as standardised naming conventions for design tokens and components significantly reduced misunderstandings. This led to seamless design handoffs, minimising rework. Scalability and efficiency dramatically improved through automation, with a single, unified system now managing all themes, enabling automated theme switching instead of time-consuming manual changes.
By automating repetitive tasks, designers were empowered to operate with greater efficiency, consistency, and strategic focus, positioning the product for sustained growth and innovation.
