Discover the best system websites created by professional designers. Get inspired and start planning your perfect system web design today!

Samuel Hoang

A basic style guide for beginners. If this project gets enough appreciation, I'll make a 2.0 Version with a full-on Design System + Layouts + Elements.

What's something you would want to see in an updated version?

Webflow | Style Guide

Nikolai Bain

My simple style guide template to help set up your project with a strong system from the get-go, and keep all main styles in one place as you expand your website.

Find out more about style guides/design systems here: www.nikolaibain.com/blog/webflow-design-system
More about me: www.nikolaibain.com

Webflow Style Guide Starter

EGO Creative Innovations

Webflow & Figma Wireframe kit is based on the Sprkl framework and full of components, blocks and sections to create unique experiences. 
This is V1 version of wireframe kit, so it comes with selected components (all components responsive for all webflow breakpoints).

- - - - - - - - - -

Figma file: https://www.figma.com/community/file/1182244925103410000

- - - - - - - - - -

The Sprkl is a framework which help you kickstart projects fast. 
For more information: https://www.thesprkl.io/ 
Documentation: https://www.thesprkl.io/overview

- - - - - - - - - -

Looking for a handcrafted exclusive Webflow website?
Let’s discuss how to bring it to life on https://www.ego-cms.com/

Sprkl Webflow & Figma Wireframe Kit

Finsweet

Client-first Wireframe 3 is based on IBM's Carbon design system. This is a resource released alongside our Client-first Style System for Webflow, a naming convention for every person, for every project.

This wireframe kit comes with everything you need for a project, all components are optimized and responsive for all breakpoints. All classes are clearly named to make your projects marketer-friendly and is perfect for beginners and experts. This build uses REM units to improve the website’s accessibility and responsiveness. 

Features:
➡️ 40 components
➡️ Based on IBM's Carbon design system
➡️ Open-source design license
➡️ Follows the Client-first Webflow style system

More info: https://www.finsweet.com/client-first/wireframe/3

What is Client-first? https://www.finsweet.com/client-first
Full docs: https://www.finsweet.com/client-first/docs/intro

Made with 💪 by Finsweet

Client-First 3 - Free Webflow Wireframe

Client-First Wireframe 1 is based on a custom designed wireframe. This is a resource released with our Client-First Style System for Webflow.

This wireframe kit comes with everything you need for a project, all components are optimized and responsive for all breakpoints. All classes are clearly named to make your projects marketer-friendly and is perfect for beginners and experts. This build uses REM units to improve the website’s accessibility and responsiveness. 

Features:
➡️ 59 components
➡️ Custom designed wireframe 
➡️ Open-source design license
➡️ Follows the Client-first Webflow style system

What is Client-first? https://www.finsweet.com/client-first

Full docs: https://www.finsweet.com/client-first/docs

Made with 💪 by Finsweet

Client-First 1 - Free Webflow Wireframe

Refokus

At Refokus, we use Webflow as an implementation tool, and as such we follow implementation best practices. 

Having a pre-define Style System allows us to keep things organized, keeping to our high-quality standards, and allowing our clients to scale their Website with proper guidelines.

After using this in hundreds of projects, we are now sharing it with the world. Have fun!

Refokus Webflow Styleguide

Client-first Wireframe 5 follows the Client-first Webflow style system. This is a resource released alongside our Client-first Style System for Webflow, a naming convention for every person, for every project.

This wireframe kit comes with everything you need for a project, all components are optimized and responsive for all breakpoints. All classes are clearly named to make your projects marketer-friendly and is perfect for beginners and experts. This build uses REM units to improve the website’s accessibility and responsiveness. 

Features:
➡️ 45 components
➡️ Follows the Client-first Webflow style system
➡️ Open-source design license
➡️ Follows the Client-first Webflow style system

More info: https://www.finsweet.com/client-first/wireframe/5

What is Client-first? https://www.finsweet.com/client-first
Full docs: https://www.finsweet.com/client-first/docs/intro

Made with 💪 by Finsweet

Client-First 5 - Free Webflow Wireframe

Client-first Wireframe 4 follows the Client-first Webflow style system. This is a resource released alongside our Client-first Style System for Webflow, a naming convention for every person, for every project.

This wireframe kit comes with everything you need for a project, all components are optimized and responsive for all breakpoints. All classes are clearly named to make your projects marketer-friendly and is perfect for beginners and experts. This build uses REM units to improve the website’s accessibility and responsiveness. 

Features:
➡️ 56 components
➡️ Follows the Client-first Webflow style system
➡️ Open-source design license
➡️ Follows the Client-first Webflow style system

More info: https://www.finsweet.com/client-first/wireframe/4

What is Client-first? https://www.finsweet.com/client-first
Full docs: https://www.finsweet.com/client-first/docs/intro

Made with 💪 by Finsweet

Client-First 4 - Free Webflow Wireframe

Client-first Wireframe 2 is based on GitHub’s Primer design system. This is a resource released alongside our Client-first Style System for Webflow, a naming convention for every person, for every project.

This wireframe kit comes with everything you need for a project, all components are optimized and responsive for all breakpoints. All classes are clearly named to make your projects marketer-friendly and is perfect for beginners and experts. This build uses REM units to improve the website’s accessibility and responsiveness. 

Features:
➡️ 45 components
➡️ Based on GitHub’s Primer design system
➡️ Open-source design license
➡️ Follows the Client-first Webflow style system

More info: https://www.finsweet.com/client-first/wireframe/2

What is Client-first? https://www.finsweet.com/client-first
Full docs: https://www.finsweet.com/client-first/docs/intro

Made with 💪 by Finsweet

Client-First 2 - Free Webflow Wireframe

Timothy Ricks

Fluid design precision for Webflow experts

Wizardry 2.0

Oracle Studios

Solar System Wheel Slider inspired by Vibrand Design.

solar-system-wheel-slider

TheSprkl is an extensive design framework that includes an advanced design system and allows you to easily and accurately translate interface design to Webflow, Flutter, React.

- - - - - - - - - -

• TheSprkl UI Kit for joint creating in Webflow and Figma. From landing page to complex ecommerce projects. Yet easy and fast.
Learn more and get your Free Promo version on https://www.thesprkl.io/

• Read more about TheSprkl https://medium.com/@eugenepolyansky/new-user-friendly-design-framework-for-global-it-products-61981ce5e93f

• Looking for a handcrafted exclusive Webflow website?
Let’s discuss how to bring it to life on https://www.ego-cms.com/

TheSprkl UI Kit Webflow Documentation v.1.0 Prod

Fernando Comet

ChainSystem the most intuitive and easy Class Naming System for Webflow. Work fast, be clear, be concise, be productive. 

chainsystem

UXDOX

Comprehensive prototype for Holyo online service where visitors can purchase digital gift cards, redeem physical cards, and access acquired valuables in wallets.

Holyo

Joshua

Global Barcoding Technology - RFID Technology & Labeling.

GBT - RFID Technology & Labeling

PandaPanda

ProductDesignSystem.com is a service where PandaPanda and dualoop will shape your Design System!

Product Design System

Alysson Myller

Developed for the dissemination of a system for private parking

Discover system websites built by the Webflow community

Discover system websites built by the Webflow community