Currently, in the tech and startup world design systems seem ubiquitous. To some designers, Google’s Material Design and Apple’s Human Interface Guideline are held in the highest regard as an example to emulate. Yet, design systems can find their roots much further back stemming from typeface and branding guidelines that were popularized after the industrial revolution with the spread of newspapers and other forms of mass communication. Pattern systems and guidelines for software specifically, however, originally came to be in the ’70s after computer systems’ increasing sophistication demanded it. Regardless of where they started, what a design system has become is a tool for organizations to make better products. For us at AlphaFlow our design system is an ever-evolving, reusable resource to help designers and developers build consistent products more efficiently.
1981 Xerox, Size and Positioning Considerations - source
AlphaFlow is rapidly scaling, and it was important for us to create a design system that could be leveraged to help streamline our processes, align all teams within our organization, and make the most consistent products possible.
The first benefit we’re trying to achieve from our design system is efficiency. Having documented, reusable components and patterns will free up our designers to concentrate on high-priority issues and speed up the overall process. A design system with a clearly defined and communicated naming system across our colors and components helps quite a bit with alignment and collaboration across an organization. Having a consolidated reference for all interfaces that anyone on any team can access is an invaluable resource. The interface inventory empowers teams to see all components and interfaces at a glance and see what’s different and what needs to be changed to make a more consistent product.
The approach we’re using is based on the Atomic Design methodology. Using this avenue components are broken down into their basic elements. I started by breaking down our interfaces into 3 categories:
1. Foundation – This includes the simplest elements that will be used to create everything in our products–the atoms. This includes color, our logo, typography, and other elements that cannot be broken down further. On each foundation page, we describe our standards for each of our foundations, provide visual representations, and guidelines for usage.
The foundation page that I find myself visiting the most is the color page. The color page houses all of our color models for each presentation, including the light and dark modes of each. The reason that these pages are so useful is that they give a visual example of the color, the name of the color used in the codebase that can be copied upon click, and lastly the associated hex code that can be copied and pasted as well. Super useful!
2. Components – A step up from the atoms, components represent the molecules. Our components include items such as buttons, inputs, calendars, and other components that are simple but include one or more elements from our foundation. Each component page includes a visual representation of the component, a description of the component, and a sample of live-editable code to convey how one might instantiate said component within our codebase.
3. Patterns – Our patterns will house the next level of interface complexity – the organisms. Patterns are created by leveraging multiple components and foundation elements in unison to create interfaces with more complex functionality. Each pattern page will contain a visual depiction of the pattern, as well as how the components within the pattern should be arranged together.
Lastly, we have a resource center that accommodates downloadable templates, logos, icons, and links to our Figma files that anyone can utilize. This has already made an impact on designers, developers, and non-product team members. Having a place to download and reference standard documents and icons has saved us a lot of time. Below you can find a picture of our Icon Library portion of our resources. Here you can search for any Icon we use in our codebase, the name to instantiate it within code, and the ability to copy the SVG code with a click. For designers this allows us to copy and paste any icon we need from the website directly into Figma!
As mentioned previously, design systems are ever-evolving, and we have plans to not only iterate on aspects we’ve already created but to continue to fully flesh out all of our components and patterns. Below you can find a link to our design system: Blueprint in its current state. Check it out now and check in periodically to stay tuned for updates!
About the author:
Emil is a product designer at AlphaFlow responsible for continued iterations on platform improvements and defining our internal design system. He enjoys the work of a designer because it’s a comfortable balance between creativity and problem-solving.
Emil earned his BA in Industrial Design from San Francisco State University which instilled his data-driven but user-first philosophy.