Webflow University's free cloneable style guide lays out the base tags you can style. Clone it, paste it into a new project and start with a design system.
Webflow is as easy to use and flexible as it gets, but when you start a project you can spend ages styling basic elements, then do the same thing again on the next one. Some folks set up a style guide for their project right from the start, so when you drop in a paragraph or whatever, the base style for that element is already there. That is the way it should be: a solid design system makes things simple and fast, and the rules for your project are laid down. The problem is that no one wants to add every base tag element, like <p>, <h1>, <h2> and so on, every time they start a new project. Yes, it saves time in the long run, but why do it when Webflow's experts have already done it for you? And yes, again, that's why we love the Webflow team.
Just follow the link to the handy cloneable project that Webflow University created, clone the project, open her up, copy everything and paste it into the style guide page of your new, empty project, then style the elements and you're done. Webflow did all the work, and the project contains every Webflow base tag element. All you have to do is style them and you have a design system for your Webflow project, something every Webflow studio or designer needs.
Head here to find the project.
What is the Webflow style guide template?
It is a free, cloneable Webflow project (the "Acme" style guide) that lays out the HTML tags you can style in Webflow on one page: headings, paragraphs, links, lists, images, quotes, labels, code and so on. Think of it as a blank design system. You are not starting from a white page, you are starting from a page that already lists everything you will need to style.
How to use it on a new project
- Open the link above and clone the project into your own workspace.
- Open the clone in the Designer and go to its style guide page.
- Select the style guide section on that page (everything on it) and copy it.
- Open your new project and paste it into a blank style guide page.
- Style each element once (your headings, paragraph, links and so on) and everything you build afterwards inherits those rules.
- Style the Body (All pages) tag yourself: a page's body can't be copied, so it isn't in the template. Select the Body element on your new style guide page and set your default font, font size, line height and background there (Webflow's HTML tags guide).
One thing to know: according to Webflow, styles applied to base HTML tags won't come across when you paste between projects. The pasted page brings the structure and classes, so you do the styling in your new project, which is the point of the exercise anyway (Webflow's note on copy and paste between projects).
Why start every project with a style guide?
Because you style each base element once instead of over and over. Change a heading or a paragraph style in one place and it cascades across the whole site, which keeps the project consistent and saves you time on every page you build later. If you want to go a step further, our post on Finsweet Client-First covers a class naming system that pairs nicely with a style guide, and our roundup of essential Chrome extensions for Webflow has a few more tools to speed up the Designer. More of our tools and tips live in the free and paid tools for small agencies and freelancers post, and if specificity ever bites you while styling, read mastering CSS specificity for Webflow.
For in-depth Webflow how-tos head here.
FAQ
Is there a free Webflow style guide template?
Yes. Webflow University publishes a free cloneable style guide project that contains the base HTML tags you can style in Webflow. Clone it, copy the style guide section and paste it into your own project.
Do base tag styles come across when I paste between projects?
No. Webflow notes that styles applied to base HTML tags won't be imported when you paste from one project to another, so plan to style the base elements in your new project, including the Body (All pages) tag, which can't be copied at all.
Do I need a style guide page on every Webflow project?
You don't need one, but it is worth it. Styling the base elements in one place at the start means every page you build afterwards inherits the same rules.
