Style Guide

Structure Classes

Defined and flexible core structure we can use on all or most pages.

HTML Heading Tags

HTML tags define default Heading styles.

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Other HTML Tags

HTML tags define default text styles.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All Links

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

Sample text helps you understand how real text may look.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present on your website.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Styles

text-style-muted

text-style-allcaps

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Buttons

Button combo class system.

Button Text

Colors

Manage recurring text and background colors.

Color Palette

#00000

#f5f5f5

#fffff

Text Colors

text-color-black

text-color-grey

text-color-white

Background Colors

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Direction Classes

Size Classes

Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

Size Classes

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

This element is hidden

Webflow elements

Native Webflow elements with Client-First classes applied.

Example of a form component using Folders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.