Style Guide
Client-First is a set of guidelines and strategies created by Finsweet to help you build Webflow websites.
Heading Styles
Heading classes when typography style doesn't match the default HTML tag.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
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 on your website.
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 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 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
“Our experience with Minimal UI has been quite remarkable. Its intuitive ease and swift customer service have truly refreshed our day-to-day operations.”
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
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 Alignments
Colors
Manage recurring text and background colors.
Base Backgrounds
Primary Backgrounds
Neutral Backgrounds
Base Text
Neutral Text
Primary Text
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Webflow elements
Native Webflow elements with Client-First classes applied.
This is H2
This is H3
This is H4
This is H5
This is H6
Et qui et quae et maxime assumenda. Suscipit voluptatum in fugiat. A sapiente eveniet doloremque asperiores numquam voluptatem. Beatae illo commodi. Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
“Our experience with Minimal UI has been quite remarkable. Its intuitive ease and swift customer service have truly refreshed our day-to-day operations.”
- Morbi accumsan tristique
- Velit dolor malesuada dui
- Metus suscipit ac tristique
- Eget finibus arcu nulla quis
- Morbi accumsan tristique
- Velit dolor malesuada dui
- Metus suscipit ac tristique
- Eget finibus arcu nulla quis
Example of a form component using Folders
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
Size Classes
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
Direction Classes
Size Classes
Spacers
Unified padding system for the project.
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
