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

Harlem Blue

#004080

background-color-bodegablue

Bodega Blue

#0059B3

background-color-bronxsky

bronx Sky

#60A3D9

background-color-bronxskylight

bronx Sky Light

#DFEDF7

background-color-bostonblue

Boston Blue

#60A3D9

background-color-yellow

Sunnyside Yellow

#FFBA30

background-color-candy

Coney island cotton candy

#E05882

background-color-darkblue

Harlem dark Blue

#033160

background-color-white

White

#ffffff

Text Colors

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

text-color-black

Text color is black

#000000

text-color-blue

Text color is blue

#004080

text-color-bronxsky

Text color is bronxsky

#004080

text-color-white

Text color is white

#ffffff

text-color-yellow

Text color is yellow

#FFBA30

text-color-candy

Text color is candy

#E05882

text-color-citigray

Text color is citigray

#E05882

text-color-gray

Text color is gray

#E05882

Shadows

Add styles for shadows used on site

box-shadow

box-shadow_2

box-shadow_3

box-shadow

Savings Accounts

Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum.

Typography

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

Sample text helps you understand how real text may look.

heading-style-h1

Sample text helps you understand how real text may look.

Sample text helps you understand how real text may look on your website.

heading-style-h2

Sample text helps you understand how real text may look on your website.

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.

heading-style-h3

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.

heading-style-h4

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.

heading-style-h5

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.

heading-style-h6

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.

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-size-huge

64px | 4rem

10+

text-size-large

24px | 1.5rem

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

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

16px | 1rem

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

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

Tag Line 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 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-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-style-mackinac

Sample text is being used as a placeholder.

text-tagline

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

button

Label

button

is-blue

Effective as of September 13, 2022

button

is-secondary

Label

button

is-secondary

Label

button

is-text

Label

button

is-small

Label

topic

is-active

Topic

dropdown

is-active

Structure Classes

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

page-wrapper

main-wrapper

container-large

Large container: 1160px | 72.5rem

container-medium

Medium container: 960px | 60rem

container-small

Small container: 760px | 47.5rem

padding-global

40px | 2.5rem

padding-container-blue

48px | 3rem

padding-container-reda

64px | 4rem

padding-container-gray

80px | 5rem

padding-container-orange

120px | 7.5rem

button-group

container-custom

Custom container: 100%

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

max-width-full-mobile-landscape

max-width-orange

760px | 47.5rem

max-width-lightblue

700px | 43.75rem

max-width-peach

648px | 40.5rem

max-width-gray

616px | 38.5rem

max-width-brown

500px | 31.25rem

max-width-reda

460px | 28.5rem

max-width-reda

400px | 25rem

max-width-blue

360px | 22.5rem

max-width-blue

312px | 19.5em

max-width-purple

240px | 15rem

max-width-cyan

200px | 12.5rem

Paddings & Margins

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

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

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

padding-red

2px | 0.125rem

margin-red

2px | 0.125rem

padding-deeppurple

4px | 0.25rem

margin-deeppurple

4px | 0.25rem

padding-pink

8px | 0.5rem

margin-pink

8px | 0.5rem

padding-indigo

16px | 1rem

margin-indigo

16px | 1rem

padding-cyan

24px | 1.5rem

margin-cyan

24px | 1.5rem

padding-purple

32px | 2rem

margin-purple

32px | 2rem

padding-amber

40px | 2.5rem

margin-amber

40px | 2.5rem

padding-blue

48px | 3rem

margin-blue

48px | 3rem

padding-green

56px | 3.5rem

margin-green

56px | 3.5rem

padding-reda

64px | 4rem

margin-reda

64px | 4rem

padding-brown

72px | 4.5rem

margin-brown

72px | 4.5rem

padding-gray

80px | 5rem

margin-gray

80px | 5rem

padding-peach

88px | 5.5rem

margin-peach

88px | 5.5rem

padding-lightblue

96px | 6rem

margin-lightblue

96px | 6rem

padding-orange

120px | 7.5rem

margin-orange

120px | 7.5rem

padding-bluegray

192px | 12rem

margin-bluegray

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

hide-mobile-landscape

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 elements

Native Webflow elements with Client-First classes applied.

form_component

Example of a form component using Folders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

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.

“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard. ”

Lorem Ipsum is simply dummy text of the printing and typesetting industry.