eDesk Design System
Project Overview
A design system is a collection of reusable components
Guided by clear standards, design systems can be assembled together to build any number of applications, and the need for them go hand in hand with the need for scale, efficiency, and consistency in Design. I created the eDesk Design System to create that order at eDesk. In this project you will see some of the components I built for this design system but a design system is much more then just a component library. It is the central entity of our team and how we design.
I began building this design system in January 2021, it is still a work in progress.
Structure
Our design system is made up of 5 systems. Each system stems from our "Foundations" system in an atomic manner. Foundations contains all the core fundamentals of our product and brand (typography, colors, logos, spacing, shadows, borders and more.) The Web & Product systems have been built with the foundations system as a base and diverge accordingly based on the differences between our brochure website and digital mailbox product
Variants & Organisation
Using a developer-friendly naming conventions and best practices, our design system components are all based on variants. When us designers are designing in figma, this makes it super efficient for us to select relative states or behavioural status' from our navigator. This whole process is of course, time consuming when creating new components and keeping on top of our ever-growing component library, but it pays off in the end for a smoother, logical and faster handoff to our UI Developers. In addition to using variants, any component in our design system has been built using autolayout, meaning that our components are entirely reusable, scalable and prevents the need for needing to create different size instances of the same component and convoluting our system.
Foundations
Typography
For web we wanted to go with a clean and versatile font for this system. We chose Inter for in-product use because of it's humanist nature. It's also super versatile having several variations in weight which make it look great as a heading.
Buttons
We all know what buttons are, but what many non designers fail to realize is that a single button will have several different states. The most common being active, hover and disabled. Button types are Primary, Secondary and Disabled. You can see some of the buttons in a few of the different states below.
Color
Although I value an aesthetically pleasing use of color, I place a higher value on clear communication. Color supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements. To me colors should have meaning and be selected intentionally. Not based on what you like or what you think looks good. In eDesk every color has an assigned role, which hold a specific meaning based on how they function within the interface. By defining the color roles it makes things easy to modify and customize later. They also extend the color system so it works across multiple touchpoint.
