Style Guide

This style guide provides a central location to make stylistic changes to your site. If you need additional help, Webflow University provides a library of videos, tutorials and resources to help you get started.

Menu

Colors Typography Icons Forms Rich Text Buttons

Colors

Primary Colours

Dark Slate

#293d40

Light Grey

#f7f7f7

Green Accent

Green

#63DEAB

Green 40%

#63DEAB

Green 20%

#63DEAB

Aquamarine Accent

Aquamarine

#73d1e3

Aquamarine 40%

#73d1e3

Aquamarine 20%

#73d1e3

Dark Aqua Accent

Dark Aqua

#63DEAB

Dark Aqua 40%

#63DEAB

Dark Aqua 20%

#63DEAB

Neutral Colours

Black

#1C2327

Black 70%

#1C2327

Black 50%

#1C2327

Black 20%

#1C2327

White

#ffffff

White 70%

#ffffff

White 50%

#ffffff

White 20%

#FFFFFF

Typography

Heading 1 - 49.28Px / 125%

Fox jumps over the lazy dog

Fox jumps over the lazy dog

Heading 2 - 45.76px / 125%

Fox jumps over the lazy dog

Heading 3 - 45px / 145%

Fox jumps over the lazy dog

Heading 4 - 27px / 140%

Fox jumps over the lazy dog

Heading 5 - 20px / 140%

Fox jumps over the lazy dog

Heading 6 - 20px / 1.04em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph small - 14px / 125%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph normal - 4px / 125%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph large - 22px / 140%

Link Text

text link 1 - 14px / 125%

Link Text

text button - 14px / 125%

text link 2 - 14px / 125%

Bold - Lorem ipsum dolor sit amet

text bold - 18px / 0.94em

Italic - Lorem ipsum dolor sit amet

text italic - 18px / 0.94em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

block quote

Lorem ipsum dolor sit amet consectetur.
Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
Sapien in tempus lectus lorem quis est.

Bullet list

Lorem ipsum dolor sit amet consectetur.
Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
Sapien in tempus lectus lorem quis est.

numbered list

Icons

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich Text

This is Heading 1

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.

Lorem Ipsum dolor sim amet

This is Heading 2

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
Sapien in tempus lectus lorem quis est.

This is Heading 3

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

This is Heading 4

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
Sapien in tempus lectus lorem quis est.

This is Heading 5

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.

This is Heading 6

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.

Buttons

Primary - Small

Primary - Default

Secondary - Small

Secondary - Default

Tertiary - Small

Tertiary - Default

Upload

Primary - Arrow