LightStream's Design System

Having the development team at LightStream build the initial website design of the business resulted in several inconsistencies regarding the brand colors, fonts, and shapes. As the development team grew, the website went from developer to developer without instructions or guidance, resulting in too many blues, font styles, padding, and layouts. When I joined the design team, I knew the importance of bringing a digital visual guideline.

At the beginning of the project, I dove into heavy research. I read Medium articles, searched for guidelines on creating a collaborative document, and found a website that provided style guide resources for diverse companies. The research helped me understand what I wanted to accomplish. I also saw "Design Systems Handbook," an ebook by Invision, which changed my concept of how the design system process works. It also helped me understand where I began to collect the information.

I started by creating an inventory of all elements found throughout the LightStream website, beginning with the consumer and marketing side, and front-end development on the operational side of LightStream's loan applications.

Once I captured every button, icon, font type, color, form, field, and design pattern, I grouped them into categories. Starting with the website audit, I refined the elements by unifying the colors, adjusting the size, ensuring consistent line weight, and establishing a new naming convention.

I've adopted the following guiding principles: consistency, Self-containment, Reusableness, Accessibility, and Robustness. These principles ensure that the Design System performs consistently and with minimal bugs across different platforms and products. Interestingly, design and architecture have evolved into an innovative modular system known as atomic design.