The Style Guide establishes a system hierarchy for displaying content. Optimally Typography should be limited to one or two font-families. Font-Families can be added to Webflow projects in the Project settings panel. Different fonts can be used for Headings and Body copy, but be sure to choose what best fits your project. The Font-Family, Font-Size, weight and line-height are set globally on the All Body and All Headings tags. This guide removes all Heading default padding and margin styles.
Paragraph size, weight, and line-height are all based off the Body copy tag setting. The default Webflow font size of 14px is reset to 16px to use the standard set by most modern browsers. All other font sizes scale relative to this base by powers of 4. At breakpoints above Desktop the Body copy can be set to 20px to scale headings relative to larger screen sizes and at 12px for Mobile breakpoints.
This paragraph inherits all the styles from the base paragraph, but the font-color is Gray-3 instead of Black. It can be used to de-emphasize the copy content.Text Link
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
This is a Block Quote
Include all brand Logo versions and commonly used Icons for reusability and easy maintenance. Icon libraries are added in Project settings, just like font-families. Material, Feather, and Favicons are all popular icon libraries that can be added to Webflow projects. Social Media share buttons can be added using code embeds available from the specific platform. Logos can be added to the Navigation or Footer areas or wherever a brand mark is needed.
Box-Shadows can be used to define the edge of an UI element and create depth. CSS hover transformations can add provide visual feedback for UX interactions. Shadows work best when they respond to a consistent light source and mimic physical properties. Use the Power of 4 for consistency with other styles.
Create a consistent hierarchy in your Design System by scaling White Space, Padding and Margin styles with the same Power of 4 ratio as used by Typography. The result will be easier to scale and make responsive as well as be visually appealing.