Rocket Design System

At Rocket Companies^®, our Design team has worked with a design system for years. Recently, we identified the need to replace our design system with an entirely new one, customized for our team to perfectly fit their needs. In August 2022, we released our very own design system called Rocket Design System (RDS).

A design system is a complete set of standards intended to manage design at scale using reusable components, patterns and other design elements. What makes a design system a “system” is that it links UI design components, UI code components and documentation into a single comprehensive structure.

This way of organizing not only benefits designers, but engineers as well. By componentizing good design and engineering best practices, design systems free up designers and engineers to spend more time problem solving, collaborating and building effective digital products. 

After some time with our previous open-source design system, we received feedback from team members and found that its scalability and foundational structure were not compatible with the work we wanted to accomplish. We also found that the team focused more on maintenance of the kit and code because of these challenges versus focusing on really solve issues.

Ultimately, this was causing tech teams to create custom components that loosely aligned to the spark styling versus implementing the design system. For those reasons we decided to decommission spark and start RDS from scratch.

In our experience, a company can know when it needs to move to a new design system when it identifies the opportunity to set new core standards that will work across all facets of the company. Secondly, there is an opportunity to have a design system that supports all needed tech stacks such as react, angular and even all our breakpoints like desktop, tablet and mobile. Lastly, this opportunity allows a design system to the point where versioning, maintenance and support are easier to do and can continue to evolve and push the design system into the future. 

With all opportunities laid out and examined, here are some RDS features that have been implemented.

RDS now includes: 

• 7 core foundations
• 41 components
• 400+ variants of components
• 37k+ words of documentation on components
• 4k+ words of documentation on foundations, etc.

The feedback shows RDS to be effective in solving some of the problems mentioned above and aid in creating consistent brand identity amongst all our products.

 If we haven’t convinced you yet, check out our designer’s feedback on using RDS:  

“Having a design system helps create understanding surrounding standards while designing experiences for the end-users. It’s helped in saving time as I don’t need to design components from scratch, I can focus on the problem and how to solve them, no matter how complex. The anatomy of components aids me as I collaborate with designers while creating for desktop and mobile. Without a design system, it would take lot of effort to document the component behavior and a lot of my day would be spent in back-and-forth convos with developers, explaining how the components should work.” 

-Arvindhan Subkanthan, Senior UX Designer 

“RDS has made it easier to find the necessary components and styles needed for our designs. Most importantly, having the grids and typography style helped take some guesswork out of spacing and hierarchy of the type.”

-Abriel Shipley, Senior UX Designer  

 “A standard set of components is critical for making cohesive designs that all share the brand standards for Rocket. Also, having a standard set of components dramatically decreases the amount of time spent on UI tweaks, and more time can be spent solving problems.”

 -Adam Carbeck, Associate UX Designer  

“It's flexible enough that we can make changes to work within our overall designs, while also being regulated to not break outside of brand.”

-Dylan Rea, UX Designer 

With the introduction of RDS, the Design team is able to spend most of their time on the things that matter most like, meaningful collaboration among designers, problem solving and user-centered design thinking. Countless hours of hard work went into creating this system and it was no small feat. Many congratulations and kudos go out to the teams and team members who made this possible!