Style Guide
The Style Guide is the foundation of the Design System. It serves as a brand library for all UI and UX design. At a minimum it should include the brand Color Palette, Typography, and Logo versions. These are the Atoms that all project elements and components are built from. Include whatever is necessary for your project. Add reusable items like Buttons and Icons here; group them separately with Elements or Components, or keep it all on one page. Styles defined here control the global site settings for the project.
Colors
The Color Palette is created as a multi-stop scale based off the Brand colors identified as Bold. The Primary color is used to accentuate key UI and UX elements, add contrast to content hierarchy, and define brand elements. The Secondary color serves as an alternate to the Primary color while the Highlight color is used to draw attention as needed. The Gray Scale can provide font-color, contrast or a neutral background.
Primary Color
100
200
#4263eb
400
500
Secondary Color
100
200
#7048e8
400
500
Highlight Color
100
200
#cf51c2
400
500
Gray Scale
#ebedf3
#c2c4cf
#999dac
#484b55
#22242c
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.
Heading-1
Heading-2
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