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

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?

Style Guide

Webflow | Style Guide

Flux Academy

Edit all your website's main styles from one organized page: in this project we've set up all your critical elements, you'll be reusing on every project so you can edit them and set up your project in a breeze.

Flux Starter Project - Style Guide

flux-starter-project-style-guide

This is the official starter project for Untitled UI Webflow components in Relume Library, the largest Webflow component library in the world.

This project contains a style guide page with pre-built classes. There are no pages, no layouts, and nothing to delete. It's the perfect starting point for any Webflow project using Untitled UI components in Relume Library, so clone away.

The Untitled UI Library uses the Client-first Webflow Style System, a style system built by the talented team at Finsweet, a game changer when it comes to keeping your Webflow projects more organized.

Like this project?

Support on Product Hunt
https://www.producthunt.com/posts/relume-library

Get access to Relume Library BETA
https://library.relume.io/

Watch the demo video
https://www.youtube.com/watch?v=lyiUdFZugok

To learn more about Finsweet's Client-first Webflow Style System
https://www.finsweet.com/client-first

Untitled UI Library Style Guide

Ready to go full site template. Designed for a hair salon, but it can be easily adapted for any service business. All services and blogs are CMS driven. Very easy to manage. Enjoy.

Nolas Salon

Salon / Business Template

Minimal Square

Style Guide with everything you need for starting a new project.

Enjoy.

[FREE] Minimal Starter

Cloneable Style Guide Template

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)

Memberstack

This is a React + Webflow project which lets you, your clients, or your team better understand Webflow's pricing models. You can think of it as a pseudo checkout experience for all things Webflow.

WF Pricing Calculator

The best of both worlds: Wizardry em-based fluid scaling with Client-first class structure and naming conventions. We created this template a few months ago as our agency's latest starter template, and it has been great. We have been longtime users of the Wizardry em-based methodology but loved the idea of Client-first structure and naming. So we combined the two into this template. Thought y'all might get some use out of it too. The main area where we hybridised the two systems is in sticking with REM units for small text elements, so that on desktop they don't end up too small on low-resolution screens. We also design our mockups at 1440px and in the template set the body font size to 1.111vw – which is equivalent to 16px for simple px-to-em conversion – and then set any font sizes in ems relative to 16px. Interestingly Wizardry 2.0 has taken the same approach; and I can attest to the fact it certainly makes things more manageable, with memorable and recognisable em units.

Wizardry Client First Template

Wizardry Client-first

This is "fork" of the Relume Library webflow starter that includes a custom page called designer guide that is a shortened walkthrough of the core principles from Finsweet's Client-First system.
The goal of this page is to help you when handing off projects to clients so that they can more easily and quickly understand the basics of Client-First and start editing their site in a non-destructive way. Often my clients get too intimidated by the Client-First documentation to dive into it before they edit the site and that leads to them undoing a lot of work I put in when creating a clean build. 

I’m going to start quickly walking through the Designer Guide page in handoffs so as to get clients up to speed with the basics of Client-First more quickly.

Credit to Relume for the Style Guide page and Finsweet for developing the Client-First system

library.relume.io
finsweet.com/client-first

Any suggestions or comments are appreciated :)

Designer Guide Clonable

Relume/Client-First starter project with a Designer Guide

While beginning my own website business, I have found that creating a brand page can save a lot of time. By creating color swatches, assigning Header and Paragraph fonts and sizes, and configuring button and link interactions it begins very simple to copy these elements across your new website. This strategy also helps keep consistency through all elements.

Branding Template

branding-template

Eikon Labs XD

Built this based on the rake.ai site. 
You can clone and adapt this for your own use. 
Reach out if you have any questions.

Rake ai

Site like Rake.ai

Starter site for a massage chair repair company based in the Pacific Northwest. They now manage the site in their own dashboard, but here's how the site ended up at the handover phase. 

This site features some simple interactions and CMS features that got the client up and running with the new business in no time.

BitRobotic

Voici mon site portfolio ainsi que de présentation de mon entreprise en tant qu'étudiant-entrepreneur.

Discover starter websites built by the Webflow community

Discover starter websites built by the Webflow community