Designer Tools

Styles

The Styles tools enable you to create and manage CSS classes, apply responsive styling across breakpoints, and link design variables to create a cohesive design system.

Designer tools require the MCP Bridge App to be open in the Webflow Designer. Ensure it’s connected before using these tools.

When to use

Use Styles tools to:

  • Create style classes: Define reusable CSS classes for your design system
  • Apply responsive styles: Configure styles for different breakpoints
  • Update existing styles: Modify properties across breakpoints and pseudo-classes
  • Build combo classes: Create style variations by extending base classes
  • Link variables: Connect styles to design variables for consistency

Tool details

Tool name: style_tool

Available actions

Create style

Create a new style class with custom CSS properties.

Action: create_style

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
namestringYesStyle class name
propertiesarrayYesCSS properties to apply
parent_style_namestringNoParent class for combo classes

Example usage:

Create a button-primary style with background color #0066FF, white text, 16px padding, and border-radius 8px

Use parent_style_name to create combo classes that extend a base class with additional styling.

Get styles

Retrieve all or filtered styles from the site.

Action: get_styles

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
query_typestringYes”all” or “filtered”
filter_idsarrayNoSpecific style IDs to retrieve
skip_propertiesbooleanNoExclude property data
include_all_breakpointsbooleanNoInclude breakpoint variations

Example usage:

Get all button styles with their breakpoint configurations

Update style

Modify existing styles across breakpoints and pseudo-classes.

Action: update_style

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
styleIdstringYesStyle to update
breakpointstringYesTarget breakpoint
pseudostringNoPseudo-class (hover, focus, active)
propertiesarrayYesProperties to add/remove

Breakpoint options: xxl, xl, large, main, medium, small, tiny

Example usage:

Update button-primary to have a darker blue background on hover

Breakpoint system

Webflow uses a responsive breakpoint system:

BreakpointWidthDescription
xxl1920px+Extra extra large displays
xl1440px+Extra large displays
large1280px+Large displays
mainAll devicesBase/desktop styles (default)
medium≤991pxTablets
small≤767pxMobile landscape
tiny≤478pxMobile portrait

Styles cascade from larger to smaller breakpoints. Set base styles on main, then override for smaller screens.

CSS properties

Always use longhand CSS properties, never shorthand.

✅ Correct: margin-top, margin-bottom, margin-left, margin-right ❌ Incorrect: margin

Webflow Designer requires longhand properties for precise control.

Best practices

Choose descriptive, purpose-driven names:

  • ✅ button-primary, heading-large, card-container
  • ❌ blue-button, big-text, div-1

Good names describe purpose, not appearance.

Create a base class with shared properties, then extend with combo classes for variations:

  • Base: button (padding, border-radius, font)
  • Variant: button-primary (colors)
  • Variant: button-secondary (alternate colors)

This keeps styles DRY and maintainable.

Link commonly used values to variables:

  • Brand colors → Color variables
  • Spacing values → Size variables
  • Font families → Font variables

Change variables to update styles site-wide. Use variable modes to create different variations of the same style.

Limitations

  • Longhand only: Must use longhand CSS properties
  • Designer required: Styles tools need Bridge App connection
  • No custom CSS: Can only use Webflow-supported properties
  • Variable types: Can only link compatible variable types to properties
Variables

Create design variables to link to styles

Elements

Apply styles to elements

Rules

Style creation guidelines