Style Guide

Grid System

The table of grid system sizes

Device Width

≥ 992px

< 992px

< 767px

< 479px

Max Container Width

1200px

100%

100%

100%

Color Palette

Primary

#f9a80b

#ff9100

#3d511d

Secondary

#ffffff

#f7f8fc

#f8fcf2

#bac7a7

#10423a

Typography

Headers - Desktop

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headers - Tablet

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headers - Mobile

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Links

Link With Icon

List

  • List item
  • List item
  • List item
  • List item

Rich Text

Aliquam vulputate velit a dignissim mattis.

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.

Sed non metus tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta, sem quis consequat scelerisque, velit urna pellentesque velit, ut posuere diam sapien in purus. Morbi id lacinia ex. Suspendisse ante libero, feugiat vel nisl semper, euismod iaculis nunc. Donec feugiat pulvinar magna, a luctus elit consectetur tempor. Phasellus molestie bibendum lectus, et aliquam neque iaculis nec. Sed non porttitor nulla.

Photo

Nulla mollis orci magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta, sem quis consequat scelerisque, velit urna pellentesque velit, ut posuere diam sapien in purus. Morbi id lacinia ex. Suspendisse ante libero, feugiat vel nisl semper, euismod iaculis nunc. Donec feugiat pulvinar magna, a luctus elit consectetur tempor. Phasellus molestie bibendum lectus, et aliquam neque iaculis nec. Sed non porttitor nulla.

  • Item A
  • Item B
  • Item C

Quote

Pellentesque non cursus leo, eu vestibulum ipsum. Aliquam in elit lorem. Aliquam vulputate velit a dignissim mattis. Mauris ac semper nisi, vitae gravida tortor. Maecenas vestibulum massa a ultricies.

Buttons

Primary Button

Primary Yellow Button

Secondary Button

Boost Your Webflow with Pro Apps! Get 20% Off with Code WEBFLOW20
Try Now!