Build Webflow sites you’re proud to ship

Client-First is a set of guidelines and strategies to develop organized and maintainable Webflow projects. Built and managed by Finsweet.

Get the Cloneable

Read the Docs

The most used Webflow build convention

Used by people and teams to unify project development

CHALLENGES

Challenges in Webflow

be_predictable

How do I deliver a project my clients love?

BENEFITS

Like thousands of developers, you will love using Client-First

Client-First help us build more efficiently as Webflow developers

Amazing
benefits

fs_styleguide

Easy to update Style Guide

Create a project organization system to work faster with less effort.

All classes you need are ready to use

Easy to style and share with your client

Standardize processes across pages

fs_class-name

Know how to name your classes

Create clear and specific names for classes.

Intuitive naming convention

Component approach

Easy to find classes

fs_folders

Folders view of the structures

Folders help us group, search for, and access elements in our project.

Organize your project

Easy to find classes through the project

Multi-level folder

fs_spacing

Flexible spacing system

Make intelligent spacing decisions inside Client-First.

Spacing block strategy

Spacing wrapper strategy

CSS Grid strategy

fs_team

Unify a build strategy as a team

Creating a project that allows for scalability

Standardize structure shared across all pages

Scalable and easily manageable

Anyone understand the project

fs_variables

New color system using variables

Explore the power of color variables in Webflow for consistency, global changes, and enhanced project organization

Consistency across the project

Ease of maintenance

Improved readability and organization

Context for usage

EDUCATION

Deep Documentation

The most important topics of Client-First.

Read the
docs

DOCS

Quick Guide

Intro to Client-First with an overview of the essential principles.

DOCS

Intro

Strategy for how we identify, use, and manage classes inside Webflow as a platform.

DOCS

Utility Classes

Explanation of rem units and approved rem values in Client-First.

DOCS

Typography strategy

Build and maintain a unified typography style system across the project.

DOCS

Access full Documentation

Make intelligent spacing decisions inside Client-First.

EDUCATION

Learn with Live Builds and our Clonables

Find live builds and Clonables of Client-First.

Check real
projects

Finsweet

Video

Live Build 4

The Discord homepage created with Client-first in Webflow.

Finsweet

Video

Client-First V1 to V2 live build

Joe Krug will dive into the Webflow Designer and convert a website from Client-First V1 to V2.

Finsweet

Video

How to update Client-First V1 to V2

Want to learn how to convert a @Webflow project from Client-First V1 to V2? Watch this tutorial video as Joe Krug updates a V1 template project!

Finsweet

Cloneable

Template 3

Clean and fully customizable template built using the Client-first system for Webflow. It features 10 Static and 3 CMS Pages and can be used for all types of businesses.

Finsweet

Cloneable

Wireframe 5

A wireframe UI kit based on Gitlab's Pajamas design system and built with Client-first system for Webflow. There are total of 45 components to help you with your next project.