display one
SUB HEADER
Subtext
Typography
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.
kall-h1
montserrat-h2
MONTSERRAT-H2
montserrat-h2
Heading-3
Heading-4
Heading-5
Heading-6
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 LinkWhat’s a Rich Text element?
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.
Static and dynamic content editing
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!
How to customize formatting for each rich text
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
- This is list item text.
- This is list item text.
- This is list item text.
Logo Versions & Icons
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.
Animations and Interactions
Animations and Interactions are an important part of modern UX and keeping the user engaged and enticing them to follow an action. Add commonly used CSS interactions and JavaScript animations here.
Box-Shadow
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.
Shadow-Lift
Shadow-Press
Spacing
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.
Common Spacing Settings
- Margin-Bottom__20px
- Padding Left and Right: 1em
- Top and Bottom-Padding__100px
- Max-Width: 100vw