Building better websites, starts with foundations.
Flowbase wireframes, components, and templates are built with the industry-leading Client-First design system, giving you clear structure, documented standards, and scalable foundations for organized, maintainable Webflow projects.
More than 100k customers trust Flowbase
Flowbase wireframes and components are built using the principles and guidelines set out by the industry-leading Client-First design system and the official Webflow Way.
These frameworks guide our development and help you to build websites that are consistent, accessible and easy to customise inside Webflow.
Learn about Client-First
Learn about the #1 most popular Webflow framework which guides our product development.
Learn the Webflow Way
Discover the Official Webflow Way, a recommended set of principles in Webflow development.
Built on industry standards and the official Webflow Way.
Built with most popular Webflow design system, you can expect well-documented and recognizable class names, utilities, and development practices.
Trusted by 100,000+ developers
Flowbase has been developing Webflow components for over a decade, frequently updating our collection to stay up to date with the best practices.
Practical refinements to meet our needs.
On top of client-first, we introduce a small set of additional classes, variables and practices to better support our needs.
Columns & Rows
To make layout control faster, more explicit & reusable, we leverage gap spacing using dedicated spacing classes for columns and rows.
Sections
To simplify layouts, we merge padding-global + padding classes into the traditional section class.
Expanded Scale
For a clearer scale and additional room to expand, we replace semantic names like huge & gigantic with t-shirt sizing such as 2X Large, 3X Large etc.
Key system features to build better, faster
For complete information, we recommend reading Client First and Webflow Way official documentation.
Simple Page Structure
Each component begins with a section and a container to ensure content is consistently spaced, aligned and centered.
Modern Spacing
No more margin-stacking or messy spacing classes. We rely on native flexbox gap along with row/column utilities for clean, consistent spacing across all breakpoints.
Global Elements
Common elements like typography, buttons, icons are reused across a project and are modified with combo-classes.
Powerful Variables
Variables for colors, structure and more are used to make global changes across your project quicker and easier.
Organised Class Naming
Class names go from general to specific, with a clear strategy for easy identification and management.
Accessible Sizing
Elements are styled using the rem unit. This provides greater accessibility for website visitors.
Clone the Starter Project
The starter project comes with a style guide page containing all the classes and variables already setup. So you can start building and designing straight away!
