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

Edgar Allan

This is the base document for Knockout.

Knockout is an end-to-end Figma to Webflow framework that helps designers and Webflow developers accomplish more together.

We created Knockout to solve many issues we encountered over the years of working in Webflow as an agency. The resulting toolset defines our approach to all projects, from single-page sites to large-scale, long-term enterprise engagements.

Put another way, this should help you knock sh*t out, day in and day out.

An example Marketing site can be found here:
https://webflow.com/website/madewithknockout

Knockout Framework v1.0

Knockout Webflow Framework

In order to scale and properly manage a site, a global Style Guide is the key. That's why we've decided to share Brand Guidelines Template we've been using for all of our clients and us for free to clone. 

We're on a mission to publish a Free resource each month, you can signup for our mailing list here: https://www.flow.ninja/free-resources

Happy designing!

Brand Guidelines and Style Guide

A clean and minimal style guide for Webflow projects. Use this to quickly and contextually adjust typography and colour right inside the designer. 

The naming conventions are based off the principles outlined in the Homerun styling system documentation. I hope this helps you hit your next project out of the park!

Documentation:
https://homerun-style-system.webflow.io

Homerun Style Guide

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 Styleguide for Webflow

Refokus Webflow Styleguide

This is a light variant of this style guide: https://webflow.com/website/Style-Guide-Template-Design-by-Aaron-Iker

Light Style Guide

Lighthouse Digital

This is my style guide created from a mixture of cloneables along with my own styling and classes for sections and containers. Also used with the Flowlibrary Webflow Mastery Course.

Lighthouse Digital Style Guide

Style Guide: Lighthouse Digital

Created this simple style guide to define default styles at the start of a project to avoid repeated styles in css.

This also includes a 16-grid column style and flexbox styles. 

The idea of this project is to create a default starting point for every Webflow project using CSS grid as main layout component and define flexbox classes as reusable as possible. 

This an ongoing project, but feel free to clone anytime. 

Will create documentation soon. 

Cheers!

style guide

Webflow Starter Styles (Grid Layout)

Starter style guide for yours projects :)

Follow — Like — Clone — Share

Brand Identity Guidelines Template

Starter Design System template

Foundations is a starting point or foundation of styles to start your project with thats based on bootstrap. I'll be updating this when i find better ways to do things or add more components. Also would be good to know if anyone has any suggestions on improvements I can make.

foundations

Foundations - A starting point

Workshore.io

Begin your next Webflow project with ease using our Webflow Style Guide Starter Kit featuring Workshore's style system.

This is built to provide you with a pre-defined set of utility classes that will assist you in building consistent and well-organized designs.

Our advanced elements have improved the client-first approach, ensuring faster, more accurate, and consistent development.

Some of the main features include - V1.0
- Clone and customizable to your specific needs
- It makes the Webflow development process more efficient and the
 future changes are less hectic
- Pre-built Global classes include responsive grids, flex layouts, and
 many more
- Workshore style guide improved the Client-first Webflow Style
 System
- Perfect for seasoned designers and beginners alike
- Use our prebuilt components in any project without the need to make any changes

Like our project starter?
Check out our free component library:point_down:
https://library.workshore.io/

Workshore style-system

Webflow Style Guide Starter Kit

Webflow style guide, which is perfect to set up your basic styles for the most important elements in your next project! it really helps you make faster edits to hover states, color, animation from a single page and reflect it to all elements without having to keep on checking in different pages.

👨‍💻 Custom Code for copying HEX Code directly. 
🆓 Free to Clone
🚀 100% CSS

Feel free to clone this and use it for your next project! ✨

Do reach out to us if you need any help at https://www.linkedin.com/in/devprakashsahoo/

Flowstyle

Flowstyle - Styleguide Template For Webflow

Simple and ready to use style guide, please leave a comment with any request
enjoy!!

Discover stylekit websites built by the Webflow community

Discover stylekit websites built by the Webflow community