Foundation
Class types
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:
- Connect multiple words within component names, property names, or values:
- rich-text
- text-align_center
- margin-top_small
- Define combo class modifiers (component states, surface context, spacing, interactions):
- is-secondary
- on-inverse
- gap-small
- Responsive modifiers for combo classes:
- flex_horizontal tablet-vertical
- grid_5-col mobile-2-col
Underscores ’ _ ’ Usage
Underscores are used to:
- Separate components from their parts or properties:
- card_body
- nav_logo
- footer_link
- Connect utility properties with their values:
- margin-top_small
- width_40percent
- z-index_2
- Apply responsive variants of utility classes by adding breakpoint postfixes:
- text-align_center_mobile — center-aligned text on mobile
- width_100percent_mobile-l — full width on large mobile
Responsive modifiers: _ vs -
There is a clear distinction between _ and - when working with responsive utility classes in Flowkit:
_mobileis used within utility classes to apply styles only at a specific breakpoint.
Example:
text-align_center_mobile 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:
text-align_center mobile-align-left
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.
Class types
There are six main types of classes: Component, Utility, Combo, Responsive Modifiers, Surface modifiers and Animation 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: component_property or component_part_property
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:
| nav
| | nav_links
| | | nav_logo-icon
| | | nav_link
Utility classes
Utility classes provide single-purpose styling that can be applied to any element.
Naming Pattern: property_value
Note
Utility classes may apply multiple CSS properties, but always serve a single visual purpose.
Combo classes
Combo classes are modifiers that change the appearance or behavior of components. They use specific prefixes to indicate their purpose.
Combo classes are always following a main class: main classprefix-modifier-name
Responsive modifiers
Responsive modifiers apply styles at specific breakpoints. They use device-specific postfixes.
Postfix:
- _tablet - Tablets
- _mobile-l - Mobile landscape
- _mobile - Mobile portrait
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.
Units
Overview
The primary unit of the framework is REM. It’s used for sizing, spacing, and typography to ensure flexibility and accessibility. Other units are also used based on the use-case.
Why do we use REM?
REM (short for “root em”) is the foundation of our unit system.
- It scales based on the root
<html>font size (by default16px) - It makes spacing and typography fluid-responsive and consistent
- It improves accessibility and user control
You can override the base by embedding a rule in your Webflow project custom code:
<style> html { font-size: 20px; } /* 1rem now equals 20px */</style>
Pro Tip
To see the font size change reflected in the Webflow Designer, it’s best to place this code inside a Code embed element within a reusable Component. This ensures the override is included on every page of your project.
Structure
Page
Page Structure
Page Structure
The Webflow CSS Framework uses a semantic and component-based layout system. Here’s a typical page layout using semantic tags:
Page – tag: Body, selector: Body (All Pages)
Navigation – tag: nav, class: nav
Section – tag: section, class: section
Container – tag: div, class: container
Layout – e.g., grid, flex, card
Footer – tag: footer, class: footer
Section
Sections are the core layout blocks of a page. Each section must use the semantic Section tag, which can be set in the Webflow Settings Panel.
Variations
The main class section sets the section’s structure and default padding. Variations are applied with combo classes to adjust background and font colors. Combo classes follow the pattern: section is-secondary
- section is-secondary
- section is-accent-primary
- section is-accent-secondary
- section is-accent-tertiary
- section is-inverse
Padding
The section class includes vertical padding by default. Use utilities to adjust:
Utility ClassDescriptionpadding_noneRemoves top & bottom spacingpadding-vertical_smallSets vertical spacing to smallpadding-top_none, padding-bottom_smallFine-tuned vertical control
Container
The container class centers content and applies a max-width with internal horizontal padding. It ensures consistent alignment across all layouts.
These combo classes adjust the width:
Class ExampleDescriptioncontainerDefault max width (standard layout)container is-full-widthStretches full width (edge-to-edge)container is-largeLarger max widthcontainer is-smallSmaller max width for narrow layouts
Padding Control
Adjust internal padding using utility classes:
- padding-horizontal_none — removes side padding
Navigation
The navigation bar uses the semantic nav tag and a base class Nav.
Navigation adapts to the background color using combo classes:
- nav is-accent-primary
- nav is-accent-secondary
- nav is-accent-tertiary
- nav is-inverse
- nav is-secondary
Footer
Footer uses footer semantic tag and class Footer.
Footer also adapts to the background color using combo classes:
- footer is-secondary
- footer is-inverse
- footer is-accent-primary
- footer is-accent-secondary
- footer is-accent-tertiary
Every footer variation has a combo class for a footer link footer_link on-inverse or on-accent-primary etc.
Atoms
Typography
Typography
The typography system provides consistent text styling with variables to control size, spacing, and hierarchy.
The base typography variables define the fundamental text properties used throughout the project. These variables are inherited by the default Paragraph, Text elements, and Body tag.
Font Family
A font family is applied to text elements through the variable. To update the font, make changes in the Variables panel.
Headings
Heading tags and classes use the same variables, making it easy to keep styles consistent and manage them in the variables panel.
Each heading level has its own responsive variables for different breakpoints, following the same pattern.
Paragraph
Similar to headings, All Paragraphs selector, text class, and its size variations properties are controlled through related text variables.
Default Spacing
Headings and paragraphs have default bottom spacing applied via variables.
For example, the heading_h1 and All H1 Heading use the variable H1 Margin Bottom
The same pattern applies to paragraphs using Base Margin Bottom.
To override this spacing, use a margin utility class such as:
margin-bottom_none
Utility classes
Also check how to use utility classes to override the default behavior of typography classes
Best Practices
- Use variables for consistency — Modify variables when possible instead of creating custom styles.
- Choose appropriate sizes — Use text is-small for small text, text is-large / is-xlarge / is-xxlarge for emphasis.
- Maintain readability — Ensure text remains readable at all screen sizes.
- Preserve hierarchy — Maintain clear distinction between headings and paragraph text.
- Semantic order — Keep the hierarchy in tag usage (e.g.,
h1>h2>h3>p). - One H1 tag per page — Only one
h1tag per page. If you need multiple visually styled H1s, apply the heading_h1 class instead.
Text Color
These utility classes are used to apply specific text colors to an element.
- text-color_primary
- text-color_secondary
- text-color_inverse
- text-color_inverse-secondary
- text-color_accent-primary
- text-color_accent-secondary
- text-color_accent-tertiary
- text-color_accent-on-inverse
- text-color_accent-on-primary
- text-color_on-accent-primary
- text-color_on-accent-secondary
- text-color_on-overlay
Text Alignment
Text alignment utilities let you override the default left-aligned behavior.
- text-align_left
- text-align_center
- text-align_right
Responsive modifiers:
- text-align_center_tablet
- text-align_center_mobile-l
- text-align_center_mobile
Spacing
Spacing
Foundational predefined REM-based set of variables called Spacing are used for margins, paddings, and gaps of components. This ensures consistent rhythm and layout behavior across the entire system.
Size Variables
All the base spacing values are defined using a simple valuex naming convention. You can think of x as a multiplier of the base unit (1rem = 16px).
Gap Variables
Used in flex and grid layouts. These use t-shirt sizing for consistent spacing across UI elements.
- gap-xs
- gap-sm
- gap-med
Utility Class Examples
Example of classes that apply spacing using the same variables as above for consistency:
- icon is-small
- flex_horizontal gap-small
- padding-bottom_small
- margin-top_small
Color
Border
Border
Border variables control visual boundaries between components like buttons, cards, input fields, and other UI elements. These are divided into:
- Border Color — Defines the visible stroke color.
- Radius — Defines the border corner roundness (border-radius).
These values can be applied using variables or utility classes, and may vary between projects depending on style preferences.
Border Color
Border color variables follow a naming pattern based on surface context or visual intent.
- Border Primary
- Border Secondary
- Border Inverse Primary
- Border Inverse Secondary
- Border Accent
These colors reference the foundational colors like Neutral or Accent and may include opacity (e.g. Neutral Inverse A50). The exact mapping is managed in the Variables panel.
Border color variables are applied to style the border or box shadow style of elements. For example, dividers and input fields are using border styles. Buttons and cards components are using box shadow styles.
Border Radius
Radius variables define how rounded the corners of elements should be. These values are used consistently across cards, buttons, input fields, etc.