# Flowkit Framework

> How classes and utilities were structured in the legacy Flowkit Framework.

<svg width="100%" viewBox="0 0 951 255" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M480 211.333C468.482 211.333 458.172 208.822 449.068 203.801C440.033 198.709 432.93 191.694 427.758 182.751C422.656 173.738 420.103 163.523 420.103 152.105C420.103 140.616 422.656 130.366 427.758 121.354C432.93 112.273 440.033 105.222 449.068 100.201C458.172 95.1787 468.482 92.6679 480 92.6679C491.586 92.6679 501.93 95.1787 511.034 100.201C520.207 105.222 527.344 112.239 532.447 121.251C537.551 130.263 540.136 140.546 540.206 152.105C540.136 163.523 537.551 173.738 532.447 182.751C527.413 191.694 520.31 198.709 511.137 203.801C501.964 208.822 491.586 211.333 480 211.333ZM480 185.433C486.068 185.433 491.447 184.058 496.138 181.306C500.826 178.486 504.448 174.564 506.999 169.542C509.551 164.452 510.827 158.639 510.827 152.105C510.827 145.499 509.551 139.652 506.999 134.562C504.448 129.471 500.826 125.55 496.138 122.798C491.447 119.978 486.068 118.568 480 118.568C473.999 118.568 468.654 119.978 463.966 122.798C459.344 125.55 455.759 129.471 453.206 134.562C450.654 139.652 449.413 145.499 449.482 152.105C449.482 158.639 450.758 164.452 453.311 169.542C455.93 174.564 459.517 178.486 464.069 181.306C468.689 184.058 473.999 185.433 480 185.433Z" fill="currentColor" />

  <path d="M570.712 95.1456H539.263L573.297 208.858H600.814L623.2 136.23L647.361 208.858H674.468L708.61 95.1456H680.162L660.796 165.925L639.406 95.1456H611.884L590.589 167.483L570.712 95.1456Z" fill="currentColor" />

  <path d="M834.972 94.9606H863.471V208.523H834.972V94.9606ZM830.935 56.3967C830.935 51.8226 832.597 47.8795 835.922 44.5673C839.405 41.0973 843.759 39.3623 848.984 39.3623C854.209 39.3623 858.563 41.0184 862.046 44.3307C865.688 47.4852 867.509 51.5072 867.509 56.3967C867.509 61.2862 865.688 65.387 862.046 68.6993C858.563 71.8538 854.209 73.431 848.984 73.431C843.759 73.431 839.405 71.7749 835.922 68.4627C832.597 64.9927 830.935 60.9707 830.935 56.3967Z" fill="currentColor" />

  <path d="M716.438 40.3104H744.937V141.485L788.873 94.4036H825.447L776.523 145.98L828.534 207.966H790.773L745.412 150.002H744.937V207.966H716.438V40.3104Z" fill="currentColor" />

  <path d="M375.735 40.8674H404.234V208.523H375.735V40.8674Z" fill="currentColor" />

  <path d="M251 41.0181H359.534V67.9891H280.924V111.995H355.021V138.966H280.924V208.523H251V41.0181Z" fill="currentColor" />

  <path d="M925.401 94.9601H951V119.093H925.401V168.776C925.401 174.454 926.431 178.949 928.489 182.261C930.705 185.574 934.98 187.23 941.313 187.23C943.846 187.23 946.617 186.994 949.625 186.521C950.099 186.421 950.557 186.311 951 186.196V209.522C949.332 209.91 947.529 210.209 945.588 210.416C941.313 211.047 937.513 211.362 934.188 211.362C926.588 211.362 920.334 210.494 915.426 208.759C910.677 207.182 906.877 204.737 904.027 201.426C901.336 197.956 899.435 193.697 898.327 188.65C897.377 183.602 896.902 177.767 896.902 171.142V119.093H873.39V94.9601H896.902V62.0745H925.401V94.9601Z" fill="currentColor" />

  <path d="M206.362 24.3623H0V87.4182H206.362V24.3623Z" fill="#146EF5" />

  <path d="M134.702 96.022H0V159.078H134.702V96.022Z" fill="#146EF5" />

  <path d="M63.0559 167.668H0V230.724H63.0559V167.668Z" fill="#146EF5" />
</svg>

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

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/f19f0168da726fdb04f560867433d5b7f6262efb25a2af2a68c76d77d39c972d/products/flowkit/pages/v2/intro/flowkit_styleguide.webp" alt="Style Guide" />

<Note title="Note">
  Style guide is a great place to change styles of the elements and components. To change colors, fonts, or spacing, open the variables panel or make the adjustments directly from the Designer canvas.
  [Learn more about variables](https://help.webflow.com/hc/en-us/articles/33961268146323-Variables).
</Note>

***

## Naming conventions

This framework uses a structured naming system with hyphens and underscores that creates predictable, reusable classes organized into four main types.

### Hyphens ' - ' Usage

Hyphens are used to:

1. Connect multiple words within component names, property names, or values:
   * <span class="sg-selector sg-class">
       rich-text
     </span>
   * <span class="sg-selector sg-class">
       text-align_center
     </span>
   * <span class="sg-selector sg-class">
       margin-top_small
     </span>
   * <span class="sg-selector sg-class">
       background_primary
     </span>
2. Define combo class modifiers (component states, surface context, spacing, interactions):
   * <span class="sg-selector sg-class">
       is-secondary
     </span>
   * <span class="sg-selector sg-class">
       on-inverse
     </span>
   * <span class="sg-selector sg-class">
       gap-small
     </span>
3. Responsive modifiers for combo classes:
   * <span class="sg-selector sg-class">
       flex_horizontal
     </span>
     <span class="sg-selector sg-class">
       tablet-vertical
     </span>
   * <span class="sg-selector sg-class">
       grid_5-col
     </span>
     <span class="sg-selector sg-class">
       mobile-2-col
     </span>

### Underscores ' \_ ' Usage

Underscores are used to:

1. Separate components from their parts or properties:
   * <span class="sg-selector sg-class">
       card_body
     </span>
   * <span class="sg-selector sg-class">
       nav_logo
     </span>
   * <span class="sg-selector sg-class">
       footer_link
     </span>
2. Connect utility properties with their values:
   * <span class="sg-selector sg-class">
       margin-top_small
     </span>
   * <span class="sg-selector sg-class">
       width_40percent
     </span>
   * <span class="sg-selector sg-class">
       z-index_2
     </span>
3. Apply responsive variants of utility classes by adding breakpoint postfixes:
   * <span class="sg-selector sg-class">text-align\_center\_mobile</span> — center-aligned text on mobile
   * <span class="sg-selector sg-class">width\_100percent\_mobile-l</span> — full width on large mobile

<Note title="Responsive modifiers: `_` vs `-`">
  There is a clear distinction between **`_`** and **`-`** when working with responsive utility classes in Flowkit:

  * **`_mobile`** is used within **utility classes** to apply styles only at a specific breakpoint.\
    Example:\
    <span class="sg-selector sg-class">text-align\_center\_mobile</span> means the text will be center-aligned **only on mobile**.\
    This class is **scoped to mobile resolution** and does not apply on tablet or desktop.

  * **`mobile-`** is used as a **combo modifier** to override or change a base style on mobile.\
    Example:\
    <span class="sg-selector sg-class">text-align\_center</span> <span class="sg-selector sg-class">mobile-align-left</span>\
    This means the text is center-aligned by default, but switches to left-aligned **on mobile**.

  Use `_mobile` when you want a utility to appear **only at a certain breakpoint**, and `mobile-` (or similar prefixes) when you want to **override an existing style** responsively using a combo class.
</Note>

***

## Class types

There are four main types of classes: `Component`, `Utility`, `Combo`, and `Responsive Modifiers`. Each of these class types follows specific naming patterns for consistency and clarity.

### Component classes

Component classes define standalone UI elements with their own structure and functionality.

**Naming Pattern:** <span class="sg-selector sg-class">component\_property</span> or <span class="sg-selector sg-class">component\_part\_property</span>

| Example                                                | Purpose                                            |
| ------------------------------------------------------ | -------------------------------------------------- |
| <span class="sg-selector sg-class">card</span>         | Flexible content container with shadow and padding |
| <span class="sg-selector sg-class">card\_body</span>   | The body part of a card component                  |
| <span class="sg-selector sg-class">nav</span>          | Main website navigation bar                        |
| <span class="sg-selector sg-class">nav\_logo</span>    | The logo part of a navigation component            |
| <span class="sg-selector sg-class">footer\_link</span> | A link element within the footer                   |
| <span class="sg-selector sg-class">footer</span>       | Site-wide footer container                         |
| <span class="sg-selector sg-class">button</span>       | Reusable clickable element                         |
| <span class="sg-selector sg-class">banner</span>       | 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.

Here is an example of a Nav component with its nested elements:

<span class="sg-selector sg-class">
  nav
</span>

<div>
  <span class="sg-selector sg-class">
    nav_links
  </span>

  <div>
    <span class="sg-selector sg-class">
      nav_logo-icon
    </span>

    <br />

    <span class="sg-selector sg-class">
      nav_link
    </span>
  </div>
</div>

***

### Utility classes

Utility classes provide single-purpose styling that can be applied to any element.

**Naming Pattern:** <span class="sg-selector sg-class">property\_value</span>

| Example                                                             | Purpose                             |
| ------------------------------------------------------------------- | ----------------------------------- |
| <span class="sg-selector sg-class">margin-top\_medium</span>        | Applies medium top margin           |
| <span class="sg-selector sg-class">padding-horizontal\_large</span> | Applies large padding on both sides |
| <span class="sg-selector sg-class">z-index\_2</span>                | Sets z-index to 2                   |
| <span class="sg-selector sg-class">background\_primary</span>       | Sets background to primary color    |
| <span class="sg-selector sg-class">text-align\_center</span>        | Centers text horizontally           |
| <span class="sg-selector sg-class">text-align\_left</span>          | Applies left text alignment         |
| <span class="sg-selector sg-class">text-align\_right</span>         | Applies right text alignment        |
| <span class="sg-selector sg-class">display\_inline-block</span>     | Applies inline-block display        |

<Note title="Note">
  Utility classes may apply multiple CSS properties, but always serve a single visual purpose.
</Note>

***

### Combo classes

Combo classes are modifiers that change the appearance or behavior of components. They use specific prefixes to indicate their purpose.

| Prefix                                                                                                                                                    | Purpose                             |
| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| <span class="sg-selector sg-class">is-</span>                                                                                                             | Component-related modifiers         |
| <span class="sg-selector sg-class">on-</span>                                                                                                             | Surface context modifiers           |
| <span class="sg-selector sg-class">gap-</span>                                                                                                            | Spacing modifiers for flex and grid |
| <span class="sg-selector sg-class">ix-</span>                                                                                                             | Interactions related                |
| <span class="sg-selector sg-class">tablet-</span>, <span class="sg-selector sg-class">mobile-l-</span>, <span class="sg-selector sg-class">mobile-</span> | Responsive modifiers                |

Combo classes are always following a main class: <span class="sg-selector sg-class">`main class`</span> <span class="sg-selector sg-class">`prefix`-`modifier-name`</span>

| Example                                                                                                         | Purpose                                        |
| --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| <span class="sg-selector sg-class">button</span> <span class="sg-selector sg-class">is-secondary</span>         | Changes button to secondary style              |
| <span class="sg-selector sg-class">text-link</span> <span class="sg-selector sg-class">on-accent-primary</span> | Adapts text link for accent-primary background |
| <span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">gap-medium</span> | Sets medium gap in flex container              |
| <span class="sg-selector sg-class">section</span> <span class="sg-selector sg-class">is-secondary</span>        | Adjust section background and text color       |

***

### Responsive modifiers

Responsive modifiers apply styles at specific breakpoints. They use device-specific postfixes.

**Postfix:**

* <span class="sg-selector sg-class">\_tablet</span> - Tablets
* <span class="sg-selector sg-class">\_mobile-l</span> - Mobile landscape
* <span class="sg-selector sg-class">\_mobile</span> - Mobile portrait

| Example                                                              | Purpose                                            |
| -------------------------------------------------------------------- | -------------------------------------------------- |
| <span class="sg-selector sg-class">width\_100percent\_tablet</span>  | Changes an element to full width on tablet screens |
| <span class="sg-selector sg-class">text-align\_center\_mobile</span> | Centers text on mobile screens                     |

***

## Sizes

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

| Size    | Example                                                                                             |
| ------- | --------------------------------------------------------------------------------------------------- |
| xxsmall | <span class="sg-selector sg-class">icon</span> <span class="sg-selector sg-class">is-xxsmall</span> |
| xsmall  | <span class="sg-selector sg-class">icon</span> <span class="sg-selector sg-class">is-xsmall</span>  |
| small   | <span class="sg-selector sg-class">radius\_small</span>                                             |
| medium  | <span class="sg-selector sg-class">text\_medium</span>                                              |
| large   | <span class="sg-selector sg-class">gap\_large</span>                                                |
| xlarge  | <span class="sg-selector sg-class">radius\_xlarge</span>                                            |
| xxlarge | <span class="sg-selector sg-class">padding-top\_xxlarge</span>                                      |

This scale applies to layouts, spacing, typography, shadows, and other properties.

***

## Surface modifiers

The following surface modifiers are used across button, text, nav, icon, and card components. These follow the <span class="sg-selector sg-class">on-\[surface]</span> naming structure and appear in combinations for alternate background styling.

| Surface          | Example                                                                                                                                                             |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Accent Primary   | <span class="sg-selector sg-class">button</span> <span class="sg-selector sg-class">is-secondary</span> <span class="sg-selector sg-class">on-accent-primary</span> |
| Accent Secondary | <span class="sg-selector sg-class">text-link</span> <span class="sg-selector sg-class">on-accent-secondary</span>                                                   |
| Accent Tertiary  | <span class="sg-selector sg-class">icon</span> <span class="sg-selector sg-class">on-accent-tertiary</span>                                                         |
| Primary          | <span class="sg-selector sg-class">card-link</span> <span class="sg-selector sg-class">on-primary</span>                                                            |
| Secondary        | <span class="sg-selector sg-class">card-link</span> <span class="sg-selector sg-class">on-secondary</span>                                                          |
| Inverse          | <span class="sg-selector sg-class">button</span> <span class="sg-selector sg-class">on-inverse</span>                                                               |

***

## 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 <span class="sg-selector sg-class">ix\_</span> 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:

| Example                                                         | Purpose                                               |
| --------------------------------------------------------------- | ----------------------------------------------------- |
| <span class="sg-selector sg-class">ix\_section-scroll-in</span> | Triggers scroll-based entrance animation for sections |
| <span class="sg-selector sg-class">ix\_image-zoom-hover</span>  | Targets images that scale on hover                    |
| <span class="sg-selector sg-class">ix\_nav-slide-out</span>     | Animates navigation on mobile menu toggle             |
| <span class="sg-selector sg-class">ix\_button-tap</span>        | Adds tap/click animation to buttons                   |
| <span class="sg-selector sg-class">ix\_card-flip</span>         | Triggers flip animation for card components           |