Flowkit Framework
Introduction
Flowkit is a modular CSS Framework designed to power visually consistent and flexible Webflow websites — especially those generated by Webflow AI. It provides a structured collection of reusable utility classes, component patterns, and design tokens that streamline layout, styling, and interactions across your entire site.
Built with scalability and clarity in mind, Flowkit helps:
- Maintain design consistency through global variables
- Style and compose layouts using utility-first classes
- Build and extend component systems with predictable class conventions
Style guide
The Flowkit style guide provides an overview of all the components and utility classes used in the project. Each website generated by Webflow’s AI tools includes a style guide page generated by the Flowkit framework.
Note
Style guide is a great place to change styles of the elements and components. To change colors, fonts, spacing open variables panel or do the adjustments straight from the Designer canvas. Learn more about variables.
Class types
There are three main types of classes: Base, Component, and Utility. Each of these class types can be extended with a combo class — a modifier that adjusts or enhances the behavior and appearance of the main class.
Base classes
Base classes are structural classes used to define the foundational layout of the page. These are typically applied to semantic elements like section or div and provide the scaffolding for layout composition.
These can be extended with combo classes to adjust functionality or visual context:
Section Secondary Section
Component classes
Component classes are used for specific UI components like buttons, navigation, cards, and footers.
Examples of component classes:
Component classes define reusable building blocks of the UI and may have nested sub-elements, with naming that follows the parent component.
Component Nested ElementHere is the example how a Nav component with its nested elements looks like:
NavNav Label
Utility classes
Utility classes are prefixed with [Utility] and describe single-purpose styling.
Note
Utility classes may apply multiple CSS properties, but always serve a single visual purpose.
Responsive modifiers
Responsive modifiers are used to change the default behavior of the main class on a specific breakpoint.
Sizes
T-shirt sizing provides a consistent way to name size-related classes for things like spacing, borders, text, and icons.
Surface modifiers
The following surface modifiers are used across button, text, nav, icon, and card components. These follow the On [Surface] naming structure and appear in combinations for alternate background styling.
Animation modifiers
Animation-related classes that are used in Webflow Interactions follow the [IX] prefix convention. These classes are not responsible for styling but act as hooks for applying interactions and animations defined in the Webflow Interactions panel.
Examples: