6 awesome design system examples you can clone

Design systems provide the pieces for building better websites. We'll explain what they are and share six that you can use for your own Webflow projects.

No items found.

A design system is a library of UI elements and other components that share a common design language.

Instead of starting from scratch, design systems allow web designers to pick and choose from a single collection of consistent and reusable components. If you’ve never used a design system, you’ll find them helpful in improving your workflow and delivering more cohesive work.

Here’s a closer look into what makes up design systems, and a roundup of some that you can clone for your own Webflow projects.  

Design systems bring harmony to the design process

The term “design system” can mean different things and it’s easy to get confused if you’re not familiar. Here’s what you need to know.

First, their primary purpose is to provide the necessary building blocks required to put together a web design. A design system can be something as simple as a small selection of UI patterns, or something as extensive as a collection of UI components, typography, templates, code snippets, and brand guidelines. 

Design systems are especially helpful when multiple people are all working on the same front end. They ensure that everyone follows the same brand and design guidelines. With product design teams often spread out across the globe, design systems aren’t just a nice thing to have in place, but a necessity. When everyone involved has access to the same design resources, it guarantees that the UI/UX and the rest of the visual design stay consistent no matter who on the design team is working on it.

The principles of design systems

If you’re looking at Airbnb’s check-in screen, Mailchimp’s header typography, or Google Android’s graphical user interfaces, it’s easy to forget that they all follow specific guidelines. The best design systems are well defined, follow a set of rules and design principles, and are barely perceptible as we navigate through them. Here’s a rundown of everything that needs to be considered in a design system. 

Design guidelines: These are the set of guides a given design system is built on. These include the objectives of a design system, the strategies behind it, and how the design system will help meet the project’s set goals.

Brand identity: These are the aesthetic choices that tie all of the elements together. Here, typography, spacing, color palettes, logos, and CSS styles are all defined so that designers know exactly how to create a web design that’s on-brand. This also extends to non-visual aspects of a website, like the tone of voice.

Elements: Elements are the functional components in a design system that reflect a brand’s visual identity and follow the defined design guidelines. 

Patterns: Patterns are the logic and structure that all elements must follow in order to stay consistent across a web design. Without patterns, things can get into disarray very quickly.

UI patterns help people navigate a website. Something like a checkbox or a date picker helps visitors complete actions. Bread crumbs and other UI elements related to navigation also help give users a smooth experience. No matter what type of element they may be or where they are in a design, they all need to follow a similar logic. 

Design systems that you can clone for free

We’ve given you a bit of a crash course in what design systems are made of. Now, let’s take a look at some you can clone for your own web design projects.

1. Carbon Design System

Screenshot of carbon design system. Left side of screen shows menu bar with "Overview" selected. Majority of screen shows gray background with black text "Building Blocks" and design elements: Accordion, breadcrumb, button, checkbox, code snippet, content switcher, data table, and datepicker

If you require a comprehensive selection of pieces to build your next Webflow project with, Carbon Design System offers a wide array of UI elements, UX design components, and code snippets covering almost everything you would need in terms of functionality and layout. 

Additionally, whether you’re looking for a primary button, secondary button, or ghost button, there are a number of options and sizes you can choose from. Along with some of these more basic UI elements, Carbon Design System also includes elements for more complex actions like submitting a form, uploading a file, or inputting text. We’re impressed by how much comes with this UI kit, which covers almost any type of functionality a designer may need.

Carbon Design System’s component library also includes plenty of options to put together a layout including a nice array of grid options. They’re organized in a straightforward way, making it easy to find what you need.

Carbon design system grid closeup

2. Webflow Design-System Template

Black background with white text: Webflow Design-System Template. Options to to select: Colors, Typography

Webflow Design-System Template has everything a designer needs to put together a clean and modern web design.

The components section is packed with useful UI patterns. There are accordions, buttons, tabs, and blocks for including embedded videos. All share the same refined sensibilities, making them perfect for those looking to put together a web design with a contemporary aesthetic.

Screenshot of FAQs fields with lorem ipsum text in the answer field.

A unique part of this design system is that it offers flexboxes.  A number of different flexbox options are included, making it easy to incorporate them into your own work. 

We’re also impressed with the typography options included. You’ll find styles for headers H1-H6 and a variety of paragraph text in different sizes and weights. With multiple typographic options, you’ll get the chance to experiment and determine what will look best in your own web designs.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Get started for free

3. Webflow style guide starter

If you want to put together a style guide for your Webflow website, this design system makes it easy with a straightforward user experience.

You can peruse the Webflow Style Guide Starter with a single scroll or use the left-hand side navigation to jump to different areas. There are sections dedicated to rich text, buttons, columns, icons, and other necessary elements.

What’s great is the simplicity in which these elements are presented, like in this section on grids. It’s easy to see how these arrangements differ from one another, so you can quickly find what you need.

Startr style guide, left side shows menu. Main portion of screen shows different grid layouts to choose from.

Not only does this offer a toolkit of well-designed UI elements, but you also get this useful set of icons to use anywhere you need them.

Startr style guide, left side shows menu. Main section of image shows Icons with text "Icons used across the website taken from the Prosphor Icon Pack"

If you’re looking to better understand how to use design systems with Webflow, check out this blog by Nikola Bain, the creator of Webflow Style Guide Starter.

4. Landing page system template

Web designers are often tasked with pushing out multiple landing pages for a brand or company. It takes a lot of work to build out multiple pages, so anything that can save time should be taken advantage of. This particular design system is the perfect starting point.

The landing page system template goes beyond just giving you a generic template. It looks good, and the content is under the control of Webflow’s CMS, which takes away the burden of having to make changes directly in the layout.

Landing page system template showing the Webflow Designer with a sample About page in the center. Sample page includes placeholder text and photo of a meerkat.

 Right from the get-go this design system has everything in place to put together a landing page. With very little effort it’s possible to go in, add your own logos, branding, and content. 

Screenshot of Webflow Designer showing CMS collections to landing pages to a sample page called "My first page"y

If you’re looking for a quick entry into crafting landing pages, this design system enables you to create something that looks and works great in a short amount of time.

5. Design system

Screenshot of Design system showing white background with menu bar in the top part of screen. Main area shows Responsive Grid with several column choices.

Design System comes through with an entire ecosystem to get a Webflow project up and running. Along with an excellent selection of UI elements, it also offers a multitude of layout elements like responsive flexbox grids, containers, and options for alignment. This is another design system that gives you everything you need in a single package.

We’re huge fans of style guides, and Design System includes one that you can customize to your own branding. Having a single source of truth that has both a style guide and design system, is an effective way to make sure that everyone involved with a web design project stays consistent with their work. 

Cards section of Design System template. Shows text describing the cards and includes three card options.

6. Dezin Design System

Dezin Design System not only assembles all of the patterns, components, and design elements any designer would want in their toolkit, it also contains a level of artistry that sets it apart. It speaks in a design language that’s more sophisticated and offers users a more stylized and unique library of components and patterns.

It’s clear — aesthetics matter — and you can see this in Dezin Design System’s extensive  collection of colors, smooth buttons, and minimal type. 

Dezin Design System color selection showing 3 rows of 6 colors each with color names and hex codes
Dezin Design System buttons — includes 5 options for different button styles

Along with a strong sense of design, there is also much here that’s practical for any project. You’ll find components for embedding videos, ready-built forms, as well as a section of eye-pleasing icons.

For those looking for a UX/UI design system with a more elegant visual identity — the Dezin Design System is worth checking out. 

Start your next website project with a design system

We’ve all stared at that blank screen, excited to bring an idea to fruition, but felt overwhelmed by the task ahead of us. Design systems give you the momentum you need at the top of the design process. You can immediately jump in and start adding the pieces to a layout, ending up with a visually pleasing design that’s held together by a strong sense of consistency. 

We always enjoy sharing  knowledge to help you on your journey. Please check out Webflow University, the Webflow Forum, and check in on this blog often to learn more about web design and expand your skills.

Published

October 25, 2021

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

Define your own content structure, and design with real data.

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

Set up lightning-fast managed hosting in just a few clicks.

More about Hosting