.png)
Design System
Design of the entire Cubbit Design System with a team of developers.
Project Overview
A design system (as it pertains to tech products) is more than a framework, UI toolkit or component library. It’s more than a style guide or set of code guidelines. It’s even more than the sum of those parts. A design system is an evolving ruleset governing the composition of a product.
At Cubbit, I'm the only person who is responsible for product design. The day can often be busy because you're handling multiple things at the same time. You have to define a product design strategy, deliver features, collaborate with product people, support developers and QA, interview users, and more.
Figma is the main tool I use for everything service-product related - all the design, exploration, and brainstorming sessions live there. A few months ago, we started working on a new app revamped in design and functionality. During the process, I needed a design system that would allow me to move quickly and create consistent prototypes in a short amount of time. Being the only product designer in the company, you often don't have dedicated time to build a design system. To save time therefore, I start by building the UI and converting all the elements into components as I go along. Doing so often saves time and helps me decide which elements are the most important at first.
Project Execution
To start populating the Design System I apply the basics of Atomic Design, starting with Atoms - colors, typography, icons, grids, spacing and all the other elements that will in turn go on to form the molecules of my Design System.
ATOMS
Color
For the primary color I used the light blue of our brand while for the secondary color I used its complementary, orange. Along with these I built the color palette with the addition of successful and failing colors, green and red, as per good design.
Subsequently I worked on the shadows, borders and background colors, our main theme is dark (choice made related to the development of the brand to emphasize the "nerd" part of Cubbit, linked to the world of technology as a characterizing factor).
Typography
In order to create an appropriate visual hierarchy on each screen, I defined a typographic scale. The font used is Nunito (Google Font) versatile for web use on different devices.
Spacing Scale
All components and layouts adhere to a spacing scale based on an 8dp grid. By sticking to 8dp increments I designed widths, heights, input buttons and every single element consistently.
MOLECULES
After building the first atoms and defining the guides of my Design System, I created all the necessary elements and molecules that form the interfaces.
Once the atoms were defined I proceeded to create the molecules that would then go on to define the Cubbit interface. To help me in identifying the most important recurring patterns I often start from the interfaces to deduce which molecule makes sense to add to the design system.
ORGANISMS
So I composed the organisms with the molecules and atoms from my design system.
A fundamental role in the design is played by the nomenclature of elements, especially colors. The color tokens follow a precise reasoning that allows you to easily manage the switch of the theme, from light to dark. I make an example: The primary blue color is called primary and it changes between the two themes, from #009EFF to #0065FF in the light one to keep a good management of the contrast between colors and therefore an optimized reading for the different themes. And so for all other colors as well.
Results
TEMPLATES
In conclusion some screenshots of the templates of the UI of Cubbit web that uses the Design System then extended to the mobile and desktop version.
