How to use the Style Guide
The elements on this page use classes to make styling easy.
The classes that you edit here will update throughout your entire site.
To reuse a style from this page, find its class name in a blue tag. Click on your new element and apply the class within the Style Panel's style selector.
Typography
Headings
Heading 1
Heading 2
Heading
Heading
Body
Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.
Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.
Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.
Design. Build. Launch
Colors
Background
Primary
Secondary
Brand
Text
Aa
Primary
Aa
Secondary
Aa
Brand
Components
Buttons
Button Primary
Button Secondary
Text Link
Forms
Utilities
Global modifier classes are a convenient way to apply consistent styling changes to elements in your web project, ensuring a cohesive design. Among various styling options like size, display, spacing, and alignment, you can use global modifier classes to adjust the margin and padding of elements.
Margin
Margin is the space between an element's boundary and its surrounding elements. It controls the external spacing, affecting how elements are positioned relative to each other.
Top
Bottom
Left
Right
Padding
Padding is the space between an element's content and its boundary. It influences the internal spacing, determining the distance between the content and the element's edge.