Design Systems

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.

 

Röki-wood.

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.

Design System color inspiration

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.

Design system final colors

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.

Design system - typography

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.

Design system components
Design system componenets2

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.

© All rights reserved