Welcome

A visual development system and framework designed specifically for Webflow

Welcome to Base System, the Webflow design system that helps you build websites faster, more efficiently, and with better organization. Whether you're working on a simple landing page or a complex site, Base System provides a structured, scalable approach to design and development so you can build enterprise-level professional websites.

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.

Key Features

Familiar to learn

Base System doesn’t seek to reinvent the wheel when it comes to building for the web. The approach to page structure, typography, and more should all feel familiar. We use Sections and Containers, H1-H6 headings, and a few different body text sizes. You can adjust weights, colors, alignments, and styles using combo classes.

Flexible development

Base System is focused on reducing the number of div-blocks and deeply stacked combo classes needed to achieve a design. Locking you into rigid templates or workflows can slow down development, make updates more complex, and hinder customization and innovation. Leveraging Webflow variables, we can be free to create classes and maintain organisation.

Smart spacing

An innovative feature of Base System is its approach to spacing, which uses flex-gap, variables, columns, and rows to add and manage spacing effortlessly. This approach will be instantly familiar to those using Figma’s auto-layout system. There are several benefits to using flex-gap over margin:

Elements are logically grouped with no complicated margin rules.
Multiple elements can be spaced at a time.
Elements can be rearranged and easily reused without needing to adjust margins.

Simple naming

This one might be a bit controversial, classes are written in plain English. That's right, capital letters and spaces, no underscores, or dashes. Webflow gives us the power to name our classes for the visual no-code future. This was the way Webflow had intended classes to be named, and is no different to how classes are named in other no-code visual development tools like Framer or Figma.