Create Consistency Across your Webflow Website with a Design System

It's inevitable for successful startups and businesses to grow, but with this expansion comes growing pains. One common problem that is starting to surface more often across the tech industry is maintaining a manageable design system that keeps a brand consistent as it scales.

For those who don't know where to start, it can be overwhelming at first.

Design systems are slowly becoming more and more commonplace across organisations, and even smaller sized businesses. These companies are seeing the value of keeping a managed look and feel throughout a system that spans across their product or website.

‍

Who needs a design system?

Just like skydiving and Pâté, design systems are not for everyone.

There is a certain level of scale that you should be at before it makes sense to start implementing a design system. If you don't evaluate whether you actually need a system, it can become another project abandoned shortly after starting.

If you're already having issues with consistency across your website, or are in a position where you're building new pages on a weekly or monthly basis, then you're in the right place.

Design systems work best for businesses that live primarily in the ever-evolving tech space, so they know that growth and change is inevitable. This means that if your business manages a digital product or provides digital services of some sort, you're probably in need of a design system across your website.

‍

How to set up your Webflow design system

Design systems are usually started on the design software that is used by your organisation (Figma, Sketch, Adobe XD, etc), but if you don't have any sort of system set up there, then it can be easier to start from your website.

As a long term goal it's best to have a system that spans across both the design and development teams to make it faster to conceptualize and build.

When you're just starting out, the first step is to gather together all commonly used text styles, colours, buttons, and any other components such as cards or feature sections. I will go into more detail about all these sections larter on.

Create a new page in Webflow and call it "Design System". Not surprisingly, this is where you're going to dump all your elements and components as you go through your website.

As it can get messy quickly, make sure you've set up some sort of grid or column system to keep everything aligned and easy to work through. A common practice in design systems is having a navigation sidebar, making it easy to move through different sections and know everything that is in the system at a quick glance.

‍

1. Text styles

When working with your text styles, you should first ensure that your body tag is using the primary font that you use for your brand, ensuring that this will be the font used throughout the entire website. This makes it so you don't have to individually change each text style to be using the correct font.

Next, set up all your bassline text styles to be the right size and colour. This means laying out all of your heading styles (H1, H2, H3...) so that you know that they are all a logical size. For example, you don't want your H2 to be bigger than your H1 and so on.

Once you have your basslines down, see how many alternative styles you have for the text used across your site. At this point you can start to see how you might have gotten out of control with using different styles for different uses.

This is an opportunity for you to refine your text styles down, making them easier to manage and use going forward.

Here you want to combine similar styles and discard the alternatives. You might have to go back to the pages that these alternatives are used on and bring them in line with the new styles as you go through.

Lastly, you don't want to forget to style your rich text elements to be aligned with your bassline text styles, as it can come in handy when using rich text in place of a text section. For example, I find using rich text elements easier to use for lists instead of setting them up with the list element, as you can quickly add or remove list items. You can create alternative rich text styles if they need to differ, like when used for blog posts.

‍

2. Colours

Your design system is the perfect place to keep your colours consistent and ensure you're not overflowing your website with tons of different colour styles.

You want to start with your grey tones (your black to white palette) that you use throughout sections and text styles. It's good to have enough grey tones to use for different sections, as it  makes it easy to tweak for hierarchical structures and legibility. Often, headers will be darker than paragraphs, and paragraphs will be darker than small text or fine print.

Now you can also compile all other colours used throughout your site and start to refine them down to a set range of hues. Again, you want to have a range of heavy-to-light colours so that it can be used throughout your website in a range of different types of sections.

It's best to have warning (red) and success (green) colours set up, even if you don't know when you're going to use them yet. Eventually there will be a situation where this will come in handy, such as form submissions.

Once your colours are set-up, I would recommend refreshing your Webflow global swatches with what you have now so you can use any of your colours at any time. You can always come back and tweak your global swatches anytime.

‍

3. Buttons

Buttons are one of the most important elements when it comes to driving users to take action. The colour  or style of a button tells a user how important the action is, and the text tells a user what to expect when they click it.

Gather all the different button styles you have across your website and start to refine them into only a couple of different styles that emulate the order of how important each action is. It also helps to have buttons for other important states such as a back button, or a disabled button.

4. Grid system

Having a grid system set up makes it faster and easier to work on large scale websites. When  starting off, it might seem better to use a mix of grid and column elements that all use different settings; however, I’ve found it easier to stick to one consistent system throughout.

The 12-column grid has been the easiest and most flexible system for me and my clients. It makes alignment and structure simpler to maintain as you add new pages or change sections.

It also makes it easy to adjust for tablet and mobile sizes, as combo classes enable you to move from a 6-column on desktop, to an 8-column on tablet, and to a 12-column on mobile. To make my system work best for me, I start with a class called "Column", then add different combo classes such as "Desk-6", "Tab-8", and "Mob-12".

In saying all of this, you can use whatever grid system works best for you. Just make sure you’re documenting it in a way that is easy for the designers and developers to understand and use.

‍

5. Spacers

There are many different ways to space things out on a website, and neither way is right or wrong. For my system, using spacers has made it easier to give sections more room to breathe without having to add an array of combo classes to every single new div.

I set up spacers using a scale of 8. For example, I can drop in a spacer with a size of 16, 32, 48, 64, 80, 96, or 128, depending on how much space I need. Having this set of different spacer sizes means I can move on without having to worry about adding more classes that will make my structure messier as I scale.

‍

6. Icons, forms, tabs...

There are many other elements used throughout your website that you can compile, adjust, and refine in your design system, but try not to get too carried away. Less will always be more, and if this is the first time you've started a design system then it's best not to overwhelm yourself.

With that said, you want to have a big enough system set up that you’re not constantly feeling stuck and having to add to it or design outside the system.

When building new sections and pages, your system should enable you to do it better, faster, and more consistent; so whatever setup you need to help you do that, you should build.

‍

7. Other components

Past your website elements, you can also gather all your components used throughout your website. Think of these as common sections that are used across your website that you might not be able to turn into symbols as there is too much variety within the section.

Some good examples of these are blog cards, product feature sections, and call-to-action banners.

Summary/Takeaway

There are many different ways to start integrating a design system across your organisation, and your marketing website is only one example of where it becomes helpful. Either way, if you know that your business is going to scale, then you want to make sure you keep your brand consistent as it grows.

Though design systems have been around for a little while now, more and more businesses  are only just starting to see why they are so beneficial for their design and development team to build and use. It enables businesses to have a framework to build more efficiently, consistently, and at a higher quality.

‍