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.

Become Client-First certified expert.

Apply for the official Client-First certification. Get reviewed by Finsweet and become a certified professional.

Apply now

EDUCATION

Learn with Live Builds and our Clonables

Find live builds and Clonables of Client-First.

Check real
projects

Finsweet

Video

I Rebuilt Webflow's Website

Join us for a live build in Webflow with Joe Krug. On today's episode, Joe will build the hero section of Webflow's homepage. Be sure to tune in and ask questions in real time!

Finsweet

Video

Live Build 3

The Outline homepage created with Client-first in Webflow.

Finsweet

Video

Client-First V2 live build - Finsweet Hacks TypeScript

Watch Joe Krug as he live builds the Finsweet Hacks TypeScript website using Client-First V2.

Finsweet

Cloneable

Wireframe 2

Light and clean wireframe UI kit that's based on GitHub’s Primer design system, built using the Client-first system for Webflow. It consists of 45 components.

Finsweet

Cloneable

Wireframe 3

A dark wireframe UI kit based on IBM's Carbon design system. It's built using the neat and clean Client-first system for Webflow and consists of 40 components.