Develop organized and maintainable websites that your clients love
Client-First is a set of guidelines and strategies to help us build Webflow websites. Built and managed by Finsweet.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671354/659cc56ba90525d0d82e6078_variables-header-section.png)
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671354/659cc4ed5fde8849cf70bcbb_navigator-home-header.png)
Like thousands of developers, you will love using Client-First
Client-First help us build more efficiently as Webflow developers
Easy to update Style Guide
Create a project organization system to work faster with less effort.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc6717b6_style-guide-mockup.webp)
Know how to name your classes
Create clear and specific names for classes.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc6717b7_classes-selector.webp)
Folders view of the structures
Folders help us group, search for, and access elements in our project.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc6717b8_folders-image.webp)
Flexible spacing system
Make intelligent spacing decisions inside Client-First.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc671711_spacing-system.webp)
Unify a build strategy as a team
Creating a project that allows for scalability
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc6717b5_unify-build-image.webp)
New color system using variables
Explore the power of color variables in Webflow for consistency, global changes, and enhanced project organization
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671354/659c6c3b59da2fdc7d6b1d75_variables-color-image.webp)
Deep Documentation
The most important topics of Client-First.
Intro to Client-First with an overview of the essential principles.
Strategy for how we identify, use, and manage classes inside Webflow as a platform.
Explanation of rem units and approved rem values in Client-First.
Build and maintain a unified typography style system across the project.
Make intelligent spacing decisions inside Client-First.
Learn with Live Builds and our Clonables
Find live builds and Clonables of Client-First.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc671821_62655a11f0c46cb5d6522a1f_61c1a91e889e5f23b111e9e9_Structure.jpeg)
Learn how the Client-first structure helps to improve productivity in Webflow. In Client-first we follow a structure for our projects and using this structure ensures proper rendering in most sizes.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/659ccec57b329267fdaa689f_%23166%20-%20Client-First%20V1%20to%20V2%20live%20build%20with%20Joe%20Krug-2%20(2).webp)
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!
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc671818_62655a1049337b73ab338d94_61c1a8c2daf6d0283e1d3208_Intro.jpeg)
Learn the productivity benefits of using the Client-first Webflow Style System by Finsweet.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc6717f0_62654a6376dd5b32122eebf0_6112aeceb667ffd896829328_fs-wireframe-3-thumb.jpeg)
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.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc67180a_62654aecb0845473d1135d29_61e6f15b8dbb978bef6e5748_fs-template-9-thumb.jpeg)
Clean and fully customizable template built using the Client-first system for Webflow.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc671816_62654aea73ec36d9657672f7_6161ea89e29684fd28ead5ea_fs-template-6-thumb.jpeg)
Clean and fully customizable template built using the Client-first system for Webflow.
The community and Client-First
Here's what the Webflow community is saying
![Jeremy Leroux](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc6718fc_unJEVctR_400x400.jpg)
I have used webflow for a long time and nothing has sped up my development process as much as client-first. Simple straightforward and very adaptable. Also instrumental in landing my first agency freelance gig. Thanks @thatsfinsweet
![HBIII](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc67179a_V19XZNw3_200x200.jpg)
Built a couple of sites using the Client-First system by @thatsfinsweet and I'm completely hooked!
![Jesse Nieman](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc67162e_t15.jpg)
Woah...The Client-first Style System that @thatsfinsweet just released is about to become a best practice in @webflow development...Get on the train!
![John Iseghohi](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc671566_t9.jpg)
I have tried a lot of style guide frameworks, @thatsfinsweet client’s first system stands out. Easy to learn, and very easy to build on top. I officially have a webflow style guide system, I can trust.
![Marcel Deelen](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc671450_t6.jpeg)
Looking into @thatsfinsweet Client First system and realizing that a lot of my ways of naming CSS already matches with it. But so good to see how clean it all is. Will make me go from being like 60% okay to 100% okay when if comes to this stuff.
![Fry](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc67182d_k0mul6Hn_400x400.jpg)
Update — I think I'm going all in on Client First, build on first site so far was a breeze, didn't slow me down at all, quite the opposite. F*n yeah @thatsfinsweet!
![Jordan Kromwell](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc67180c_hBxelZiv_400x400.jpg)
When I started webflow, one of the things I struggled the most with was naming conventions. What a blessing client-first is. @thatsfinsweet
![Zebediah](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc671828_beZRxPcm_400x400.jpg)
I’ve been working in Webflow for about 18 months. I found @thatsfinsweet resources and client-first system about 4 months ago. My development speed, efficiency, and confidence have grown so much more since finding them!! So thankful!
![Ben Rückert](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc67180b_Ew8YEqFV_400x400.jpg)
Love the design! Client first is amazing
benefits