Client-First — Version 2

Roofr Style Guide

Client-First is a set of guidelines and strategies created by Finsweet to help you build Webflow websites.

Heading Tags & Heading Classes

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

H1
(font size: 72-50px, font weight: Black, line height: 130%, letter spacing: -2%)

Sample text helps you understand how real text may look.

heading-style-h1
(font size: 72-50px, font weight: Black, line height: 130%, letter spacing: -2%)

Sample text helps you understand how real text may look.

H2
(font size: 48px, font weight: Black, line height: 130%, letter spacing: -1%)

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

heading-style-h2
(font size: 48px, font weight: Black, line height: 130%, letter spacing: -1%)

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

H3
(font size: 32px, font weight: Black, line height: 130% (1.0EM), letter spacing: -1%)

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
(font size: 32px, font weight: Black, line height: 130% (1.0EM), letter spacing: -1%)

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
(font size: 21px, font weight: Black, line height: 130%, letter spacing: -0.5%)

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
(font size: 21px, font weight: Black, line height: 130%, letter spacing: -0.5%)

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.

H5
(font size: 16px, font weight: Bold, line height: 150%, letter spacing: -0.5%)
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
(font size: 16px, font weight: Bold, line height: 150%, letter spacing: -0.5%)
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.
H6
(font size: 14px, font weight: Bold, line height: 150%, letter spacing: -0.5%)
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
(font size: 14px, font weight: Bold, line height: 150%, letter spacing: -0.5%)
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.

Buttons

Button combo class system.

button
is-small
Button Text
button
is-light
Button Text
button
is-small
is-light
Button Text
button
is-outlined
Button Text
button
is-small
is-outlined
Button Text
button
is-outlined-light
Button Text
button
is-small
is-outlined-light
Button Text
button
is-text
Button Text
button
is-text-light
Button Text
button
is-icon
Button Text
button
is-icon
is-small
Button Text

Colors

Manage recurring text and background colors.

Color Palette

Black
#12171b
White
#fffff
Grey
#edf0f2
Graphite 1
#0b0f12
Graphite 2
#28373e
Graphite 3
#74838b
Blue 1
#269bd6
Blue 2
#4e73d1
Blue 3
#1373e3
Accent 1
#b8d5f7
Accent 2
#e7f1fc
Accent 3
#f3f9ff

Text Colors

text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-white
text-color-white
text-color-blue1
text-color-blue1
text-color-blue2
text-color-blue2
text-color-blue3
text-color-blue3
text-color-accent1
text-color-accent1
text-color-accent2
text-color-accent2
text-color-accent3
text-color-accent3
text-color-graphite1
text-color-graphite1
text-color-graphite2
text-color-graphite2
text-color-graphite3
text-color-graphite3

Solid Background Colors

background-black
background-white
background-grey
background-graphite1
background-graphite2
background-graphite3
background-blue1
background-blue2
background-blue3
background-accent1
background-accent2
background-accent3

Gradient Background Colors

background-blue-gradient
background-blue-gradient
background-graphite-gradient
background-graphite-reverse
background-graphite-gradient

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
padding-global

Section Spacing Classes

We follow a standardized approach for defining top and bottom padding in sections using multiples of 16 pixels. This consistent spacing system helps create a balanced and visually appealing layout across different screen sizes and devices. To apply this padding to a section, simply add on of the following classes.

padding-section-tiny
(16px)
padding-section-xxsmall
(32px)
padding-section-xsmall
(48px)
padding-section-small
(64px)
padding-section-medium
(80px)
padding-section-large
(96px)
padding-section-xlarge
(112px)
padding-section-xxlarge
(128px)
padding-section-huge
(144px)
padding-section-xhuge
(160px)

Spacers

For internal section element spacing and elements itself, such as heading to text, We use multiples of 8, but starting smaller, from 8, 16, 24, 32, 40, 48, 56 to a max of 96.

spacer-8
spacer-16
spacer-24
spacer-32
spacer-40
spacer-48
spacer-56
spacer-64
spacer-72
spacer-80
spacer-88
spacer-96

Button Spacing

When positioning two buttons side by side, their padding should adhere to specific guidelines: for buttons within the navbar, the padding should be set at 12 pixels, while for buttons in other areas, a padding of 24 pixels is recommended.

button-group
(24px Gap)
button-group
is-navbar
(12px Gap)

Other HTML Tags

HTML tags define default text styles.

Body
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 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-large
(22px)

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

text-size-medium
(20px)

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

text-size-regular
(18px)

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
(16px)

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-xsmall
(14px)

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)

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-title
(ACK Titles)

text-style-TITLE

text-style-subtitle
(ACK Subtitles)

text-style-SUBTITLE

text-style-nowrap

text-style-nowrap

text-style-link
text-style-quote

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 Weights

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal

Text Alignments

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

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-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

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

SL = single line. Example of a form component adapted to exist on a single line.

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