Overview
Let me first start out by saying this…Proof is a personal design system built from the ground up. Every design decision and all components were built by me with the intention of proving my expertise and providing value to others through side projects. The Proof design system will be the starting block for any side project that I have an opportunity to work on.
I spent a large amount of time researching design systems from various companies for inspiration and to understand their process. Some of the ones I researched were Atlassian, Polaris from Shopify, Carbon from IBM, and the Cloudscape design system. I also spent time reading articles from multiple design system managers and designers. After completing my research, I decided to build my design system using the Atomic Design methodology.
Foundations
I wanted to ensure other parts of the design system (typography, colors, spacing…etc.) were a shared focus within the design system and not just some sort of add-on. So, I made sure the Proof design system would point out foundations. Foundations includes colors, grids, icons, shadows, spacing and typography.
Spacing
I knew before building this design system my spacing would be critical to everything I wanted to do. I went with an 8pt grid system for layouts and component building. In my opinion it is the most ideal method of designing for the web. The idea behind it is every part of the design system is divisible by 8. I not only used it for layouts and components, but also for typography and icons. To put it plainly…the math just works!
Typography
For typography I went with a Google sans serif typeface. I chose to go with Lato. I like the clean and professional look of Lato. Another reason I chose Lato is it has a good selection of weights. Weights that vary from thin to black and others in between. Due to that variety, I did not feel the need to include any other fonts in the design system. Lato can work as a heading and body text within the same website.
Colors
I included a “mix bag” of colors for my design system. Blues, grays, reds, orange, and greens are all a part of my color palette. Although, I have a large variety of colors each one has a reason for its usage. This is also a part of owning a design system…documenting how, why, and when things will be used. Colors are divided into primary and secondary uses with white and black acting as my base colors.
Shadows & Icons
Rounding out my last two foundations are icons and shadows. For icons, I chose to go with the Heroicons library. They are simple, to the point, and like Font Awesome icons...which I’m familiar with. As with everything else in Proof they are based on the 8-point grid so I’m going with 16px, 24px, 32px, and so on. Shadows needed to be subtle but definitive. I included three levels…light, medium, and strong.
Components
Continuing with Atomic Design, I began component creation with atoms. For me, atoms included components like buttons, input fields, checkboxes, radios, and more. I’ve taken advantage of Figma’s component properties. For instance, buttons currently have properties like hierarchy, states, and sizes to name a few. Each component card (i.e. Buttons) offers a quick view table at the bottom that lists out all properties that specific component has available. These component properties provide me with the flexibility to design faster and efficiently. In true Atomic Design fashion these atoms can be added together to create molecules.
Buttons
Buttons are a core part of any design system and for very good reason. They're action components that can be used to take you from one page in your website to another. They can be used to add an item to a cart and purchase that same item. However, as I mentioned above buttons can have many different properties of which have been included in the Proof Design System.
Next Steps
Tokens & Variables: I will need to convert my local styles in Figma to variables. Moving to variables instead of local styles will give me the opportunity to implement tokens in Proof.
Molecules: The next logical step in building components following the Atomic Design methodology are molecules. Molecules are simply a combination of atoms.
Organisms: After atoms and molecules are built, the next set or grouping of components within Atomic Design are organisms. Organisms can use atoms/and or molecules to create sections of any user interface.
Documentation: This is really important if you want the design system to be used properly. It is not just a list of do’s and don’ts, but more of a guide to help designers build effectively and efficiently.
Learnings
First and foremost, patience and flexibility are some things that I’ve learned throughout this design system and others that I’ve been a part of. Design systems are constantly evolving and never fully completed. What made sense a week ago may not work today. Proof is no exception to that rule. I am continuing to build out the necessary elements to my Proof Design System.