Our team at Internet Brands audited and cleaned up features on the ‘Settings’ pages of our Content Management System.
Internet Brands builds websites for medical offices with our own website builder. Our design team was often tasked with designing features and functionality for our website builder.
I created a design system for type and color in Figma to use as building blocks for our designs. Below is the process and outcome of forming the Typography system.
I built a type system to bring consistency to the text styles on our site. Below is the process of how the system was created.
I researched examples of how other design systems organize their typography.
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.
The plugin did the rest, creating subfolders with the different weights.
We only kept the frame with the ‘Regular’ weight for the end product and we placed the other frames on a separate page for when we would need to make adjustments.
Below is an example of how we used text styles for consistent design in our modals.
Using the type system helped us put together designs more quickly and it provided designers with a common reference. The system made the text in our designs clearer and more unified.