Token Design System
Token-based system with dark mode and brand customisation.
Role
Product Designer, Engineer
Timeline
2024 — 2025
Tools
Figma, TypeScript, Style Dictionary
Summary
A shared token layer that lets one product ship under several brands — colour, type and spacing resolve at build time instead of being redrawn per client.
About Project
Product Overview
The interface had grown out of a UI kit, so every new brand meant a fresh set of screens and a slow drift away from the original design. The system replaces those copies with primitives that both Figma and the codebase read from the same source.
The Role
I led the system end to end: defined the token taxonomy, built the Figma libraries, wrote the pipeline that publishes tokens to code, and worked with engineers on adoption.
Problems & Challenges
Three brands, one codebase, and no agreed vocabulary for colour or spacing. Designers were picking hex values by hand and engineers were hard-coding them a second time, so the two drifted apart within weeks of every release.
Goals & Objectives
Make re-skinning a configuration change rather than a redesign, keep dark mode a first-class theme instead of an afterthought, and give engineers a single import that stays correct as the brand list grows.
Outcome
New brand themes now ship without touching component code, and the design-to-code gap closed to a single review step.