Style Guide · Client First V2

Core Structure

Structure Classes

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

page-wrapper
main-wrapper
container-small
container-medium
container-large
container-max-width
padding-global
padding-section-small
padding-section-medium
padding-section-large
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-portrait
max-width-full-mobile-landscape
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Paddings

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

Direction Classes

padding-bottom
section-padding-bottom
padding-top
section-padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Size Classes

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Margins

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

Direction Classes

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Size Classes

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Style Guide · Client First V2

Colors

Color Palette

Primary 100
Hex:
#EAFBFF
RGB:
234, 251, 255
Primary 200
Hex:
#c4f4ff
RGB:
196, 244, 255
Primary 300
Hex:
#86e2ff
RGB:
134, 226, 255
Primary 400
Hex:
#4bc4f7
RGB:
75, 196, 247
Primary 500
Hex:
#009ee0
RGB:
0, 158, 224
Primary 600
Hex:
#057db7
RGB:
5, 125, 183
Primary 700
Hex:
#046399
RGB:
4, 99, 153
Primary 800
Hex:
#034c7a
RGB:
3, 76, 122
Primary 900
Hex:
#023659
RGB:
2, 54, 89
Primary 1000
Hex:
#02243b
RGB:
2, 36, 59
Cool Grey 100
Hex:
#fbfcfe
RGB:
251, 252, 254
Cool Grey 200
Hex:
#f6f8fb
RGB:
246, 248, 251
Cool Grey 300
Hex:
#eff2f6
RGB:
239, 242, 246
Cool Grey 400
Hex:
#e0e3e6
RGB:
224, 227, 230
Cool Grey 500
Hex:
#c7c7c7
RGB:
199, 199, 199
Cool Grey 600
Hex:
#a0a4ab
RGB:
160, 164, 171
Cool Grey 700
Hex:
#787d85
RGB:
120, 125, 133
Cool Grey 800
Hex:
#40464e
RGB:
64, 70, 78
Cool Grey 900
Hex:
#24272b
RGB:
36, 39, 43
Cool Grey 1000
Hex:
#151920
RGB:
21, 25, 32
Warm Grey 100
Hex:
#fafafa
RGB:
250, 250, 250
Warm Grey 200
Hex:
#f4f4f4
RGB:
244, 244, 244
Warm Grey 300
Hex:
#eeeeee
RGB:
238, 238, 238
Warm Grey 400
Hex:
#e1e1e1
RGB:
225, 225, 225
Warm Grey 500
Hex:
#c7c7c7
RGB:
199, 199, 199
Warm Grey 600
Hex:
#a6a6a6
RGB:
166, 166, 166
Warm Grey 700
Hex:
#858585
RGB:
133, 133, 133
Warm Grey 800
Hex:
#5d5d5d
RGB:
93, 93, 93
Warm Grey 900
Hex:
#333333
RGB:
51, 51, 51
Warm Grey 1000
Hex:
#181818
RGB:
24, 24, 24
Error Default
Hex:
#e40145
RGB:
228, 1, 69
Error Dark
Hex:
#92052f
RGB:
146, 5, 47
Error Light
Hex:
#ffe9f0
RGB:
255, 233, 240
Warning Default
Hex:
#e47c01
RGB:
228, 124, 1
Warning Dark
Hex:
#894c03
RGB:
137, 76, 3
Warning Light
Hex:
#fff2e3
RGB:
255, 242, 227
Success Default
Hex:
#00a352
RGB:
0, 163, 82
Success Dark
Hex:
#0a6c3c
RGB:
10, 108, 60
Success Light
Hex:
#e0fcef
RGB:
224, 252, 239
White
Hex:
#ffffff
RGB:
255, 255, 255
White O80
RGBA:
255, 255, 255, 0.80
White O60
RGBA:
255, 255, 255, 0.60
White O40
RGBA:
255, 255, 255, 0.40
White O20
RGBA:
255, 255, 255, 0.40
Gradient CTA
linear-gradient(135deg, #4ed1fd, #0f94da 72%)
Gradient Product Header
linear-gradient(180deg, #eff2f6, #eff2f6)
Gradient Section Transition
linear-gradient(180deg, var(--colors--white), var(--colors--warm-grey-200))

Text Colors

text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-white
text-color-white
text-subheading-gradient
text-subheading-gradient
text-color-cool-grey-900
text-color-cool-grey-900
text-heading-gradient
text-heading-gradient

Background Colors

background-color-dark
background-color-dark-blue
background-color-white
background-gradient-cta
background-product-header
background-section-transition
Style Guide · Client First V2

Text Elements

HTML Heading Tags

HTML tags define default Heading styles.

H1

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

heading-style-h1

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

H2

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

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

heading-style-h4
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.
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.
heading-style-h5
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.
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.
heading-style-h6
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.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

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
All Links
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 Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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.

Text Classes

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

Text Sizes

text-size-big

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

text-size-xlarge

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

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

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

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-inherit

Sample text is being used as a placeholder.

text-style-2lines

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

subheading
Sample text is being used as a placeholder.

Text Weights

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Rich Text

Consistent style of elements inside the Webflow Richtext element.

rich-text-regular

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.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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.
Style Guide · Client First V2

Buttons

Buttons

button
button
Secondary
button
Outline
button
Ghost

Buttons as Links

button
Button Text
Button Text
Button Text
button
Secondary
Button Text
Button Text
Button Text
button
Outline
Button Text
Button Text
Button Text
button
Ghost
Button Text
Button Text
Button Text
Style Guide · Client First V2

Form Elements

form_component

Example of a form component using Folders

Please fill out this field.
Please fill out this field.
Please fill out this field.
Checkbox field
Custom Checkbox field
Radio field
Custom Radio field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Style Guide · Client First V2

Utilities

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-x-hidden
overflow-y-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
display-inline
display-inline-block
flex-vertical-center
flex-vertical-left
flex-vertical-right
overflow-x-hidden
overflow-y-hidden
relative
cover
sr-only
Text is readable but not viewable

Icons

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

icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-XXlarge