Typographic scales in design systems

Design systems are all the rage in the community the last few years and justifiably so. Other than guaranteeing visual consistency and code sustainability, they become the bedrock of scalability. To solve relevant problems, we recently decided at the company I work at to introduce a design system.

As with most things design, how we approach typography, along with space and colour, was crucial.

It was quite important whatever system we came up with to be flexible and able to accommodate different branding without having to change much of the code base. Our product is B2B and there is a need to change the visual language for different clients.

After some research, and with said restrictions and aims in mind we came up with a tokenized scale based on the Fibonacci sequence, which can be controlled programmatically.

You can have a look how the type scale renders at codepen