Style System
Scale your website without developers and empower your marketing team to market your brand. CSS class naming that a grandma can understand. No abbreviations, no shorthand, no confusion. Read a class name and know what it does.
Naming convention & learning
Learn how our 'Client-first' naming convention works with a written + video tutorial.
Structure
We defined the core basics so you can build the complex with less effort.
Grids
Build any layout with grids. Use it when you need columns and rows.
Spacing
Spacing system that keeps vertical and horizontal spacing global on your website.
Typography
Typography organization keeps your brand professional. Correct usage of H1, H2, H3 for SEO.
Responsive visibility
Unique experience on each device.
Webflow Elements
Form components, buttons, dropdown, tabs, slider, and more inside.
Components
Open the Symbols panel, drag and drop on the page. Add text, images, and links. Build new sections and pages in minutes.
Colors
Globally defined colors on your website. Copy hex colors to clipboard for use outside of Webflow.
Brand Guide
Company assets such as logo, icons, print materials. All in one place.
Questions
ALL comments, suggestions, and notes about this Style System are welcomed
This is the SECOND iteration of the system. We must improve.
Questions? Talking points? Ask in Slack channel #stylesystem-chat
Let's talk about this as a team, figure out what works, what doesn't work, and iterate this build until it's ready to show the Webflow community.
Questions? Talking points? Ask in Slack channel #stylesystem-chat
Let's talk about this as a team, figure out what works, what doesn't work, and iterate this build until it's ready to show the Webflow community.