Leadr Design System

Maintaining Design Documentation at Leadr

When I first joined Leadr, the company was in the midst of a UI refresh. While a small design library had been established, many pages had been left incomplete or inconsistent. As our projects became larger and more complex, it became increasingly important to create and maintain consistent components to ensure a cohesive user experience.

At a fast-paced startup like Leadr, maintaining documentation was a challenge—designs were constantly evolving, and decisions could change quickly. However, I worked closely with my design lead and one of our front-end engineers to establish patterns and standards that we could stick to whenever possible. Once we made those decisions, I documented them to ensure alignment across the team. Our front-end engineer later went and created common components to be used across the app.

Jump to Documentation

Building a Foundation for Consistency

I created detailed documentation for key UI components, including buttons, avatars, page headers, search bars, and card styles. This ensured that our team had a single source of truth, reducing inconsistencies and preventing redundant design work.

As part of a design consistency initiative, my design lead and I focused on standardizing page headers and buttons across all screen sizes, ensuring they remained functional and visually cohesive on mobile. Once I became proficient in managing our design variables, I revisited older design files to replace outdated elements with reusable components. This not only streamlined future updates but also minimized confusion for developers.

Taking Ownership of Design Documentation

As the sole person responsible for documenting our design system, I balanced this work alongside my primary projects, gradually expanding our documentation to include dropdown styles, menus, and other interface elements. What started as an unexpected challenge became something I genuinely enjoyed—I developed a deep understanding of how our components connected across different design files and took the initiative to learn best practices from other system designers.

Where the Project Left Off

Toward the end of my work on this initiative, I began collaborating with a front-end engineer to implement finalized components into Storybook. This step ensured that our design decisions were not just documented but also properly integrated into the product, making them easier to maintain and scale as Leadr continued to grow.