Request for Guide on New Color Schemes for Development Project

Hey There! Is there any document or video that explains the logic behind the new color schemes approach? Tomorrow I have a meeting with my team to kick off a new development project, and we want to use the new color scheme approach. I’d like to give them a guide on what the best practices would be. Thank you!

16 comments

Miguel
·
·
I’m not sure if Relume has shared official documentation about “schemes” yet. But here’s what I suggest: Export a project from Relume that uses more than one scheme. Then take a close look at what the exported files look like in Webflow. Try to figure out how Relume sets things up by studying that. It might seem confusing at first, but once you see the pattern, you’ll have a big “aha!” moment, and it’ll all start to make sense. After that, you’ll know how to make your own custom schemes. My “aha” moment came after I checked under the hood on the “global style” component specifically the scheme code. Hope that helps!
Miguel
·
·
Also, check the schemes sections on the webflow style guide. What took me a while was the foreground vs background. The accent is pretty much self explanatory. Try visualizing it like light and dark mode.
Miguel
·
·
this is a very simple example on a site I'm building now with only 4 schemes:
Miguel
·
·
scheme 1
Miguel
·
·
scheme 2
Miguel
·
·
Miguel
·
·
Miguel
·
·
Miguel
·
·
Miguel
·
·
you got this...
Andres S.
·
·
Impecable Miguel, te pasaste con la explicación! Muchas gracias!!
🙏1
Miguel
·
·
Glad it worked for you buddy.
🔥1
Kaleb J.
·
·
Amazing thank you Miguel! And Andres S. this is completely on me. I have not put the video together yet. Thank you for the nudge. In short a "Scheme" applies to a section. The background will color the background, the foreground will fill the cards and accent can be used for a splash of color. The smoothest way to use color schemes in Webflow will be to create all the colored sections you plan to use in your project in the Style Guide Builder, then export it. You'll then have all the schemes which can be used across your entire Webflow project by just applying the class as you can see here Adam also explaining Color Schemes in Figma here Hope that's helpful guys!
🙌1
Andres S.
·
·
awesome Kaleb J.! Thank you so much for your input
Stephen G.
·
·
Kaleb J. I would really appreciate a tutorial on on the functionality of this as well. Particularly:
If I didn't import via a Relume Style Guide file, or I want to manually add another color scheme after I've duplicated the original style guide in Webflow.
I can't seem to get Color Schemes to work in either of the above cases ^
Kaleb J.
·
·
Stephen G. Hey! Color Schemes will only work if you start with a Relume Style Guide. There are limitations with how we can import into blank projects which lead to really bad output so starting with a Relume Style Guide is imperative 👌🏻 https://webflow.com/made-in-webflow/website/relume-library-styleguide In the future, we hope to make this easier but for now it's the workflow. Regarding adding a new Color Scheme, yes, that's a bit tricky. Here's a video walkthrough of how to do it! cc Andres S.
🙌2

Request for Guide on New Color Schemes for Development Project | Relume Community