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/65735ae231ce6f85dc6719d6_apple-podcasts-livebuild.webp)
In this episode, Joe Krug will recreate the Apple Podcast website in Webflow using Client-First V2!
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/6573dde61dbab4bb0aab268b_typescript-live-buid-2.webp)
Watch Joe Krug as he live builds the Finsweet Hacks TypeScript website using Client-First V2.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc67181a_62654b4ca4cc8f5fd1d026a8_616ece1c13af9c2073469273_fs-livebuild-2-thumb%252520(2).jpeg)
The Discord homepage created with Client-first in Webflow.
![](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/65735ae231ce6f85dc6717fd_62654a647852973d43b15a83_6112aed5d6338c5c5caaea68_fs-wireframe-4-thumb.jpeg)
A custom designed light wireframe UI kit, built using the Client-first system for Webflow. There are total of 56 components you can start building with.
![](https://cdn.prod.website-files.com/65735ae231ce6f85dc671374/65735ae231ce6f85dc6717fa_62654ae8776abb05d26faf0d_6112b41de68efb6ce5163d8a_fs-template-2-thumb.jpeg)
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.
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