AboutIntegrationsPricingBlog
Contact Sales

Style Guide

This style guide provides a central location to make stylistic changes to your site.
New to webflow? Check out our getting started guide.

Neutral
This is our neutral color palette and forms the foundation of many UI elements. Gray is most commonly used across typography, dividers and backgrounds. We use 10 weights to cover various scenarios, you can customise these below.
#HEX
#HEX
#HEX
#HEX
#HEX
Primary
The primary color is typically the color associated with your "brand", and is used across many UI elements. Primarily we use the brand color to call user attention, for example buttons, links, inputs, etc. This color defines overall feel and can elicit emotion.
#HEX
#HEX
#HEX
#HEX
#HEX

Typography

Note: Change the typography by setting the global styles for paragraphs and H1 - H6.
H1 Heading
Bold
Size: X px
Line Height: X px
Letter Spacing: X px

The quick brown fox jumps over the lazy dog

H2 Heading
Bold
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

H3 Heading
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

H4 Heading
Normal
Size: X px
Line Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

H5 Heading
Normal
Size: X px
Line Height: X px
Letter - Spacing: X px
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
H6 Heading
Normal
Size: X px
Line Height: X px
Letter - Spacing: X px
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Typography - Sub Headings
Sub Heading / Large
Medium
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

Sub Heading / Regular
Medium
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

Sub Heading / Small
Medium
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

Typography - Paragraph
Paragraph / Large
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph / Regular
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph / Small
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Buttons

Note: You can change the hover and on pressed styles using the class selector

Rich Text Field

Note: Make sure you are changing styles when nested inside the rich text class. Otherwise your changes will apply globally.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 2

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Containers

Note: Containers are used to give your website a consistent width
Container / X Large
1440px Container
Container / Large
1280px Container
Container / Regular
1140px Container
Container / Small
960px Container
Container / X Small
740px Container

Sections

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website. You can learn more about global swatches on the Webflow University.

Text Weights

Note: Note: Text Weights are typically used as a combo class on text elements

Text Weight Semi Bold

Text Weight Medium

Text Weight Normal

Spacing

Note: These classes allow us to give elements different spacing without creating a new class
Margin Bottom / 4
4px on Bottom
Margin Bottom / 8
8px on Bottom
Margin Bottom / 12
12px on Bottom
Margin Bottom / 16
16px on Bottom
Margin Bottom / 20
20px on Bottom
Margin Bottom / 24
24px on Bottom
Margin Bottom / 28
28px on Bottom
Margin Bottom / 32
32px on Bottom
Margin Bottom / 36
36px on Bottom
Margin Bottom / 40
40px on Bottom
Margin Bottom / 44
44px on Bottom
Margin Bottom / 48
48px on Bottom
Margin Bottom / 56
56px on Bottom
Margin Bottom / 64
64px on Bottom
Margin Bottom / 72
72px on Bottom
Margin Bottom / 80
80px on Bottom
Margin Bottom / 88
88px on Bottom
Margin Bottom / 96
96px on Bottom