Cadence Design System

overview

Joining the team at Stretto, I saw an immediate need for a unified design language across our product, Best Case cloud. The differences between the components used across the product led to inconsistency in user experience and inefficiencies for designers and developers. To tackle this, I collaborated with a small team of designers to create the Cadence Design System to bridge the gap and streamline our processes.

a tangle of uncoordinated components

During initial exploration, I noticed the product and development team had developed their own versions of components—sometimes with minor differences, sometimes major. To understand the scale of the problem, I conducted a thorough component audit. The results were clear: we had a dizzying number of redundant and inconsistent elements across the product..

I cataloged each component in Notion, creating a visual and trackable list of where each component stood in our development process. This allowed the team to identify quick wins and prioritize areas where consistency would have the greatest impact.

learning from the industry and atomic design

To ensure our design system was not only cohesive but scalable, I took inspiration from existing design systems by leading tech companies. However, with a small team and limited bandwidth, I focused on atomic design principles—breaking down elements from the smallest building blocks to fully reusable components.

Using atomic design allowed us to structure components so they could be mixed and matched across various contexts in both products, ensuring maximum reusability and adaptability.

making cadence work for both designers and developers

To enhance the usability of the Cadence Design System, I focused on updating reusable components in Figma by leveraging the properties feature. This innovation allows designers to efficiently pull in components and customize them for various states and scenarios without needing to create new elements from scratch.

For instance, the updated text input component in Figma enables designers to easily adjust the following aspects:

• Text Input State: Toggle between different states, such as default, focused, and disabled.

• Text Labels: Enable or disable text labels, or change the content directly within the component.

• Icons: Add or modify leading and trailing icons to match the context of use.

This level of flexibility significantly reduces design time and fosters consistency across projects, as designers can adapt components to meet specific needs while maintaining a unified style.

Reflecting on the original problem, I realized that if the Cadence Design System was to be successful, it needed to be as straightforward and useful for developers as it was for designers. I worked closely the UX Engineer to determine key details—such as CSS classes and usage guidelines—that could be included in the system. These added details made our components ready for use and easier to understand.

building for today and tomorrow

Despite this being a side project, I knew the design system had to scale as the team and product complexity grew. I developed nested components, used component properties to streamline variants, and created a documentation template in Zeroheight that offered a consistent format for each component. This would support our current team and set a solid foundation for future designers and developers.

so, did it work?

The Cadence Design System is constantly evolving, and have shown promising outcomes:

• increased efficiency: Reduced time on repetitive design tasks, allowing designers to focus on innovation.

• improved onboarding and alignment: Smoother handoffs between design and development, with less back-and-forth.

• enhanced consistency: A consistent and polished UI across both product lines, leading to a more cohesive user experience.

next steps

This experience highlighted the critical role of clear documentation and a continuous feedback loop in creating a sustainable design system. To help Cadence grow beyond my time at Stretto, I established a roadmap for future opportunities, focusing on standardization and scalability. I also introduced recommendations for version tracking in Zeroheight to keep the system adaptive and up-to-date.

With these foundational elements in place, Cadence is set up to evolve with Stretto’s products, delivering consistent, efficient design practices for the team and a cohesive experience for users well into the future.