Client-First — Version 2.1

Style Guide

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

Structure Classes

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

page-wrapper

main-wrapper

container-48rem

container-64rem

container-84rem

max-width-50rem

padding-global

button-group

Headings

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

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

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

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.

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-size-3x5rem

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

heading-size-2x75rem

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

heading-size-2rem

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-size-1x75rem

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-size-1x375rem

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.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

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

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.

Text Classes

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

Text Sizes

text-size-1x25rem

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

text-size-1x125rem

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

text-size-1rem

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-0x875rem

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-0x75rem

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

All bolds

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

All italics

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

label

Label

text-style-link

text-align-center

text-style-strikethrough

text-style-underline

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-quote

Sample text is being used as a placeholder.

text-wrap-pretty

Sample text is being used as a placeholder.

text-wrap-balance

Sample text is being used as a placeholder.

text-style-2lines

This CSS style is not supported for Rich Texts on iOS.

text-style-3lines

This CSS style is not supported for Rich Texts on iOS.

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

text-weight-700

text-weight-600

text-weight-500

text-weight-400

text-weight-300

Buttons

Button combo class system.

button

Button Text

Div styles

Div classes and variables system

Flex

content-vertical

content-horizontal

Flex

cursor-style-pointer

is-relative

layer-0, layer-1, layer-2, layer-3, layer-4

Colors

Manage recurring text and background colors.

Theme - 1 - Default

Text Colors

text-color-primary

I'm a paragraph with the primary text color ! You can apply this color by applying the classe above to me. Or use the variable for a custom class

text-color-neutral

I'm a paragraph with the secondary text color ! You can apply this color by applying the classe above to me. Or use the variable for a custom class

Background Colors

background

Theme - 2 - Dark

Text Colors

text-color-primary

I'm a paragraph with the primary text color ! You can apply this color by applying the classe above to me. Or use the variable for a custom class

text-color-neutral

I'm a paragraph with the secondary text color ! You can apply this color by applying the classe above to me. Or use the variable for a custom class

text-color-accent

I'm a paragraph with the secondary text color ! You can apply this color by applying the classe above to me. Or use the variable for a custom class

Background Colors

primary

secondary

Spacers

Unified spacer system for the project.

padding

spacer-auto

spacer-0x25rem

spacer-0x5rem

spacer-0x75rem

spacer-1rem

spacer-1x5rem

spacer-2rem

spacer-2x5rem

spacer-3rem

spacer-3x5rem

spacer-4rem

spacer-5rem

spacer-6rem

spacer-8rem

Spacers Mobile

Unified spacer system for the project.

spacer-mob-0x25rem

spacer-mob-0x5rem

spacer-mob-0x75rem

spacer-mob-1rem

spacer-mob-1x5rem

spacer-mob-2rem

spacer-mob-2x5rem

spacer-mob-3rem

spacer-mob-3x5rem

spacer-mob-4rem

spacer-mob-5rem

spacer-mob-6rem

spacer-mob-8rem

spacer-mob-10rem

Icons

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

icon-wrapper

is-1rem

icon-wrapper

is-1x5rem

icon-wrapper

is-2rem

icon

Images

Images are mainly managed with only one class. With combo to determine object-fit and radius. Most of their style are managed by an image-wrapper

media-full-size

border-radius-none

media-full-size

object-fit-contain

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

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.

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.

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

Generic components

Section [DEV]