Style Guide

This style guide provides a central location to make stylistic changes to your site. Review your site styles here

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.

H1 Heading

Size: 64px

The quick brown fox jumps over the lazy dog

H2 Heading

Size: 48px

The quick brown fox jumps over the lazy dog

H3 Heading

Size: 40px

The quick brown fox jumps over the lazy dog

H4 Heading

Size: 32px

The quick brown fox jumps over the lazy dog

H5 Heading

Size: 24px

The quick brown fox jumps over the lazy dog

H6 / H6 Title

Size: 18px

The quick brown fox jumps over the lazy dog

Sub Heading

16x Font Size

The quick brown fox jumps over the lazy dog

Sub Heading / Small

14x Font Size

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

Paragraph / Large

18px Font Size

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

Paragraph / Regular

16px Font Size

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

Paragraph / Small

14px Font Size

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

Detail

14px Font Size

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

Footnote

12px Font Size

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

Primary Secondary Outline

Primary / Right Icon

Secondary / Right Icon

Container / X Large

1440px Container

Container / Large

1280px Container

Container / Regular

1140px Container

Container / Small

960px Container

Container / X Small

740px Container

Section / X Large

Section / Large

Section / Regular

Section / Small

Section / X Small

Class Name

Pixels

Global Class *Edit in Webflow

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

Basic Interaction

Basic Interaction

Basic Interaction

Basic Interaction

Basic Interaction

Basic Interaction

Basic Interaction

Basic Interaction

Basic Interaction

Basic Interaction