Client-first Webflow Style System

One naming convention for every person, for every project

class abbreviations
fs-muted-arrow-icon
.clearly-named-classes
rules and requirements
fs-muted-arrow-icon
guidelines and strategies
developer lingo
fs-muted-arrow-icon
marketer friendly
web dev knowledge
fs-muted-arrow-icon
perfect for beginners and experts
Home header image

Why should you use Client-first?

It’s proven by many different people working on many different websites.

Scalable icon

We use Client-first for our smallest projects and biggest enterprise builds.

For everyone icon

Our beginner Webflow people use Client-first. Our experienced 6 year+ Webflow people use Client-first.

Everyone likes it icon

Everyone at Finsweet likes it, and you will too. Learn more and start using it today!

Naming convention feature

Guidelines and strategies, not strict rules

Build flexible Webflow websites that any human can understand. 

Make decisions based on what's best for your project.

Simple logic feature

Simple logic for creating class names

Meaningful names with a focus on organization. No abbreviations, no shorthand, no confusion. Read a class name and know what its purpose is.

Global system feature

Global classes for styles that should be global

Use our recommended globals. Everything else can be custom. Client-first identifies the most important global styles for power use while giving you the flexibility to build whatever you want.

Component and custom classes feature

Custom classes and components

A naming convention that encourages custom class creation! Stay organized with our prefix and component naming mentality.

Don't just take our word for it

Here's what the Webflow community is saying about Client-first style system.

Build your next project with Client-first