Welcome
A scalable, flexible, and efficient way to build beautiful websites using Webflow.
Welcome to the Base System
Ever wondered how we build components and templates at Flowbase? This document covers everything you need to know.
What's included in the system:
Layout Structure Sections and Containers to structure and organize content easily and consistently.
Modern Spacing System Column and row utility classes leveraging
flex-gapto space elements.
Typography System A set of heading classes (h1–h6), subheadings, and paragraph styles for consistent typography styles an hierarchy.
Color and Variable Management Variables for colors, spacing, typography, and more for easy global design control
Buttons and Forms Pre-styled buttons and form elements connected to variables
Utility Classes Lightweight utility classes for adjusting layout, alignment, text styles, spacing, and more.
Why Use This System
The Base System is designed to be simple, familiar, and fast—making it easy to learn and adopt without reinventing the wheel. We avoid deep nesting, excessive combo classes, and unnecessary wrappers in favor of clear, purposeful structure. By creating custom classes and leveraging modern Webflow features like CSS variables, flex gap, custom properties, and scoped CSS, we can build layouts with fewer elements and cleaner code.
The result? Websites that are lightweight, robust, flexible, and easy to scale—all while maintaining full global control and development speed.
Support & Feedback
If you have any questions, feedback or would like to just say hi, you can get through to us via the following channels:
Email us at [email protected]
Last updated