Colors

Color is used to express style and communicate meaning. The system of tonal palettes is central to making any color scheme accessible by default.

Neutrals

Default

White

Black

Grays

100

System

Primary

100

Success

100

Warning

100

Error

100

Text colors

text-color-black

[Class →] text-color-black

text-color-grey

[Class →] text-color-grey

text-color-primary

[Class →] text-color-blue

text-color-white

[Class →] text-color-white

Effects

Use shadows and different levels of opacity to draw more attention to certain elements or create a unique look.

Shadows

[Class →] shadow-xsmall

[Class →] shadow-small

[Class →] shadow-medium

[Class →] shadow-large

[Class →] shadow-xlarge

[Class →] shadow-xxlarge

Opacity

100

Typography

We designed each title and text element to make your copy readable but still beautiful on every device. Legible and flexible styles support a wide variety of use cases.

HTML Headings

All H1 Headings

All H2 Headings

All H3 Headings

All H4 Headings

All H5 Headings

All H6 Headings

HTML Heading styles

heading-style-h1

Heading Style H1

heading-style-h2

Heading Style H2

heading-style-h3

Heading Style H3

heading-style-h4

Heading Style H4

heading-style-h5

Heading Style H5

heading-style-h6

Heading Style H6

Other heading styles

heading-size-huge

Heading Size Huge

heading-size-xxlarge

Heading Size XXlarge

heading-size-xlarge

Heading Size Xlarge

heading-size-large

Heading Size Large

Other HTML tags

All paragraphs

All quotes

“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”.

All Ordered Lists

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.

All Unordered Lists

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.

All links

All Links-> as a default, links inherit text color from the parent element

Text sizes

text-size-large

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

text-size-medium

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

text-size-regular

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.

text-size-small

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-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote

“Sample text is being used as a placeholder”.

text-style-2lines

text-style-3lines

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

Text weights

text-weight-light

text-weight-normal

text-weight-medium

text-weight-semibold

text-weight-bold

text-weight-xbold

Text alignments

text-align-left

text-align-center

text-align-right

text-weight-medium

Rich text

text-rich-text

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”.

Useful classes

Utility classes commonly found in most Webflow projects

This element is hidden

[Class →] hide

[Class →] hide-tablet

[Class →] hide-mobile-portrait

[Class →] hide-mobile-landscape

[Class →] overflow-visible

[Class →] overflow-hidden

[Class →] overflow-auto

[Class →] overflow-scroll

[Class →] pointer-events-on

[Class →] pointer-events-off

[Class →] layer

[Class →] div-square

[Class →] spacing-clean

[Class →] align-center

[Class →] z-index-1

[Class →] z-index-2

[Class →] display-inlineflex

[Class →] position-relative

[Class →] position-absolute

[Class →] fit-cover