@kaleb - I think of Button styling as a very separate task than standard color system work. It is more akin to styling table row cells, cards, tiles, etc. So much more of a component system concern. So having the colors used in buttons and other components cataloged in your color system is likely required. But that styling happens elsewhere and should be documented separately. Relume already does this wonderfully by documenting colors and shadows (i.e. things used for styling) separate from where it documents buttons. To take this further, I wish that Relume also pre-cataloged the system-level corner radius used throughout the system. I also wish you pulled out some standard elements like cards that we could style and then those automatically updated throughout as well.
Kaleb Jae
Feb 20, 2024
All things coming in the pipeline thanks David! Will follow up in our chats via Slack 😎
Reply
S
Sabre Media
July 21, 2024
[ Timestamp 17:30-18:00 ] Instead of choosing a different linked variable, is it possible to update the colour of the currently linked variable using the colour picker without leaving the designer window, so you get a live preview of your colour choice?
Reply
Lewis Totty
Feb 20, 2024
What about gradient backgrounds...
Kaleb Jae
Feb 21, 2024
Good question! Currently Webflow only allows variables for a single color, not gradients. However, you can use variables in your gradients in the style panel :)
A
Anonymous
Mar 15, 2024
Video on this?
Mac Adams
Mar 15, 2024
🔥
Chris Wertz
Oct 24, 2024
🙏
Reply
Paul Irwin
Jan 18, 2024
Really helpful Kaleb! Thanks for the reminder about the Class Sync but also the Preferences which I never noticed before!!
Kaleb Jae
Jan 19, 2024
🙌
Kaleb Jae
Jan 19, 2024
Yeah highly underrated and often forgotten about! Class Sync is a life saver :)
Reply
Alex Pattison
Jan 23, 2024
Love how in depth this is! Very helpful. Thank you Kaleb 🙏
Kaleb Jae
Jan 23, 2024
🙏
Kaleb Jae
Jan 23, 2024
Thanks Alex!
Reply
Jon Reese
Sept 30, 2024
Thanks Kaleb! QQ: Why Finsweet here? Why not Relume? On the Relume UI under Preferences, "Relume Style Guide CF V2.1" is marked "Recommended"
Reply
Paul Irwin
May 20, 2024
Hey Kaleb, Just rewatching for a refresher! I notice you recommend using the Finsweet clone in the Relume library for copying components etc In the Relume library itself it recommends the Relume clone - is there any difference if you start with one and then use the other or is there a way to reconcile if you've copied components using 2 different preference's over the course of the project? Moving forward which would be the best to use? Thanks again for all your work - Relume and Finsweet are really amazing products and work so well together!!
Kaleb Jae
May 20, 2024
Hey Paul! Great question. Simple answer, we’ll always recommend starting with the Relume cloneable 💪🏻 If you have x2 different preferences imported, the cleanest thing would be to manually replace the sections with the preferred preference 👌🏻 Btw, totaaaallly understand that it could be super confusing, which is why we’ve just launched Resources where we walk through best practices. More videos uploading soon but hopefully this helps! https://resources.relume.io/resources/getting-started Message anytime in Slack if we can help :)
A
Anonymous
Aug 1, 2024
Thanks Kaleb! :)
Reply
A
Anonymous
Jan 15, 2024
Thank you Kaleb! 🙏
Kaleb Jae
Jan 18, 2024
🥳
Reply
J
Joel W
Jan 15, 2024
Thank you Kaleb! 🙏
Kaleb Jae
Jan 18, 2024
🥳
Reply
Sam Holding
Jan 18, 2024
Thank you - super helpful!
Kaleb Jae
Jan 18, 2024
🥳
Reply
Juan Pablo Toro
Jan 18, 2024
Thank you Kaleb! 🙏
Kaleb Jae
Jan 22, 2024
🥳
Kaleb Jae
Jan 22, 2024
Cheers Juan!
Reply
John Kuehn
Jan 22, 2024
Thank you Kaleb, very helpful, and a great explanation of primitive vs semantic
Kaleb Jae
Jan 22, 2024
🙏
Kaleb Jae
Jan 22, 2024
Glad it was helpful John!
Reply
A
Anonymous
Feb 21, 2024
Thank you Kaleb! 🙏
Kaleb Jae
Feb 21, 2024
🥳
Reply
Mac Adams
Mar 15, 2024
Previously we had to get all wireframes inside webflow, before editing style guide - especially buttons -- is it still that way? (Style Guide Last, Not First?!)
And what about gradients - is there a video on how we can use gradients and the new variables tool/feature?
Kaleb Jae
Mar 15, 2024
Hey Mac! If you install the Relume Chrome Extension and turn on Class Sync you can add components and style in any order you like :) It’s pretty cool! Regarding gradients, you can simply use it as you normally would except you’ll be selecting a primary variable instead of a color swatch. For now that would be my approach :) Good question there. Would have been helpful to include in this video!
And what about gradients - is there a video on how we can use gradients and the new variables tool/feature?
Regarding gradients, you can simply use it as you normally would except you’ll be selecting a primary variable instead of a color swatch. For now that would be my approach :) Good question there. Would have been helpful to include in this video!