McKinley Style Guide

This styleguide 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 Dark
Primary
Primary Light
Primary Lighter
Primary Lightest

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, DM Serif Text, 56px / 120%

AaBbCc

Heading 2, DM Serif Text, 44px / 120%

AaBbCc

Heading 3, DM Serif Text, 35px / 120%

AaBbCc

Heading 4, DM Serif Text, 28px / 130%

AaBbCc

Heading 5, DM Sans, 22px / 130%
AaBbCc
Heading 6, DM Serif, 18px / 140%
AaBbCc
Lead Text, DM Sans, 20px / 175%

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, DM Sans, 20px / 175%

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, DM Sans, 15px / 175%

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
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
  1. Lorem ipsum consectetur adipiscing elit.
  2. Lorem ipsum consectetur adipiscing elit.
  3. Lorem ipsum consectetur adipiscing elit.
Unumbered List
  • Lorem ipsum consectetur adipiscing elit.
  • Lorem ipsum consectetur adipiscing elit.
  • Lorem ipsum consectetur adipiscing elit.
Figures & Captions
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.