Get Our Free Design System Page Template [Webfllow Cloneable and Figma Files Included!]

In today’s video, I’m talking about our design system page template that allows you to build out a full scale design system for your website, using Webflow.

First things first, make sure y’all Like, Comment, Subscribe. Help more people see quality content like this.

Think of a design system as a cultivation of all of the digital assets for your brand, located in one place. This makes it easier for product designers, logo designers, UI/UX, and everyone in your design team to access these specific files and documents.

So what we’ve done is we’ve combined the best things of a brand guideline, the best things of design systems for your brand, startup, or business. We put it all into one page using Webflow.

So as you can see here, we’ve built out the page with a mockup logo and brand. And what we’ve done is we’ve sectioned and segmented this into specific areas.

Now just a side note: this is available to you absolutely free, no opt-in. All you have to do is click the link on the description to grab that file, and it’s located here, on Webflow, where you can clone the project or you can open a live site to view what that looks like.

Now here’s the way we’ve segmented this. When it comes to brand guidelines, design assets, and your entire system, you want to have a central location where anyone on your team can be able to access it and be able to make digital assets as a part of your brand easily.

Now usually you’ll have this on Google Drive, maybe you’ll have a specific location on Dropbox where you have these files, but what we’ve done is we’ve created this page so that it takes care of everything for you. And then on the left-hand side, it’s segmented by sections and it’s completely responsive on all device types as well.

So if you wanna take an overall view of the brand, you just click this, and it’ll break down into subsections. Brand Identity is here, where it’ll talk about the Primary Logo lockup, Logo Variations, and the Secondary Mark.

Now as you go through the next section, you’ve got Styles and Fonts. These are the specific fonts used and the layout and structure of that site. We’ve also included Colors, Color Shades, and then UI Components as well.

So anyone on your team can jump in here and say, “Okay, I’m building a landing page, or maybe I’m building a new ad, or some type of digital piece of content, or assets. I can jump right in here and get access to everything that I need pretty easily.”

So you can see that we have Icons here, Avatars. We try to include as much as possible to make it really easy for you to go in here and plug and play.

Now, the template’s really simple to use. I’ll open it on Webflow so you can see what that looks like. We didn’t integrate it with a CMS because it might be hard for folks to export or import it into their projects, but we’ve made it really easy structurally-wise to access and change up this content.

It’s also responsive as well, so you can see Tablet and Mobile as well. So you can see that it’s working on all device types properly. And it just goes to that specific section on the landing page.

So again, we wanted to create this to just make it easier for designers and other folks to check it out. I have a full video on design systems that you can up here on the upper right-hand corner. Otherwise, I hope you enjoyed this freebie, and I’ll see y’all soon.