Sindeo Design System

Creating a universal design language

Laying a Foundation

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.

Building Blocks

Color, typography, components, and icons are the base of the design system.

Color

The Sindeo color palette was created to represent the brands ethos: open, knowledgable, transparent, progressive, and modern.

The bright, trusting, and inviting color palette.
Typography
Typography styles and line-height rules when pairing sizes.
Components
These are just some of the components used.
Icons
I developed an icon set because the icons that were being used before weren't cohesive or customized to our brand and were not optimized for legibility. I decided to use Material Design Icons as a starting point because I knew Google had figured out the best solution for look and feel, sizing, and guidelines and they provided great resources.

For the icons to feel unique to the Sindeo brand, but easily understood I choose to use the following characteristics:
This is the beginning of a larger set of icons.
Base
In order to have consistent and pixel perfect icons I used a 24pt by 24pt grid with keylines created from basic shapes. This standardization ensures that when other designers create icons that they fit the look and feel.
Grid
Keylines
Geometry
Following the keylines helps to unify and systemize the icons placement on the grid.
24pt by 24pt grid.
Guides created from circles, squares, and rectangles.
Text
When I first used text in icons I chose to use our brand's font, Open Sans, but soon found that it was illegible. I experimented with sizing and weight, but found none of the combinations worked well and the ones that did had a different aesthetic than the rest of the icons.

I resolved this issue by creating a font that aligned with the guidelines I set up. The 1pt stroke allows for the copy to be easily read at multiple sizes and the rounded corners/terminals provides the same aesthetic as the other icons.
Before
After
Breaking the Rules
Sometimes icons don't fit the grid or keylines perfectly. Points may not be on whole-pixels, but as long as the icon is legible at multiple sizes and at different screens resolutions than it is worth it.

Below is an example of how I created the phone icon. The shapes sit perfectly on the grid, but don't align to the keylines. The end result is a clear and easily understood icon that feels like it's part of the overall set.
Using basic shapes.
The outcome.

Modularity

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.

Comparing the modularity of elements.

Design Guide

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.

These are a handful of pages from the design guide.