Design systems create a bridge between designers and developers. They describe the rules, constraints, and principles of the company’s design language.
Intro
A few months ago I was playing Röki (by Polygon Treehouse) with my 6 years old son.
This is a stunning adventure game with a rich and wonderful story and fantastic nordic graphics.
While looking for inspiration for Cyabra’s design system I felt that this art is gonna take a big part in it.
Colors
This was my 3rd design system so it came very fluent. My friends on the design system’s slack channel were a huge help.
I’ve taken some screenshots from the game and looked for more inspiration on Instagram.
Next, I’ve reordered the images in a table extracted the key tones.
These colors were sorted into groups (blues, earth, reds, and greens), keeping in mind what colors types the platform needs (Primary, Secondary, greys, widgets, etc..).
On the marketing side, we had a minimal color set, which was also taken into account.
And viola, colors are ready.
Typography
As a continuous to the nordic colors, I was looking for sans and sans serif typefaces that will fit the overall feeling I was trying to create (and of course, the platform’s content, which is part analytics and part flow savvy).
I wanted a typeface for the headers and one for the running text and numbers and played around with few combinations until I’ve decided to go with Merriweather & Lato.
The styles were continuously changing as I created the design system alongside the flow screens. A good relationship with the gifted frontend developer was priceless.
Components
Cyabra didn’t have a product designer before joining, so the design was based on a library that the devs picked up.
I’ve restructured the library in Figma while progressing on the screens, adding each component (atom) at a time.
Using variant interactive components was a delight as after the initial hassle of creating it, the next screens were easy to build.
Wrapping up
The work on the design system is endless, but having a good structure and order from day one makes it scalable and easy to manipulate.
As mentioned, I was assisted a lot by our lovely community and was happy to give back when possible.