Top speed up dev time and also maintain consistency within your design it's good to have a collection of go-to layout/utility classes.

I am yet to find a perfect balance between these classes and the standard use of classes in css but by using no utility classes you end up with a bunch of extra css that is just repeating the same task. Also, using too many of these classes just doesn't work with webflow as you can only remove classes in the same order you added them.

Use utility & layout classes for the stuff you keep repeating.

Flex Grid

Using % as widths with each responsive classnames allows you to quickly add an additional class without having to worry that you might break a layout somewhere else in your project.

Want to make a row full-width on small screens but keep it as it is on larger one, just add "Width 100 SM".


Shadows can be more than just a flashy effect — used thoughtfully, they let you position elements on a virtual z-axis to create a meaningful sense of depth.

Small shadows with a tight blur radius make an element feel only slightly raised off of the background, while larger shadows with a higher blur radius make an element feel much closer to the user.
You might use a smaller shadow for something like a button, where you want the user to notice it but don’t want it to dominate the page.
Medium shadows are useful for things like dropdowns; elements that need to sit a bit further above the rest of the UI.
Large shadows are great for modal dialogs, where you really want to capture the user’s attention.

Establishing an elevation system
Just like with color, typography, spacing, and sizing, defining a fixed set of shadows will speed up your workflow and help maintain consistency in your designs.
You don’t need a ton of different shadows — five options is usually plenty.

Start by defining your smallest shadow and your largest shadow, then fill in the middle with shadows that increase in size pretty linearly.

Combining shadows with interaction
Shadows aren’t only useful for positioning elements on the z-axis statically; they’re a great way to provide visual cues to the user as they interact with elements, too.
For example, say you had a list of items where the user could click and drag each item to sort them. Adding a shadow to an item when a user clicks it makes it feel like it pops forward above the other items in the list, and makes it clear to the user that they can drag it.
Similarly, you can make a button feel like it’s being pressed into the page when a user clicks it by switching to a smaller shadow, or perhaps removing the shadow altogether.

Using shadows in a meaningful way like this is a great way to hack the process of choosing what sort of shadow an element should have. Don’t think about the shadow itself, think about where you want the element to sit on the z-axis and assign it a shadow accordingly.

Flex Grid

Width 10
Width 90
Width 20
Width 80
Width 25
Width 75
Width 33
Width 66
Width 50
Width 50
Width 100

Responsive Flex Grid

Width 10 L
Width 90 LG
Width 20 LG
Width 80 LG
Width 25 LG
Width 75 LG
Width 33 LG
Width 66 LG
Width 50 LG
Width 50 LG
Width 100 LG
Width 10 MD
Width 90 MD
Width 20 MD
Width 80 MD
Width 25 MD
Width 75 MD
Width 33 MD
Width 66 MD
Width 50 MD
Width 50 MD
Width 100 MD
Width 10 SM
Width 90 SM
Width 20 SM
Width 80 SM
Width 25 SM
Width 75 SM
Width 33 SM
Width 66 SM
Width 50 SM
Width 50 SM
Width 100 SM


Shadow MD
Shadow LG
Shadow XL
Shadow 2XL

Round Corners

Rounded SM
Rounded LG
Rounded Full
Rounded None
Rounded Top SM
Rounded Top
Rounded Top LG
Rounded Top Full
Rounded Top None
Rounded Bottom SM
Rounded Bottom
Rounded Bottom LG
Rounded Bottom Full
Rounded Bottom None
Rounded Left SM
Rounded Left
Rounded Left LG
Rounded Left Full
Rounded Left None
Rounded Right SM
Rounded Right
Rounded Right LG
Rounded Right Full
Rounded Right None