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 - Landing Pages

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.

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

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

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.

H1 Heading - Blogs

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.

The quick brown fox jumps over the lazy dog

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

Style Guide

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog