Style Guide

This style guide contains elements and patterns that are used throughout the site. Any changes here will reflect throughout the whole site.

Typography

Typography elements used throughout the design of the site.

Display 2XL
This is display 2XL
Display XL
This is display XL
Display L
This is display L
Display M
This is display M
Display S
This is display S
Display XS
This is display XS
Display 2XS
This is display 2XS
Display Uppercase
This is display Uppercase
Display Light
This is display light
Body

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body Light

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body L

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Body S

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Link Black
Text Link

Typography Defaults

Default typography elements used throughout the design of the site.

H1

This is an H1 heading

H2

This is an H2 heading

H3

This is an H3 heading

H4

This is an H4 heading

H5
This is an H5 heading
H6
This is an H6 heading
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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Block Quote
This is a default block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Unordered List
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Ordered List
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.

Rich Text

Rich text elements used on template pages.

Rich Text Content

Heading 1

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.

Heading 2

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.

Heading 3

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.

Heading 4

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.

Heading 5

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.

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
  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

This is a figure caption

Colors

All colors used throughout the design. Read more about how to manage color swatches & variables in Webflow.

Shade 100
#000000
Shade 90
#111111
Shade 80
#333333
Shade 70
#444444
Shade 60
#666666
Shade 50
#9f9f9f
Shade 40
#dcdcdc
Shade 30
#e3e3e3
Shade 20
#f6f6f6
Shade 10
#ffffff

Icons

Icon sizes.

Icon XL
Icon L
Icon M
Icon S
Icon XS

Forms

Styled form elements.

Form Block
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Row Horizontal
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

STATE

Styled state elements for forms and collection lists.

State Box

Thank you! Your submission has been received!

State Box Error

Oops! Something went wrong while submitting the form.

Grid

The default Grid class creates a 12-column grid with 1 REM column gaps. Read more about the grid in the instructions or learn more on how to use Grids in Webflow.

Grid

FLEX

Vertical & Horizontal Flex elements are used as generic content wrappers to space out children elements in a consistent way.

V Flex XL
V Flex L
V Flex M
V Flex S
V Flex XS
H Flex XL
H Flex L
H Flex M
H Flex S
H Flex XS

Title

Title wrappers restrict the width of child elements. These wrappers are commonly used for text based layout elements.

Title XL
Title L
Title M
Title S
Title XS

Containers

Containers centers content on the page and provides side padding.

Container
Container L