Style Guide

Set of guidelines and strategies to help you build Webflow websites. Based on Client-First

Colors

Manage recurring text and background colors.

Background Colors

Add styles for background colors used on site

background-color-black

Black

#181818

background-color-grey

Grey

#f4f5f7

background-color-white

White

#ffffff

background-color-red

Turbine Red

#DA1A42

Text Colors

Replace or/and add styles for text colors used on site. Add Background color on item if necessary

text-color-white

Text color is white

#ffffff

text-color-black

Text color is black

#252a3b

text-color-gray

Text color is gray

#8e8e8e

text-color-red

Text color is red

#DA1A42

Image Styles

Add styles for Image wrappers used on site (shadows, borders and so)

image-style1

image-style2

image-style3

image-round

Typography

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

Page Headline

heading-style-h1

Page Headline

Section Title

heading-style-h2

Section Title

Heading H3

heading-style-h3

Heading H3

Heading H4

heading-style-h4

Heading H4

Heading H5

heading-style-h5

Heading H5

Heading H6

heading-style-h6

Heading H6

Other HTML Tags

HTML tags define default text styles.

Body (All Pages)

All paragraphs

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

All links

All Links

Text Sizes

text-red-title

26px | 1.625rem

Tag Line

text-overline

16px | 1rem

Tag Line

text-subheading

28px | 1.75rem

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

text-body-big

24px | 1.5rem

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

text-body-regular

20px | 1.25rem

Body 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-medium

20px | 1.25rem

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

text-size-small

14px | 0.875rem

Body 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-size-tiny

12px | 0.75rem

Tiny Text
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-tagline

12px | 0.75rem

Tag Line

Text Styles

text-style-strikethrough

text-style-underline

text-style-strikethrough

text-style-italic

text-style-allcaps

text-style-opacity

text-style-nowrap

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-1line

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

800 Extra Bold

text-weight-bold

700 Bold

text-weight-semibold

600 Semi Bold

text-weight-medium

500 Medium

text-weight-normal

400 Normal

text-weight-light

300 Light

Text Alignments

text-align-left

text-align-center

text-align-right

Buttons

Button combo class system. Use wrapper for margins

button

Button Text

button

blog-button

Button Text

button

is-nav

Button Text

button

is-arrow

Button Text

button

is-text

Learn More

button

is-text

is-small

button

is-text

is-white

Learn More

button

is-secondary

Button Text

button

is-secondary-arrow

Button Text

button

is-back

Button Text

Structure Classes

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

page-wrapper

main-wrapper

container-large

Large container: 1420px | 88.75rem

container-big

Big container: 1312px | 82rem

container-medium

Medium container: 1194px | 74.8125rem

container-medium

Regular container: 1030px | 64.375rem

container-small

Small container: 660px | 47.5rem

padding-global

10px | 0.6rem

padding-container-navy

48px | 3rem

padding-container-paprika

64px | 4rem

padding-container-red

80px | 5rem

padding-container-teal

96px | 7.5rem

padding-container-ultraviolet

120px | 7.5rem

button-group

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-full

max-width-full-tablet

max-width-full-mobile-landscape

max-width-full-mobile-portrait

max-width-amber

40px | 2.5rem

max-width-blue

60px | 3.75rem

max-width-cyan

100px | 6.25rem

max-width-dust

160px | 10rem

max-width-emerald

200px | 12.5rem

max-width-fuchsia

260px | 16.25rem

max-width-gold

300px | 18.25rem

max-width-indigo

360px | 22.5rem

max-width-jade

400px | 25rem

max-width-kiwi

460px | 28.75rem

max-width-lavender

500px | 31.25em

max-width-mango

560px | 35rem

max-width-navy

600px | 37.5rem

max-width-olive

660px | 41.25rem

max-width-paprika

700px | 44rem

max-width-quartz

760px | 47.5rem

max-width-red

800px | 50rem

max-width-salmon

860px | 53.75rem

max-width-teal

900px | 56.25em

max-width-ultraviolet

980px | 61.25em

Paddings & Margins

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

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

All sizes are named in alphabetical order for easier navigation.

Direction Classes

Utility classes

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Size Classes

padding-0

0 px

margin-0

0 px

margin-auto

auto

padding-amber

2px | 0.125rem

margin-amber

2px | 0.125rem

padding-blue

4px | 0.25rem

margin-blue

4px | 0.25rem

padding-cyan

8px | 0.5rem

margin-cyan

8px | 0.5rem

padding-dust

10px | 0.625rem

margin-dust

10px | 0.625rem

padding-emerald

12px | 0.75rem

margin-emerald

12px | 0.75rem

padding-fuchsia

14px | 0.875rem

margin-fuchsia

14px | 0.875rem

padding-gold

16px | 1rem

margin-gold

16px | 1rem

padding-indigo

18px | 1.125rem

margin-indigo

18px | 1.125rem

padding-jade

20px | 1.25rem

margin-jade

20px | 1.25rem

padding-kiwi

24px | 1.5rem

margin-kiwi

24px | 1.5rem

padding-lavender

32px | 2rem

margin-lavender

32px | 2rem

padding-mango

40px | 2.5rem

margin-mango

40px | 2.5rem

padding-navy

48px | 3rem

margin-navy

48px | 3rem

padding-olive

56px | 3.5rem

margin-olive

56px | 3.5rem

padding-paprika

64px | 4rem

margin-paprika

64px | 4rem

padding-quartz

72px | 4.5rem

margin-quartz

72px | 4.5rem

padding-red

80px | 5rem

margin-red

80px | 5rem

padding-salmon

88px | 5.5rem

margin-salmon

88px | 5.5rem

padding-teal

96px | 6rem

margin-teal

96px | 6rem

padding-ultraviolet

120px | 7.5rem

margin-ultraviolet

120px | 7.5rem

padding-vanilla

192px | 12rem

margin-vanilla

192px | 12rem

Icons

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

icon-height-small

icon-height-medium

icon-height-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Useful utility systems

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

hide

This element is hidden

hide-tablet

hide-mobile-landscape

hide-mobile-portrait

show-tablet

show-mobile-landscape

show-mobile-portrait

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-on

pointer-events-off

layer

div-square

spacing-clean

align-center

z-index-1

z-index-2

display-inlineflex

Webflow Forms

Examples of a form component

form_component

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

form_wr

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Webflow Rich Texts

Rich texts styling

text-rich-text

H1 Lorem ipsum dolor sit amet conse ctetur

H2 Lorem ipsum dolor sit amet conse ctetur

Image caption

H3 Lorem ipsum dolor sit amet conse ctetur

Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

H4 Lorem ipsum dolor sit amet conse ctetur

List item one
List item two
List item three

H5 Lorem ipsum dolor sit amet conse ctetur

List item one
List item two
List item three

h6 Lorem ipsum dolor sit amet conse ctetur

Heading 3

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

‍

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

case-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

‍

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
- Item A
- Item A
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Filter elements

Filter checkboxes, radio buttons and other important things with set up Finsweet Attributes

filter-radio_field

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

filter-radio_field

is-active

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

filter-checkbox_field

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

filter-checkbox_field

is-active

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Other elements

Never lose anything

class