When I first joined Sindeo there was no design guide or component library. It was just a blank slate. With the help of my co-worker we created a robust, modular and cohesive design system that allowed for designers and developers to easily create and build features with extreme accuracy and speed.
The goal of the design system was to unify our language and have our products be device and screen agnostic as seen in our mobile and web apps. In order to accomplish this goal we took the best industry standard conventions from the likes of Apple, Google, Facebook, and others and combined them together.
Color, typography, components, and icons are the base of the design system.
The Sindeo color palette was created to represent the brands ethos: open, knowledgable, transparent, progressive, and modern.
Open Sans was the typeface chosen because it was designed for use on digital displays and to be legible at any size.
The modularity of the design system allows for features to be built without negatively affecting others, rapid iteration, and easily adding or modifying elements. Below are some examples of this. We can add or remove elements without having to dramatically change the code or design. This allows for us to design for the future while also designing for the current. If a toolbar includes meta data and actions that won't be implemented for the MVP, they are hidden until that functionality is supported.
I took the lead on creating and maintaining a design guide and component library that was accessible online and as a Sketch file to keep all designs, old and new, consistent, allow anyone in the company access, and make it easier for developers to set up their own guide. This allows for easy and rapid feature creation for both designers and developers.