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!
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!
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.
this is a very simple example on a site I'm building now with only 4 schemes:
Amazing thank you @Miguel!
And @Andres Sentis 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!
@Kaleb Jae I would really appreciate a tutorial on on the functionality of this as well. Particularly:
