Using Finsweet Client-First System in Webflow

If you’ve ever opened a Webflow project inherited from another developer (or even your past self) and found classes like .text-block-14 or .hero-div-blue-new, you know the pain of an unstructured build.

Webflow gives you the freedom to name classes anything. Without discipline, this freedom leads to "class soup"—a project where making one design change requires updating fifty disconnected elements. The solution is Finsweet's Client-First methodology.

What is Client-First?

Client-First is a set of guidelines and strategies for naming classes and structuring Webflow projects. It prioritizes readability and scalability. The core philosophy is that any developer (or technical client) should be able to open the Designer and immediately understand how the site is built.

Core Principles

1. Clear, Utility-Based Typography and Spacing

Instead of styling typography on specific elements, Client-First uses utility classes.

• Need a large heading? Use .text-size-large.
• Need margin underneath it? Add the combo class .margin-bottom and .margin-large.

This means if the client decides all "large text" should be 3rem instead of 2.5rem, you update one utility class, and the entire site updates globally.

2. The Core Structure

Every page follows a predictable DOM structure:

• .page-wrapper (overflow hidden)
• .main-wrapper
• .section-[name]
• .padding-global
• .container-large
• .padding-section-large
• Actual content goes here.

This structure guarantees that your global padding and max-widths are completely decoupled from your section backgrounds, making responsive design incredibly fast.

3. Folders for Organization

Webflow doesn’t have native folders for classes, but Client-First fakes it perfectly. By naming a class button_wrapper, the underscore acts as a visual folder in the Style panel. Everything related to buttons stays grouped together alphabetically.

Why Clients Love It

Despite the name "Client-First," it is primarily a developer framework. However, clients love the results. When they log into the Editor or Designer to make simple tweaks, the names actually make sense to them. They know exactly what .background-color-brand does without needing a computer science degree.

Adopting Client-First isn't just about writing cleaner Webflow sites; it's about professionalizing your agency's output.