Mobile Style Guide

In 2018, PipelineDeals rebuilt their mobile application. They contracted a mobile developer to do the initial build before handing it off to us to continue to maintain and build it out. As soon as PipelineDeals took over the development of the new app I felt that one of the most important things to do was build out a style guide that could be referenced by engineers and designers. The contractor had handed-off specs on many aspects of the new app including font family, font sizes, and color hex codes but they were not delivered in a format that could be easily digested by designers or engineers.

In the web-application the product designers perform all frontend coding and therefore maintain the styling themselves. Since the mobile app was built in React Native the mobile engineers would be responsible for doing the frontend styling. For this reason, our styles needed to be very well defined and documented. The other purpose of this style guide was to create a design file that could be utilized by designers to pick and choose the components for future design work. I created this file in Adobe Illustrator(our default design application) so that myself and any future designers could easily select the individual elements and styles to create high quality designs.