Font Awesome

Design Systems: Embracing Consistency and Efficiency 

by Font Awesome

I’m consistently inconsistent. I don’t even know what I’m doing consistently.

At Font Awesome, we’re always looking for ways to streamline our work, create consistency in our design, and make stuff look, well, awesome. In this blog we’ll share insights from our recent chat with our very own Kelsey Jackson, who recently worked on our internal design system. 

What’s a Design System?

4 duotone icons: house with tree, pots and pans, pinball machine, trowel and bricks

If you’re unfamiliar with design systems, maybe breaking it down in a relatable way will help. Imagine a residential housing development where the houses share common architectural elements, but also allow for customizations — like, say, a chef’s kitchen or a mini-classic arcade game room (we can dream, can’t we?)  The architects have a master plan they work from, ensuring consistency in what they’re building while enabling efficiency in their work flow. Similarly, a design system is a collection of patterns and standards that enables designers to build applications and designs without reinventing the wheel every single time. It’s all about managing design at scale, reducing redundancy, and fostering a shared visual language.

The Journey of Building a Design System

When Kelsey tackled Font Awesome’s internal design system, he butted up against a few challenges. One of the key obstacles was wrangling existing technical debt, refining and standardizing components that had already been created. Imagine having multiple variations of buttons and filters that needed to be harmonized. It was a bit like herding cats, but doable. Balancing the exploration of new ideas while maintaining consistency within the shared visual language was important.

The Ever-Evolving Design System

4 duotone icons: lightbulb, rotating arrows, floppy disk, alarm clock

A design system is never truly finished — if you stay on top of changing needs it should evolve as your needs change over time. As you experiment with new concepts and get new insights, you update and refine your design system. It sort of becomes a living entity that adapts to the changing needs of your brand and users. Take on this iterative process, and if done well, your design system helps your team to work quicker and with more consistency. 

Bonus: Font Awesome and Shoelace — A Match Made In Fa-Heaven! 

In case you missed the news the first time around, Corey Laviska and his company, Shoelace, joined forces with Font Awesome back in the beginning of 2023. Shoelace brings a beefy open-source library of web components to the table, that helps compliment the power of design systems — so we’re super excited to see that partnership take off! 

Ready to Learn More? 

For those looking to dive deeper into the world of design systems, Kelsey recommended checking out Brad Front’s book, “Atomic Design” and the resources at the Nielsen Norman Group, who are pioneers in user experience and design. Follow Kelsey on Twitter at @paisley_darts