Style Guide
Structure Classes
Defined and flexible core structure we can use on all or most pages.
Headings
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
Heading 1
Heading Style 1
Heading 2
Heading Style H2
Heading 3
Heading Style H3
Heading 4
Heading Style H4
Heading 5
Heading Style H5
Heading 6
Heading Style H6
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
tect size is large
text size is medium
text size is regular
text size is small
text size is tiny
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
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 Colors
Subtitle
subtitle text
Text Alignments
Colors
Manage recurring text and background colors.
Background Colors
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 - margin classes. [margin-direction] + [margin-size].
Direction Classes
Size Classes
Spacers
Unified spacer system for the project.
Icons
Unify icons. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
Modes
Modulify Variable Modes Light/Dark with Primary /Secondary /Tertiary /Quaternary Colors
Webflow elements
Native Webflow elements with Client-First classes applied.
Example of a form component using Folders
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.
