Kickstarting a Design System

Starting from scratch

In 2022 Ribon went through a complete rebranding. Knowing that color and logo changes in the product’s interface wouldn’t be enough to adapt it to the new visual language, we decided to rebuild the product’s design system. We studied about it, talked to other professionals and decided that our design system had to be a guide to how the product’s interface structure should work and a tool to make the design deliveries more efficient and visually consistent.

Interface grid

Before any component, we defined that the screen’s grid structure would be a column-less 8 pixel grid. Thanks to that the grid had great horizontal fluidity and a clean vertical spacing between components. Since we had mobile and desktop interfaces, we set up alternative grids for each relevant resolution break relevant.

Icons

For the icons we decided to use the Material Design icon library because the art style was flexible enough to go with the new visuals and it was the library with the greatest variety of recognizable icons.

Typography

Ribon’s official fonts became Inter and Gambarino. We did many exercises to gauge how the fonts performed on UI design and defined the basic font style presets in Figma.

Colors

For the colors we made an extensive color theory research. As a result, we used the basic colors from the brand palette, derived UI friendly shades from them, formalized basic context usage and created tokens to properly identify each of them in code.

Rebuilding components

We had a lot of components from the previous style guide but, since many of them weren’t being used anymore, we rebuilt the most used and decided to create new ones as necessary.

An ever-growing design system

The design system would still grow and keeping it organized and updated with a small design team was the greatest challenge after setting it up. To tackle this we used Figma’s devmode to enforce the visual and structural guidelines in the developer handoffs, did our best to create a good file organization and component documentation and reviewed components and style guides when needed.