Contributing to Pulumi’s first design system for a more consistent and scalable user experience
Overview
At Pulumi, I collaborated with a small team of designers and a front-end developer to create the company’s first design system. As the product and team matured, it became essential to establish a shared visual language and reusable components to support a more consistent and efficient design and development process across Pulumi Cloud.
Challenges
Before we had a design system in place, UI patterns across the product were often inconsistent, leading to duplicated work, design drift, and visual inconsistencies. Designers recreated components from scratch or reused outdated files, while developers built UI elements without formal guidance. This slowed down our workflow, made accessibility harder to manage, and led to a less cohesive experience for users.
Solution
Using an atomic design approach, we started by defining foundational tokens such as color, typography, and spacing. From there, we built out atomic elements (buttons, inputs, labels), then scaled to more complex molecules and organisms (form patterns, modals, navigation). We used Figma to create, document, and maintain our component library, ensuring design consistency across teams.
Throughout the process, I worked closely with our front-end developer to align design and implementation. We used GitHub to communicate around pull requests (PRs), review dev work, and ensure components were built to spec. This ongoing feedback loop helped us catch inconsistencies early and maintain quality across design and code.
In addition to component design, I helped define usage guidelines and documented behavior, edge cases, and accessibility considerations—ensuring our system was not only visually consistent but also functional and inclusive.
Outcome
The design system now serves as the foundation for all new work in Pulumi Cloud. It’s improved collaboration between design and engineering, reduced inconsistencies, and allowed us to scale product development more effectively. The system has also helped new team members onboard more easily, offering a clear and documented framework for building interfaces. While it continues to evolve, it’s become an integral part of our product workflow and design culture.