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.
