Designing & building a design system from scratch in Figma based on Brand guidelines today used daily by 5 product designers and brand designers. Responsible for everything from component creation to icon design and collaborating closely with developers on implementation and design tokens.
1 Design lead
Me as the Product Designer
3 Front-end developers
When I started at Normative in September 2021, they were undergoing a rebrand by the design agency E-types. One of my early tasks at the company was to adapt this new brand into the product since the rebrand was focusing on the external marketing and company presentation of Normative.
The product at the time was a smörgåsbord of random colors, even though the brand at the time had a green primary color the header and UI-element had a blueish color and a childlike illustration-style that felt didn't really felt at home for a company that has scienficic intergrity as one of their most important values.
The new branding was bold and modern and really made us stand out from our competitors in the green-tech sector ditching the green all together going and opting for "Coral" as our accent color. With the rebranding assets we recieved a new font "Zichtbaar" some very high level mock-ups of how the product could look like, a total of 20 icons and a a sparse set of colors to use.
With the new font, it was not as much a swap-and-replace as we thought from the beginning. The new type has a smaller x-height than the previous font (OpenSans) we used which means even though we used the same font size it was percieved as smaller and harder to read. So we had to essentially bump up all of our font sizes having previously had 14px as font size for tables to be bumped up to 16px which and redefine all of our line heights to accommodate for the shorter x-height to increase readability.
A good think about the engineers at Normative was even thought the product was a bit immature they had still seen the value of using a design system so the product was built in Angular using Googles Material-UI components which made it very easy for me to do a design audit of the components we were using in the Normative application and how we could design them to adhere to the new brand.
We started to feel a bit limited, me as a designer being limited by the theming options in Material-UI, there was too many occasions where the standard reply from developers were "We can't change that because that is how the component works". The developers had also grown sick of Angular and its complexities, so we decided it was time to build our own design system to have full contol of the experience. We had a few early passionate adopters of Svelte, that were keen to try it out for real and replicated all of our Material-UI components into Svelte web components.
Figma components created
Figma library used by 4 Product designers + 2 brand designers
Product teams are using this design system for their features
One year later I was not the only designer at Normative any longer and the guidelines I had in my mind needed to be a penned down and easily accessible to ensure consistency. So we now have detailed guidelines on how to use type, which colors to use for text, accessibility recommendations and how to work with the grid.
We are still struggling a bit with our material legacy of having 4 different sizes of buttons which makes it hard for more novice designers to know which size to choose so next up is to reduce the complexity of our components.
One issue designers using the Normative design system often ran into was using the wrong colors for texts, borders etc. One way we ensure consistency in our design decisions and check accessibility requirements I introduced design tokens. So instead of designers having to remember that Grey-300 should be used for disabled text I added specific-tokens for each components like you see below where all the allowed colors for texts are defined as Figma Variables.
