Welcome
Welcome to the Base System, a design system helping you to build better and faster with Webflow.
If you have ever wondered how we build components and templates at Flowbase, this document will cover everything you need to know, including classes, variables, structure, typography and more used to create responsive, scalable and beautiful websites!
Key Features
Familiar to learn
The Base System does not seek to reinvent the wheel, it's approach to page structure, typography, and more should all feel familiar. We keep it simple with sections, containers, spacing utility classes, h1-h6 headings, and a few different typography options. We want the Base System to be easy to learn and practice. You will find that the Base System requires less div blocks or deeply stacked combo classes needed to achieve a design.
Smart spacing
A unique feature of Base System is its approach to spacing, which uses flex-gap utility classes to manage spacing over margin spacing. This approach will be instantly familiar to those using Figma or Framers auto-layout system. Using flex gap, elements are clearly defined and grouped within blocks, spacing is easy to understand and multiple elements can be spaced at a time. Elements can be easily rearranged and reused without needing to adjust margins. This is especially powerful when used with Webflow shortcuts, meaning you can use ctrl + arrow keys to rapidly rearrange elements, without needing to make any changes to margin positions.
What's Included?
Some of the topics covered include;
Class Management: How to name and organize classes.
Webflow Variables: Variables to keep your project maintainable.
Content Structuring Guidelines: Create reusable and responsive components..
Typography Management: Easily control and customize typography styles.
Reusable Design Elements: Useful elements like buttons, forms and more.
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:
Last updated
