Set of guidelines and strategies to help you build Webflow websites. Based on Client-First
Whenever a new style is added or an existing one is modified, document these changes promptly to maintain an accurate style guide.
This is a checkpoint to add your project's colors to the global swatches and explain their usage.
These classes are rarely used as is.
Update variables and add new swatches if necessary.
Replace or/and add styles for text colors used on site. Add Background color on item if necessary
The class names follow the rule: ts-[function]--[size]
ts stands for TextStyle
Add new styles if needed. Never leave style only one on page; it should have a copy here.
64px | 4rem | 1.5 | 600 | Primary color
10+
24px | 1.5rem
Subtitle after H1
20px | 1.25rem
Subtitle after H2
18px | 1.125rem
Bigger text size for some of the text content on all pages
16px | 1rem
Main text size for most of the text content on all pages
14px | 0.875rem
Annotations and captions
12px | 0.75rem
Something super unimportant but necessary
12px | 0.75rem
12px | 0.75rem
Strikethrough
Underline
Italic
all caps
Opacity 60%
Link
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 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.
Defined and flexible core structure we can use on all or most pages.
Use the max-width CSS property to contain inner content to a maximum width.
center align for any wrapper
The Spacer System is designed to simplify the management of spacing in our web projects. By using a combination of a base spacer class and color-based comboclasses, developers can efficiently apply consistent spacing throughout applications while maintaining flexibility for responsive design.
Unify icon sizes
Utility classes we like to use in most of our projects to build faster.
Examples of a form component
Rich texts styling
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Quote: Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Clean Filter checkboxes, radio buttons, and other important things with Finsweet attributes added
Add interaction or combo class for an element.
Never lose anything. This is where you can store elements and classes used in custom code to prevent their classes/styles from being cleaned up.