Style Guide & UI Kit

Top of Mind Networks


As an evolving and growing business, a challenge Top of Mind faced was maintaining a consistent experience across their rapidly expanding product, Surefire. I created a centralized hub for showcasing Top of Mind's design rules, principles, and frontend components. When creating this style guide, I had three goals in mind: create a living cohesive design language, expedite design and development, and create a trustworthy environment for developers.

The Problem

Mismatched style guides, design rules, and components among different teams led to a lot of confusion as to what our product looks like. There became a very apparent need to have a style guide that could be used and understood by all team members spanning the entire company.


Competitive Analysis

With scattered ideas as to what our product should look like and few cohesive components to work with, creating the style guide and UI kit was a very large undertaking. I explored several different successful style guides online to draw inspiration on what componenets to include, general layout, and what language was used to explain design choices. Three of the biggest sources of inspiration came from Starbucks, Yelp, and Mailchimp.

User Personas & UX Goals

I identified 3 potential users to understand what the style guide needed to accomplish. By understanding my user's goals and pain points, I could design to solve for each.


To remain a leader in their industry and continue to build products that delight customers and meet their needs, Top of Mind needed to rethink how they approached product design. By implementing the new style guide and UI kit, Top of Mind prioritizes a unified system that can be understood and implemented by all teams. This understanding across the company ensures they are consistently putting out products that maintain a user-centric mindset and ensure customer satisfaction and retention.

View Style Guide