Building a Design System
Canopy is the design system I created to support LocalHop and Kalpa, two products with similar UX patterns but different users and features. LocalHop helps libraries manage events and patrons, while Kalpa tracks educators' professional development. Both lacked consistent UI and design guidelines. My goal was to introduce scalable, accessible foundations and modern design practices for better structure and efficiency.
View in Figma
Role
Product Designer
Timeline
2023-2025
Devices
Web / Mobile
Scope
46+ components, responsive variants, variable tokens, accessibility baked in
Problem
Two Products, Zero Alignment
When I joined LocalHop, we faced a design challenge: there was no design system for our live product after losing access to the original Adobe XD files. Meanwhile, the Kalpa Team was also redesigning their product, leading to duplicated efforts. I created a unified design system for both teams, streamlining our time to market.
Getting Started
Research & Discovery
I wanted to figure out who would be using the design system, both directly and indirectly. So, I kicked things off by chatting with stakeholders, designers, and engineers to get a feel for their current challenges and needs. I also took a look at the interface to see what needed tweaking and made sure to jot everything down to create a roadmap for tracking our progress.
“The best way to understand the problem is to understand the people.”
— Don Norman
Define
Principles & Priorities
I established core principles for the design system to guide decisions for LocalHop and Kalpa. Accessibility was essential, ensuring high contrast and usability. Flexibility was also crucial to accommodate diverse products, teams, and users. With these principles, I created a unified visual language and tone of voice, and performed a gap analysis to find missing elements and inconsistencies.
Laying the Groundwork
Foundations
Canopy's foundations create a shared design language for all products, keeping things consistent and easy to use. We focus on color, typography, and size, making sure everything is simple for both designers and developers. This way, handoffs are quick, updates are easy, and the system is ready for the future.
“Atoms are the foundational building blocks of all matter—and in our case, all interfaces.”
— Brad Frost, Atomic Design
Components
Atomic Methodology
To keep things scalable and sane, I built components using atomic structure. It gave me a clean, modular foundation that could flex across both products without getting messy.
Example of the atomic method applied to a dialog component
Inside Components
Component Properties
The properties in the components let team members easily customize how they use them. Each component is built with simple properties that make it easy to switch things up and tweak them, helping us get the most out of them for all sorts of use cases.
Button Properties
Card Properties
Maintaining the system
Governance
Setting up governance for my design system was crucial. I developed detailed documentation, kept communication channels open, and established an efficient process for handling new UI element submissions. Each component was thoughtfully evaluated to prevent misuse or duplication of UI elements.
© 2025 Matt Girardi. Thanks for scrolling. All rights reserved.