Logo of Client-First.

--00--00--00--00-- 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. Sample text is being used as a placeholder for real text.

--11--11--11--11-- 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. Sample text is being used as a placeholder for real text.

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.

See More

Headings

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

See More

Other HTML Tags

HTML tags define default text styles.

See More

Text Classes

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

See More

Buttons

Button combo class system.

See More

Colors

Manage recurring text and background colors.

See More

Max widths

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

See More

Paddings

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

See More

Margins

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

See More

Spacers

Unified spacer system for the project.

See More

Icons

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

See More

Useful utility systems

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

See More

Webflow elements

Native Webflow elements with Client-First classes applied.

See More

Component Guide

Put all components below in another page when possible.

Button

See More

Global

See More

Grid

See More

Layout Part

See More

Media

See More

Navigation

See More

Section

See More

Section Part

See More

Slider

See More

Typography

See More

Utility

See More

Widget

See More