One of the companies whose type system I reviewed was Uber. The Uber type system had a good model for size intervals. They also utilized folders for the styles in Figma.

I also took a look at the Airtable Type system. One of my takeaways was the inclusion of All Caps heading sizes.

Initially, I thought about fitting all the different styles into six headings, but after doing an audit of our site, there were a lot more than six heading styles being used. Some were bold, some were light, some were all caps. I decided to split them by size and created folders for them containing the different weights.

I was able to batch create these styles through a plugin called 'Styler'. After creating sizes for the default 'Regular' weight, I duplicated the frame to create 'Light', 'Semibold', and 'Bold' versions. I changed the weights and batch-renamed the text to reflect the weights.

Utilizing the plugin, I created subfolders with the different weights.

One example of how we used text styles for consistent designs could be found in our modals. We utilized
styles with locked in font sizes and weights to form a consistent look across the different modals.

Using the type system helped us put together designs more quickly and it made the text in our designs clearer and more unified.