Ryte Design System

We needed to update our first design system to be in style with the new branding. One of the Brand Palette colors, the blue, was specially selected so that it would be suitable to become a new main interface color. It is used with some tone variations for links, main buttons, charts, active state of the elements and so on.

The main brand color, green, became the secondary color. It is used e.g. for hover states, upsell buttons and in the navigation.

Bright green, red and yellow became the signal colors. However, to keep the signal palette consistent, and the color combinations fresh, I had to come up with additional color hues for backgrounds (original colors looked dull when diluted).

Chart colors were tested for accessibility in the grey scale. They had to have enough contrast. Sometimes customers still point out that certain feature is difficult for them to distinguish because of e.g. color blindness. We take such feedback as a high priority and trying to fix the issues asap.

To organize the process of updating design system in Figma and the component library in Storybook as smoothly as possible, I've went through all of the components noting the mismatches....

...and then asked for a developer access to the repository.

The final design system has a description of margins and spacing, border radius, typography, atomic UI elements and more complex organisms as cards, modals and tables as well as visualisation library. It allows to quickly create interactive prototypes and lets our Product Owners to sketch new features themselves.