What’s new in V3

This update brings Client-First in line with how Webflow works today. Variables now power color, typography, spacing, and layout. We simplified the core structure, rebuilt the spacing system, added new utility classes, and introduced ready-made components to speed up new builds.

Here is everything that changed:

Variables setup

Client-First now uses Webflow Variables as the foundation of every project. Variables are organized into five collections.

  • Base. All primitive variables used in the project, including colors, typography values, and others.
  • Theme. Semantic color variables used across the project.
  • Typography. Semantic typography variables used across the project.
  • Layout. Layout and spacing variables.
  • Sizes. Variables for element sizing.

We removed prefixes from variable names. A prefix is only kept where it is necessary to understand the variable in the style panel.

Learn more on the Variables page.

Core structure

Native section element

Sections now use Webflow’s native Section element instead of a Div Block.

Less nesting

The section structure is flatter. Global padding and section padding are applied directly to the section_[identifier] class through Variables. This removes the need for separate padding wrappers.

section_[identifier]
container-[size]
[component]

If you need more control, the layered structure is still available.

New section padding classes

padding-section-[direction]-[size] applies section padding to a single direction.

Learn more on the Core structure strategy page.

Spacing system

We replaced the old spacing system with a new one.

  • Direction and size are now combined into a single class. padding-bottom-medium replaces padding-bottom + padding-medium.
  • padding-[size] and margin-[size] apply spacing to all sides.
  • padding-[direction]-[size] and margin-[direction]-[size] apply spacing to one side.
  • Two new sizes are available. xtiny and xxtiny.
  • Spacing values now live in the Layout variable collection.

We no longer document or recommend spacer-[size] classes.

Learn more on the Spacing strategy page.

New utility classes

Text style

  • text-style-1line limits text to a single line.
  • text-style-balance balances line lengths across a text block.
  • text-style-pretty prevents single words from sitting alone on the last line.

Inherit

These classes inherit the value from the parent element.

  • text-color-inherit
  • text-size-inherit
  • text-weight-inherit
  • text-decoration-inherit
  • border-radius-inherit

Grid

These classes create responsive grids without breakpoint adjustments.

  • grid-autofit
  • grid-autofit-css
  • grid-autofit-[size]
  • grid-autofill-css
  • grid-autofill-[size]
  • grid-span-full

Autofit stretches items to fill the row. Autofill keeps empty columns in place, so items hold their size.

Gap

gap-[size] applies gap values from the spacing scale.

Other

  • overflow-clip clips overflowing content.
  • display-contents removes the element’s box so its children behave as direct children of the parent.
  • display-inline sets the element to display inline.
  • display-inline-flex sets the element to display inline flex.
  • text-area-vertical limits text area resizing to the vertical direction.
  • disable-select prevents users from selecting the element’s text.

Removed

layer has been removed.

Learn more on the Utility class systems page.

Class strategy

We added a new strategy. Custom class + utility class.

Create the custom class first, then add a utility class on top as a combo. This reduces the need for separate combo classes, lowers the risk of client mistakes, and prevents unintended changes to utility classes.

The existing combo class strategy is still valid.

Learn more on the Classes strategy 2 page.

Component naming

Components now follow a Group Name / Component Identifier format.

The forward slash does not create groups automatically. Create each group manually in the Components panel and match the component name to its group.

Learn more on the Component naming page.

Ready-made components and page template

The new page template includes the core structure of a page. Three components ship with it.

  • Global / Styles Holds the global styles for the project.
  • Template / Section Unlink this component to create a new section quickly.
  • Template / Core Structure Unlink this component to create a page’s core structure quickly.

Global CSS

  • Multiple CSS snippets now use Webflow’s native custom CSS.
  • All code has been updated.
  • Default code and custom code are now in two separate embeds. Add your own CSS without touching the defaults.

Learn more on the Global styles embed page.

Launch checklist

The Client-First launch checklist is a new resource for the final stage of a build. Go through each item before you publish the site or hand it off to your client.

Open the Client-First launch checklist in Notion.

Client-First for AI (beta)

client-first.md is a Markdown file with every Client-First rule, written for AI agents working through the Webflow MCP. Add it to your AI tool’s context, and the agent can build inside your project the Client-First way.

This file is in beta. Use it to get started faster and set up structure, not to produce a launch-ready project.

Learn more on the Client-First for AI page.