What is a design system?

Keeping a website consistent can get tricky — especially when updates happen quickly or multiple people are working on the same project. That’s where design systems come in. 

A design system is a toolkit of reusable styles, components, assets, and guidelines that help you build more efficiently and consistently. 

And you might be wondering, “Why are we talking about this now?” Investing in a design system early yields big returns. It cuts down on repeat work, keeps teams aligned on design choices, and speeds up the launch of new web experiences. A well-planned system also makes it easier to scale your sites in the future — whether you’re adding new pages, evolving your brand, or growing your business.

What makes up a design system in Webflow?

In Webflow, a design system often includes:

• Variables - (also known as “design tokens”) for frequently used values like color, typography, or spacing
• Styles - usually applied to tags or classes, these help you use styles consistently
• Components - reusable elements or groups of elements, such as nav bars or cards
• Page templates - prebuilt layouts that provide a consistent structure for common pages‍
• Shared libraries - the single source of truth that holds your design system in Webflow

‍

But there can be a lot more to a design system. Your design system might also include things like process documentation (like class naming conventions), accessibility guidelines (like expectations around using Webflow’s Audit panel)… and anything else that helps your team.

Ready, set, go! 

Click Complete & continue in the Course progress box on the right to keep learning.

Need help finding your way around? Learn how to navigate Webflow University lessons, courses, and learning paths, including how to mark items complete.