I love that we have color swatches. Managing large projects and handing them over to clients in Webflow would be immensely easier if we could use similar saved values for spatial values and typography settings.

Right now, I'm having to set and use utility classes to manage my spatial system, which has unintended side-effects.

Example
I have set up css on a stylesheet page, among which:

.p-y-large{
padding-top: 32px;
padding-bottom: 32px;
}

.text-small{

font-size: 14px;

}

Now imagine I'm setting up a grid layout. I'll create a Grid and give it a class. Let's say "homepage hero grid". I set the grid to the number of columns I want.
Aside: I have to hard-code the grid gap value into the individual grid. Not great in case I want to re-use the component in a different project that has different spatial system values.

Let's say I'm happy with the layout. I now add the p-y-lage and text-small classes to the Grid to make sure I get the effect I want. But then I decide the Grid needs a smaller grid-gap value on mobile breakpoint. I switcht to mobile breakpoint, and now I have two choices:

1. Either I leave the utility classes while making my change to the grid gap. This wil bind the new gap value to .homepage-hero-grid.p-y-large-text-small instead of just .homepage-hero-grid, which is a problem if I want my code to be maintainable.

2. My best option is to remove the utility classes from the element and commit them to my mind's short term memory, make the change to the grid and then enter them again. You can see how this way of working is a hassle.

Both ways of working are a problem. How does anybody maintain their classes and design system in Webflow?

My suggestion is that the styles panel offers saved values for [type size + line height] and for margin/padding/gap values. The same could be done for border styles, border-radius, transitions, transforms, box-shadow and the like. They could all be custom properties in terms of CSS, so we can flexibly change them in the front-end if need be. This would make it easy to take a design system library and adjust the look simply by changing these values. Imagine the increased efficiency!