Streaming live at 10am (PST)

Creating multiple style systems to control different aspects of the site

I’m trying to build some resources to make it quicker to build new sites/pages from scratch. I’d like to be able to separate the layout, font styling, colors, and flourishes so I can mix and match as needed.

Detailed Hypothetical Example:
For a new site, I grab a pre-made Symbol for Testimonials. It’s a container with an image and two text fields (one for the quote and one for the quote’s author each with assigned class names).

In different unpublished projects, I have a collection of style guides for Typography. I choose one that uses Helvetica and big bold type settings with lots of white space. All of the classes sync with the classes used in the Testimonials Symbol.

In a different group of projects, I have a bunch of style guides that focus on different layouts. I choose the Narrow style guide, this container is using vertical, center-aligned flex box with a max width of 800px to create the layout.

In a different set of projects, I have style-guides related to Color. I choose a blue-dominant color palette that styles all of the type and layouts with pre-defined colors.

In a traditional website, I could have all of those stylesheets cascade from additional classes on the body (I could have <body class="helvetica blue vertical"> or I could just import specific stylesheets for each set of styles I want to be applied and allow them to overlap knowing there are no conflicting CSS property values (the Helvetica project/stylesheet ONLY styles font-based properties, and the Blue project/stylesheet ONLY styles color-based properties).

How do I do that with Webflow?

If I copy and paste the three different style sheets, the 2nd and 3rd will have their classes renamed, even though they don’t have overlapping CSS property values (I understand why they do this, btw). The way I understand Combo Classes, I’d basically have to go in and set the combo classes for each element manually, which would be a huge pain if i can avoid that.

Again: How do I arrange my design system to allow for modularity of the different elements of design?

I hope I’m explaining this well. Please let me know if it’s confusing. and thank you to anyone who has any thoughts… I’ve been mulling this over and haven’t come to a conclusion yet, but I’m still fairly green to this aspect of Webflow.


Here is my site Read-Only: [LINK][1] I don’t have a project for this
([how to share your site Read-Only link][2])

[1]: http://I don’t have a project for this
[2]: don’t have a project for this

Also, I know I could import a stylesheet in the header using Custom Code, but then those CSS Property Values wouldn’t be configurable or editable in the Style Editor, correct? That’s a deal breaker…