> This page is for Flowkit CSS Framework, version v1.
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Flowkit Framework

> How classes and utilities were structured in the legacy 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](https://help.webflow.com/hc/en-us/articles/33961268146323-Variables)
* Style and compose layouts using utility-first [classes](https://help.webflow.com/hc/en-us/articles/33961311094419-Classes)
* Build and extend [component systems](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) 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.

![Style Guide](/_fern-img/f19f0168da726fdb04f560867433d5b7f6262efb25a2af2a68c76d77d39c972d.webp)

> **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](https://help.webflow.com/hc/en-us/articles/33961268146323-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](https://help.webflow.com/hc/en-us/articles/33961311094419-Classes#how-to-create-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](https://help.webflow.com/hc/en-us/articles/33961369965715-Semantic-HTML5-tags) like `section` or `div` and provide the scaffolding for layout composition.

| Class Name      | Description                                      |
| --------------- | ------------------------------------------------ |
| Section         | Semantic top-level page wrapper (`section` tag)  |
| Container       | Horizontal padding and max-width control         |
| Grid Layout     | Layout grid system using CSS Grid                |
| Flex Horizontal | Flexbox layout in horizontal direction           |
| Flex Vertical   | Flexbox layout in vertical direction             |
| Masonry Layout  | Masonry-style layout for variable-height content |

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:

| Class Name | Description                                        |
| ---------- | -------------------------------------------------- |
| Nav        | Main website navigation bar                        |
| Footer     | Site-wide footer container                         |
| Card       | Flexible content container with shadow and padding |
| Button     | Reusable clickable element                         |
| Banner     | Promotional or announcement container              |

Component classes define reusable building blocks of the UI and may have nested sub-elements, with naming that follows the parent component.

Component Nested Element

Here is the example how a Nav component with its nested elements looks like:

Nav Nav Link

Nav Icon \
Nav Label

---

### Utility classes

Utility classes are prefixed with `[Utility]` and describe single-purpose styling.

| Utility Class                   | Purpose                      |
| ------------------------------- | ---------------------------- |
| \[Utility] Display Inline Block | Applies inline-block display |
| \[Utility] Text Align Center    | Centers text horizontally    |
| \[Utility] Margin Top 4rem      | Adds top margin of 4rem      |
| \[Utility] Width 60%            | Sets width to 60%            |

> **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](https://help.webflow.com/hc/en-us/articles/33961300305811-Breakpoints-overview).

| Modifier | Description      | Example                                   |
| -------- | ---------------- | ----------------------------------------- |
| Tablet   | Tablets          | \[Utility] Padding Top 2rem \[Tablet]     |
| Mobile L | Mobile landscape | \[Utility] Text Color Primary \[Mobile L] |
| Mobile   | Mobile portrait  | \[Utility] Margin Bottom Auto \[Mobile P] |

---

## Sizes

T-shirt sizing provides a consistent way to name size-related classes for things like spacing, borders, text, and icons.

| Size | Example            |
| ---- | ------------------ |
| XXS  | Icon XXS           |
| XS   | Padding Bottom XS  |
| SM   | Radius SM          |
| MD   | Text MD            |
| LG   | Gap LG             |
| XL   | Radius XL          |
| XXL  | Padding Top XXL    |
| XXXL | Margin Bottom XXXL |

---

## 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.

| Surface          | Example                            |
| ---------------- | ---------------------------------- |
| Accent Primary   | Secondary Button On Accent Primary |
| Accent Secondary | Text Link On Accent Secondary      |
| Accent Tertiary  | Icon On Accent Tertiary            |
| Primary          | Card Link On Primary               |
| Secondary        | Card Link On Secondary             |
| Inverse          | Primary Button On Inverse          |

---

## Animation modifiers

Animation-related classes that are used in [Webflow Interactions](https://help.webflow.com/hc/en-us/articles/33961310025107-Intro-to-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:

| Class Name              | Purpose                                               |
| ----------------------- | ----------------------------------------------------- |
| \[IX] Section Scroll In | Triggers scroll-based entrance animation for sections |
| \[IX] Image Zoom Hover  | Targets images that scale on hover                    |
| \[IX] Nav Slide Out     | Animates navigation on mobile menu toggle             |
| \[IX] Button Tap        | Adds tap/click animation to buttons                   |
| \[IX] Card Flip         | Triggers flip animation for card components           |