How To

Kickstart any Webflow Project by using the Webflow Acme Style Guide

Kickstart any Webflow Project by using the Webflow Acme Style Guide
June 9, 2024

  · 1 min

In this post, we'll point you to the little known Webflow Acme Style Guide to speed up any Webflow Project by creating your own design system right in your project.

So Webflow's as easy to use and flexible as it gets, but sometime you just spend so much time styling basic elements when you start out on a project and keep styling the same things over and over. Some folks start off by setting up a style guide for their project right from the start, so when you use a paragraph or whatever the base style for that element is already set up. As this is great, it's the way it should be, a solid design system makes things simple, fast and the rules for your project are laid down. Problem is, no one wants to go and add every base tag element like <!-- fs-richtext-ignore --><p>, <h1>, <h2> etc. etc. every time you start a new project. Yes, it saves times in the long run, but why do it, 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 clone-able project that Webflow University created, clone the project, open her up, copy everything and paste into the style guide page of your new empty project, now style them, and you're done. Webflow did all the work, the project contains every Webflow base tag element. All you have to do is style and you have a design system for your Webflow Project, something every Webflow studio or designer needs.

Head here to find the project.

For in-depth Webflow how-tos head here.


All Posts

Gradient Background