Style Guide

This style guide provides a central location to make broad stylistic changes to your site. Updating colors, typography and some graphic elements is quick and easy with the use of Webflow's visual website builder. If you need additional help, Webflow University provides a robust library of videos, tutorials and resources.

Visit Webflow University

Colors

Making updates to the site's color palette is quick and easy. Simply select one of the color swatches below and edit the pre-defined swatch in the background color inspector panel. For an overview of the background styles you can set on an element, visit Webflow University.

Primary 01
Secondary 01
Secondary 02
Secondary 03
Secondary 04
Secondary 05
Secondary 06
Error

Typography

Making updates to the typography on the site is quick and easy. Simply select a style below, select the appropriate HTML Tag in the Selector Panel and adjust to your desired typeface. To learn more about Webflow's HTML Tags, visit Webflow University.

Heading 1 — Source Sans Pro

AaBbCc

Heading 2 — Source Sans Pro

AaBbCc

Heading 3 — Source Sans Pro

AaBbCc

Heading 4 — Source Sans Pro

AaBbCc

Heading 5 — Source Sans Pro
AaBbCc
Heading 6 — Source Sans Pro
AaBbCc
Lead Text — Source Sans Pro

Lorem ipsum 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.

Default Paragraph — Source Sans Pro

Lorem ipsum 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.

Caption — Source Sans Pro

Lorem ipsum 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.

Links — Source Sans Pro

Lorem ipsum consectetur

Italics— Source Sans Pro

Lorem ipsum 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.

Bold Text — Source Sans Pro

Lorem ipsum 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 Quotes — Source Sans Pro Italic
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Numbered List — Source Sans Pro
  1. Lorem ipsum consectetur adipiscing elit.
  2. Lorem ipsum consectetur adipiscing elit.
  3. Lorem ipsum consectetur adipiscing elit.
Unumbered List — Source Sans Pro
  • Lorem ipsum consectetur adipiscing elit.
  • Lorem ipsum consectetur adipiscing elit.
  • Lorem ipsum consectetur adipiscing elit.
Figures & Captions — Source Sans Pro
Figure
Lorem ipsum consectetur adipiscing elit.

Buttons

Updating the buttons for the site is quick and easy. Simply select the button you would like to change, and make the necessary adjustments in the properties panels.