I began by analysing 40+ design systems built in Figma (via the Figma Community). This allowed me to study and extract common patterns for things like text styles, spacing, and colours. Why this approach? Before this project, I had only created style guides/UI kits, not a ‘standard’ design system. It was important for this project and my own personal growth, to get familiar the industry's best practices before tackling this. Studying these systems gave me key insights into organisation, naming conventions, scales, how to successfully apply these rules for responsive designs and more.

I focused on building flexibility into the foundation partly to ensure that the library continues to grow and evolve as we scale. Also because, every component needed to handle multiple states, adapt to different contexts, and work seamlessly across the main platform and other use case. This meant thinking beyond just visual consistency and aesthetics, to considering accessibility standards, scalability, responsiveness, and how engineering would implement these components. The key was starting with the constraints. By defining spacing scales, variables, colour tokens, and typography systems first, I created guardrails that made design decisions faster and implementation more predictable.

The system has successfully become the single source of truth, fully aligning design and development. Engineers now build and iterate much faster using documented components, and I can move quickly knowing that common patterns are already solved. Because of the cross-platform requirement, other use case has benefited immediately from every component built, it's a perfect flow state. The design system has also grown significantly since it was first built in Q1 2024. The addition of new platform features required specific components, pushing us from about 960 components to over 2,100+ More importantly, the system fundamentally shifted how the team approached product work. The long-term ROI I'd argued for at the start became genuinely tangible: faster feature development, fewer visual inconsistencies, and a scalable, dependable foundation.

Read more about this project