Design system multi-brands based off 1 same BASE: do I use variables or something else?

Hi everyone, hope you can help. I’m not the most familiar with Design Systems and I keep having to tweak what I currently built to speed up the work.

The last project had 1 “platform” that had a few brands so I used variables in the same file to adjust the different colors and then in another file that had “ALL FLOWS and screens” I was able to click on the frame and select BRAND COLOR: BRAND X

This new project however, is supposed to be just COLOR changes but MANY BRANDS. It is our own product that we will white label for any brands that come in and they’ll want page mock ups to see how it looks with:

  • same components and pages BUT for MANY BRANDS
  • their logo
  • their colors
  • flexible enough to possibly changes in button radius and sizes (but hopefully not, I just don’t want to be stuck designing for one way and then client requests changes everything)

If I had a design system with all the components linked up with variables within the same file, and if we were to eventually have let’s say 30+ brands, I’d have 30+ columns, and all the different colors, which seems like a lot.

My file structures is (open to suggestions though)

  • 1 file for design system of COMPONENTS
  • 1 file for SCREENS based of COMPONENTS
  • 1 file for per BRAND that feeds off SCREENS file but branded with necessarily color changes and logo (and whatever else)

I’m thinking there is a better way to do this. What would be the best way to design this?

Thanks in advance!

I am looking to solve the same problem. @Jess16 Have you find a solution?